@{
    ViewData["TitleController"] = "能耗管理";
    ViewData["TitleAction"] = "能耗监控";
    ViewData["TitleActionDescription"] = "设备能耗仪表监控";
    ViewData["Title"] = "能耗监控";
}

<div id="app" style="color:#FCC439; font-size: 16px">
    <h3>设备电能表运行状态监控</h3>
    <hr />
    <div class="col-lg-12" style="min-height: 60px">
        <div class="col-lg-3" v-for="(machine, index) in machineMeterDtos" style="padding: 2px">
            <div style="border: 1px solid #ccc; padding: 10px; border-radius: 5px; height: 100px;">
                <h4>
                    {{ machine.name }}
                    <span v-if="machine.machineState === 1">（离线）</span>
                </h4>
                <div v-if="machine.state === 0">
                    <div style="background-color: green; width: 20px; height: 20px;border-radius: 10px;float: left"></div>
                    <span style="padding-left: 5px;">正常</span>
                </div>
                <div v-else-if="machine.state === 3">
                    <div style="background-color: yellow; width: 20px; height: 20px;border-radius: 10px;float: left"></div>
                    <span style="color: yellow; padding-left: 5px;">{{ machine.message }}</span>
                </div>
                <div v-else>
                    <div style="background-color: red; width: 20px; height: 20px;border-radius: 10px;float: left"></div>
                    <span style="color: red; padding-left: 5px;">{{ machine.message }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

@section footer {
    <script src="~/js/energy-consumption/EnergyConsumptionMeterCheck.js" asp-append-version="true"></script>
}