project-neic/src/components/TitleBar.vue

/* 标题栏 */
<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="密&emsp;码：" :label-width="formLabelWidth">
                <el-input
                  v-model="form.psd"
                  autocomplete="off"
                  type="text"
                  placeholder="密&emsp;码"
                  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>