<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="dh">
                <div class="imgBox1">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>单耗</p>
                </div>
                <div class="first">
                    <img src="../../assets/NXGL/jide.png" alt="">
                    <ul>
                        <li class="danhao" v-for="(item, index) in list" :key="index">
                            <span>{{ item.name }}</span>
                            <span class="count">{{ item.count }}</span>
                            <span class="danwei">kgce/t</span>
                        </li>
                    </ul>
                </div>
                <div class="flnh">
                    <div class="imgBox2">
                        <img src="../../assets/img/小标题栏.png" class="img" />
                        <p>分类能耗</p>
                    </div>
                    <div class="second">
                        <div class="s_one">
                            <div class="s_l">
                                <p>今日:3122kWh</p>
                                <p>昨日:9400kWh</p>
                            </div>
                            <div class="s_r">
                                <p>
                                    同比:<span class="tongbi">201%</span>
                                    <img src="../../assets/NXGL/图层 905.png" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="s_two">
                            <div class="s_l">
                                <p>今日:134t</p>
                                <p>昨日:114t</p>
                            </div>
                            <div class="s_r">
                                <p>
                                    同比:<span class="tongbi">-15.1%</span>
                                    <img src="../../assets/NXGL/图层 916.png" alt="">
                                </p>
                            </div>
                        </div>
                        <div class="s_three">
                            <div class="s_l">
                                <p>今日:14.3t</p>
                                <p>昨日:14.9t</p>
                            </div>
                            <div class="s_r">
                                <p>
                                    同比:<span class="tongbi">4.2%</span>
                                    <img src="../../assets/NXGL/图层 905.png" alt="">
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nhrl">
                    <div class="imgBox3">
                        <img src="../../assets/img/小标题栏.png" class="img" />
                        <p>能耗日历</p>
                    </div>
                    <div class="data">
                        <span :class="res2 == '电' ? 'active' : ''" @click="res2 = '电'">电</span>
                        <span :class="res2 == '水' ? 'active' : ''" @click="res2 = '水'">水</span>
                        <span :class="res2 == '煤' ? 'active' : ''" @click="res2 = '煤'">煤</span>
                    </div>
                    <div class="calendars">
                        <div class="title">
                            <img src="../../assets/TZCGL/左.png" alt="" @click="getcalendar('prev-month')" />
                            <span>{{ ddd.getFullYear() }}年 {{ ddd.getMonth()+1 }}月</span>
                            <img src="../../assets/TZCGL/右.png" alt="" @click="getcalendar('next-month')" />
                        </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="ghlnhgk">
                <div class="imgBox4">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>各回路（设备）能耗概况</p>
                </div>
                <div class="data">
                    <span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
                    <span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
                    <span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
                </div>
                <div class="tabledata">
                    <div class="table">
                        <el-table :data="devices1" style="width: 100%" :row-class-name="tableRowClassName">
                            <el-table-column prop="date1" label="设备名称" align="center">
                                <template scope="scope">
                                    <p>{{ scope.row.date1 }}</p>
                                    <p class="time">{{ scope.row.date2 }}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date3" label="运行功率" align="center">
                                <template scope="scope">
                                    <span class="count">{{ scope.row.date3 }}</span>
                                    <span class="danwei">kW</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="table">
                        <el-table :data="devices2" style="width: 100%" :row-class-name="tableRowClassName">
                            <el-table-column prop="date1" label="设备名称" align="center">
                                <template scope="scope">
                                    <p>{{ scope.row.date1 }}</p>
                                    <p class="time">{{ scope.row.date2 }}</p>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date2" label="运行功率" align="center">
                                <template scope="scope">
                                    <span class="count">{{ scope.row.date3 }}</span>
                                    <span class="danwei">kW</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="xtnhgk">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>系统能耗概况</p>
                </div>
                <div id="nhzk"></div>
            </div>
            <div class="nhqs">
                <div class="imgBox">
                    <img src="../../assets/img/小标题栏.png" class="img" />
                    <p>能耗趋势</p>
                </div>
                <div class="data">
                    <span :class="res1 == '电' ? 'active' : ''" @click="res1 = '电'">电</span>
                    <span :class="res1 == '水' ? 'active' : ''" @click="res1 = '水'">水</span>
                    <span :class="res1 == '煤' ? 'active' : ''" @click="res1 = '煤'">煤</span>
                </div>
                <div class="biaoti">
                    <div class="first">
                        <span class="bg"></span>
                        <span>计划耗能</span>
                    </div>
                    <div class="second">
                        <span class="bg"></span>
                        <span>小于计划</span>
                    </div>
                    <div class="thrid">
                        <span class="bg"></span>
                        <span>大于计划</span>
                    </div>
                </div>
                <div id="nhqs"></div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: 'ShuinichangNXGL',

    data() {
        return {
            res2: "水",
            ddd: new Date(),
            today: new Date(),
            list: [
                {
                    name: "水泥单位产品综合能耗：",
                    count: "80",
                },
                {
                    name: "水泥大内产品综合电耗：",
                    count: "40",
                },
                {
                    name: "熟料单位产品综合能耗：",
                    count: "100",
                },
                {
                    name: "熟料单位产品综合电耗：",
                    count: "48",
                },
                {
                    name: "熟料单位产品综合煤耗：",
                    count: "94",
                },
            ],
            devices1: [
                {
                    date1: "回转窑",
                    date2: "2022-08-18 00:00:00",
                    date3: "102.00",
                },
                {
                    date1: "熟料收尘",
                    date2: "2022-08-18 00:00:00",
                    date3: "29.00",
                },
                {
                    date1: "篦冷机",
                    date2: "2022-08-18 00:00:00",
                    date3: "45.00",
                },
                {
                    date1: "生料收尘",
                    date2: "2022-08-18 00:00:00",
                    date3: "102.00",
                },
                {
                    date1: "回转窑",
                    date2: "2022-08-18 00:00:00",
                    date3: "29.00",
                }
            ],
            devices2: [
                {
                    date1: "回转窑",
                    date2: "2022-08-18 00:00:00",
                    date3: "102.00",
                },
                {
                    date1: "熟料收尘",
                    date2: "2022-08-18 00:00:00",
                    date3: "29.00",
                },
                {
                    date1: "篦冷机",
                    date2: "2022-08-18 00:00:00",
                    date3: "45.00",
                },
                {
                    date1: "生料收尘",
                    date2: "2022-08-18 00:00:00",
                    date3: "102.00",
                },
                {
                    date1: "回转窑",
                    date2: "2022-08-18 00:00:00",
                    date3: "29.00",
                }
            ],
            res: "日",
            res1: '水',
        };
    },
    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.$nextTick(() => {
            this.getbing();
            this.nhqs();
        })
    },

    methods: {
        //U3D交互的绑定
        sendMessageToCSharp() {
            // window.vuplex.postMessage({
            //     type: "Tog",
            //     message: "能效管理_true",
            // });
            window.vuplex.postMessage("能效管理-能耗");
            this.$router.push('/nxgl');
        },
        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: '回转窑系统',
                value: 427.2
            }, {
                name: '煤磨系统',
                value: 1342.2
            }, {
                name: '生料系统',
                value: 1115
            }, {
                name: '破碎系统',
                value: 237.6
            }];
            var data = [];
            var color = ['#7EFAB7', '#55A9CE', '#53DCF1', '#5378F1','#ffa800', '#ff5b00', '#ff3000']
            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: 60,
                    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) {
                                if (params.name !== "") {
                                    return "{aa|" + params.value + "kWh" + '\n' + '\n' + params.name + "}";
                                } else {
                                    return '';
                                }
                            },
                            rich: {
                                aa: {
                                    fontSize: 24,
                                    color: "#fff",
                                }
                            }
                        },
                        labelLine: {
                            length: 30,
                            length2: 80,
                            show: true,
                            color: '#00ffff'
                        }
                    }
                },
                data: data
            },
            {
            type: "pie",
            radius: ["43%", "45%"],
            center: ["36%", "56%"],
            animation: false,
            hoverAnimation: false,
            data: [
              {
                value: 100,
              },
            ],
            label: {
              show: false,
              // 这里需要进行修改
              // formatter: function (params) {
              //   return params.chartData1.name + "/n" + params.chartData1.value + "kw"
              // }
            },
            labelLine: {
              //label线的长度
              show: true, //数据标签引导线
              showAbove: true,
              length: 40,
              length2: 20,
              lineStyle: { cap: "round" },
            },
            itemStyle: {
              normal: {
                color: "#3BC5EF",
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: "36%",
            animation: false,
            hoverAnimation: false,
            center: ["36%", "56%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    offset: 1,
                    color: "rgba(50,171,241, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(50,171,241, .4)",
                  },
                  {
                    offset: 0,
                    color: "rgba(55,70,130, 0)",
                  },
                ]),
                shadowBlur: 60,
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ];
            let option = {
                // backgroundColor: '#0A2E5D',
                // backgroundColor:"transparent",
                color: color,
                title: {
                    text: '系统\n耗能',
                    top: '47%',
                    textAlign: "center",
                    left: "36.5%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 32,
                        fontWeight: '400',
                        lineHeight:40,
                        align:"center"
                    }
                },
                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',
                    data: [
                        {
                            name: '回转窑系统',
                            value: "427.2"
                        },
                        {
                            name: '煤磨系统',
                            value: "1342.2"
                        },
                        {
                            name: '生料系统',
                            value: "1115"
                        },{
                            name: '破碎系统',
                            value: "237.6"
                        }],
                    formatter: function (name) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        const item = trafficWay.filter((item) => item.name === name)[0];
                        console.log(item);
                        percent = ((item.value / total) * 100).toFixed(2);
                        if (name !== '') {
                            if(name=="回转窑系统"){
                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num1|${percent}%}`;
                            }else if(name=="煤磨系统"){
                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num2|${percent}%}`;
                            }else if(name=="生料系统"){
                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num3|${percent}%}`;
                            }else{
                                return "\t"+"\t"+`{name|${name}}` + "\t" + "\t" + `{num4|${percent}%}`;
                            }

                            // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
                        } else {
                            return '';
                        }
                    },
                    left: 800,
                    bottom: 80,
                    align: 'left',
                    textStyle: {
                        color: "#fff",
                        rich: {
                            name: {
                                fontSize: 24,
                                color: "#fff",
                            },
                            num1: {
                                fontSize: 28,
                                color: color[0],
                            },
                            num2: {
                                fontSize: 28,
                                color: color[1],
                            },
                            num3: {
                                fontSize: 28,
                                color: color[2],
                            },
                            num4: {
                                fontSize: 28,
                                color: color[3],
                            }
                        },
                    },
                    itemGap: 20
                },
                toolbox: {
                    show: false
                },
                series: seriesOption
            }
            let chartDom = document.getElementById("nhzk");
            let myChart = this.$echarts.init(chartDom);
            myChart.setOption(option);
        },
        getcalendar(message) {
            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)
        },
        nhqs() {
            // mock 数据
            const dataArr = {
                xdata: ['7月', '8月', '9月', '10月', '11月', '12月'],
                rateData: [10, 36, 40, 10, 46, 30],
                disinfeced: [32, 34, 48, 10, 38, 32],
                // placeData: [320, 435, 490, 340, 320, 270, 360]
            }
            var colors1 =
            {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                    { offset: 0, color: 'rgba(17, 195, 255, 1)' },
                    { offset: 0.5, color: 'rgba(17, 195, 255, 1)' },
                    { offset: 0.5, color: 'rgba(17, 195, 255, .7)' },
                    { offset: 1, color: 'rgba(17, 195, 255, 1)' }
                ],
            }
            var colors2 = {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                    { offset: 0, color: 'rgba(252, 79, 84, 1)' },
                    { offset: 0.5, color: 'rgba(252, 79, 84, 1)' },
                    { offset: 0.5, color: 'rgba(252, 79, 84, .7)' },
                    { offset: 1, color: 'rgba(252, 79, 84, 1)' }
                ],
            }
            var colors3 = {
                type: 'linear',
                x: 0, x2: 1, y: 0, y2: 0,
                colorStops: [
                    { offset: 0, color: 'rgba(94, 251, 97, 1)' },
                    { offset: 0.5, color: 'rgba(94, 251, 97, 1)' },
                    { offset: 0.5, color: 'rgba(94, 251, 97, .7)' },
                    { offset: 1, color: 'rgba(94, 251, 97, 1)' }
                ],
            }
            // const legend = {
            //     data: [
            //         {
            //             name: '小于计划',
            //             icon: "rect"
            //         },
            //         {
            //             name: '大于计划',
            //             icon: "rect"
            //         }, {
            //             name: '计划耗能',
            //             icon: "rect"
            //         }],
            //     textStyle: {
            //         color: "#fff",
            //         fontSize: "20px",
            //     },
            //     itemWidth: 25,
            //     itemHeight: 15,
            //     itemGap: 15,
            //     // bottom: '5%',
            //     selectedMode: false
            // }
            const grid = { top: '10%', left: '10%', right: '3%', bottom: '15%' }
            // xAxis
            const xAxis = {
                axisTick: { show: true },
                axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
                axisLabel: { textStyle: { fontSize: 20, color: '#fff' }, },
                data: dataArr.xdata
            }

            // yAxis
            const yAxis = [{
                type: "value",
                name: "单位:kWh",
                nameTextStyle:{
                        color:"#fff",
                        fontSize:20,
                    },
                splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
                axisLine: { show: false, lineStyle: { color: "#fff" } },
                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } },
                splitLine:{show:true,lineStyle:{color:"#fff"}}
            },
            {
                // 双y轴，主要用于折线图，所以不需要显示坐标
                type: "value",
                show: false,
                axisLabel: { textStyle: { fontSize: 20, color: '#fff' } }
            }
            ]

            // series
            const series = [
                {
                    z: 2,
                    name: '底部',
                    type: 'pictorialBar',
                    data: [1, 1, 1, 1, 1, 1, 1, 1],
                    symbol: 'diamond',
                    symbolOffset: [0, '50%'],
                    symbolSize: [30, 20],
                    itemStyle: {
                        color: function (params) {
                            console.log(params);
                            // console.log("1234是否进入");
                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
                                return colors3
                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
                                return colors2
                            } else {
                                return colors1
                            }
                        }
                    },
                }, {
                    z: 3,
                    name: '上部1',
                    type: 'pictorialBar',
                    symbolPosition: 'end',
                    data: dataArr.disinfeced,
                    symbol: 'diamond',
                    symbolOffset: [0, '-50%'],
                    symbolSize: [30, 20],
                    itemStyle: {
                        borderColor: 'rgba(17, 195, 255, 1)',
                        borderWidth: 2,

                        // color: 'rgba(17, 195, 255, 1)'
                        color: function (params) {
                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {

                                return "rgba(94,251,97,1)"
                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
                                return "rgba(252, 79, 84, 1)"
                            } else {
                                return "rgba(17, 195, 255, 1)"
                            }
                        },
                    },
                },
                {
                    z: 1,
                    // stack: '总量',
                    type: 'bar',
                    name: '',
                    barWidth: 30,
                    // barGap: '-100%',
                    data: dataArr.disinfeced,
                    itemStyle: {
                        color: function (params) {
                            if (dataArr.rateData[params.dataIndex] < dataArr.disinfeced[params.dataIndex]) {
                                return colors3
                            } else if (dataArr.rateData[params.dataIndex] > dataArr.disinfeced[params.dataIndex]) {
                                return colors2
                            } else {
                                return colors1
                            }
                        },
                    },
                },
                {
                    z: 9,
                    // 双y轴
                    yAxisIndex: 1,
                    name: '计划耗能', type: 'line',
                    symbol: 'circle',
                    symbolSize: [12, 12],
                    color: {
                        type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                        // 0% 处的颜色                           // 100% 处的颜色
                        colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
                        global: false // 缺省为 false
                    },
                    lineStyle: {
                        color: {
                            type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
                            // 0% 处的颜色                           // 100% 处的颜色
                            colorStops: [{ offset: 0, color: '#11C3FF ' }, { offset: 1, color: '#11C3FF' }],
                            global: false // 缺省为 false
                        }
                    },
                    // 修改的是线下区域的颜色
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            // 右/下/左/上
                            0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(17, 195, 255, .5)' },
                            { offset: 1, color: 'transparent' }
                        ])
                    },
                    label: {
                        show: true,
                        textStyle: { fontSize: 20, color: '#fff' }
                    },
                    data: dataArr.rateData
                }]
            //legend
            let option = { xAxis, yAxis, series, grid, }
            this.defineEcharts("nhqs", option);
        },
        // nhqs() {
        //     const offsetX = 24; //bar宽
        //     const offsetY = 8; //倾斜角度
        //     // 绘制左侧面
        //     const CubeLeft = this.$echarts.graphic.extendShape({
        //         shape: {
        //             x: 0,
        //             y: 0,
        //         },
        //         buildPath: function (ctx, shape) {
        //             // 会canvas的应该都能看得懂，shape是从custom传入的
        //             const xAxisPoint = shape.xAxisPoint;
        //             // console.log(shape);
        //             const c0 = [shape.x, shape.y];
        //             const c1 = [shape.x - offsetX, shape.y - offsetY];
        //             const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
        //             const c3 = [xAxisPoint[0], xAxisPoint[1]];
        //             ctx
        //                 .moveTo(c0[0], c0[1])
        //                 .lineTo(c1[0], c1[1])
        //                 .lineTo(c2[0], c2[1])
        //                 .lineTo(c3[0], c3[1])
        //                 .closePath();
        //         },
        //     });
        //     // 绘制右侧面
        //     const CubeRight = this.$echarts.graphic.extendShape({
        //         shape: {
        //             x: 0,
        //             y: 0,
        //         },
        //         buildPath: function (ctx, shape) {
        //             const xAxisPoint = shape.xAxisPoint;
        //             const c1 = [shape.x, shape.y];
        //             const c2 = [xAxisPoint[0], xAxisPoint[1]];
        //             const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
        //             const c4 = [shape.x + offsetX, shape.y - offsetY];
        //             ctx
        //                 .moveTo(c1[0], c1[1])
        //                 .lineTo(c2[0], c2[1])
        //                 .lineTo(c3[0], c3[1])
        //                 .lineTo(c4[0], c4[1])
        //                 .closePath();
        //         },
        //     });
        //     // 绘制顶面
        //     const CubeTop = this.$echarts.graphic.extendShape({
        //         shape: {
        //             x: 0,
        //             y: 0,
        //         },
        //         buildPath: function (ctx, shape) {
        //             const c1 = [shape.x, shape.y];
        //             const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
        //             // const c3 = [shape.x, shape.y - offsetX];
        //             const c3 = [shape.x, shape.y - offsetY * 2];
        //             const c4 = [shape.x - offsetX, shape.y - offsetY];
        //             ctx
        //                 .moveTo(c1[0], c1[1])
        //                 .lineTo(c2[0], c2[1])
        //                 .lineTo(c3[0], c3[1])
        //                 .lineTo(c4[0], c4[1])
        //                 .closePath();
        //         },
        //     });
        //     // 注册三个面图形
        //     this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
        //     this.$echarts.graphic.registerShape("CubeRight", CubeRight);
        //     this.$echarts.graphic.registerShape("CubeTop", CubeTop);
        //     let xAxisData = ["7月", "8月", "9月", "10月", "11月", "12月"];
        //     let seriesData = [
        //         {
        //             name: "",
        //             value: 100,
        //         },
        //         {
        //             name: "",
        //             value: 200,
        //         },
        //         {
        //             name: "",
        //             value: 300,
        //         },
        //         {
        //             name: "",
        //             value: 400,
        //         },
        //         {
        //             name: "",
        //             value: 300,
        //         },
        //         {
        //             name: "",
        //             value: 400,
        //         }];
        //     let zheDate = [99, 180, 320, 400, 300, 420];
        //     for (var i = 0; i < seriesData.length; i++) {
        //         if (seriesData[i].value < zheDate[i]) {
        //             seriesData[i].name = "小于计划"
        //         } else if (seriesData[i].value > zheDate[i]) {
        //             seriesData[i].name = "大于计划"
        //         }
        //     }
        //     //拿到最大值
        //     // const maxValue = Math.max(...seriesData);

        //     let colorArr = [
        //         ["#0A67FF"],
        //         ["#10C6FF", "rgba(60,113,255,1)"],
        //         ["#0774D6", "rgba(17,94,213,1)"],
        //     ];
        //     let option = {
        //         legend: {
        //             data: [
        //                 {
        //                     icon: "rect",
        //                     name: "小于计划",
        //                 },
        //                 {
        //                     icon: "rect",
        //                     name: "大于计划",
        //                 },
        //             ],
        //             textStyle: {
        //                 color: "#fff",
        //                 fontSize: "20px",
        //             },
        //         },
        //         tooltip: {
        //             trigger: "axis",
        //             axisPointer: {
        //                 type: "shadow",
        //             },
        //             formatter: function (params, ticket, callback) {
        //                 const item = params[1];
        //                 return item.name + " : " + item.value;
        //             },
        //         },
        //         grid: {
        //             // 让图表占满容器
        //             left: "5%",
        //             right: "5%",
        //             bottom: "0%",
        //             containLabel: true,
        //         },
        //         xAxis: {
        //             type: "category",
        //             data: xAxisData,
        //             axisLine: {
        //                 show: true,
        //             },
        //             axisTick: {
        //                 show: false,
        //             },
        //             axisLabel: {
        //                 fontSize: 20,
        //                 color: "#fff",
        //                 margin: 15,
        //             },
        //         },
        //         yAxis: {
        //             type: "value",
        //             name: "单位:t",
        //             nameTextStyle: {
        //                 color: "#fff",
        //                 fontSize: 20,
        //                 padding: 10,
        //             },
        //             splitLine: {
        //                 show: true,
        //                 lineStyle: {},
        //             },
        //             axisTick: {
        //                 show: false,
        //             },
        //             axisLabel: {
        //                 show: true,
        //                 textStyle: {
        //                     color: "#fff",
        //                     fontSize: 20,
        //                 },
        //             },
        //             // boundaryGap: ['20%', '20%'],
        //         },
        //         series: [
        //             {
        //                 type: "custom",
        //                 name: "小于计划",
        //                 renderItem: (params, api) => {
        //                     const location = api.coord([api.value(0), api.value(1)]);
        //                     return {
        //                         type: "group",
        //                         children: [
        //                             {
        //                                 type: "CubeLeft",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[1][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[1][1],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                             {
        //                                 type: "CubeRight",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[2][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[2][1],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                             {
        //                                 type: "CubeTop",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[0][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[0][0],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                         ],
        //                     };
        //                 },
        //                 data: seriesData,
        //             },
        //             {
        //                 type: "bar",
        //                 label: {
        //                     normal: {
        //                         show: false,
        //                         position: "top",
        //                         // formatter: (e) => {
        //                         //     return e.value === maxValue ? e.value : "";
        //                         // },
        //                         fontSize: 20,
        //                         color: "#11C3FF",
        //                         offset: [0, -15],
        //                     },
        //                 },
        //                 itemStyle: {
        //                     color: "transparent",
        //                 },
        //                 tooltip: {},
        //                 data: seriesData,
        //             },
        //             {
        //                 type: "custom",
        //                 name: "大于计划",
        //                 renderItem: (params, api) => {
        //                     const location = api.coord([api.value(0), api.value(1)]);
        //                     return {
        //                         type: "group",
        //                         children: [
        //                             {
        //                                 type: "CubeLeft",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[1][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[1][1],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                             {
        //                                 type: "CubeRight",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[2][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[2][1],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                             {
        //                                 type: "CubeTop",
        //                                 shape: {
        //                                     api,
        //                                     xValue: api.value(0),
        //                                     yValue: api.value(1),
        //                                     x: location[0],
        //                                     y: location[1],
        //                                     xAxisPoint: api.coord([api.value(0), 0]),
        //                                 },
        //                                 style: {
        //                                     fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //                                         {
        //                                             offset: 0,
        //                                             color: colorArr[0][0],
        //                                         },
        //                                         {
        //                                             offset: 1,
        //                                             color: colorArr[0][0],
        //                                         },
        //                                     ]),
        //                                 },
        //                             },
        //                         ],
        //                     };
        //                 },
        //                 data: seriesData,
        //             },
        //             {
        //                 type: "bar",
        //                 label: {
        //                     normal: {
        //                         show: false,
        //                         position: "top",
        //                         // formatter: (e) => {
        //                         //     return e.value === maxValue ? e.value : "";
        //                         // },
        //                         fontSize: 20,
        //                         color: "#11C3FF",
        //                         offset: [0, -15],
        //                     },
        //                 },
        //                 itemStyle: {
        //                     color: "transparent",
        //                 },
        //                 tooltip: {},
        //                 data: seriesData,
        //             },
        //         ],
        //     };
        //     this.defineEcharts("nhqs", option);
        // },
    }
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    padding-top: 400px;
    box-sizing: border-box;
    display: flex;
    background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
    background-color: transparent;
    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;
    }

    .dh {
        position: relative;
        margin-top: 56px;

        .imgBox1 {
            height: 93px;
            width: 1156px;
            margin-bottom: 88px;

            p {
                position: absolute;
                color: #fff;
                top: 20px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        .first {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            img {
                width: 320px;
            }

            ul {
                width: 555px;
                list-style: none;

                .danhao {
                    padding-left: 20px;
                    color: #fff;
                    width: 555px;
                    height: 60px;
                    line-height: 60px;
                    margin-bottom: 18px;
                    opacity: 1;
                    background: url(../../assets/NXGL/组\ 277.png);
                    background-size: cover;
                    font-size: 30px;

                    .count {
                        width: 60px;
                        height: 60px;
                        color: #00C0FA;
                        font-size: 40px;
                        padding-right: 10px;
                    }
                }
            }

        }

        // 左边第二个    
        .flnh {
            position: relative;
            margin-top: 56px;

            .imgBox2 {
                height: 93px;
                width: 1156px;
                margin-bottom: 78px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }

            .second {
                .s_one {
                    width: 100%;
                    height: 175px;
                    background: url(../../assets/NXGL/组\ 278.png);
                    background-size: cover;
                    margin-top: 80px;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .s_l {
                        padding-top: 10px;
                        margin-left: 200px;
                        width: 299px;
                        height: 120px;
                        font-size: 40px;
                        font-family: MicrosoftYaHei;
                        color: #FFFFFF;
                    }

                    .s_r {
                        width: 300px;
                        height: 120px;
                        line-height: 120px;
                        font-size: 40px;

                        p {
                            width: 300px;
                            height: 54px;
                            // line-height: 54px;
                            color: #FFFFFF;
                        }

                        span.tongbi {
                            font-size: 40px;
                            width: 133px;
                            height: 54px;
                            // line-height: 54px;
                            font-weight: 700;
                            font-family: YouSheBiaoTiHei;
                            color: #58FD64;
                            margin-left: 8px;
                            margin-right: 8px;
                        }
                    }
                }

                .s_two {
                    width: 100%;
                    height: 175px;
                    margin-top: 60px;
                    background: url(../../assets/NXGL/组\ 279.png);
                    background-size: cover;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .s_l {
                        padding-top: 10px;
                        margin-left: 200px;
                        width: 299px;
                        height: 120px;
                        font-size: 40px;
                        font-family: MicrosoftYaHei;
                        color: #FFFFFF;
                    }

                    .s_r {
                        width: 300px;
                        height: 120px;
                        line-height: 120px;
                        font-size: 40px;

                        p {
                            width: 300px;
                            height: 54px;
                            // line-height: 54px;
                            color: #FFFFFF;
                        }

                        span.tongbi {
                            font-size: 40px;
                            width: 133px;
                            height: 54px;
                            // line-height: 54px;
                            font-weight: 700;
                            font-family: YouSheBiaoTiHei;
                            color: #DA1015;
                            margin-left: 8px;
                            margin-right: 8px;
                        }
                    }
                }

                .s_three {
                    width: 100%;
                    height: 175px;
                    margin-top: 60px;
                    background: url(../../assets/NXGL/组\ 280.png);
                    background-size: cover;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .s_l {
                        padding-top: 10px;
                        margin-left: 200px;
                        width: 299px;
                        height: 120px;
                        font-size: 40px;
                        font-family: MicrosoftYaHei;
                        color: #FFFFFF;
                    }

                    .s_r {
                        width: 300px;
                        height: 120px;
                        line-height: 120px;
                        font-size: 40px;

                        p {
                            width: 300px;
                            height: 54px;
                            // line-height: 54px;
                            color: #FFFFFF;
                        }

                        span.tongbi {
                            font-size: 40px;
                            width: 133px;
                            height: 54px;
                            // line-height: 54px;
                            font-weight: 700;
                            font-family: YouSheBiaoTiHei;
                            color: #58FD64;
                            margin-left: 8px;
                            margin-right: 8px;
                        }
                    }
                }
            }
        }

        .nhrl {
            position: relative;
            margin-top: 56px;

            .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%);
                }
            }

            .imgBox3 {
                height: 93px;
                width: 1156px;
                margin-bottom: 88px;

                p {
                    position: absolute;
                    color: #fff;
                    top: 20px;
                    left: 50px;
                    font-size: 30px;
                    font-family: "MicrosoftYaHei";
                }
            }
        }
    }
}

.right {
    width: 1237px;
    height: 2500px;
    margin-right: 61px;
    background-image: url("../../assets/img/侧边.png");
    padding-left: 59px;
    padding-right: 45px;
    box-sizing: border-box;

    .ghlnhgk {
        position: relative;
        margin-top: 128px;

        .imgBox4 {
            height: 93px;
            width: 1156px;

            p {
                position: absolute;
                color: #fff;
                top: 20px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        .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%);
            }
        }

        /deep/ .tabledata {
            margin-top: 60px;
            display: flex;

            .table {
                width: 50%;
                margin-top: 50px;

                .time {
                    font-size: 20px;
                }

                .count {
                    color: #05F0FF;
                    font-size: 28px;
                }

                //表体颜色
                .el-table tr {
                    background: #16253b;
                    color: #fff;
                    font-size: 30px;
                    height: 40px;

                    .cell {
                        line-height: 40px;
                    }
                }

                // 去掉eltable的hover效果
                .el-table tbody tr:hover>td {
                    background-color: #0b679e !important;
                }

                //修改表头颜色
                .has-gutter {
                    background-color: #1969a8;

                    th {
                        background-color: #1969a8;
                    }
                }

                //奇偶行颜色
                .el-table .success-row {
                    background: #184167;
                }

                //去掉边框白线
                .el-table__row>td {
                    border: none;
                }

                .el-table::before {
                    height: 0px;
                }

                /* 移除表头的下边框 */
                .el-table__header th {
                    border-bottom: none;
                }
            }
        }
    }

    .xtnhgk {
        position: relative;
        margin-top: 60px;

        .imgBox {
            height: 93px;
            width: 1156px;

            p {
                position: absolute;
                color: #fff;
                top: 20px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        #nhzk {
            width: 100%;
            height: 400px;
        }
    }

    .nhqs {
        position: relative;
        margin-top: 60px;

        .imgBox {
            height: 93px;
            width: 1156px;
            margin-bottom: 150px;

            p {
                position: absolute;
                color: #fff;
                top: 20px;
                left: 50px;
                font-size: 30px;
                font-family: "MicrosoftYaHei";
            }
        }

        .biaoti {
            width: 600px;
            position: absolute;
            left: 300px;
            display: flex;
            justify-content: space-around;
            top: 200px;

            .first {
                width: 160px;
                color: #fff;
                font-size: 24px;
                display: flex;
                line-height: 32px;

                .bg {
                    width: 56px;
                    height: 23px;
                    background: #11C3FF;
                    opacity: 1;
                    display: block;
                }

                span:nth-child(2) {
                    margin-left: 5px;
                    height: 32px;
                    line-height: 24px;
                    display: block;
                }
            }

            .second {
                width: 160px;
                color: #fff;
                font-size: 24px;
                display: flex;
                line-height: 32px;

                .bg {
                    width: 56px;
                    height: 23px;
                    background: #5EFB61;
                    opacity: 1;
                    display: block;
                }

                span:nth-child(2) {
                    margin-left: 5px;
                    height: 32px;
                    line-height: 24px;
                    display: block;
                }
            }

            .thrid {
                width: 160px;
                color: #fff;
                font-size: 24px;
                display: flex;
                line-height: 32px;

                .bg {
                    width: 56px;
                    height: 23px;
                    background: #FC4F54;
                    opacity: 1;
                    display: block;
                }

                span:nth-child(2) {
                    margin-left: 5px;
                    height: 32px;
                    line-height: 24px;
                    display: block;
                }
            }
        }

        .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%);
            }
        }

        #nhqs {
            width: 100%;
            height: 600px;
        }
    }
}

/deep/ .calendars {
    .title {
        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%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #0E86D9;
    }

    .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;
        background: linear-gradient(NaNdeg, #35403F 0%, #0E86D9 100%);
    }

    /* 上月和下月*/


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