neic-hefeng/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"> </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>
        </div>
      </el-col>

      <el-col :span="19">
            <!-- <el-popover
          placement="bottom"
          :width="1416"
          trigger="hover"
          :show-arrow="false"
          offset="0"
        >
          <template #reference> -->
            <div class="titleinfoall">
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="装机容量"
                      unit="MW"
                      :value="installedCapacity"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="实时功率"
                      unit="MW"
                      :value="totalPower"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="日发电量"
                      unit="kWh"
                      :value="dailyPowerGeneration"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="上网电量"
                      unit="kWh"
                      :value="gridPower"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="月发电量"
                      unit="kWh"
                      :value="monthlyPowerGeneration"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="年发电量"
                      unit="kWh"
                      :value="annualPowerGeneration"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="月利用小时"
                      unit="小时"
                      :value="monthlyUtilizationHours"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
              <div class="titleinfo">
                <ul>
                  <li>
                    <TitleBarCard
                      title="年利用小时"
                      unit="小时"
                      :value="annualUtilizationHours"
                    ></TitleBarCard>
                  </li>
                </ul>
              </div>
            </div>
          <!-- </template>

          <el-table
            :data="tableData"
            border
            border-color="rgb(36,36,36)"
            :header-cell-style="{
              background: 'Black',
              color: 'rgb(220,220,220)',
              'border-bottom':'solid 1px rgb(36,36,36)',
              fontSize:'14px',
              'padding-top':'7px',
              'padding-bottom':'7px'
            }"
            :cell-style="{ background: 'Black', color: 'rgb(220,220,220)','border-bottom':'solid 1px rgb(36,36,36)',fontSize:'14px','padding-top':'5px','padding-bottom':'5px'}"
            >
        <el-table-column
              align="center"
              prop="station"
              label="站点"
              width="80px">
          </el-table-column>
        <el-table-column
              align="center"
              prop="date"
              label="运行指标"
              width="120px">
            <el-table-column
              align="center"
              prop="date"
              label="日发电量(万kwh)"
              width="135px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="&ensp;平均风速(m/s)&ensp;日照强度(w/m²)"
              width="130px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="实时功率(MW)"
              width="120px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="AGC有功设定(MW)"
              width="150px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="理论功率(MW)"
              width="120px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="预测功率(MW)"
              width="120px">
            </el-table-column>
        </el-table-column>
        
        <el-table-column
              align="center"
              prop="date"
              label="发电设备状态汇总"
              width="80px">
            <el-table-column
              align="center"
              prop="date"
              label="接入"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="运行"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="address"
              label="待机"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="维护"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="故障"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="限电"
              width="80px">
            </el-table-column>
            <el-table-column
              align="center"
              prop="name"
              label="离线"
              width="80px">
            </el-table-column>
        </el-table-column>
          </el-table> 

        </el-popover> -->
      </el-col>
      

      <el-col :span="1">
        <el-popover  placement="bottom" :width="150" trigger="hover" :show-arrow="false">
          <template #reference>
            <el-button @click="userClick" style="top: 10px; right: 70px; color: #ffffff; position: absolute;background-color:black;border:none;font-size:16px;">{{usreName}}</el-button>
          </template>
          <div style="background-color: #363636;">
            <!-- <el-button class="loginoption">编&emsp;辑</el-button>
            <br> -->
            <el-button v-if="!isLogin" class="loginoption" @click="userClick">登&emsp;录</el-button>
            <br v-if="!isLogin">
            <el-button v-if="isLogin" class="loginoption" @click="logout">注&emsp;销</el-button>
          </div>
        </el-popover>

        <!-- <div @click="userClick" 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 {
      dialogVisible: false,
      dialogFormVisible: false,
      isLogin:false,
      form: {
        name: "",
        psd: "",
      },
      usreName: "未登录...",
      loginMessage: "", // 登录提示
      formLabelWidth: "120px",
      totalPower: 0, // 实时功率
      dailyPowerGeneration: 0, // 日发电量
      gridPower: 0, // 上网电量
      monthlyPowerGeneration: 0, // 月发电量
      annualPowerGeneration: 0, // 年发电量
      installedCapacity: 734, // 装机容量
      tableData: [{
            station:'麻黄山',
          }, {
            station:'牛首山',
          }, {
            station:'青山',
          }, {
            station:'石板泉',
          }, {
            station:'香山',
          }, {
            station:'风场汇总',
          }, {
            station:'大武口',
          }, {
            station:'平罗',
          }, {
            station:'宣和',
          }, {
            station:'马场湖',
          }, {
            station:'海子井',
          }, {
            station:'光伏汇总',
          }
          ]
    };
  },
  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 = "";

      this.isLogin=true;
    },

    /* 用户点击 */
    userClick() {
      this.dialogVisible = true;
    },

    /* 用户注销 */
    logout(){
      BackgroundData.getInstance().LoginUser=null;
      this.usreName = '未登录...';
      this.isLogin=false;
    }
  },
};
</script>


<style scoped>
.loginoption{
  font-size:16px;
  width:150px;
  background-color: #292929;
  border:none;
  color:rgb(220,220,220);
}
.title-bar {
  height: 5vh;
  background-color: #000000;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}
.logo {
  position: relative;
  top: 32%;
  margin-left: 10px;
}
.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;
}
.titleinfoall{
  display: flex;;
}
</style>