project-neic/src/components/TitleBar.vue

/* 标题栏 */
<template>
  <div class="title-bar">
    <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="" :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.name"
                  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="dialogVisible = false"
                  >登 录</el-button
                >
              </span>
            </template>
          </el-dialog>
        </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 class="admin"  style="position: absolute;right: 70px;">
            <p>管理员</p>
          </div> -->
        <el-button
          type="text"
          @click="dialogVisible = true"
          class="admin"
          style="position: absolute; right: 66px"
          >管理员</el-button
        >
      </el-col>

      <el-col :span="1">
        <div style="margin-top: 7px; position: absolute; right: 10px">
          <button
            class="closeButton"
            style="
              font-size: 30px;
              color: white;
              background: rgb(41, 41, 41);
              width: 44px;
              height: 44px;
              border-radius: 8px;
              border: none;
            "
            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 {
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      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);
        }
      }
    },
  },
};
</script>


<style scoped>
.title-bar {
  height: 6vh;
  background-color: #000000;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}
.logo {
  position: relative;
  top: 33%;
}
.admin {
  color: #ffffff;
  position: relative;
  /* margin-left: 10px;
  padding: 0; */
  padding: 22px;
}
.titleinfo {
  background-color: rgb(20, 20, 20);
  height: auto;
  padding: 13px;
  border-radius: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: -9px;
}
</style>