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="734"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="实时功率"
                unit="MW"
                value="34.01"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="日发电量"
                unit="kWh"
                value="33,96"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="上网电量"
                unit="kWh"
                value="38.96"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="月发电量"
                unit="kWh"
                value="6197.87"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="年发电量"
                unit="kWh"
                value="69843.02"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="月利用小时"
                unit="小时"
                value="84.44"
              ></TitleBarCard>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="2.3">
        <div class="titleinfo">
          <ul>
            <li>
              <TitleBarCard
                title="年利用小时"
                unit="小时"
                value="951.54"
              ></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";

export default {
  name: "TitleBar",
  components: {
    TitleBarCard,
  },
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    mainClose() {
      //remote.getCurrentWindow().close();
    }
  }
};
</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>