系统维护和系统设置

heyujie

2021-04-29 18dfd3d183e68db6306b34500813cca8f8c689c9

 src/pages/systemSettings/index/App.vue

@@ -22,6 +22,8 @@
            class="account-card"
            v-for="(item, index) in accountArr"
            :key="index"
            ref="account-card"
            @click="openAccount(item, index)"
          >
            <div class="touxiang">
              <img src="" alt="" />
@@ -64,14 +66,35 @@
      v-if="activePage == '账户' || activePage == '日期时间'"
    >
      <div class="account-right" v-if="activePage == '账户'">
        <div class="account-content" v-if="inAccountDetail == false">
        <div
          class="account-content"
          v-if="inAccountDetail == false && isAddAccount == false"
        >
          <div class="content-top">
            <div class="touxiang-big"></div>
            <div class="user-desc">
              <div class="username">飞利浦</div>
              <div class="username">
                <span class="icon iconfont" style="margin-right: 5px"
                  >&#xe690;</span
                >

                <span>飞利浦</span>
              </div>
              <div class="nickname">
                <span>兔兔</span>
                <span class="icon iconfont">&#xe60c;</span>
                <span>昵称：</span>
                <span v-show="!showInputNickName">{{ inputNickName }}</span>
                <input
                  type="text"
                  class="input-nick"
                  ref="input-nick"
                  v-show="showInputNickName"
                  v-model="inputNickName"
                  @blur="hideInputNick"
                  @keydown.enter="hideInputNick"
                />
                <span class="icon iconfont" @click="editNickName"
                  >&#xe60c;</span
                >
              </div>
            </div>
          </div>
@@ -85,26 +108,38 @@
        <div class="change-pw" v-if="inAccountDetail && isChangePw">
          <div class="title">修改密码</div>

          <div class="p-title">当前密码：</div>
          <el-form
            :model="passwordForm"
            :rules="rules"
            ref="passwordForm"
            class="password-form"
          >
            <el-form-item>
              <div class="p-title">当前密码：</div>

          <el-input
            placeholder="必填"
            v-model="input1"
            show-password
          ></el-input>
          <div class="p-title">新密码：</div>
          <el-input
            placeholder="必填"
            v-model="input2"
            show-password
          ></el-input>
          <div class="p-title">确认密码：</div>
          <el-input
            placeholder="必填"
            v-model="input3"
            show-password
          ></el-input>

              <el-input
                placeholder="必填"
                v-model="passwordForm.curPassword"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="p-title">新密码：</div>
              <el-input
                placeholder="必填"
                v-model="passwordForm.newPassword"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <div class="p-title">确认密码：</div>
              <el-input
                placeholder="必填"
                v-model="passwordForm.confirmPassword"
                show-password
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="btns">
            <div class="cancel" @click="cancelChangePassword">取消</div>
            <div class="ok">保存</div>
@@ -142,7 +177,7 @@
          </div>
        </div>

        <div class="add-account-page" v-if="inAccountDetail && isAddAccount">
        <div class="add-account-page" v-if="isAddAccount">
          <div class="title">添加账户</div>
          <div class="upload-group">
            <div
@@ -150,7 +185,7 @@
              v-for="(item, index) in jpgArr"
              :key="index"
            ></div>
            <div
            <!-- <div
              class="upload-jpg"
              style="height: 0px; visibility: hidden"
            ></div>
@@ -165,33 +200,47 @@
            <div
              class="upload-jpg"
              style="height: 0px; visibility: hidden"
            ></div>
            ></div> -->
          </div>
          <div class="fill-group">
            <div class="p-title">用户名：</div>
            <el-input
              placeholder="必填"
              v-model="input1"
              show-password
            ></el-input>
            <div class="p-title">昵称</div>
            <el-input
              placeholder="选填"
              v-model="input2"
              show-password
            ></el-input>
            <div class="p-title">密码：</div>
            <el-input
              placeholder="必填"
              v-model="input3"
              show-password
            ></el-input>
            <div class="p-title">确认密码：</div>
            <el-input
              placeholder="必填"
              v-model="input3"
              show-password
            ></el-input>
            <el-form
              :model="addForm"
              :rules="rules"
              ref="addForm"
              class="add-form"
            >
              <el-form-item>
                <div class="p-title">用户名：</div>

                <el-input
                  placeholder="必填"
                  v-model="addForm.userName"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div class="p-title">昵称：</div>
                <el-input
                  placeholder="必填"
                  v-model="addForm.nickName"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div class="p-title">密码：</div>
                <el-input
                  placeholder="必填"
                  v-model="addForm.password"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item>
                <div class="p-title">确认密码：</div>
                <el-input
                  placeholder="必填"
                  v-model="addForm.confirmPassword"
                  show-password
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btns">
            <div class="cancel" @click="cancelAdd">取消</div>
@@ -337,31 +386,39 @@
          </div>
          <div class="adjust-bar">
            <div class="minus" @click="minusOne('mth')">-</div>
            <div class="middle">

                 <span v-show="!showMonthInput">{{ syncMonth }}</span>
            <div class="middle" @click="showInput('Month')">
              <span v-show="!showMonthInput">{{ syncMonth }}</span>
              <input
                class="input-box"
                v-show="showMonthInput"
                ref="iptYrs"
                oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4);"
                ref="iptMonth"
                oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>12)value='12'"
                type="text"
                v-model="inputMonth"
                @blur="hideInput('Month')"
                @keydown.enter="hideInput('Month')"
              />
              月


            </div>



            <div class="plus" @click="plusOne('mth')">+</div>
          </div>
          <div class="adjust-bar">
            <div class="minus" @click="minusOne('day')">-</div>
            <div class="middle">{{ syncDay }} 日</div>
            <div class="middle" @click="showInput('Day')">
              <span v-show="!showDayInput">{{ syncDay }}</span>
              <input
                class="input-box"
                v-show="showDayInput"
                ref="iptDay"
                oninput="value=value.replace(/[^\d]/g,'');if(value.length>2)value=value.slice(0,2);if(+value>31)value='31'"
                type="text"
                v-model="inputDay"
                @blur="hideInput('Day')"
                @keydown.enter="hideInput('Day')"
              />
              日
            </div>
            <div class="plus" @click="plusOne('day')">+</div>
          </div>
        </div>
@@ -437,10 +494,13 @@
      browserTimer: null,
      timezone: "",
      isRealtime: false,
      inputNickName: "兔兔",
      showHourInput: false,
      showMinInput: false,
      showSecInput: false,
      showYrsInput: false,
      showMonthInput: false,
      showDayInput: false,

      timestamp: 0,
      inAccountDetail: false,
@@ -473,6 +533,21 @@
      inputMin: "",
      inputSec: "",
      inputYrs: "",
      showInputNickName: false,
      inputMonth: "",
      inputDay: "",
      passwordForm: {
        curPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      activeAccount: 0,
      addForm: {
        userName: "",
        nickName: "",
        password: "",
        confirmPassword: "",
      },
    };
  },
  beforeDestroy() {
@@ -490,6 +565,22 @@
    });
  },
  methods: {
    editNickName() {
      this.showInputNickName = true;
      this.$refs["input-nick"].focus();
    },
    hideInputNick() {
      this.showInputNickName = false;
    },
    openAccount(item, i) {
      this.$refs[`account-card`].forEach((x) => {
        x.style.backgroundColor = "rgba(248, 248, 248, 1)";
        x.style.color = "#2c3e50";
      });
      this.$refs[`account-card`][i].style.backgroundColor =
        "rgba(61, 104, 225, 1)";
      this.$refs[`account-card`][i].style.color = "#fff";
    },
    minusOne(typ) {
      this.isSyncBrowser = false;
      this.syncBrowser(false);
@@ -602,6 +693,7 @@
      }
    },
    submitClock() {
      debugger;
      if (this.syncType === "1") {
        if (this.ntpServer === "") {
          this.$notify({
@@ -612,7 +704,7 @@
        } else if (this.timeInterval === "") {
          this.timeInterval = 1;
        }
      } else {
      } else if (this.isSyncBrowser) {
        if (this.settime === "") {
          this.$notify({
            type: "error",
@@ -620,6 +712,8 @@
          });
          return false;
        }
      } else {
        this.settime = `${this.syncYrs}-${this.syncMonth}-${this.syncDay} ${this.syncHour}:${this.syncMin}:${this.syncSec}`;
      }
      let requestBody = {
        timeZone: this.timezone,
@@ -727,7 +821,7 @@
    },
    openChangePw() {},
    showAddAccount() {
      this.inAccountDetail = true;
      this.inAccountDetail = false;
      this.isAddAccount = true;
    },
    cancelAdd() {
@@ -803,11 +897,9 @@
      this.isNtp = !v;
      v && (this.syncType = "2");
      if (v) {
        [
          this.syncYrs,
          this.syncMonth,
          this.syncDay,
        ] = this.equipmentDate.split("-");
        [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
          "-"
        );
        [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
          ":"
        );
@@ -867,32 +959,38 @@
    border-right: 5px solid rgba(248, 248, 248, 1);
    box-sizing: border-box;
    .account-left {
      .account-list {
        height: 530px;
      }
  
      .add-account {
        color: rgba(61, 104, 225, 1);
        margin-top: 50px;

        .iconfont {
          cursor: pointer;
          font-size: 30px;
          font-size: 32px;
        }
      }
      .account-card {
        height: 40px;
        background-color: goldenrod;
        height: 50px;
        background-color: rgba(248, 248, 248, 1);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
        border-radius: 10px;
        cursor: pointer;
        .touxiang {
          height: 30px;
          width: 30px;
          background-color: green;
          height: 35px;
          width: 35px;
          background-color: bisque;
          border-radius: 17.5px;
        }
        .user-name {
          margin-left: 10px;
          font-size: 14px;
        }
      }
  
    }
    .datetime-left {
      .time-card {
@@ -953,28 +1051,46 @@
    .account-right {
      .account-content {
        .content-top {
          height: 150px;
          background-color: antiquewhite;
          height: 120px;
          width: 350px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          .touxiang-big {
            width: 100px;
            height: 100px;
            background-color: indigo;
            background-color: bisque;
            border-radius: 50px;
          }
          .user-desc {
            background-color: khaki;
            height: 100px;
            width: 150px;
            display: flex;
            flex-direction: column;
            align-items: baseline;
            min-width: 200px;
            .username {
              margin: 5px 15px;
              height: 30px;
              line-height: 30px;
              width: 90px;
              text-align: left;
              font-size: 15px;
              display: flex;
              align-items: center;
            }
            .nickname {
              margin: 5px 15px;
              font-size: 14px;
              .input-nick {
                width: 50px;
                margin-right: 5px;
              }
              .iconfont {
                font-size: 14px;
                margin-left: 5px;
              }
            }
          }
        }
@@ -985,15 +1101,56 @@
          align-items: center;
          .item-btn {
            width: 500px;
            height: 50px;
            background-color: rgba(240, 240, 240, 1);
            margin-bottom: 10px;
            height: 45px;
            background-color: #f0f0f0;
            margin-bottom: 15px;
            border-radius: 10px;
            line-height: 45px;
            font-size: 15px;
            cursor: pointer;
          }
          .item-btn:hover {
            color: rgba(255, 153, 102, 1);
          }
        }
      }
      .title {
        height: 30px;
        line-height: 30px;
        /* background-color: aliceblue; */
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
      }
      .change-pw {
        .p-title {
          text-align: left;
          font-size: 15px;
          margin-top: 5px;
        }
      }
      .el-form-item {
        margin-bottom: 0;
        .el-input__inner {
          background-color: rgba(240, 240, 240, 1);
          border: none;
          border-radius: 12px;
          height: 45px;
          padding: 0 20px;
          font-size: 15px;
        }
        .el-input__clear {
          color: dimgray;
          font-size: 17px;
          line-height: 45px;
        }
        .el-input__suffix {
          right: 1px;
          top: -0.5px;
          width: 45px;
          // background-color: rgba(61, 104, 225, 1);
          /* color: white; */
          border-radius: 12px;
        }
      }
      .permission {
@@ -1013,17 +1170,21 @@
      }

      .add-account-page {
        background-color: lightcyan;
        padding: 10px 50px;
        // background-color: lightcyan;
        // padding: 10px 50px;
        .upload-group {
          background-color: lightgrey;
          height: 100px;
          display: flex;
          height: 120px;
          width: 350px;
          margin: 0 auto;
          overflow: hidden;
          .upload-jpg {
            height: 40px;
            width: 40px;
            background-color: lightcoral;
            height: 50px;
            width: 50px;
            float: left;
            margin: 0 10px;
            background-color: antiquewhite;
            margin-bottom: 20px;
            border-radius: 25px;
          }
        }
        .fill-group {
@@ -1219,18 +1380,18 @@
          .middle {
            font-size: 14px;
          }
           .input-box {
                width: 80px;
                border: none;
                border-radius: 5px;
                height: 25px;
                font-size: 18px;
                text-align: center;
              }
          .input-box {
            width: 80px;
            border: none;
            border-radius: 5px;
            height: 25px;
            font-size: 18px;
            text-align: center;
          }

              .input-box:focus {
                outline: none;
              }
          .input-box:focus {
            outline: none;
          }
          .minus {
            width: 50px;
            height: 50px;
@@ -1257,12 +1418,12 @@
    .btns {
      display: flex;
      justify-content: space-between;
      margin-top: 200px;
      margin-top: 20px;

      .cancel {
        height: 40px;
        width: 48%;

        cursor: pointer;
        border-radius: 8px;
        background-color: rgba(240, 240, 240, 1);
        line-height: 40px;
@@ -1271,7 +1432,7 @@
      .ok {
        height: 40px;
        width: 48%;

        cursor: pointer;
        border-radius: 8px;
        background-color: rgba(61, 104, 225, 1);
        color: #fff;