shanxi_control/src/views/TitleBar.vue

/* 标题栏 */
<template>
    <div class="title-bar" onselectstart="return false">
        <el-row>
            <el-col :span="3">
                <img
                class="logo"
                src="../assets/img/main_window/logo.png"
                sytle="align-items"
                />
            </el-col>
            <el-col :span="0.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="" 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" style="margin-left: 90px">
                <div class="titleinfoall">
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.dailyPowerGeneration, '日发电量')">
                        <span class="showTitle fontSty1">日发电量:</span>
                        <span class="showvalue">{{
                            titleInfo.dailyPowerGeneration?.value?.toFixed(2)
                        }}</span>
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossFault, '故障损失')" >
                        <span class="showTitle fontSty1">故障损失:</span>
                        <span
                        :class="
                            titleInfo.powerLossFault
                            ? titleInfo.powerLossFault.trend === 'Counterpoise'
                                ? 'showvalue'
                                : titleInfo.powerLossFault.trend === 'Rise'
                                ? 'showvalue-up'
                                : 'showvalue-down'
                            : ''
                        "
                        >{{ titleInfo.powerLossFault?.value.toFixed(2) }}</span
                        >
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossRestrictions, '限电损失')" >
                        <span class="showTitle fontSty1">限电损失:</span>
                        <span
                        :class="
                            titleInfo.powerLossRestrictions
                            ? titleInfo.powerLossRestrictions.trend === 'Counterpoise'
                                ? 'showvalue'
                                : titleInfo.powerLossRestrictions.trend === 'Rise'
                                ? 'showvalue-up'
                                : 'showvalue-down'
                            : ''
                        "
                        >{{ titleInfo.powerLossRestrictions?.value.toFixed(2) }}</span
                        >
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossInspection, '检修损失')" >
                        <span class="showTitle fontSty1">检修损失:</span>
                        <span
                        :class="
                            titleInfo.powerLossInspection
                            ? titleInfo.powerLossInspection.trend === 'Counterpoise'
                                ? 'showvalue'
                                : titleInfo.powerLossInspection.trend === 'Rise'
                                ? 'showvalue-up'
                                : 'showvalue-down'
                            : ''
                        "
                        >{{ titleInfo.powerLossInspection?.value.toFixed(2) }}</span
                        >
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossBurden, '受累损失')" >
                        <span class="showTitle fontSty1">受累损失:</span>
                        <span
                        :class="
                            titleInfo.powerLossBurden
                            ? titleInfo.powerLossBurden.trend === 'Counterpoise'
                                ? 'showvalue'
                                : titleInfo.powerLossBurden.trend === 'Rise'
                                ? 'showvalue-up'
                                : 'showvalue-down'
                            : ''
                        "
                        >{{ titleInfo.powerLossBurden?.value.toFixed(2) }}</span
                        >
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo" @dblclick="dbClicks(titleInfo.powerLossPerformance, '性能损失')" >
                        <span class="showTitle fontSty1">性能损失:</span>
                        <span
                            :class="
                            titleInfo.powerLossPerformance
                                ? titleInfo.powerLossPerformance.trend === 'Counterpoise'
                                ? 'showvalue'
                                : titleInfo.powerLossPerformance.trend === 'Rise'
                                ? 'showvalue-up'
                                : 'showvalue-down'
                                : ''
                            "
                            >{{ titleInfo.powerLossPerformance?.value.toFixed(2) }}</span
                        >
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                    <div class="titleinfo"  @dblclick="dbClicks(titleInfo.fieldElectricity, '场用电量')">
                        <span class="showTitle fontSty1">场用电量:</span>
                        <span class="showvalue">{{
                        titleInfo.fieldElectricity?.value.toFixed(2)
                        }}</span>
                        <span class="showTitle fontSty">万kW/h</span>
                    </div>
                </div>
            </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> -->
                    <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 style="top: 7px; position: absolute; right: 10px">
                    <button class="closeButton" v-on:click="mainClose">×</button>
                </div>
            </el-col>
        </el-row>
        <DataDetails
        @closed="closeds()"
        v-model="display"
        :datas="titleDetails"
        :partsName="partsName"
        echartsId="titleEcharts"
        @search-data="search"
        @original-data="originalData"
        ></DataDetails>
    </div>
</template>

<script>
import BackgroundData from "utils/BackgroundData";
import MessageBridge from "utils/MessageBridge";
import DataDetails from "components/basicDataDetails.vue";
import api from "api/index";
import dayjs from "dayjs";
export default {
  name: "TitleBar",
  components: {
    DataDetails,
  },
  data() {
    return {
      dialogVisible: false,
      dialogFormVisible: false,
      isLogin: false,
      form: {
        name: "",
        psd: "",
      },
      partsName: "",
      titleDetails: [],
      titleInfo: {},
      modelData: {},
      usreName: "未登录...",
      loginMessage: "", // 登录提示
      formLabelWidth: "120px",
      totalPower: 0, // 实时功率
      dailyPowerGeneration: 0, // 日发电量
      gridPower: 0, // 上网电量
      monthlyPowerGeneration: 0, // 月发电量
      annualPowerGeneration: 0, // 年发电量
      installedCapacity: 734, // 装机容量
      display: false,
      interval: 60,
      intervals: null,
    };
  },
  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);
    if (
      sessionStorage.getItem("ms_username") &&
      sessionStorage.getItem("ms_password")
    ) {
      this.form.name = sessionStorage.getItem("ms_username");
      this.form.psd = sessionStorage.getItem("ms_password");
      this.login();
    }
    this.titleInfos();
    this.intervals = setInterval(this.titleInfos, 10000);
  },
  methods: {
    titleInfos() {
      api.stationOverview().then((res) => {
        this.titleInfo = res.data;
        this.$store.commit("titleInfo", this.titleInfo);
      });
    },
    handleClose(done) {
      done();
    },
    mainClose() {
      const { remote } = require("electron");
      remote.getCurrentWindow().destroy();
      // remote.getCurrentWindow().minimize();
    },
    // refreshData() {
    //   // todo 计算发电量的时候没有考虑光伏的，后续完善
    //   let bd = BackgroundData.getInstance();
    //   let val = bd.TopPoint;
    //   for (let v in val) {
    //     let 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() {
      // let bd = BackgroundData.getInstance();
      //   this.loginMessage='正在登录...';
      // bd.login(this.form.name,this.form.psd,this.onLoged);
      api
        .login({
          username: this.form.name,
          password: this.form.psd,
        })
        .then((res) => {
          if (res) {
            this.onLoged(res);
          }
        });
      // api.login(this.form.name,this.form.psd,'11').then(res => {
      //   if (res) {
      //     this.onLoged(res)
      //   }
      // })
    },

    onLoged(msg) {
      if (msg.status === 401) {
        this.loginMessage = msg.message;
        return;
      }
      sessionStorage.setItem("ms_username", this.form.name);
      sessionStorage.setItem("ms_password", this.form.psd);
      let user = msg.data;
      this.$store.commit("token", user.token);

      BackgroundData.getInstance().LoginUser = user;
      this.usreName = user.name;
      this.dialogVisible = false;
      this.loginMessage = "";
      this.form.name = this.form.psd = "";
      this.isLogin = true;
    },

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

    /* 用户注销 */
    logout() {
      BackgroundData.getInstance().LoginUser = null;
      this.usreName = "未登录...";
      this.isLogin = false;
    },
    dbClicks(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      api
        .getPower({
          tagName: data.tag,
          startTs: startTs,
          endTs: endTs,
          interval: this.interval,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.partsName = partsName;
            this.display = true;
            this.titleDetails = res.data;
          } else {
            this.titleDetails = [];
          }
        });
    },
    original(data, partsName, timeValues) {
      this.modelData = data;
      let date = new Date();
      let endTs = timeValues
        ? timeValues[1] > date.getTime()
          ? date.getTime()
          : timeValues[1]
        : date.getTime();
      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
      api
        .getOriginalPower({
          tagName: data.tag,
          startTs: startTs,
          endTs: endTs,
        })
        .then((res) => {
          if (res.data.length > 0) {
            this.partsName = partsName;
            this.display = true;
            this.titleDetails = res.data;
          } else {
            this.titleDetails = [];
          }
        });
    },
    search(values, interval) {
      this.interval = interval;
      this.dbClicks(this.modelData, this.partsName, values);
    },
    originalData(values) {
      this.original(this.modelData, this.partsName, values);
    },
    closeds() {
      this.display = false;
      this.interval = 60;
    },
  },
  unmounted() {
    clearInterval(this.intervals);
    this.intervals = null;
  },
};
</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: #141414;
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
}

.logo {
  position: relative;
  top: 32%;
  margin-left: 30px;
}

.titleinfo {
  background-color: rgb(20, 20, 20);
  height: auto;
  width: auto;
  padding: 13px 8px;
  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;
}

.showTitle {
  color: #ffffff;
  margin-right: 10px;
}
.fontSty{
    font-size: 12px;
}
.fontSty1{
    font-weight: bold;;
}

.showvalue {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.showvalue-down {
  color: #50ae56;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}

.showvalue-up {
  color: red;
  font-size: 14px;
  font-weight: bold;
  margin-right: 10px;
}
</style>