cesium_three/src/views/cesiumComponents/windView.vue

<template>
    <div class="windView">
        <!-- <aside class="sidebar-left-top">
            <div class="stat-block-lefttop" @click="backStations">
                <p class="label">返回</p>
            </div>
        </aside> -->
        <!-- Left Sidebar -->
        <aside class="sidebar-left panel">
            <div class="stat-block">
                <p class="label">总装机容量：</p>
                <p class="value">2541<span style="font-size: 18px; font-weight: 400; color: #6c757d; margin-left: 4px;">MW</span></p>
                <!-- <div class="progress-bar"><div class="progress-bar-inner" style="width: 100%;"></div></div> -->
            </div>
            <div class="stat-block" style="display: flex;justify-content: space-between;">
                <p><span class="labels">风电 </span><span class="values">1245<span style="font-size: 14px; font-weight: 400; color: #6c757d; margin-left: 4px;">MW</span></span></p>
                <p><span class="labels">光伏 </span><span class="values">1296<span style="font-size: 14px; font-weight: 400; color: #6c757d; margin-left: 4px;">MW</span></span></p>
            </div>
            <div class="stat-block" style="margin-bottom: 0;">
                <p class="label">安全天数：</p>
                <p class="value">1258天</p>
            </div>
            
        </aside>
        <aside class="sidebar-left2 panel" v-if="showWindStatus">
            <div v-if="showWeather">
                <span class="labels">覆盖模式 </span>
                <div class="stat-block">
                    <span class="covercheck">
                        <el-check-tag v-for="(it, index) in coverArr" :key="index" type="primary"
                        :disabled="it.disabled"
                        :checked="it.check" @change="coverOnChange(it)">{{it.value}}</el-check-tag>
                    </span>
                </div>
            </div>
            <div>
                <span class="labels" style="">风机状态类型 </span>
                <div class="stat-block" style="display: flex">
                    <div class="windStatus">
                        <img :src="bw" style="width:60px;height:60px;">
                        <p class="values windVal">并网</p>
                    </div>
                    <div class="windStatus">
                        <img :src="dj" style="width:60px;height:60px;">
                        <p class="values windVal">待机</p>
                    </div>
                    <div class="windStatus">
                        <img :src="gz" style="width:60px;height:60px;">
                        <p class="values windVal">故障</p>
                    </div>
                    <div class="windStatus">
                        <img :src="jx" style="width:60px;height:60px;">
                        <p class="values windVal">检修</p>
                    </div>
                    <div class="windStatus">
                        <img :src="xd" style="width:60px;height:60px;">
                        <p class="values windVal">限电</p>
                    </div>
                    <div class="windStatus">
                        <img :src="lx" style="width:60px;height:60px;">
                        <p class="values windVal">离线</p>
                    </div>
                    <div class="windStatus">
                        <img :src="sl" style="width:60px;height:60px;">
                        <p class="values windVal">受累</p>
                    </div>
                </div>
            </div>
        </aside>
        <!-- Right Sidebar -->
        <aside class="sidebar-right panel">
            <div class="info-section">
                <h3>风场信息</h3>
                <div class="info-item">
                    <span class="label">场站名称</span><span class="value">某某风场</span>
                </div>
                <div class="info-item">
                    <span class="label">场站类型</span><span class="value">风场</span>
                </div>
                <div class="info-item">
                    <span class="label">安全运行天数(天)</span><span class="value">27</span>
                </div>
                <div class="info-item">
                    <span class="label">接入台数</span><span class="value">29</span>
                </div>
                <div class="info-item">
                    <span class="label">装机容量(MW)</span><span class="value">1245</span>
                </div>
                <div class="info-item">
                    <span class="label">经纬度</span><span class="value">106.2341, 37.2343</span>
                </div>
                <div class="info-item">
                    <span class="label">并网时间</span><span class="value">2025-08-28</span>
                </div>
                <div class="info-item">
                    <span class="label">电量详情</span>
                    <span class="value" @click="showDetail" 
                    style="color: #4b55ae;cursor:pointer">{{showWindDetail ? '关闭详情' : '查看详情'}}</span>
                </div>
            </div>
            <!-- 实时负荷 -->
            <div class="info-section">
                <h3 >实时负荷</h3>
                <PowerReviewHome
                :data="powerDataHome"
                :id="wpIds"
                :type="activeTab"
                @chartClick="showPowerChart"
                />
            </div>
            <!-- 清洁能源公司总装机容量 -->
            <div class="energy-system-content clearfix">
                <div class="title">
                    <span class="title-name">清洁能源公司</span>
                    <span class="title-all-title">总装机容量 :</span>
                    <span class="title-all-content">{{
                        Number(StationinformationData?.cblpoint?.qjny_zzjrl) || 0
                    }}</span>
                    <span class="title-all-unit">MW</span>
                </div>
                <div style="display: flex">
                    <div
                    class="left-content float-left"
                    :class="activeTab == -1 ? 'piggy-bank' : ''"
                    >
                        <div class="img-num clearfix">
                            <div class="img float-left">
                                <img src="@/assets/windimgs/fc_b_1.png" alt="" />
                            </div>
                            <div class="num float-left">
                            <span>风电场数量</span> <br />
                            <span>{{ StationinformationData?.cblpoint?.qjny_fcts }}</span>
                            <span>个</span>
                            </div>
                        </div>
                        <div class="capacity">
                            <div class="item">
                            <el-row align="middle">
                                <el-col :span="8"><span>装机容量</span></el-col>
                                <el-col :span="9"
                                ><span>{{
                                    StationinformationData?.cblpoint?.qjny_fd_zjrl
                                }}</span></el-col
                                >
                                <el-col :span="7"><span>MW</span></el-col>
                            </el-row>
                            </div>
                        </div>
                    </div>
                    <div
                    class="right-content float-left"
                    :class="activeTab == -2 ? 'piggy-bank' : ''"
                    >
                    <div class="img-num clearfix">
                        <div class="img float-left">
                            <img src="@/assets/windimgs/gf_b_1.png" alt="" />
                        </div>
                        <div class="num float-left">
                        <span>光伏电站数量</span> <br />
                        <span>{{ StationinformationData?.cblpoint?.qjny_gfts }}</span>
                        <span>个</span>
                        </div>
                    </div>
                    <div class="capacity">
                        <div class="item">
                        <el-row>
                            <el-col :span="8"><span>装机容量</span></el-col>
                            <el-col :span="9"
                            ><span>{{
                                StationinformationData?.cblpoint?.qjny_gf_zjrl
                            }}</span></el-col
                            >
                            <el-col :span="7"><span>MW</span></el-col>
                        </el-row>
                        </div>
                    </div>
                    </div>
                </div>
                
            </div>
            <!-- 系统接入情况 -->
            <div class="energy-system-content clearfix">
                <div class="title">
                    <span class="title-name">系统接入情况</span>
                    <span class="title-all-title">总装机容量 :</span>
                    <span class="title-all-content">{{
                        Number(StationinformationData?.cblpoint?.jr_zzjrl) || 0
                    }}</span>
                    <span class="title-all-unit">MW</span>
                </div>
                <div style="display: flex">
                    <div
                        class="left-content float-left"
                        :class="activeTab == -1 ? 'piggy-bank' : ''"
                        >
                        <div class="img-num clearfix">
                            <div class="img float-left">
                                <img src="@/assets/windimgs/fc_b_1.png" alt="" />
                            </div>
                            <div class="num float-left">
                                <span>风电场数量</span> <br />
                                <span>{{ StationinformationData?.cblpoint?.jr_fcts }}</span>
                                <span>个</span>
                            </div>
                        </div>
                        <div class="capacity">
                            <div class="item">
                            <el-row>
                                <el-col :span="8"><span>装机容量</span></el-col>
                                <el-col :span="9"
                                ><span>{{
                                    StationinformationData?.cblpoint?.jr_fd_zjrl
                                }}</span></el-col
                                >
                                <el-col :span="7"><span>MW</span></el-col>
                            </el-row>
                            </div>
                            <div class="item">
                            <el-row>
                                <el-col :span="8"><span>风机台数</span></el-col>
                                <el-col :span="9"
                                ><span>{{
                                    StationinformationData?.cblpoint?.jr_fj_ts
                                }}</span></el-col
                                >
                                <el-col :span="7"><span>台</span></el-col>
                            </el-row>
                            </div>
                        </div>
                    </div>
                    <div
                    class="right-content float-left"
                    :class="activeTab == -1 ? 'piggy-bank' : ''"
                    >
                    <div class="img-num clearfix">
                        <div class="img float-left">
                            <img src="@/assets/windimgs/gf_b_1.png" alt="" />
                        </div>
                        <div class="num float-left">
                            <span>光伏电站数量</span> <br />
                            <span>{{ StationinformationData?.cblpoint?.jr_gfts }}</span>
                            <span>个</span>
                        </div>
                    </div>
                    <div class="capacity">
                        <div class="item">
                        <el-row>
                            <el-col :span="8"><span>装机容量</span></el-col>
                            <el-col :span="9"
                            ><span>{{
                                StationinformationData?.cblpoint?.jr_gf_zjrl || 0
                            }}</span></el-col
                            >
                            <el-col :span="7"><span>MW</span></el-col>
                        </el-row>
                        </div>
                        <div class="item">
                        <el-row>
                            <el-col :span="8"><span>集中式</span></el-col>
                            <el-col :span="9"
                            ><span>{{
                                StationinformationData?.cblpoint?.jr_gf_jzts || 0
                            }}</span></el-col
                            >
                            <el-col :span="7"><span>台</span></el-col>
                        </el-row>
                        </div>
                        <div class="item">
                        <el-row>
                            <el-col :span="8"><span>组串式</span></el-col>
                            <el-col :span="9"
                            ><span>{{
                                StationinformationData?.cblpoint?.jr_gf_zcts || 0
                            }}</span></el-col
                            >
                            <el-col :span="7"><span>台</span></el-col>
                        </el-row>
                        </div>
                    </div>
                    </div>
                </div>
                
            </div>
            <!-- 节能减排 -->
            <!-- <div class="model-bg">
                <div class="titles">
                <div class="name">节能减排</div>
                <div class="unit">(单位: 万吨)</div>
                </div>
                <div class="save">
                <div class="save-item">
                    <div
                    class="jnjp-icon svg-icon svg-icon-green"
                    style="width:20px,height:20px"
                    >
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M565.49844 517.552322c0-0.348009-0.063274-0.66438-0.063274-1.012389-4.998671 42.172336-23.601322 83.079186-56.187598 115.475639l-0.253097 0.253097c-77.099762 76.372107-202.034912 76.34047-279.0714-0.126549l0 0c-77.099762-76.498656-77.099762-200.547966 0.031637-277.046622-77.131399 76.498656-115.665462 176.788457-115.665462 277.046622 0 50.366361 9.744246 100.732722 29.2011 148.093552 40.653752 20.311058 86.622548 31.478975 135.248865 30.751321 160.811691-2.467699 289.258566-133.825192 286.75923-293.434671z" fill="#4b55ae" p-id="2660"></path><path d="M788.318967 355.095499l0 0c-15.407298-15.280749-31.795347-28.97964-48.942689-41.191584-31.637161-22.588933-65.742021-40.527204-101.365465-52.707511-31.225878-8.795131-60.711713-25.309729-85.325424-49.733618-19.456854-19.298668-33.978311-41.666141-43.596008-65.488924-18.887385-46.728087-18.887385-99.214138-0.031637-145.942225-16.103315 8.731857-31.289153 19.741589-44.924769 33.250657-59.034943 58.560386-72.702197 144.929836-41.34977 216.588006 9.491148 21.703093 23.031853 42.077425 40.811938 59.889146-0.031637 0.063274-0.063274 0.094911-0.094911 0.126549l46.126981 45.81061c3.796459 3.796459 7.24491 7.751105 10.661723 11.800661-0.348009-0.569469-0.66438-1.138938-1.012389-1.67677 53.561714 56.345784 86.907282 131.9586 88.204406 215.512343 2.752433 177.452838-139.994439 323.521612-318.839312 326.242407-22.462385 0.348009-44.418574-1.613495-65.64711-5.631415 2.309513 2.404424 4.555751 4.90376 6.960175 7.24491 77.099762 76.56193 178.117218 114.811258 279.166311 114.811258s202.129824-38.249328 279.197949-114.747984c50.872555-50.461272 84.819229-111.299533 102.156394-175.617882 8.921679-33.187382 13.509068-67.292242 13.509068-101.428739 0-100.289801-38.5657-200.547966-115.665462-277.046622z" fill="#4b55ae" p-id="2661"></path>
                        </svg>
                    </div>
                    <div class="save-value">
                    {{
                        Number(Number(StationinformationData?.qt?.jym)).toFixed(2)
                    }}
                    </div>
                    <div class="save-name">煤</div>
                </div>
                <div class="save-item">
                    <div class="jnjp-icon svg-icon svg-icon-green">
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M512 1024a358.4 358.4 0 0 1-358.4-358.4c0-131.9424 119.4496-353.792 358.4-665.6 238.9504 311.808 358.4 533.6576 358.4 665.6a358.4 358.4 0 0 1-358.4 358.4z m-281.6-358.4A281.6 281.6 0 0 0 512 947.2a25.6 25.6 0 1 0 0-51.2A230.4 230.4 0 0 1 281.6 665.6a25.6 25.6 0 1 0-51.2 0z" fill="#4b55ae" p-id="8243"></path>
                        </svg>
                    </div>
                    <div class="save-value">
                    {{
                        Number(Number(StationinformationData?.qt?.jys)).toFixed(2)
                    }}
                    </div>
                    <div class="save-name">水</div>
                </div>
                <div class="save-item">
                    <div class="kind">
                    <div class=" svg-icon svg-icon-green co2">
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M707.52 692.48a124.16 124.16 0 0 1 2.88-28.16 104 104 0 0 1 9.28-24.96 133.76 133.76 0 0 1 15.68-23.04 238.72 238.72 0 0 1 22.08-23.04l18.56-17.28c4.48-3.776 8.672-7.968 12.48-12.48 2.944-3.488 5.408-7.36 7.36-11.52a43.52 43.52 0 0 0 3.2-12.48c0.32-5.12 0.32-10.24 0-15.36a22.72 22.72 0 0 0-22.4-28.16 20.8 20.8 0 0 0-21.44 13.12 45.44 45.44 0 0 0-3.52 14.08v16.96h-44.16v-7.68a65.92 65.92 0 0 1 16.96-48.64 72.96 72.96 0 0 1 53.44-16.96 71.68 71.68 0 0 1 51.2 16c11.712 12.256 17.728 28.864 16.64 45.76a101.76 101.76 0 0 1-1.92 20.16 77.12 77.12 0 0 1-6.08 17.92 84.48 84.48 0 0 1-10.88 16.96 160 160 0 0 1-16.32 16.64l-25.6 23.68a96 96 0 0 0-16 17.92 52.48 52.48 0 0 0-7.36 15.36h84.48v35.2h-139.52 0.96z m-197.12-120c0.64 14.24 2.976 28.32 7.04 41.92 2.56 9.312 7.904 17.6 15.36 23.68a50.56 50.56 0 0 0 52.8 0c7.456-6.08 12.8-14.368 15.36-23.68 4.032-13.632 6.4-27.68 7.04-41.92 1.28-17.28 1.92-38.592 1.92-64 0-25.376-0.64-46.72-1.92-64a178.24 178.24 0 0 0-7.04-41.92 46.72 46.72 0 0 0-15.36-23.68 50.56 50.56 0 0 0-52.8 0c-7.456 6.144-12.8 14.4-15.36 23.68a177.28 177.28 0 0 0-7.04 41.92c-1.28 17.088-1.92 38.4-1.92 64s0.64 46.944 1.92 64z m-71.68-139.2a169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 161.92 161.92 0 0 1 132.16 0 96 96 0 0 1 37.76 39.04 169.28 169.28 0 0 1 16.96 60.16 768 768 0 0 1 0 153.28 168.96 168.96 0 0 1-16.96 59.84 89.92 89.92 0 0 1-37.76 38.4 170.56 170.56 0 0 1-132.16 0 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0-153.28z m-124.48-40.96a35.52 35.52 0 0 0-34.56-18.24 34.56 34.56 0 0 0-22.72 7.36 49.28 49.28 0 0 0-14.08 24 205.44 205.44 0 0 0-7.04 43.52c-1.28 17.92-1.92 39.904-1.92 65.92a634.88 634.88 0 0 0 2.88 67.2c1.056 13.568 3.936 26.944 8.64 39.68 2.624 7.808 7.808 14.464 14.72 18.88 6.4 3.36 13.568 5.024 20.8 4.8 6.208 0.128 12.416-0.96 18.24-3.2a32 32 0 0 0 14.72-13.44 86.72 86.72 0 0 0 9.6-28.16 257.92 257.92 0 0 0 3.52-48h73.6a329.28 329.28 0 0 1-4.48 56.32 128 128 0 0 1-17.28 46.72 85.12 85.12 0 0 1-35.2 32 133.76 133.76 0 0 1-59.2 11.2 139.2 139.2 0 0 1-65.92-13.44 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0-153.28 169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 132.8 132.8 0 0 1 65.92-14.08 128 128 0 0 1 62.08 12.8c14.016 7.392 25.728 18.464 33.92 32 7.488 13.12 12.288 27.584 14.08 42.56 1.824 14.24 2.784 28.544 2.88 42.88h-73.6a132.8 132.8 0 0 0-9.6-58.56z" fill="#4b55ae" p-id="9468"></path>
                        </svg>
                    </div>
                    </div>
                    <div class="save-value">
                    {{
                        Number(Number(StationinformationData?.qt?.co2)).toFixed(2)
                    }}
                    </div>
                    <div class="save-name">二氧化碳</div>
                </div>
                <div class="save-item">
                    <div class="kind">
                    <div class=" svg-icon svg-icon-green so2">
                        <svg height="16px" viewBox="0 0 1024 1024"><path d="M703.904 692.48c0-9.472 1.056-18.88 3.2-28.16a101.44 101.44 0 0 1 9.28-24.96 134.4 134.4 0 0 1 15.68-23.04 244.8 244.8 0 0 1 22.08-23.04l18.56-17.28a102.4 102.4 0 0 0 12.16-12.48c2.848-3.52 5.216-7.36 7.04-11.52a42.56 42.56 0 0 0 3.52-12.48c0.32-5.12 0.32-10.24 0-15.36a22.72 22.72 0 0 0-22.4-28.16 20.8 20.8 0 0 0-21.44 13.12 45.44 45.44 0 0 0-3.52 14.08v16.96h-44.16v-7.68a65.92 65.92 0 0 1 16.96-48.64 72.96 72.96 0 0 1 53.44-16.96 71.68 71.68 0 0 1 51.2 16 60.8 60.8 0 0 1 16.64 45.76 101.76 101.76 0 0 1-1.92 20.16 76.16 76.16 0 0 1-6.08 17.92 84.48 84.48 0 0 1-10.88 16.96 163.52 163.52 0 0 1-16.32 16.64l-25.6 23.68a96 96 0 0 0-16 17.92 53.12 53.12 0 0 0-7.36 15.36h85.44v35.2h-139.52z m-471.04-103.36c-0.096 7.84 0.544 15.68 1.92 23.36 1.12 6.4 3.744 12.448 7.68 17.6 4 4.96 9.184 8.8 15.04 11.2 7.552 2.976 15.584 4.384 23.68 4.16a47.04 47.04 0 0 0 32-10.88 41.28 41.28 0 0 0 13.44-33.92 61.12 61.12 0 0 0-3.2-21.12 41.92 41.92 0 0 0-10.88-16 77.76 77.76 0 0 0-20.16-13.12 288 288 0 0 0-32-12.16 264.64 264.64 0 0 1-42.56-17.92 114.24 114.24 0 0 1-30.08-22.72 81.28 81.28 0 0 1-17.6-30.08 128 128 0 0 1-5.76-39.68 102.08 102.08 0 0 1 30.08-80.96 120.96 120.96 0 0 1 82.88-26.56 180.48 180.48 0 0 1 45.44 5.44 96 96 0 0 1 35.84 17.28c10.4 8.576 18.56 19.552 23.68 32 5.92 14.176 8.768 29.44 8.32 44.8v10.24h-70.72a73.28 73.28 0 0 0-9.28-40.32 33.92 33.92 0 0 0-32-14.08 51.2 51.2 0 0 0-20.48 3.52 34.56 34.56 0 0 0-13.12 9.6 32 32 0 0 0-6.72 13.44 70.08 70.08 0 0 0-1.92 16c-0.384 9.984 2.048 19.84 7.04 28.48a64 64 0 0 0 32 21.12l56.96 24.64c12.096 5.12 23.584 11.552 34.24 19.2 8.16 5.984 15.296 13.216 21.12 21.44 5.248 7.68 8.928 16.256 10.88 25.28 2.272 10.56 3.36 21.28 3.2 32a100.8 100.8 0 0 1-32 84.16 147.84 147.84 0 0 1-93.44 26.24 122.24 122.24 0 0 1-89.28-27.2 105.92 105.92 0 0 1-26.88-77.76v-14.72h73.6v10.88l-0.96-2.88z m202.88-155.84a169.28 169.28 0 0 1 16.96-60.16 96 96 0 0 1 37.76-39.04 161.92 161.92 0 0 1 132.16 0 96 96 0 0 1 37.12 38.4 169.92 169.92 0 0 1 16.96 60.16 768 768 0 0 1 0 153.28 169.6 169.6 0 0 1-16.96 59.84 89.6 89.6 0 0 1-37.76 38.4 170.56 170.56 0 0 1-132.16 0 89.92 89.92 0 0 1-37.76-38.4 168.96 168.96 0 0 1-16.96-59.84 768 768 0 0 1 0.64-152.64z m71.68 139.2c0.64 14.24 3.008 28.288 7.04 41.92 2.56 9.28 7.936 17.6 15.36 23.68a50.56 50.56 0 0 0 52.8 0c7.456-6.08 12.8-14.4 15.36-23.68 4.064-13.6 6.4-27.68 7.04-41.92 1.28-17.28 1.92-38.592 1.92-64 0-25.376-0.64-46.72-1.92-64a176.64 176.64 0 0 0-7.04-41.92 46.72 46.72 0 0 0-15.36-23.68 50.56 50.56 0 0 0-52.8 0c-7.424 6.144-12.8 14.4-15.36 23.68a178.24 178.24 0 0 0-7.04 41.92c-1.28 17.088-1.92 38.4-1.92 64s0.448 46.944 1.28 64h0.64z" fill="#4b55ae" p-id="10598"></path>
                        </svg>
                    </div>
                    </div>
                    <div class="save-value">
                    {{
                        Number(Number(StationinformationData?.qt?.so2)).toFixed(2)
                    }}
                    </div>
                    <div class="save-name">二氧化硫</div>
                </div>
                </div>
            </div> -->
        </aside>
        <!-- Bottom Bar -->
        <div class="bottom-bar" v-if="showWindDetail">
            <!-- 损失电量 -->
            <div class="panel">
                <div class="indicator-title">
                    <div class="status-title">
                        <h3>损失电量</h3>
                    <div class="date">
                        <div
                        class="day"
                        :class="dates === 'D' ? 'active' : ''"
                        @click="handleChange('D')"
                        >
                        日
                        </div>
                        <div
                        class="mouth"
                        :class="dates === 'M' ? 'active' : ''"
                        @click="handleChange('M')"
                        >
                        月
                        </div>
                        <div
                        class="year"
                        :class="dates === 'Y' ? 'active' : ''"
                        @click="handleChange('Y')"
                        >
                        年
                        </div>
                    </div>
                    </div>
                </div>
                <div class="status-concent">
                    <PieChart
                    width="100%"
                    height="100%"
                    :ratio="10000"
                    unit="万kWh"
                    :lossPower="lossPower"
                    ></PieChart>
                </div>
            </div>
            <!-- 风电场 -->
            <div class="panel">
                <div class="model-bg-new-right">
                    <div class="infos">
                    <div class="titles">
                        <div class="amount">
                        <div class="icon fengji-icon svg-icon svg-icon-white"
                        :class="$store.state.moreSty === 'greenSty' ? 'fengji-icon-box-green' : 'fengji-icon-box-blue'" ></div>
                        <img
                            class="amount-image"
                            src="@/assets/windimgs/wind.png"
                            alt=""
                        />
                        <div class="amount-nums">
                            <text class="num-item">{{
                            StationinformationData?.cblpoint?.jr_fj_ts
                            }}</text>
                            台
                        </div>
                        </div>
                        <div
                        class="info-nums"
                        >
                        风电场<text class="nums">{{
                            StationinformationData?.cblpoint?.jr_fcts
                        }}</text>
                        个
                        </div>
                    </div>
                    <div class="types">
                        <div class="type-model">
                        <div class="type-name" style="color: #1d99ff">待机</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_djnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #05bb4c">运行</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_yxnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #ba3237">故障</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_gznum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #e17e23">检修</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_jxnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #c531c7">限电</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_xdnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #fff">受累</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_slnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #606769">离线</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.fd_lxnum || 0 }}
                        </div>
                        </div>
                    </div>
                    <div class="tabSwitchover">
                        <div class="unit"><span>(单位: 万kWh)</span></div>
                    </div>
                    <div
                        v-for="(item, index) in ForecastPowerNewHome_fc"
                        :key="index"
                    >
                        <div class="power-charts">
                        <div class="power-name">{{ item[0].name }}</div>
                        <div class="power-item">
                            <div class="power-value">
                            <span
                                :style="
                                item[0].color === 1
                                    ? 'background-color:#4B55AE'
                                    : 'background-color:#05BB4C'
                                "
                            ></span>
                            <span  style="color:#606769">{{ item[0].total }}</span>
                            </div>
                            <list-bar-chart-2-home
                            :list="item"
                            height="55px"
                            width="250px"
                            @click="
                                handleElectricDetail(item[0].id, item[0].name, 'fc')
                            "
                            />
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <!-- 光伏电站 -->
            <div class="panel">
                <div class="model-bg-new-right">
                    <div class="infos">
                    <div class="titles">
                        <div class="amount">
                        <div class="icon fengji-icon fengji-icon-box-blue" ></div>
                        <img
                            class="amount-image"
                            src="@/assets/windimgs/sy-sun.png"
                            alt=""
                        />
                        <div class="amount-nums">
                            <text class="num-item">{{
                            Number(
                                StationinformationData?.cblpoint?.jr_gf_jzts +
                                StationinformationData?.cblpoint?.jr_gf_zcts
                            ) || 0
                            }}</text>
                            台
                        </div>
                        </div>
                        <div class="info-nums">
                        电站<text class="nums">{{
                            StationinformationData?.cblpoint?.jr_gfts
                        }}</text>
                        个
                        </div>
                    </div>
                    <div class="types">
                        <div class="type-model">
                        <div class="type-name" style="color: #1d99ff">待机</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_djnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #05bb4c">运行</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_yxnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #ba3237">故障</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_gznum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #e17e23">检修</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_jxnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #c531c7">限电</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_xdnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #fff">受累</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_slnum || 0 }}
                        </div>
                        </div>
                        <div class="type-model">
                        <div class="type-name" style="color: #606769">离线</div>
                        <div class="type-num">
                            {{ StationinformationData?.mxztmap?.gf_lxnum || 0 }}
                        </div>
                        </div>
                    </div>
                    <div class="tabSwitchover">
                        <div class="unit"><span>(单位: 万kWh)</span></div>
                    </div>
                    <div
                        v-for="(item, index) in ForecastPowerNewHome_gf"
                        :key="index"
                    >
                        <div class="power-charts">
                        <div class="power-name">{{ item[0].name }}</div>
                        <div class="power-item">
                            <div class="power-value">
                                <span
                                    :style="
                                    index % 2 === 0
                                        ? 'background-color:#4B55AE'
                                        : 'background-color:#05BB4C'
                                    "
                                ></span>
                                <span style="color:#606769">{{ item[0].total }}</span>
                            </div>
                            <list-bar-chart-2-home
                            :list="item"
                            height="55px"
                            width="250px"
                            @click="
                                handleElectricDetail(item[0].id, item[0].name, 'gf')
                            "
                            />
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PowerReviewHome from "@/components/windNeedCharts/power-review-home.vue";
import ListBarChart2Home from "@/components/windNeedCharts/list-bar-chart2-home.vue";
import PieChart from "@/components/windNeedCharts/pieChart.vue";
import dataJson from "./mapdataJson.json"
import dataJson2 from "./dataJson.json"
//并网
import bw from "@/assets/windimgs/fanSvg/bw.svg"
//故障
import gz from "@/assets/windimgs/fanSvg/gz.svg"
//待机
import dj from "@/assets/windimgs/fanSvg/dj.svg"
//检修
import jx from "@/assets/windimgs/fanSvg/jx.svg"
//限电
import xd from "@/assets/windimgs/fanSvg/xd.svg"
//离线
import lx from "@/assets/windimgs/fanSvg/lx.svg"
//受累
import sl from "@/assets/windimgs/fanSvg/sl.svg"
export default {
    components: {
        PowerReviewHome,
        ListBarChart2Home,
        PieChart
    },
    props: {
        showWeather: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            showWindStatus: true,
            bw,
            gz,
            jx,
            dj,
            xd,
            lx,
            sl,
            coverArr: [
                {
                    value: "风场",
                    check: false
                },
                {
                    value: "云层",
                    check: false
                },
                {
                    value: "降雨",
                    check: false
                },
                {
                    value: "温度",
                    check: false
                },
                {
                    value: "湿度",
                    check: false,
                    disabled: true
                },
                {
                    value: "3小时累计降雨量",
                    check: false,
                    disabled: true
                },
                {
                    value: "水汽含量",
                    check: false,
                    disabled: true
                },
                {
                    value: "云中总水量",
                    check: false,
                    disabled: true
                },
                {
                    value: "平均海平面压力",
                    check: false,
                    disabled: true
                }
            ],
            activeTab: -1,
            wpIds: "KGDL_FGS0",
            powerDataHome: {},
            StationinformationData: [],
            ForecastPowerNewHome_fc: [],
            ForecastPowerNewHome_gf: [],
            wpInfos: {},
            lossPower: {},
            dates: "D",
            showWindDetail: false
        }
    },
    mounted() {
        this.StationinformationData = dataJson.StationinformationData
        this.powerDataHome = dataJson.powerDataHome
        this.wpInfos = dataJson2.wpInfosdata
        this.findProjectPlan();
    },
    methods: {
        backStations() {
            this.$emit("backStations")
        },
        coverOnChange(itv) {
            this.coverArr.forEach(it => {
                if (itv === it) {
                    it.check = !it.check
                } else {
                    it.check = false
                }
            })
            this.$emit("coverOnChange", itv)
        },
        showDetail() {
            this.showWindDetail = !this.showWindDetail
            this.showWindStatus = !this.showWindStatus
            this.findProjectPlan();
            this.$emit("showDetail", this.showWindDetail)
        },
        // 发电量
        findProjectPlan() {
            let data = dataJson.FindProjectplanData

            this.ForecastPowerNewHome_fc = [
            [
                {
                name: "日发电量",
                id: "day",
                value: data?.proplanmap
                    ? data?.proplanmap?.fd_r_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.fd_r_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.fd_r_jhdl < 0
                    ? 0
                    : data?.proplanmap?.fd_r_jhdl
                    : 0,
                },
            ],
            [
                {
                name: "月发电量",
                id: "month",
                value: data?.proplanmap
                    ? data?.proplanmap?.fd_y_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.fd_y_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.fd_y_jhdl < 0
                    ? 0
                    : data?.proplanmap?.fd_y_jhdl
                    : 0,
                },
            ],
            [
                {
                name: "年发电量",
                id: "year",
                value: data?.proplanmap
                    ? data?.proplanmap?.fd_n_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.fd_n_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.fd_n_jhdl < 0
                    ? 0
                    : data?.proplanmap?.fd_n_jhdl
                    : 0,
                },
            ],
            ];
            this.ForecastPowerNewHome_gf = [
            [
                {
                name: "日发电量",
                id: "day",
                value: data?.proplanmap
                    ? data?.proplanmap?.gf_r_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.gf_r_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.gf_r_jhdl < 0
                    ? 0
                    : data?.proplanmap?.gf_r_jhdl
                    : 0,
                },
            ],
            [
                {
                name: "月发电量",
                id: "month",
                value: data?.proplanmap
                    ? data?.proplanmap?.gf_y_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.gf_y_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.gf_y_jhdl < 0
                    ? 0
                    : data?.proplanmap?.gf_y_jhdl
                    : 0,
                },
            ],
            [
                {
                name: "年发电量",
                id: "year",
                value: data?.proplanmap
                    ? data?.proplanmap?.gf_n_sjdl < 0
                    ? 0
                    : (data?.proplanmap?.gf_n_sjdl / 10000).toFixed(2)
                    : 0,
                color: this.$store.state.moreSty === 'greenSty' ? 0 : 1,
                total: data?.proplanmap
                    ? data?.proplanmap?.gf_n_jhdl < 0
                    ? 0
                    : data?.proplanmap?.gf_n_jhdl
                    : 0,
                },
            ],
            ];
            this.lossPower = {
                SFDL: this.wpInfos.rfdl,
                GZSS: this.wpInfos.rgzssdl,
                WHSS: this.wpInfos.rwhssdl,
                SLSS: this.wpInfos.rslssdl,
                XDSS: this.wpInfos.rxdssdl,
                XNSS: this.wpInfos.rxnssdl,
                SUM:
                this.wpInfos.rfdl +
                this.wpInfos.rgzssdl +
                this.wpInfos.rwhssdl +
                this.wpInfos.rslssdl +
                this.wpInfos.rxdssdl +
                this.wpInfos.rxnssdl,
            };
        },
        // 损失电量切换
        handleChange(val) {
            this.dates = val;
            this.getLossValuesAnalyse(val);
        },
        // 改变损失电量数据
        getLossValuesAnalyse(date) {
        if (Object.values(this.wpInfos).length) {
            if (date == "D") {
            this.lossPower = {
                SFDL: this.wpInfos.rfdl,
                GZSS: this.wpInfos.rgzssdl,
                WHSS: this.wpInfos.rwhssdl,
                SLSS: this.wpInfos.rslssdl,
                XDSS: this.wpInfos.rxdssdl,
                XNSS: this.wpInfos.rxnssdl,
                SUM:
                this.wpInfos.rfdl +
                this.wpInfos.rgzssdl +
                this.wpInfos.rwhssdl +
                this.wpInfos.rslssdl +
                this.wpInfos.rxdssdl +
                this.wpInfos.rxnssdl,
            };
            } else if (date == "M") {
            this.lossPower = {
                SFDL: this.wpInfos.yfdl,
                GZSS: this.wpInfos.ygzssdl,
                WHSS: this.wpInfos.ywhssdl,
                SLSS: this.wpInfos.yslssdl,
                XDSS: this.wpInfos.yxdssdl,
                XNSS: this.wpInfos.yxnssdl,
                SUM:
                this.wpInfos.yfdl +
                this.wpInfos.ygzssdl +
                this.wpInfos.ywhssdl +
                this.wpInfos.yslssdl +
                this.wpInfos.yxdssdl +
                this.wpInfos.yxnssdl,
            };
            } else if (date == "Y") {
            this.lossPower = {
                SFDL: this.wpInfos.nfdl,
                GZSS: this.wpInfos.ngzssdl,
                WHSS: this.wpInfos.nwhssdl,
                SLSS: this.wpInfos.nslssdl,
                XDSS: this.wpInfos.nxdssdl,
                XNSS: this.wpInfos.nxnssdl,
                SUM:
                this.wpInfos.nfdl +
                this.wpInfos.ngzssdl +
                this.wpInfos.nwhssdl +
                this.wpInfos.nslssdl +
                this.wpInfos.nxdssdl +
                this.wpInfos.nxnssdl,
            };
            } else {
            this.lossPower = {};
            }
        }
        },
    }
}
</script>

<style lang="less" scoped>
.panel {
    background: rgba(248, 249, 252, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
    padding: 20px;
}
.sidebar-left2{
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 450px;
    .labels{
        font-size: 16px;
        font-weight: bold;
    }
    .windStatus{
        display: flex;
        flex-direction: column;
        .windVal{
            position:relative;
            top: 5px; 
            left: 10px;
        }
    }
    .covercheck{
        display: inline-block;
        width: 100%;
        .el-check-tag{
            margin: 0 5px 3px 0;
            padding: 5px 8px;
        }
    }
}

/* --- Left Sidebar --- */
.sidebar-left, .sidebar-left-top {
    position: absolute;
    left: 20px;
    
}
.sidebar-left-top{
    top: 100px;
    width: 80px;
    padding: 5px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
}
.sidebar-left{
    top: 100px;
    width: 260px;
}

.stat-block-lefttop{
    text-align: center;
    cursor: pointer;
    .label{
        font-size: 20px; color: #fff;
    }
}

.stat-block { margin-bottom: 15px; }
.stat-block .label { font-size: 26px; color: #6c757d; margin-bottom: 5px; }
.stat-block .value { font-size: 32px; font-weight: 600; color: #4b55ae; }
.stat-block .labels { font-size: 14px; color: #6c757d; margin-bottom: 5px; }
.stat-block .values { font-size: 16px; font-weight: 600; color: #4b55ae; }
.progress-bar { height: 4px; background: #e9ecef; border-radius: 2px; margin-top: 10px; }
.progress-bar-inner { height: 100%; background: #6c757d; border-radius: 2px; }

/* --- Right Sidebar --- */
.sidebar-right {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 380px;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    .info-section{
        h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 5px; }
    }
    .energy-system-content {
        padding: 5px 5px 15px 5px;
        .title-all {
        margin-left: 5px;
        margin-bottom: 8px;
        }
        .title-all-content {
        font-weight: bold;
        font-size: 19px;
        color:#4b55ae;
        }
        .title-all-title {
        font-size: 13px;
        }
        .title-all-unit {
        font-size: 12px;
        color: #b1b1b1;
        margin-left: 5px;
        }
        .title {
        color: #6c757d;
        
        text-align: right;
        .title-name {
            float: left;
            font-size: 16px; 
            font-weight: 600; 
            text-transform: uppercase;
        }
        }
        .right-content,
        .left-content {
        width: 50%;
        .img-num {
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 10px;
            .img {
            margin-right: 10px;
            }
            .num {
            span {
                font-size: 12px;
                font-weight: 400;
                color: #6c757d;
            }
            span:nth-child(3) {
                font-size: 19px;
                font-weight: bold;
                line-height: 27px;
                color: #4b55ae;
            }
            span:nth-child(4) {
                margin-left: 15px;
            }
            }
        }
        .capacity {
            .item {
            margin-top: 9px;
            .el-row {
                text-align: center;
                .el-col:nth-child(1) {
                font-size: 12px;
                font-weight: 400;
                color: #6c757d;
                }
                .el-col:nth-child(2) {
                font-size: 16px;
                font-weight: bold;
                color: #4b55ae;
                }
                .el-col:nth-child(3) {
                font-size: 14px;
                font-weight: 400;
                color: #6c757d;
                }
            }
            }
        }
        }
        .left-content {
        }
        .right-content {
        border-left: 1px dashed #4e4040;
        padding-left: 10px;
        }
    }
    .clearfix::after {
        content: "";
        clear: both;
        height: 0;
        line-height: 0;
        visibility: hidden;
        display: block;
    }

    .clearfix {
        zoom: 1;
    }
    .model-bg {
      width: 100%;
      min-height: 135px;
      //   background-color: rgba(3, 5, 9, 0.5);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      padding: 0 2%;

      .titles {
        height: 45px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .name {
          font-size: 16px; 
            font-weight: 600; 
            text-transform: uppercase;
          color: #6c757d;
        }

        .unit {
          font-size: 12px;
          color: #b1b1b1;
        }
      }

      .save {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        margin: 17px 0;

        .save-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .kind {
            width: 20px;
            height: 22px;
            .co2, .so2{
                svg{
                    width: 24px;
                    height: 24px;
                }
            }
            .jnjp-icon1 {
              margin-left: -8px;
            }
            .kind-img {
              width: 100%;
              height: 100%;
            }
          }

          .save-value {
            font-size: 16px;
            color: #6c757d;
            margin: 10px 0;
          }

          .save-name {
            font-size: 12px;
            color: #b3b3b3;
          }
        }
      }
    }
}

/* --- Bottom Bar --- */
.bottom-bar {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 420px; /* Make space for right sidebar */
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.2fr;
    gap: 20px;
}

</style>
<style lang="less">
.model-bg-new-right {
    width: 100%;
    min-height: 135px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;

    // padding: 1% 5%;
    .power-charts {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        width: 100%;
        margin-top: 10px;

        .power-name {
            width: 80px;
            margin-bottom: 20px;
            color: #6c757d;
        }

        .power-item {
            display: flex;
            flex-direction: column;
            width: 360px;

            .power-value {
                font-size: 12px;
                margin-bottom: -31px;
                font-family: Bicubik;
                margin-left: 255px;

                span:nth-child(1) {
                    width: 5px;
                    height: 5px;
                    border-radius: 5px;
                    display: inline-block;
                    background-color: #6c757d;
                    margin-right: 5px;
                }

                .green-value {
                    color: #05bb4c;
                }

                .purple-value {
                    color: #4b55ae;
                }
            }
        }
    }

    .infos {
        display: flex;
        flex-direction: column;
        width: 50%;
        height: 100%;
        width: 100%;

        .titles {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            // padding: 0 15px;
            height: 50%;

            .amount {
                display: flex;
                flex-direction: row;
                align-items: center;

                .amount-image {
                    margin-left: -42px;
                }

                .amount-nums {
                    font-size: 12px;
                    color: #6c757d;
                    margin-left: 10px;
                    display: flex;
                    flex-direction: row;
                    align-items: baseline;

                    .num-item {
                        font-size: 20px;
                        color: #6c757d;
                        margin-right: 5px;
                    }
                }
            }

            .info-nums {
                display: flex;
                align-items: baseline;
                font-size: 14px;
                color: #6c757d;

                .nums {
                    font-size: 20px;
                    color: #4b55ae;
                    margin: 0 5px;
                }
            }
        }

        .tabSwitchover {
            // height: 23px;
            margin-top: 5px;

            .tabSwitchover-item {
                width: 42px;
                line-height: 23px;
                text-align: center;
                color: #b3b3b3;
                float: left;
                cursor: pointer;
            }

            .tab-active {
                border-bottom: 1px solid rgb(39, 219, 54);
                background: linear-gradient(to top,
                        rgba(5, 187, 76, 0.5),
                        rgba(5, 187, 76, 0));
            }

            .unit {
                text-align: right;
                color: #b1b1b1;
                font-size: 12px;
                // float: right;
            }
        }

        .types {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 50%;
            width: 100%;
            margin-top: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #b5b5b5;

            .type-model {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                width: 16%;
                // height: 75%;
                font-size: 16px;

                .type-name {
                    font-size: 14px;
                    font-family: Agency FB;
                    margin-bottom: 10px;
                }

                .type-num {
                    height: 15px;
                    color: #6c757d;
                }
            }
        }
    }
    
}
.fengji-icon-box-blue {
    box-shadow: inset 1.5px -1px 1px 0px #4b55ae;
}
.fengji-icon {
    border-radius: 50%;
    width: 49px;
    height: 49px;
    animation: fadenum 5s linear infinite;

    @keyframes fadenum {
        100% {
            transform: rotate(360deg);
        }
    }

    svg {
        width: 25px;
        height: 22px;
    }
}

.indicator-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 100%;
  height: 39px;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #6c757d;
}
.status-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  h3 { font-size: 16px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 5px; }
}

.date {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #b3b3b3;
  cursor: pointer;

  .day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border: 1px solid #4b55ae;
    border-radius: 11px 0px 0px 11px;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 102, 187, 0.4);
      color: #fff;
    }
  }

  .mouth {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border-top: 1px solid #4b55ae;
    border-bottom: 1px solid #4b55ae;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 102, 187, 0.4);
      color: #fff;
    }
  }

  .year {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    border: 1px solid #4b55ae;
    border-radius: 0px 11px 11px 0px;
    background: rgba(67, 81, 107, 0.2);

    &.active {
      background: rgba(5, 102, 187, 0.4);
      color: #fff;
    }
  }
}
.status-concent {
    width: 100%;
    height: calc(100% - 20px);
}

.info-section { font-size: 13px; }
.info-section h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #6c757d; margin-bottom: 15px; }
.info-item { display: flex; justify-content: space-between; margin-bottom: 12px; padding: 0 5px; }
.info-item .label { color: #6c757d; }
.info-item .value { color: #6c757d; display: flex; align-items: center; gap: 5px; }
</style>