/* 标题栏 */ <template> <div class="title-bar" onselectstart="return false"> <el-row> <el-col :span="2"> <img class="logo" src="../assets/img/main_window/logo.png" sytle="align-items" /> </el-col> <el-col :span="1"> <div> <el-dialog title="用户登录" v-model="dialogVisible" width="21%" :before-close="handleClose" :show-close="false" > <el-form :model="form"> <el-form-item :label="loginMessage" :label-width="formLabelWidth"> </el-form-item> <el-form-item label="用户名:" :label-width="formLabelWidth"> <el-input v-model="form.name" autocomplete="off" type="text" placeholder="用户名" style="width: 80%" ></el-input> </el-form-item> <el-form-item label="密 码:" :label-width="formLabelWidth"> <el-input v-model="form.psd" autocomplete="off" type="text" placeholder="密 码" style="width: 80%" show-password ></el-input> </el-form-item> <el-form-item label="验证码:" :label-width="formLabelWidth" style="display: none" > <el-input v-model="form.name" autocomplete="off" type="text" placeholder="验证码" style="width: 80%" ><template #append ><img src="../../src\assets\logo.png" style="width: 50px; height: 20px" /></template ></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false" style=" background-color: rgb(100, 100, 100); color: rgb(220, 220, 220); " >取 消</el-button > <el-button type="primary" @click="login">登 录</el-button> </span> </template> </el-dialog> <el-popover placement="bottom" :width="521" trigger="hover" class="popoverBack" :show-arrow="false" visible-arrow="false" v-model="popovermodel" > <ul> <li>编辑</li> <li>注销</li> </ul> </el-popover> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="装机容量" unit="MW" :value="installedCapacity" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="实时功率" unit="MW" :value="totalPower" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="日发电量" unit="kWh" :value="dailyPowerGeneration" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="上网电量" unit="kWh" :value="gridPower" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="月发电量" unit="kWh" :value="monthlyPowerGeneration" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="年发电量" unit="kWh" :value="annualPowerGeneration" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="月利用小时" unit="小时" :value="monthlyUtilizationHours" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="2.3"> <div class="titleinfo"> <ul> <li> <TitleBarCard title="年利用小时" unit="小时" :value="annualUtilizationHours" ></TitleBarCard> </li> </ul> </div> </el-col> <el-col :span="1.6"> <div @click="userClick" @mouseover="popovermodel=false" style="top: 18px; right: 100px; color: #ffffff; position: absolute">{{usreName}}</div> <!-- <el-button v-popover:loginref type="text" @click="dialogVisible = true" style="top:9px;right: 85px;color: #ffffff;position: absolute;">管理员</el-button> --> </el-col> <el-col :span="1"> <div style="margin-top: 7px; position: absolute; right: 10px"> <button class="closeButton" v-on:click="mainClose">×</button> </div> </el-col> </el-row> </div> </template> <script> import TitleBarCard from "./area/mainwindow/TitleBarCard.vue"; import BackgroundData from "../assets/script/BackgroundData"; export default { name: "TitleBar", components: { TitleBarCard, }, data() { return { popovermodel: false, dialogVisible: false, dialogFormVisible: false, form: { name: "", psd: "", }, usreName:"未登录...", loginMessage: "", // 登录提示 formLabelWidth: "120px", totalPower: 0, // 实时功率 dailyPowerGeneration: 0, // 日发电量 gridPower: 0, // 上网电量 monthlyPowerGeneration: 0, // 月发电量 annualPowerGeneration: 0, // 年发电量 installedCapacity: 734, // 装机容量 }; }, computed: { monthlyUtilizationHours: function () { // 月利用小时数 return ( (this.monthlyPowerGeneration * 10) / this.installedCapacity ).toFixed(2); }, annualUtilizationHours: function () { // 年利用小时数 return ( (this.annualPowerGeneration * 10) / this.installedCapacity ).toFixed(2); }, }, created() { this.refreshTimer = setInterval(this.refreshData, 2000); }, methods: { handleClose(done) { done(); }, mainClose() { const { remote } = require("electron"); remote.getCurrentWindow().destroy(); }, refreshData() { // todo 计算发电量的时候没有考虑光伏的,后续完善 var bd = BackgroundData.getInstance(); var val = bd.TopPoint; for (var v in val) { var pt = val[v]; if (pt.pointName == "TotalPower") { this.totalPower = pt.value.toFixed(2); } else if (pt.pointName == "DailyPowerGeneration") { this.dailyPowerGeneration = pt.value.toFixed(2); } else if (pt.pointName == "GridPower") { this.gridPower = pt.value.toFixed(2); } else if (pt.pointName == "MonthlyPowerGeneration") { this.monthlyPowerGeneration = pt.value.toFixed(2); } else if (pt.pointName == "AnnualPowerGeneration") { this.annualPowerGeneration = pt.value.toFixed(2); } } }, /* 登录 */ login() { var bd = BackgroundData.getInstance(); this.loginMessage='正在登录...'; bd.login(this.form.name,this.form.psd,this.onLoged); }, onLoged(msg){ if(!msg.data){ this.loginMessage=msg; return; } var user = msg.data; if(!user.isValid){ this.loginMessage=user.message; return; } BackgroundData.getInstance().LoginUser=user; this.usreName=user.name; this.dialogVisible = false; this.loginMessage=''; this.form.name=this.form.psd=''; }, /* 用户点击 */ userClick() { this.dialogVisible = true; }, }, }; </script> <style scoped> .title-bar { height: 6vh; background-color: #000000; margin-top: 0; margin-right: 0; margin-left: 0; } .logo { position: relative; top: 33%; } .titleinfo { background-color: rgb(20, 20, 20); height: auto; padding: 13px; border-radius: 6px; margin-top: 5px; margin-bottom: 5px; margin-left: -9px; } .closeButton { font-size: 30px; color: white; background: rgb(41, 41, 41); width: 44px; height: 44px; border-radius: 8px; border: none; } </style>