<template>
    <div class="model">
        <el-row :gutter="24">
            <el-col :span="12">
                <TitleComponent title="XXX电站·逆变器综合监控" subtitle="实时监控X台逆变器运行状态、发电趋势及环境信息" />
            </el-col>
            <!-- 外层col：控制整体宽度并右对齐，同时作为flex容器 -->
            <el-col :span="12"
                style="display: flex; justify-content: flex-end; align-items: center;margin-bottom: 20px;">
                <!-- 子col1：输入框容器 -->
                <el-col :span="8">
                    <el-input placeholder="请输入逆变器...">
                        <template #prefix>
                            <el-icon>
                                <Search />
                            </el-icon>
                        </template>
                    </el-input>
                </el-col>
                <!-- 子col2：下拉框容器 -->
                <el-col :span="4">
                    <el-select placeholder="请选择状态">
                        <el-option label="所有状态" value="all"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">
                        刷新数据
                        <el-icon class="el-icon--right">
                            <Refresh />
                        </el-icon>
                    </el-button>
                </el-col>
            </el-col>
        </el-row>
        <el-row style="display: flex; gap: 30px;margin: 20px 0;" class="card">
            <el-col style="flex: 1;" class="item">
                <div class="box" style="height: 100%;display: flex;">
                    <div class="left"
                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
                        <div style="color: rgba(102, 102, 102, 1);">今日总发电量</div>
                        <div><span
                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">1,248</span>
                            <span
                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                                KWH
                            </span>
                        </div>
                        <div style="display: flex;align-items: center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="18" height="18" viewBox="0 0 18 18" fill="none">
                                <path
                                    d="M15.15 5.77505L15.15 5.70006L15.15 5.62505L15.075 5.62505C15.075 5.62505 15 5.62505 14.925 5.55005L11.25 5.55005C10.875 5.55005 10.575 5.85005 10.575 6.22505C10.575 6.60006 10.875 6.90005 11.25 6.90005L13.125 6.90005L9.52501 10.5L7.72501 8.70005C7.35 8.32505 6.60001 8.32505 6.225 8.70005L3.075 11.85C2.85 12.075 2.85 12.525 3.075 12.75C3.22501 12.9001 3.37501 12.975 3.525 12.975C3.67501 12.975 3.82501 12.975 3.975 12.75L6.9 9.82505L8.7 11.625C9.07501 12.0001 9.825 12.0001 10.2 11.625L13.95 7.87505L13.95 9.75006C13.95 10.1251 14.25 10.4251 14.625 10.4251C15 10.4251 15.3 10.1251 15.3 9.75006L15.3 6.37506L15.3 6.15006L15.15 5.77505Z"
                                    fill="#00B87A">
                                </path>
                            </svg>
                            <span
                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(0, 184, 122, 1)">8.2%</span>
                            <span
                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(154, 154, 154, 1)">较昨日同期</span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="/assets/back.png" alt="" style="height: 100%;">
                    </div>
                </div>
            </el-col>
            <el-col style="flex: 1" class="item">
                <div class="box" style="height: 100%;display: flex;">
                    <div class="left"
                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
                        <div style="color: rgba(102, 102, 102, 1);">逆变器总数</div>
                        <div><span
                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">54</span>
                            <span
                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                                台
                            </span>
                        </div>
                        <div style="display: flex;">
                            <div
                                style="width: 63px;height: 18px;border-radius: 16px;background: rgba(0, 184, 122, .3);text-align: center;">
                                <span
                                    style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);">
                                    正常：<span>53</span>
                                </span>
                            </div>
                            <div
                                style="width: 63px;height: 18px;border-radius: 16px;background: rgba(227, 39, 39, .3);text-align: center;margin-left: 10px;">
                                <span
                                    style="font-size: 12px;font-weight: 400;letter-spacing: 0;line-height: 17.38px;color: rgba(0, 184, 122, 1);color: red;">
                                    异常<span>53</span>
                                </span>
                            </div>
                            <!-- <div>异常：<span>1</span></div> -->
                        </div>
                    </div>
                    <div class="right">
                        <img src="/assets/back2.png" alt="" style="height: 100%;">
                    </div>
                </div>
            </el-col>
            <el-col style="flex: 1" class="item">
                <div class="box" style="height: 100%;display: flex;">
                    <div class="left"
                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
                        <div style="color: rgba(102, 102, 102, 1);">平均效率</div>
                        <div><span
                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">98</span>
                            <span
                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                                %
                            </span>
                        </div>
                        <div style="display: flex;align-items: center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="18" height="18" viewBox="0 0 18 18" fill="none">
                                <path
                                    d="M15.15 12.2252L15.15 12.3002L15.15 12.3752L15.075 12.3752C15.075 12.3752 15 12.3752 14.925 12.4502L11.25 12.4502C10.875 12.4502 10.575 12.1502 10.575 11.7752C10.575 11.4002 10.875 11.1002 11.25 11.1002L13.125 11.1002L9.52501 7.5002L7.72501 9.3002C7.35 9.67519 6.60001 9.67519 6.225 9.3002L3.075 6.1502C2.85 5.9252 2.85 5.4752 3.075 5.2502C3.22501 5.10019 3.37501 5.0252 3.525 5.0252C3.67501 5.0252 3.82501 5.0252 3.975 5.2502L6.9 8.1752L8.7 6.3752C9.07501 6.00019 9.825 6.00019 10.2 6.3752L13.95 10.1252L13.95 8.25019C13.95 7.87519 14.25 7.57519 14.625 7.57519C15 7.57519 15.3 7.87519 15.3 8.25019L15.3 11.6252L15.3 11.8502L15.15 12.2252Z"
                                    fill="#E32727">
                                </path>
                            </svg>

                            <span
                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color:  rgba(227, 39, 39, 1)">0.2%</span>
                            <span
                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color: rgba(154, 154, 154, 1)">较昨日同期</span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="/assets/back3.png" alt="" style="height: 100%;">
                    </div>
                </div>
            </el-col>
            <el-col style="flex: 1" class="item">
                <div class="box" style="height: 100%;display: flex;">
                    <div class="left"
                        style="display: flex;flex-direction: column;height: 100%;justify-content: space-around;padding: 15px;">
                        <div style="color: rgba(102, 102, 102, 1);">当前总功率</div>
                        <div><span
                                style="font-size: 30px;font-weight: 400;letter-spacing: 0px;line-height: 36px;color: rgba(0, 0, 0, 1);font-weight: bold;">325</span>
                            <span
                                style="font-size: 12px;font-weight: 400;letter-spacing: 0px;line-height: 17.38px;color: rgba(154, 154, 154, 1);">
                                KW
                            </span>
                        </div>
                        <div style="display: flex;align-items: center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                width="18" height="18" viewBox="0 0 18 18" fill="none">
                                <path
                                    d="M1.561 6.19974L2.68001 6.19974C2.68598 6.1995 2.69196 6.19932 2.69795 6.19925C2.70395 6.19918 2.70995 6.19921 2.71594 6.19932C2.72193 6.19944 2.72791 6.19965 2.73388 6.19995C2.73987 6.20027 2.74585 6.20066 2.75181 6.20115C2.75779 6.20164 2.76375 6.20222 2.76971 6.20289C2.77565 6.20357 2.78158 6.20435 2.78752 6.20521C2.79344 6.20607 2.79935 6.20702 2.80526 6.20806C2.81116 6.20911 2.81703 6.21025 2.8229 6.21148C2.82876 6.21271 2.83459 6.21403 2.84043 6.21544C2.84625 6.21686 2.85205 6.21837 2.85783 6.21996C2.8636 6.22156 2.86935 6.22324 2.87508 6.225C2.88079 6.22678 2.88648 6.22864 2.89214 6.23057C2.8978 6.23254 2.90343 6.23458 2.90904 6.23669C2.91463 6.23884 2.9202 6.24105 2.92574 6.24334C2.93126 6.24564 2.93676 6.24803 2.94222 6.25049C2.94767 6.25297 2.95309 6.25552 2.95847 6.25815C2.96385 6.26079 2.96917 6.26352 2.97448 6.26633C2.97975 6.26914 2.98501 6.27202 2.99021 6.27499C2.99542 6.27796 3.00057 6.28101 3.00568 6.28413C3.01078 6.28726 3.01584 6.29048 3.02085 6.29377C3.02584 6.29705 3.0308 6.30041 3.03572 6.30386C3.04061 6.3073 3.04546 6.31084 3.05026 6.31442C3.05504 6.31801 3.05979 6.32168 3.06446 6.32543C3.06914 6.32917 3.07374 6.33298 3.07831 6.33687C3.08287 6.34075 3.08737 6.34471 3.09181 6.34873C3.09624 6.35278 3.1006 6.35687 3.10493 6.36102C3.10922 6.36519 3.11347 6.36941 3.11765 6.37369C3.12182 6.378 3.12593 6.38236 3.12998 6.38677C3.134 6.3912 3.13797 6.3957 3.14188 6.40024C3.14578 6.40479 3.14959 6.4094 3.15336 6.41405C3.15712 6.41873 3.16079 6.42344 3.16441 6.42822C3.16802 6.433 3.17155 6.43786 3.17501 6.44274L4.37351 8.21423L6.08351 4.67124C6.15401 4.51973 6.2965 4.41623 6.4585 4.37724C6.751 4.30224 7.057 4.45673 7.14551 4.72673L9.4555 11.7062L11.14 6.61673C11.1925 6.37674 11.4175 6.19974 11.6905 6.19974L14.5045 6.19974C14.5522 6.19951 14.5992 6.20502 14.6455 6.21623C14.652 6.20586 14.6586 6.19559 14.6654 6.18543C14.6722 6.17527 14.6791 6.16524 14.6863 6.15529C14.6934 6.14536 14.7007 6.13553 14.7081 6.12583C14.7155 6.11612 14.7231 6.10652 14.7309 6.09707C14.7386 6.08761 14.7465 6.07828 14.7545 6.06907C14.7626 6.05987 14.7708 6.0508 14.7791 6.04186C14.7874 6.03293 14.7959 6.02412 14.8045 6.01544C14.8131 6.00677 14.8219 5.99824 14.8308 5.98984C14.8397 5.98146 14.8487 5.97321 14.8579 5.96511C14.867 5.95702 14.8763 5.94908 14.8857 5.94127C14.8951 5.93347 14.9047 5.92582 14.9143 5.91833C14.924 5.91085 14.9338 5.9035 14.9437 5.89633C14.9536 5.88915 14.9636 5.88212 14.9737 5.87527C14.9838 5.86841 14.994 5.86173 15.0044 5.85519C15.0147 5.84867 15.0251 5.84231 15.0357 5.83612C15.0462 5.82993 15.0569 5.82392 15.0676 5.81807C15.0783 5.81223 15.0891 5.80655 15.1001 5.80103C15.111 5.79555 15.122 5.79022 15.1331 5.78507C15.1442 5.77992 15.1553 5.77495 15.1666 5.77017C15.1778 5.76539 15.1892 5.76078 15.2005 5.75635C15.2119 5.75192 15.2234 5.74769 15.2349 5.74362C15.2465 5.73958 15.2581 5.73571 15.2697 5.73202C15.2814 5.72835 15.2931 5.72485 15.3049 5.72155C15.3166 5.71824 15.3284 5.71513 15.3403 5.7122C15.3522 5.70928 15.3641 5.70655 15.3761 5.704C15.388 5.70147 15.4 5.69912 15.412 5.69695C15.4241 5.69481 15.4361 5.69284 15.4482 5.69107C15.4603 5.68931 15.4724 5.68774 15.4846 5.68636C15.4967 5.68498 15.5089 5.68381 15.5211 5.6828C15.5333 5.68182 15.5455 5.68105 15.5577 5.68045C15.5699 5.67985 15.5821 5.67946 15.5943 5.67925C15.6066 5.67906 15.6188 5.67906 15.631 5.67924C16.252 5.67924 16.756 6.14423 16.756 6.71874C16.756 7.29474 16.252 7.75973 15.631 7.75973C15.6188 7.75991 15.6066 7.75987 15.5944 7.75964C15.5821 7.75943 15.5699 7.75901 15.5577 7.75838C15.5455 7.75776 15.5333 7.75695 15.5211 7.75593C15.509 7.75493 15.4968 7.75374 15.4847 7.75233C15.4725 7.75094 15.4604 7.74936 15.4483 7.74757C15.4362 7.74577 15.4242 7.7438 15.4122 7.74162C15.4001 7.73946 15.3882 7.73711 15.3762 7.73454C15.3642 7.73199 15.3523 7.72925 15.3405 7.7263C15.3286 7.72338 15.3168 7.72025 15.305 7.71693C15.2933 7.71362 15.2816 7.71011 15.2699 7.70642C15.2583 7.70272 15.2467 7.69886 15.2352 7.69478C15.2236 7.69074 15.2122 7.68648 15.2008 7.68205C15.1894 7.67762 15.1781 7.67302 15.1669 7.66822C15.1556 7.66344 15.1445 7.65848 15.1334 7.65331C15.1223 7.64818 15.1113 7.64285 15.1004 7.63735C15.0895 7.63185 15.0786 7.62617 15.0679 7.62032C15.0572 7.61448 15.0465 7.60847 15.036 7.60228C15.0255 7.5961 15.015 7.58973 15.0047 7.58321C14.9944 7.57671 14.9841 7.57001 14.974 7.56315C14.9639 7.55632 14.9539 7.5493 14.944 7.54213C14.9341 7.53496 14.9243 7.52763 14.9147 7.52014C14.905 7.51267 14.8955 7.50504 14.8861 7.49724C14.8766 7.48947 14.8673 7.48152 14.8582 7.47344C14.849 7.46535 14.84 7.45712 14.8311 7.44874C14.8222 7.44037 14.8134 7.43185 14.8048 7.4232C14.7962 7.41455 14.7877 7.40574 14.7794 7.39681C14.771 7.38788 14.7628 7.37883 14.7548 7.36964C14.7467 7.36046 14.7388 7.35114 14.7311 7.34169C14.7233 7.33225 14.7157 7.32269 14.7082 7.313C14.7008 7.30331 14.6935 7.29351 14.6864 7.28359C14.6792 7.27368 14.6723 7.26364 14.6655 7.25348C14.6586 7.24336 14.652 7.23311 14.6455 7.22274C14.5992 7.23395 14.5522 7.23945 14.5045 7.23924L12.1105 7.23924L9.9955 13.6322C9.9055 13.9052 9.5905 14.0612 9.2935 13.9772C9.28273 13.9742 9.27205 13.9709 9.26147 13.9673C9.25089 13.9636 9.24041 13.9597 9.23008 13.9554C9.21972 13.9512 9.20951 13.9466 9.19944 13.9417C9.18937 13.9369 9.17945 13.9317 9.16968 13.9263C9.15991 13.9208 9.15031 13.9151 9.14089 13.9091C9.13145 13.903 9.1222 13.8967 9.11315 13.8902C9.1041 13.8836 9.09525 13.8768 9.08661 13.8697C9.07796 13.8626 9.06952 13.8552 9.06131 13.8476C9.05308 13.84 9.0451 13.8322 9.03737 13.8241C9.0296 13.8161 9.02209 13.8078 9.01485 13.7993C9.00759 13.7907 9.0006 13.782 8.99386 13.7731C8.98711 13.7642 8.98064 13.755 8.97446 13.7457C8.96825 13.7364 8.96233 13.7269 8.9567 13.7172C8.95108 13.7076 8.94573 13.6978 8.94069 13.6878C8.93563 13.6778 8.93088 13.6677 8.92643 13.6574C8.92197 13.6471 8.91784 13.6368 8.91401 13.6262L6.50651 6.34824L4.98551 9.50724C4.97821 9.52457 4.96997 9.54145 4.96079 9.55787C4.9516 9.57429 4.94151 9.59012 4.93054 9.60538C4.91955 9.62066 4.90774 9.63526 4.89512 9.64919C4.8825 9.66314 4.86912 9.67633 4.85501 9.68874L4.84451 9.69923C4.83931 9.7037 4.83404 9.70805 4.82869 9.71233C4.82335 9.7166 4.81792 9.72078 4.81243 9.72486C4.80693 9.72894 4.80138 9.73293 4.79575 9.73683C4.79012 9.74073 4.78443 9.74451 4.77866 9.7482C4.7729 9.75191 4.76708 9.75552 4.76119 9.759C4.7553 9.76249 4.74936 9.76589 4.74337 9.76917C4.73736 9.77248 4.73131 9.77566 4.72521 9.77874C4.71909 9.78183 4.71292 9.7848 4.70672 9.78767C4.70049 9.79055 4.69424 9.79331 4.68793 9.79595C4.68162 9.79862 4.67527 9.80115 4.66887 9.80357C4.66247 9.80602 4.65604 9.80834 4.64957 9.81055C4.64308 9.81277 4.63656 9.81488 4.63002 9.81686C4.62347 9.81885 4.61689 9.82073 4.61028 9.82249C4.60367 9.82425 4.59703 9.8259 4.59035 9.82743C4.58367 9.82896 4.57699 9.83036 4.57028 9.83166C4.56354 9.83296 4.55681 9.83416 4.55006 9.83523C4.54329 9.8363 4.53651 9.83725 4.52972 9.83808C4.52292 9.83892 4.51612 9.83964 4.50931 9.84024C4.50249 9.84084 4.49566 9.84133 4.48884 9.84168C4.48198 9.84205 4.47514 9.8423 4.4683 9.84244C4.46147 9.84258 4.45463 9.84258 4.44779 9.84246C4.44094 9.84235 4.4341 9.84214 4.42726 9.84179C4.42042 9.84146 4.4136 9.841 4.40678 9.84042C4.39996 9.83984 4.39314 9.83913 4.38636 9.83833C4.37955 9.83752 4.37277 9.8366 4.36602 9.83555C4.35925 9.83449 4.3525 9.83333 4.34579 9.83205C4.33905 9.83078 4.33236 9.82938 4.32569 9.82787C4.31901 9.82635 4.31235 9.82474 4.30574 9.823C4.29912 9.82128 4.29252 9.81941 4.28598 9.81744C4.27943 9.81547 4.27291 9.8134 4.26642 9.8112C4.25993 9.80902 4.25348 9.80672 4.24708 9.80429C4.24069 9.8019 4.23432 9.79937 4.22801 9.79674C4.21372 9.79106 4.19971 9.78478 4.18598 9.77789C4.17224 9.77102 4.15882 9.76357 4.14573 9.75555C4.13262 9.74754 4.11989 9.73896 4.10751 9.72983C4.09514 9.72073 4.08319 9.7111 4.07165 9.70094C4.06011 9.69081 4.04901 9.68019 4.03838 9.6691C4.02774 9.65801 4.0176 9.64648 4.00797 9.63453C3.9983 9.62257 3.98918 9.61023 3.9806 9.59749C3.972 9.58476 3.96397 9.57167 3.9565 9.55824L2.38599 7.23924L1.561 7.23924C1.2505 7.23924 1 7.00674 1 6.71874C1 6.43374 1.252 6.19974 1.561 6.19974Z"
                                    fill="#FF9900">
                                </path>
                            </svg>
                            <span
                                style="font-size: 12px;font-weight: 500;letter-spacing: 0px;line-height: 14.48px;color:  rgba(255, 153, 0, 1)">峰值功率：384KW</span>
                        </div>
                    </div>
                    <div class="right">
                        <img src="/assets/back4.png" alt="" style="height: 100%;">
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin: 20px 0;">
            <el-col :span="15">
                <el-row style="display: flex;flex-direction: column;height: 100%;">
                    <div>
                        <TitleComponent title="逆变器发电趋势" subtitle="过去24小时发电功率与效率趋势" :fontLevel="2" />
                    </div>
                    <ChartBox style="flex-grow: 1;" />
                </el-row>
            </el-col>
            <el-col :span="8" :offset="1">
                <div>
                    <TitleComponent title="气象监测信息" subtitle="未来24小时天气预报及环境监测" :fontLevel="2" />
                </div>
                <QiXiang />
            </el-col>
        </el-row>
        <el-row style="margin: 20px 0;"> <!-- gutter：列之间的间距（单位px），控制垂直/水平间距 -->
            <!-- 标题列：占满12列（栅格系统默认12列） -->
            <el-col> <!-- span=12 表示占满一行宽度 -->
                <TitleComponent title="逆变器运行状态" :fontLevel="2" />
            </el-col>
            <!-- status组件列：同样占满12列，与标题垂直排列 -->
            <el-col>
                <status style="width: 100%;" /> <!-- 确保组件宽度100%，不溢出 -->
            </el-col>
        </el-row>
        <el-row style="display: flex;">
            <el-col :span="6" style="display: flex;flex-direction: column;">
                <div>
                    <TitleComponent title="今日值班信息" :fontLevel="2" />
                </div>
                <zhiban style="width: 100%;flex-grow: 1;overflow: auto;" />
            </el-col>
            <el-col :span="17" :offset="1">
                <div>
                    <TitleComponent title="最近告警消息" :fontLevel="2" />
                </div>
                <gaojing />
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import TitleComponent from '@/components/TitleComponent';
import ChartBox from './components/ChartBox.vue';
import QiXiang from './components/qixiang.vue';
import status from './components/status.vue';
import zhiban from './components/zhiban.vue';
import gaojing from './components/gaojing.vue';
</script>
<style scoped lang="scss">
.model {
    padding: 20px;
    background-color: rgba(242, 248, 252, 1);
}

.card {
    .item {
        flex: 1;
        height: 123px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        border-radius: 12px;
        background-color: #fff;
    }

}
</style>
