From ad671679c1b3144f3277450bc7123bc66c491e0d Mon Sep 17 00:00:00 2001
From: unknown <1535852499@qq.com>
Date: Fri, 8 Dec 2023 15:32:48 +0800
Subject: [PATCH] zyh

---
 .../src/views/Zhou/TZCGLSL_20231208151323.vue | 1300 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151407.vue | 1301 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151412.vue | 1301 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151532.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151600.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151639.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151722.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151735.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151737.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151751.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151818.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151834.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151851.vue | 1305 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151929.vue | 1309 +++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151939.vue | 1309 +++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208151940.vue | 1309 +++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152046.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152442.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152706.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152740.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152745.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152822.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152832.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152835.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152840.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152856.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152902.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152904.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152907.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208152911.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153000.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153009.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153014.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153018.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153021.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153023.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153028.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153031.vue | 1307 ++++++++++++++++
 .../src/views/Zhou/TZCGLSL_20231208153040.vue | 1309 +++++++++++++++++
 src/views/Zhou/TZCGLSL.vue                    |  247 ++--
 40 files changed, 51070 insertions(+), 119 deletions(-)
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151323.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151407.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151412.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151532.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151600.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151639.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151722.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151735.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151737.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151751.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151818.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151834.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151851.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151929.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151939.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208151940.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152046.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152442.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152706.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152740.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152745.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152822.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152832.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152835.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152840.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152856.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152902.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152904.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152907.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208152911.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153000.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153009.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153014.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153018.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153021.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153023.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153028.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153031.vue
 create mode 100644 .history/src/views/Zhou/TZCGLSL_20231208153040.vue

diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151323.vue b/.history/src/views/Zhou/TZCGLSL_20231208151323.vue
new file mode 100644
index 0000000..4eed4d5
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151323.vue
@@ -0,0 +1,1300 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151407.vue b/.history/src/views/Zhou/TZCGLSL_20231208151407.vue
new file mode 100644
index 0000000..ec88c97
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151407.vue
@@ -0,0 +1,1301 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            option3: {
+                tooltip: {
+                    trigger: "item",
+                    triggerOn: "mousemove",
+                },
+                grid: {
+                    top: "25px",
+                    left: "10px",
+                    right: "10px",
+                    bottom: "6%",
+                    containLabel: true,
+                },
+                series: {
+                    type: "sankey",
+                    layout: "none",
+                    top: "2%",
+                    bottom: "5%",
+                    left: "5%",
+                    right: "13%",
+                    lineStyle: {
+                        opacity: 0.3,
+                        color: "gradient",
+                        curveness: 0.7,
+                    },
+                    label: {
+                        color: "#fff",
+                        fontSize: 16,
+                        formatter: function (params) {
+                            return params.name + params.value
+                        },
+                        rich: {
+                            white: {
+                                fontSize: 20,
+                                padding: [10, 0, 0, 0],
+                            },
+                        },
+                    },
+                    nodeGap: 10,
+                    layoutIterations: 1,
+                    emphasis: {
+                        // focus: "adjacency",
+                    },
+                    data: [
+                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+                    ],
+                    links: [
+                        // L1→L3	 4509
+                        { source: "总量", target: "柴油", value: 1200 },
+                        { source: "总量", target: "电", value: 1200 },
+                        { source: "总量", target: "原材料", value: 1200 },
+                        { source: "总量", target: "煤", value: 1200 },
+                        // L1→L2→L3	 2404
+                        { source: "电", target: "1", value: 300 },
+                        { source: "电", target: "2", value: 300 },
+                        { source: "电", target: "3", value: 300 },
+                        { source: "煤", target: "11", value: 300 },
+                        { source: "煤", target: "22", value: 300 },
+                        { source: "煤", target: "33", value: 300 },
+                        { source: "柴油", target: "111", value: 300 },
+                        { source: "柴油", target: "222", value: 300 },
+                        { source: "柴油", target: "333", value: 300 },
+                        { source: "原材料", target: "1111", value: 300 },
+                        { source: "原材料", target: "2222", value: 300 },
+                        { source: "原材料", target: "3333", value: 300 },
+                    ],
+                },
+            },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151412.vue b/.history/src/views/Zhou/TZCGLSL_20231208151412.vue
new file mode 100644
index 0000000..07f5acb
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151412.vue
@@ -0,0 +1,1301 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151532.vue b/.history/src/views/Zhou/TZCGLSL_20231208151532.vue
new file mode 100644
index 0000000..a56098c
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151532.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151600.vue b/.history/src/views/Zhou/TZCGLSL_20231208151600.vue
new file mode 100644
index 0000000..113aa86
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151600.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","12.20","","12.21","","12.22","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151639.vue b/.history/src/views/Zhou/TZCGLSL_20231208151639.vue
new file mode 100644
index 0000000..9d3c4df
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151639.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151722.vue b/.history/src/views/Zhou/TZCGLSL_20231208151722.vue
new file mode 100644
index 0000000..9d3c4df
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151722.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151735.vue b/.history/src/views/Zhou/TZCGLSL_20231208151735.vue
new file mode 100644
index 0000000..0ba3e6b
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151735.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151737.vue b/.history/src/views/Zhou/TZCGLSL_20231208151737.vue
new file mode 100644
index 0000000..2e0699e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151737.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151751.vue b/.history/src/views/Zhou/TZCGLSL_20231208151751.vue
new file mode 100644
index 0000000..2b52a40
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151751.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151818.vue b/.history/src/views/Zhou/TZCGLSL_20231208151818.vue
new file mode 100644
index 0000000..bf06a58
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151818.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151834.vue b/.history/src/views/Zhou/TZCGLSL_20231208151834.vue
new file mode 100644
index 0000000..4593ea7
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151834.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151851.vue b/.history/src/views/Zhou/TZCGLSL_20231208151851.vue
new file mode 100644
index 0000000..4593ea7
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151851.vue
@@ -0,0 +1,1305 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151929.vue b/.history/src/views/Zhou/TZCGLSL_20231208151929.vue
new file mode 100644
index 0000000..f11b6cd
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151929.vue
@@ -0,0 +1,1309 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151939.vue b/.history/src/views/Zhou/TZCGLSL_20231208151939.vue
new file mode 100644
index 0000000..f25ef82
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151939.vue
@@ -0,0 +1,1309 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208151940.vue b/.history/src/views/Zhou/TZCGLSL_20231208151940.vue
new file mode 100644
index 0000000..f25ef82
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208151940.vue
@@ -0,0 +1,1309 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152046.vue b/.history/src/views/Zhou/TZCGLSL_20231208152046.vue
new file mode 100644
index 0000000..d493119
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152046.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152442.vue b/.history/src/views/Zhou/TZCGLSL_20231208152442.vue
new file mode 100644
index 0000000..03cd9ab
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152442.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152706.vue b/.history/src/views/Zhou/TZCGLSL_20231208152706.vue
new file mode 100644
index 0000000..a770101
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152706.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                tooltip: {
+                    trigger: 'axis',
+                },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152740.vue b/.history/src/views/Zhou/TZCGLSL_20231208152740.vue
new file mode 100644
index 0000000..40f70f0
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152740.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152745.vue b/.history/src/views/Zhou/TZCGLSL_20231208152745.vue
new file mode 100644
index 0000000..d9cb993
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152745.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 20,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#3FFF5A",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152822.vue b/.history/src/views/Zhou/TZCGLSL_20231208152822.vue
new file mode 100644
index 0000000..d1ab4db
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152822.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#3FFF5A",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152832.vue b/.history/src/views/Zhou/TZCGLSL_20231208152832.vue
new file mode 100644
index 0000000..8fa383e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152832.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#3FFF5A",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152835.vue b/.history/src/views/Zhou/TZCGLSL_20231208152835.vue
new file mode 100644
index 0000000..88dc3b1
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152835.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#3FFF5A",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152840.vue b/.history/src/views/Zhou/TZCGLSL_20231208152840.vue
new file mode 100644
index 0000000..dc9caf6
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152840.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152856.vue b/.history/src/views/Zhou/TZCGLSL_20231208152856.vue
new file mode 100644
index 0000000..8ca583a
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152856.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152902.vue b/.history/src/views/Zhou/TZCGLSL_20231208152902.vue
new file mode 100644
index 0000000..2a9ff37
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152902.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152904.vue b/.history/src/views/Zhou/TZCGLSL_20231208152904.vue
new file mode 100644
index 0000000..2708311
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152904.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152907.vue b/.history/src/views/Zhou/TZCGLSL_20231208152907.vue
new file mode 100644
index 0000000..a4bb185
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152907.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#43FFF4",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208152911.vue b/.history/src/views/Zhou/TZCGLSL_20231208152911.vue
new file mode 100644
index 0000000..97e89f1
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208152911.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153000.vue b/.history/src/views/Zhou/TZCGLSL_20231208153000.vue
new file mode 100644
index 0000000..6ac7706
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153000.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153009.vue b/.history/src/views/Zhou/TZCGLSL_20231208153009.vue
new file mode 100644
index 0000000..34cac2d
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153009.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        // itemStyle: {
+                        //     color: "#43FFF4",
+                        // },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153014.vue b/.history/src/views/Zhou/TZCGLSL_20231208153014.vue
new file mode 100644
index 0000000..4e02964
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153014.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#43FFF4",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153018.vue b/.history/src/views/Zhou/TZCGLSL_20231208153018.vue
new file mode 100644
index 0000000..4cc90f0
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153018.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        // symbol: "circle",
+                        // symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153021.vue b/.history/src/views/Zhou/TZCGLSL_20231208153021.vue
new file mode 100644
index 0000000..ffb6435
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153021.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 20,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153023.vue b/.history/src/views/Zhou/TZCGLSL_20231208153023.vue
new file mode 100644
index 0000000..649cf7b
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153023.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        // itemStyle: {
+                        //     color: "#3FFF5A",
+                        // },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153028.vue b/.history/src/views/Zhou/TZCGLSL_20231208153028.vue
new file mode 100644
index 0000000..a3d06e7
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153028.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#3FFF5A",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153031.vue b/.history/src/views/Zhou/TZCGLSL_20231208153031.vue
new file mode 100644
index 0000000..24b74aa
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153031.vue
@@ -0,0 +1,1307 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/.history/src/views/Zhou/TZCGLSL_20231208153040.vue b/.history/src/views/Zhou/TZCGLSL_20231208153040.vue
new file mode 100644
index 0000000..1f32a2e
--- /dev/null
+++ b/.history/src/views/Zhou/TZCGLSL_20231208153040.vue
@@ -0,0 +1,1309 @@
+<template>
+    <div class="box">
+        <div class="a">
+            <img src="../../assets/img/可调负荷/可调图标--未选中.png" alt="" @click="sendMessageToCSharp" />
+        </div>
+        <div class="left">
+            <img src="../../assets/img/标题/碳资产管理-熟料生产核算边界.png" class="title" />
+            <div class="slbjzl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>熟料边界总览</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                    <div class="data">
+                        <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
+                        <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
+                    </div>
+                </div>
+                <div id="slbjzl">
+                    <div class="first_one">
+                        <div class="one">
+                            <p>2641.76</p>
+                            <p>熟料工段排放量</p>
+                        </div>
+                        <div class="two">
+                            <p>0</p>
+                            <p>化石燃料燃烧排放</p>
+                        </div>
+                        <div class="three">
+                            <p>2641.76</p>
+                            <p>消耗电力产生的排放</p>
+                        </div>
+                        <div class="four">
+                            <p>257.1</p>
+                            <p>过程排放核算</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="tlt">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳流图</p>
+                </div>
+                <div class="top">
+                    <p>单位：tCO2</p>
+                </div>
+                <div id="tlt">
+          <div class="zong">
+            <p>总量</p>
+            <p class="count">2641.76</p>
+          </div>
+          <div class="mei">
+            <p>煤</p>
+            <p class="count">28.51</p>
+          </div>
+          <div class="dian">
+            <p>电</p>
+            <p class="count">871</p>
+          </div>
+          <div class="chaiyou">
+            <p>柴油</p>
+            <p class="count">329</p>
+          </div>
+          <div class="ycl">
+            <p>原材料</p>
+            <p class="count">255</p>
+          </div>
+          <div class="m_one">1号生产线<span class="count">747.24</span></div>
+          <div class="m_two">2号生产线<span class="count">128.53</span></div>
+          <div class="m_three">3号生产线<span class="count">114.19</span></div>
+          <div class="d_one">1号生产线<span class="count">747.24</span></div>
+          <div class="d_two">2号生产线<span class="count">128.53</span></div>
+          <div class="d_three">3号生产线<span class="count">114.19</span></div>
+          <div class="chai_one">1号生产线<span class="count">747.24</span></div>
+          <div class="chai_two">2号生产线<span class="count">128.53</span></div>
+          <div class="chai_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+          <div class="ycl_one">1号生产线<span class="count">747.24</span></div>
+          <div class="ycl_two">2号生产线<span class="count">128.53</span></div>
+          <div class="ycl_three">
+            3号生产线<span class="count">114.19</span>
+          </div>
+        </div>
+            </div>
+            <div class="tpfl">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放量</p>
+                </div>
+                <div id="tpfl">
+                    <div class="data">
+                        <img src="../../assets/TZCGL/edit.png" alt="" class="img">
+                    </div>
+                    <div class="calendars">
+                        <div class="title_rl">
+                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
+                            <!-- <span @click="getcalendar('prev-month')">上</span> -->
+                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
+                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
+                            <!-- <span @click="getcalendar('next-month')">下</span> -->
+                        </div>
+                        <el-calendar v-model="ddd" ref="getcalendar">
+                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+                            <template slot="dateCell" slot-scope="{date, data}">
+                                <p :class="data.isSelected ? 'is-selected' : ''">
+                                    <span>{{ data.day.split('-')[2] }}</span>
+                                    <!-- {{ date }} -->
+                                <p style="color: #31D3D1" v-if="data.type == 'current-month'" class="lan">{{ "12.45" }}</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'prev-month'" class="lan">0</p>
+                                <p style="color: #31D3D1" v-if="data.type == 'next-month'" class="lan">0</p>
+                                <!-- {{  data.type}} -->
+                                </p>
+                            </template>
+                        </el-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="tpfqd">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>碳排放强度</p>
+                </div>
+                <div class="chartBox">
+                    <div id="tpfqd">
+                    </div>
+                </div>
+            </div>
+            <div class="sstpf">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>实时碳排放</p>
+                </div>
+                <div class="chartBox">
+                    <div id="sstpf"></div>
+                </div>
+            </div>
+            <div class="pfzb">
+                <div class="imgBox">
+                    <img src="../../assets/img/小标题栏.png" class="img" />
+                    <p>排放占比</p>
+                </div>
+                <div id="pfzb">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import "../../assets/CSS/tzcglsl.css";
+export default {
+    data() {
+        return {
+            ddd: new Date(),
+            res: "年",
+            tableData: [
+                {
+                    date1: "水泥单位产品综合能耗",
+                    date2: "80kgce/t",
+                    date3: "84kgce/t",
+                    date4: "5%",
+                },
+                {
+                    date1: "水泥大内产品综合电耗",
+                    date2: "40kWh/t",
+                    date3: "53kWh/t",
+                    date4: "32.5%",
+                },
+                {
+                    date1: "熟料单位产品综合能耗",
+                    date2: "100kgce/t",
+                    date3: "114kgce/t",
+                    date4: "14%",
+                },
+                {
+                    date1: "熟料单位产品综合电耗",
+                    date2: "48kWh/t",
+                    date3: "55kWh/t",
+                    date4: "14.58%",
+                },
+                {
+                    date1: "熟料单位产品综合煤耗",
+                    date2: "94kgce/",
+                    date3: "108kgce/",
+                    date4: "14.89%",
+                },
+            ],
+            devices: [
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "102.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "篦冷机",
+                    date2: true,
+                    date3: "45.00",
+                },
+                {
+                    date1: "生料收尘",
+                    date2: false,
+                    date3: "102.00",
+                },
+                {
+                    date1: "回转窑",
+                    date2: true,
+                    date3: "29.00",
+                },
+                {
+                    date1: "熟料收尘",
+                    date2: false,
+                    date3: "45.00",
+                }
+            ],
+            option1: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            option2: {
+                // title: {
+                //     text: "单位:tCO2",
+
+                // },
+                // tooltip: {
+                //     trigger: 'axis',
+                // },
+                grid: {
+                    left: "5%",
+                    right: "4%",
+                    bottom: "5%",
+                    // containLabel: true
+                },
+                // toolbox: {
+                //     feature: {
+                //         saveAsImage: {}
+                //     }
+                // },
+                xAxis: {
+                    type: "category",
+                    // boundaryGap: false,
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
+                    axisLabel: {
+                        show: true,
+                        interval: 0,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
+                },
+                yAxis: {
+                    type: "value",
+                    // boundaryGap: true,
+                    name: "单位:tCO2",
+                    nameTextStyle: {
+                        color: "#fff",
+                        fontSize: 20,
+                        padding: 10,
+                    },
+                    data: ["0", "10", "20", "30", "40"],
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    }
+                },
+                legend: {
+                    data: [
+                        {
+                            icon: "rect",
+                            name: "1号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "2号线",
+                        },
+                        {
+                            icon: "rect",
+                            name: "3号线",
+                        }
+                    ],
+                    x: "center",
+                    y: "top",
+                    itemGap: 200,
+
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: "28px",
+                    },
+                    fontSize: "28px",
+                },
+                series: [
+                    {
+                        name: "1号线",
+                        type: "line",
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
+                        lineStyle: {
+                            width: 5,
+                            color: "#09E83E",
+                        },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
+                    },
+                    {
+                        name: "2号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
+                        lineStyle: {
+                            width: 5,
+                            color: "#00B0FF",
+                        },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
+                    },
+                    {
+                        name: "3号线",
+                        type: "line",
+                        // stack: 'Total',
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
+                        lineStyle: {
+                            width: 5,
+                            color: "#18FCFF",
+                        },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
+                    },
+                ],
+            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
+        };
+    },
+    methods: {
+        //U3D交互的绑定
+        sendMessageToCSharp() {
+            // window.vuplex.postMessage({
+            //     type: "Tog",
+            //     message: "碳资产管理_true",
+            // });
+            window.vuplex.postMessage("碳资产管理-熟料生产核算边界");
+            this.$router.push('/tzcgl');
+        },
+        defineEcharts(dom, option) {
+            var chartDom = document.getElementById(dom);
+            var myChart = this.$echarts.init(chartDom);
+            option && myChart.setOption(option);
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "success-row";
+            }
+            return "";
+        },
+        getbing() {
+            var trafficWay = [{
+                name: '1号生产线',
+                value: 73.02
+            }, {
+                name: '2号生产线',
+                value: 12.6
+            }, {
+                name: '3号生产线',
+                value: 171.49
+            }];
+            var data = [];
+            var color = ['#7EFAB7', '#55A9CE', '#53DCF1']
+            for (var i = 0; i < trafficWay.length; i++) {
+                data.push({
+                    value: trafficWay[i].value,
+                    name: trafficWay[i].name,
+                    itemStyle: {
+                        normal: {
+                            borderWidth: 5,
+                            shadowBlur: 20,
+                            borderColor: color[i],
+                            shadowColor: color[i]
+                        }
+                    }
+                }, {
+                    value: 6,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            },
+                            color: 'rgba(0, 0, 0, 0)',
+                            borderColor: 'rgba(0, 0, 0, 0)',
+                            borderWidth: 0
+                        }
+                    }
+                });
+            }
+            var seriesOption = [{
+                name: '',
+                type: 'pie',
+                clockWise: false,
+                radius: [115, 119],
+                center:["36%","56%"],
+                hoverAnimation: false,
+                itemStyle: {
+                    normal: {
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            color: '#ddd',
+                            formatter: function (params) {
+                                var percent = 0;
+                                var total = 0;
+                                for (var k = 0; k < trafficWay.length; k++) {
+                                    total += trafficWay[k].value;
+                                }
+                                percent = ((params.value / total) * 100).toFixed(0);
+                                if (params.name !== '') {
+                                    if(params.name=="1号生产线"){
+                                    return "{colors1|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else if(params.name == "2号生产线"){
+                                    return "{colors2|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }else{
+                                    return "{colors3|" + percent + "%" + "}" + '\n' + '\n' + "{names|" + params.name + "}";
+                                }
+                            } else {
+                                    return '';
+                                }
+                            },
+                            rich: {
+                                colors1: {
+                                    color: color[0],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors2: {
+                                    color: color[2],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                colors3: {
+                                    color: color[1],
+                                    fontSize: 40,
+                                    align: "left",
+                                },
+                                names: {
+                                    color: "#fff",
+                                    fontSize: 30,
+                                }
+                            },
+                        },
+                        labelLine: {
+                            length: 30,
+                            length2: 60,
+                            show: true,
+                            color: '#00ffff'
+                        }
+                    }
+                },
+                data: data
+            }];
+            let option = {
+                // backgroundColor: '#0A2E5D',
+                color: color,
+                title: {
+                    text: '257.1t',
+                    top: '52%',
+                    textAlign: "center",
+                    left: "36%",
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 32,
+                        fontWeight: '400'
+                    }
+                },
+                graphic: {
+                    elements: [{
+                        type: "image",
+                        z: 3,
+                        style: {
+                            // image: "transparent",
+                            width: 178,
+                            height: 178
+                        },
+                        left: 'center',
+                        top: 'center',
+                        position: [100, 100]
+                    }]
+                },
+                tooltip: {
+                    show: false
+                },
+                legend: {
+                    itemWidth:16,
+                    itemHeight:16,
+                    icon: "rect",
+                    orient: '',
+                    x: 'right',
+                    // selectedMode: 'single',
+                    data: [
+                        {
+                            name: '1号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '2号生产线',
+                            value: "13.68"
+                        },
+                        {
+                            name: '3号生产线',
+                            value: "13.68"
+                        }],
+                    left: 760,
+                    bottom: 120,
+                    align: 'left',
+                    formatter: ((name) => {
+                        const item = trafficWay.filter((item) => item.name === name)[0];
+                        if(name=="1号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num1|${item.value}}\t\t{name|tCO2}`;
+                        }else if(name=="2号生产线"){
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num2|${item.value}}\t\t{name|tCO2}`;
+                        }else{
+                            return "\t\t\t\t"+`{name|${name}}`+"\t\t\t\t" + `{num3|${item.value}}\t\t{name|tCO2}`;
+                        }
+                    }),
+                    textStyle: {
+                        color: "#fff",
+                        rich: {
+                            name: {
+                                fontSize: 28,
+                                // color: "#fff",
+                            },
+                            num1: {
+                                fontSize: 32,
+                                color: color[0],
+                            },
+                            num2: {
+                                fontSize: 32,
+                                color: color[2],
+                            },
+                            num3: {
+                                fontSize: 32,
+                                color: color[1],
+                            }
+                        },
+                    },
+                    itemGap: 20
+                },
+                toolbox: {
+                    show: false
+                },
+                series: seriesOption
+            }
+            let chartDom = document.getElementById("pfzb");
+            let myChart = this.$echarts.init(chartDom);
+            myChart.setOption(option);
+        },
+        getcalendar() {
+            if(message=="prev-month"){
+            this.$refs.getcalendar.selectDate("prev-month")
+            }else if(message=="next-month"){
+                this.$refs.getcalendar.selectDate("next-month")
+            }else{
+            this.$refs.getcalendar.selectDate("today")
+            }
+            console.log(this.$refs.getcalendar)
+        }
+    },
+    created() {
+    // if (window.vuplex) {
+    //   addMessageListener();
+    // } else {
+    //   window.addEventListener("vuplexready", addEventListener);
+    // } function addEventListener() {
+    //   window.vuplex.addEventListener("message", function (event) {
+    //     let json = event.data;
+    //     console.log("JSON received" + json);
+    //   })
+    // }
+  },
+    mounted() {
+        this.defineEcharts("tpfqd", this.option1);
+        this.defineEcharts("sstpf", this.option2);
+       // this.defineEcharts("tlt", this.option3);
+        this.$nextTick(() => {
+            this.getbing();
+        })
+        // this.defineEcharts("nysl", this.option3);
+        // this.defineEcharts("nhfx", this.option4);
+    },
+};
+</script>
+<style scoped lang="less">
+.box {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+    display: flex;
+    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
+    padding-top: 400px;
+    justify-content: space-between;
+    position: relative;
+
+    .a {
+        position: absolute;
+        width: 1300px;
+        z-index: 2;
+        top: 420px;
+        right: 480px;
+        z-index: 100;
+
+        img {
+            margin-right: 102px;
+            pointer-events: all;
+            cursor: pointer;
+        }
+    }
+
+    .left {
+        width: 1237px;
+        height: 2500px;
+        margin-left: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .title {
+            margin-top: 15px;
+            margin-left: 60px;
+        }
+
+        .slbjzl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .top {
+                display: flex;
+                justify-content: space-between;
+                margin-top: 30px;
+
+                p {
+                    font-size: 24px;
+                    color: #fff;
+                }
+
+                .data {
+                    // position: absolute;
+                    font-size: 20px;
+                    font-family: "DOUYU";
+                    color: #ffffff;
+                    line-height: 18px;
+                    display: flex;
+                    // right: 0;
+                    // top: 120px;
+                    z-index: 1;
+
+                    span {
+                        width: 122px;
+                        height: 38px;
+                        margin: 10px;
+                        display: block;
+                        line-height: 38px;
+                        text-align: center;
+                        cursor: pointer;
+                    }
+
+                    .active {
+                        background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(152, 207, 230, 0.3) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+                    }
+                }
+            }
+
+            #slbjzl {
+                margin-top: 20px;
+                width: 1151px;
+                height: 342px;
+                // background: #37433F;
+                background: url(../../assets/TZCGL/背景框4.png);
+                background-size: cover;
+                opacity: 0.6;
+                padding-top: 27px;
+                box-sizing: border-box;
+
+                .first_one {
+                    display: flex;
+                    margin-top: 52px;
+                    justify-content: space-around;
+
+                    .one {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .two {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+
+                    .three {
+                        width: 190px;
+                        height: 190px;
+                        color: #3CFF1C;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 120px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1185.png);
+                    }
+
+                    .four {
+                        width: 190px;
+                        height: 190px;
+                        color: #29D7EA;
+                        text-align: center;
+
+                        p:nth-child(1) {
+                            margin-top: 60px;
+                            height: 30px;
+                            line-height: 30px;
+                        }
+
+                        p:nth-child(2) {
+                            width: 100px;
+                            margin-top: 10px;
+                            font-size: 22px;
+                            margin-left: 42px;
+                            text-align: center;
+                        }
+
+                        font-size: 28px;
+                        background: url(../../assets/TZCGL/组\ 1187.png);
+                    }
+                }
+            }
+        }
+
+        .tlt {
+            position: relative;
+            margin-top: 50px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+            .top{
+        position: absolute;
+        top: 102px;
+        left: 20px;
+        color: #fff;
+        font-size: 20px;
+        font-family: MicrosoftYaHei;
+      }
+            #tlt {
+                width: 1155px;
+                height: 720px;
+                margin-top: 50px;
+                background: url(../../assets/liutu/碳2.png);
+                background-size: cover;
+                position: relative;
+        font-size: 24px;
+        color: #ffffff;
+        font-family: MicrosoftYaHei;
+            }
+        }
+
+        .tpfl {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #tpfl {
+                width: 1155px;
+                height: 500px;
+                margin-top: 50px;
+
+                .data {
+                    position: absolute;
+                    width: 123px;
+                    text-align: center;
+height: 38px;
+background: linear-gradient(to right,
+                                rgba(33, 76, 124, 0.3) 20%,
+                                rgba(37, 138, 210, 1) 100%,
+                                rgba(33, 76, 124, 0.3) 20%);
+opacity: 1;
+                    right: 0;
+                    top: 120px;
+                    z-index: 1;
+
+                    .img {
+                        width: 29px;
+height: 31px;
+opacity: 1
+                    }
+                }
+            }
+        }
+    }
+
+    .right {
+        width: 1237px;
+        height: 2500px;
+        margin-right: 61px;
+        background-image: url("../../assets/img/侧边.png");
+        padding-left: 59px;
+        padding-right: 45px;
+        box-sizing: border-box;
+
+        .tpfqd {
+            position: relative;
+            margin-top: 130px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            .chartBox {
+                margin-top: 50px;
+
+                #tpfqd {
+                    width: 1156px;
+                    height: 600px;
+                    font-size: 20px;
+                    color: #fff;
+                    position: relative;
+                }
+            }
+        }
+
+        .sstpf {
+            position: relative;
+            margin-top: 56px;
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #sstpf {
+                width: 1155px;
+                height: 600px;
+                margin-top: 50px;
+            }
+        }
+
+        .pfzb {
+            position: relative;
+            margin-top: 56px;
+
+
+            .imgBox {
+                height: 93px;
+                width: 1156px;
+
+                p {
+                    position: absolute;
+                    color: #fff;
+                    top: 20px;
+                    left: 50px;
+                    font-size: 30px;
+                    font-family: "MicrosoftYaHei";
+                }
+            }
+
+            #pfzb {
+                width: 1155px;
+                height: 400px;
+                margin-top: 50px;
+            }
+        }
+    }
+}
+
+/deep/ .calendars {
+    .title_rl {
+        margin: 0 auto;
+        text-align: center;
+        width: 300px;
+        height: 40px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        font-size: 30px;
+        cursor: pointer;
+    }
+
+    p.lan {
+        font-size: 27px;
+        color: #31D3D1 !important;
+    }
+
+    .el-calendar {
+        background: transparent;
+    }
+
+    .el-calendar__header {
+        display: none !important;
+    }
+
+    .el-calendar__body {
+        padding: 0px;
+        font-size: 27px;
+        background: transparent;
+    }
+
+    .el-calendar-table .el-calendar-day {
+        height: 50px !important;
+    }
+
+    .el-calendar__body .el-calendar-table__row .current {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #0E86D9;
+        margin: 20px;
+    }
+
+    .el-calendar__body .el-calendar-table__row .prev,
+    .el-calendar__body .el-calendar-table__row .next {
+        width: 151px;
+        height: 90px;
+        text-align: center;
+        background: linear-gradient(NaNdeg, #35403F 0%, #445050 100%);
+        border-radius: 4px 4px 4px 4px;
+        opacity: 1;
+        border: 1px solid #445050;
+    }
+
+    .is-selected {
+        color: #fff;
+    }
+
+    /* 本月的样式 */
+    .current,
+    .prev,
+    .next {
+        color: #fff;
+        margin: 5px;
+        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%) !important;
+    }
+
+    /* 上月和下月*/
+
+
+    .el-calendar-table .el-calendar-day:hover {
+        // background: linear-gradient(#22702B 0%, #57FF5B 100%);
+        background: transparent !important;
+        height: 113px; //要去掉2px边框
+    }
+
+    .el-calendar-table__row {
+        .current {
+            width: 195px;
+            height: 115px;
+        }
+    }
+
+    .el-calendar-table td:hover {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+
+    .el-calendar-table td.is-selected {
+        background: linear-gradient(#22702B 0%, #57FF5B 100%) !important;
+    }
+}
+</style>
+  
\ No newline at end of file
diff --git a/src/views/Zhou/TZCGLSL.vue b/src/views/Zhou/TZCGLSL.vue
index 4eed4d5..1f32a2e 100644
--- a/src/views/Zhou/TZCGLSL.vue
+++ b/src/views/Zhou/TZCGLSL.vue
@@ -243,7 +243,7 @@ export default {
                 xAxis: {
                     type: "category",
                     // boundaryGap: false,
-                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
                     axisLabel: {
                         show: true,
                         interval: 0,
@@ -252,6 +252,10 @@ export default {
                             fontSize: 20,
                         },
                     },
+                    axisTick: {
+            show:false,
+            interval: true, // 设置刻度点连续显示
+          },
                 },
                 yAxis: {
                     type: "value",
@@ -299,46 +303,46 @@ export default {
                     {
                         name: "1号线",
                         type: "line",
-                        // symbol: "circle",
-                        // symbolSize: 20,
+                        symbol: "circle",
+                        symbolSize: 1,
                         data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
                         lineStyle: {
                             width: 5,
                             color: "#09E83E",
                         },
-                        // itemStyle: {
-                        //     color: "#3FFF5A",
-                        // },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
                     },
                     {
                         name: "2号线",
                         type: "line",
                         // stack: 'Total',
-                        // symbol: "circle",
-                        // symbolSize: 20,
-                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
                         lineStyle: {
                             width: 5,
                             color: "#00B0FF",
                         },
-                        // itemStyle: {
-                        //     color: "#43FFF4",
-                        // },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
                     },
                     {
                         name: "3号线",
                         type: "line",
                         // stack: 'Total',
-                        // symbol: "circle",
-                        // symbolSize: 20,
-                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
                         lineStyle: {
                             width: 5,
                             color: "#18FCFF",
                         },
-                        // itemStyle: {
-                        //     color: "#43FFF4",
-                        // },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
                     },
                 ],
             },
@@ -364,7 +368,7 @@ export default {
                 xAxis: {
                     type: "category",
                     // boundaryGap: false,
-                    data: ["12.20", "12.21", "12.22", "12.23"],
+                    data: ["","","12.20","","","12.21","","","12.22","","", "12.23"],
                     axisLabel: {
                         show: true,
                         interval: 0,
@@ -373,6 +377,10 @@ export default {
                             fontSize: 20,
                         },
                     },
+                    axisTick: {
+            // show:false,
+            interval: true, // 设置刻度点连续显示
+          },
                 },
                 yAxis: {
                     type: "value",
@@ -421,132 +429,133 @@ export default {
                     {
                         name: "1号线",
                         type: "line",
-                        // symbol: "circle",
-                        // symbolSize: 20,
+                        symbol: "circle",
+                        symbolSize: 1,
                         data: [5, 18, 31, 18, 21, 20, 30, 20, 23, 19, 30, 20, 28, 8],
                         lineStyle: {
                             width: 5,
                             color: "#09E83E",
                         },
-                        // itemStyle: {
-                        //     color: "#3FFF5A",
-                        // },
+                        itemStyle: {
+                            color: "#09E83E",
+                        },
                     },
                     {
                         name: "2号线",
                         type: "line",
                         // stack: 'Total',
-                        // symbol: "circle",
-                        // symbolSize: 20,
-                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20],
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [18, 8, 11, 5, 10, 11, 10, 12, 4, 7, 13, 20,12,23,15],
                         lineStyle: {
                             width: 5,
                             color: "#00B0FF",
                         },
-                        // itemStyle: {
-                        //     color: "#43FFF4",
-                        // },
+                        itemStyle: {
+                            color: "#00B0FF",
+                        },
                     },
                     {
                         name: "3号线",
                         type: "line",
                         // stack: 'Total',
-                        // symbol: "circle",
-                        // symbolSize: 20,
-                        data: [21, 30, 36, 28, 38, 28, 25, 21],
+                        symbol: "circle",
+                        symbolSize: 1,
+                        data: [21, 30, 36, 28, 38, 28, 25, 21,23,15,26,32,24,12],
                         lineStyle: {
                             width: 5,
                             color: "#18FCFF",
                         },
-                        // itemStyle: {
-                        //     color: "#43FFF4",
-                        // },
+                        itemStyle: {
+                            color: "#18FCFF",
+                        },
                     },
                 ],
             },
-            option3: {
-                tooltip: {
-                    trigger: "item",
-                    triggerOn: "mousemove",
-                },
-                grid: {
-                    top: "25px",
-                    left: "10px",
-                    right: "10px",
-                    bottom: "6%",
-                    containLabel: true,
-                },
-                series: {
-                    type: "sankey",
-                    layout: "none",
-                    top: "2%",
-                    bottom: "5%",
-                    left: "5%",
-                    right: "13%",
-                    lineStyle: {
-                        opacity: 0.3,
-                        color: "gradient",
-                        curveness: 0.7,
-                    },
-                    label: {
-                        color: "#fff",
-                        fontSize: 16,
-                        formatter: function (params) {
-                            return params.name + params.value
-                        },
-                        rich: {
-                            white: {
-                                fontSize: 20,
-                                padding: [10, 0, 0, 0],
-                            },
-                        },
-                    },
-                    nodeGap: 10,
-                    layoutIterations: 1,
-                    emphasis: {
-                        // focus: "adjacency",
-                    },
-                    data: [
-                        { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
-                        { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
-                        { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                        { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
-                    ],
-                    links: [
-                        // L1→L3	 4509
-                        { source: "总量", target: "柴油", value: 1200 },
-                        { source: "总量", target: "电", value: 1200 },
-                        { source: "总量", target: "原材料", value: 1200 },
-                        { source: "总量", target: "煤", value: 1200 },
-                        // L1→L2→L3	 2404
-                        { source: "电", target: "1", value: 300 },
-                        { source: "电", target: "2", value: 300 },
-                        { source: "电", target: "3", value: 300 },
-                        { source: "煤", target: "11", value: 300 },
-                        { source: "煤", target: "22", value: 300 },
-                        { source: "煤", target: "33", value: 300 },
-                        { source: "柴油", target: "111", value: 300 },
-                        { source: "柴油", target: "222", value: 300 },
-                        { source: "柴油", target: "333", value: 300 },
-                        { source: "原材料", target: "1111", value: 300 },
-                        { source: "原材料", target: "2222", value: 300 },
-                        { source: "原材料", target: "3333", value: 300 },
-                    ],
-                },
-            },
+            //桑基图。目前不需要
+            // option3: {
+            //     tooltip: {
+            //         trigger: "item",
+            //         triggerOn: "mousemove",
+            //     },
+            //     grid: {
+            //         top: "25px",
+            //         left: "10px",
+            //         right: "10px",
+            //         bottom: "6%",
+            //         containLabel: true,
+            //     },
+            //     series: {
+            //         type: "sankey",
+            //         layout: "none",
+            //         top: "2%",
+            //         bottom: "5%",
+            //         left: "5%",
+            //         right: "13%",
+            //         lineStyle: {
+            //             opacity: 0.3,
+            //             color: "gradient",
+            //             curveness: 0.7,
+            //         },
+            //         label: {
+            //             color: "#fff",
+            //             fontSize: 16,
+            //             formatter: function (params) {
+            //                 return params.name + params.value
+            //             },
+            //             rich: {
+            //                 white: {
+            //                     fontSize: 20,
+            //                     padding: [10, 0, 0, 0],
+            //                 },
+            //             },
+            //         },
+            //         nodeGap: 10,
+            //         layoutIterations: 1,
+            //         emphasis: {
+            //             // focus: "adjacency",
+            //         },
+            //         data: [
+            //             { name: "总量", value: "2641.76", itemStyle: { color: "#5FE3D9" }, depth: 0 },
+            //             { name: "原材料", value: "461.71", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "电", value: "871", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "柴油", value: "290.76", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "煤", value: "28.51", itemStyle: { color: "#55A9CE" }, depth: 1 },
+            //             { name: "1号生产线", value: "28.51", id: "1", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "11", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "22", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "33", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "1号生产线", value: "28.51", id: "1111", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "2号生产线", value: "28.51", id: "2222", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //             { name: "3号生产线", value: "28.51", id: "3333", itemStyle: { color: "#52DBF1" }, depth: 2 },
+            //         ],
+            //         links: [
+            //             // L1→L3	 4509
+            //             { source: "总量", target: "柴油", value: 1200 },
+            //             { source: "总量", target: "电", value: 1200 },
+            //             { source: "总量", target: "原材料", value: 1200 },
+            //             { source: "总量", target: "煤", value: 1200 },
+            //             // L1→L2→L3	 2404
+            //             { source: "电", target: "1", value: 300 },
+            //             { source: "电", target: "2", value: 300 },
+            //             { source: "电", target: "3", value: 300 },
+            //             { source: "煤", target: "11", value: 300 },
+            //             { source: "煤", target: "22", value: 300 },
+            //             { source: "煤", target: "33", value: 300 },
+            //             { source: "柴油", target: "111", value: 300 },
+            //             { source: "柴油", target: "222", value: 300 },
+            //             { source: "柴油", target: "333", value: 300 },
+            //             { source: "原材料", target: "1111", value: 300 },
+            //             { source: "原材料", target: "2222", value: 300 },
+            //             { source: "原材料", target: "3333", value: 300 },
+            //         ],
+            //     },
+            // },
         };
     },
     methods: {