系统维护和系统设置

heyujie

2021-04-29 18dfd3d183e68db6306b34500813cca8f8c689c9

 src/pages/systemSettings/views/generalSettings.vue

@@ -16,54 +16,100 @@
        <div class="lang" v-if="activePage == 'basic'">

          <div class="bar" v-for="(item, i) in basioInfoList" :key="i">

            <span class="name">{{ item.name }}</span>

            <span class="name">{{ item.desc }}</span>

            <span class="desc">{{ item.desc }}</span>

          </div>

        </div>

        <div class="lang" v-if="activePage == 'video'">

          <div class="min-dur">

            <div class="title">视频截取最短时长</div>

            <div class="entity">

              <div class="sec">{{ alarmConf.min_video_len }} s</div>

              <div class="sec">{{ alarmConf.min_video_len }}s</div>

              <div class="block">

                <el-slider

                  v-model="alarmConf.min_video_len"

                  id="cut_min_duration"

                  :min="0"

                  :max="100"

                  show-input

                  :show-tooltip="false"

                >

                </el-slider>

              </div>

              <el-input-number

                v-model="alarmConf.min_video_len"

                controls-position="right"

                :min="0"

                :max="100"

                size="mini"

              ></el-input-number>

              &nbsp;s

            </div>

          </div>

          <div class="min-dur">

            <div class="title">视频截取最长时长</div>

            <div class="entity">

              <div class="sec">{{ alarmConf.max_video_len }} s</div>

              <div class="sec">{{ alarmConf.max_video_len }}s</div>

              <div class="block">

                <el-slider

                  v-model="alarmConf.max_video_len"

                  id="cut_max_duration"

                  :min="0"

                  :max="100"

                  show-input

                  :show-tooltip="false"

                >

                </el-slider>

              </div>

              <el-input-number

                v-model="alarmConf.max_video_len"

                controls-position="right"

                :min="0"

                :max="100"

                size="mini"

              ></el-input-number>

              &nbsp;s

            </div>

          </div>



          <div class="save-btn" @click="submitAlarm">保存</div>

        </div>

        <div class="lang" v-if="activePage == 'sound'">

            <div class="title">事件声音</div>

          <div class="bar" v-for="(item, i) in keyboardList" :key="i">

            <span class="name">

              <span class="icon iconfont">&#xe646;</span>{{ item.name }}</span

            >

          <div class="title">事件声音</div>

          <div

            class="bar"

            v-for="(item, i) in soundList"

            :key="i"

            @click="clickSound(item, i)"

            ref="soundBar"

          >

            <div class="left-part">

              <span class="icon iconfont">&#xe646;</span>

              <span class="name"> {{ item.name }}</span>

            </div>

            <div class="btns">

              <span class="icon iconfont">&#xe646;</span>

              <span class="icon iconfont">&#xe646;</span>

            </div>

          </div>

        <div class="add-group">

  <el-upload

            class="upload-demo"

            drag

            action="https://jsonplaceholder.typicode.com/posts/"

            multiple

            v-show="showUpload"

          >

            <i class="el-icon-upload"></i>

            <div class="el-upload__text">

              事件声音文件拖到此处，或<em>点击上传</em> <br />

              仅支持mp3/wma等格式

            </div>

          </el-upload>

          <div             v-show="!showUpload"

></div>

          <div class="add-btn">

            <span class="icon iconfont" @click="showUpload=!showUpload">&#xe646;</span>

          </div>



        </div>

        </div>

      </div>

    </div>

@@ -71,22 +117,8 @@
</template>



<script>

import {

  createSerfCluster,

  randomPwd,

  search,

  getSearchNodes,

  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

import { saveAlarmConfig } from "@/api/system";



import cloudNode from "../components/CloudNode";

import ipInput from "@/components/subComponents/IPInput";

import { isIPv4 } from "@/scripts/validate";

@@ -123,6 +155,7 @@
      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {},

      showUpload:false,

      alarmConf: {

        min_video_len: 0,

        max_video_len: 0,

@@ -132,7 +165,7 @@
        { name: "英文", desc: "fesF" },

        { name: "繁体中文（香港）", desc: "fesF" },

      ],

      keyboardList: [{ name: "Hanyu Pinyin(algtr)" }, { name: "ENG" }],

      soundList: [{ name: "2.mp3" }, { name: "3.mp3" }],



      wireFormRules: {},

      activePage: "basic",

@@ -177,6 +210,23 @@
    checkWire(item) {

      this.inWireDetail = true;

    },

    clickSound(item, i) {

      this.$refs["soundBar"].forEach((x) => {

        x.style.backgroundColor = "rgba(248, 248, 248, 1)";

      });

      this.$refs["soundBar"][i].style.backgroundColor =

        "rgba(233, 233, 233, 1)";

    },

    submitAlarm() {

      saveAlarmConfig(this.alarmConf).then((res) => {

        if (res && res.success) {

          this.$notify({

            type: "success",

            message: "保存成功",

          });

        }

      });

    },

  },

};

</script>

@@ -194,12 +244,14 @@
  box-sizing: border-box;

  .cluster-center {

    height: 100%;

    width: 260px;

    width: 280px;

    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;

    background-color: lavender;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {

      background-color: #f8f8f8;

      height: 40px;

@@ -254,32 +306,88 @@
      max-width: none !important;

    }

    .lang {

      .title {

        height: 35px;

        line-height: 35px;

        font-size: 16px;

        text-align: left;

        margin-bottom: 5px;

      }

      .bar {

        height: 50px;

        background-color: aliceblue;

        background-color: rgba(248, 248, 248, 1);

        border-radius: 10px;

        line-height: 50px;

        box-sizing: border-box;

        padding: 0 20px;

        padding: 0 30px 0 20px;

        display: flex;

        justify-content: space-between;

        margin-bottom: 10px;

        cursor: pointer;

        .left-part {

          .icon {

            color: rgba(191, 191, 191, 1);

            font-size: 16px;

            margin-right: 5px;

          }

        }

        .name {

          font-size: 15px;

        }

        .btns {

          width: 50px;

          display: flex;

          justify-content: space-between;

          color: rgba(191, 191, 191, 1);

        }

        .desc {

          font-size: 14px;

          color: rgba(134, 134, 134, 1);

        }

      }

      .bar:hover {

        background-color: rgba(233, 233, 233, 1);

      }

      .add-group{

      margin-top: 170px;

    height: 235px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;



      }

      .upload-demo {

        .el-upload-dragger {

          width: 290px;

        }

      }

      .add-btn {

        height: 40px;

        line-height: 40px;

        margin-top: 10px;

        .icon {

          font-size: 30px;

          color: rgba(61, 104, 225, 1);

        }

      }

      .min-dur {

        box-sizing: border-box;

        padding: 0 10px;

        padding: 0 20px;

        background-color: rgba(248, 248, 248, 1);

        height: 100px;

        height: 95px;

        margin-bottom: 20px;

        border-radius: 15px;

        .title {

          height: 50px;

          line-height: 50px;

          height: 45px;

          line-height: 45px;



          text-align: left;

          box-sizing: border-box;

          padding: 0 10px;

          padding: 0 6px;

          font-size: 14px;

        }

      }



      .entity {

        display: flex;

        align-items: center;

@@ -288,10 +396,47 @@
        .sec {

          min-width: 30px;

          line-height: 80px;

          margin-right: 15px;

          margin-right: 10px;

          color: rgba(120, 120, 120, 1);

          font-size: 14px;

        }

        .block {

          flex: auto;

          flex: 1;

          margin: 0 20px 0 6px;

        }

        .el-input-number--mini {

          width: 80px;

        }

        .el-input-number.is-controls-right[class*="mini"] [class*="increase"],

        .el-input-number.is-controls-right[class*="mini"] [class*="decrease"] {

          width: 23px;

        }

        .el-input-number.is-controls-right .el-input__inner {

          padding-left: 13px;

          padding-right: 37px;

        }

        #cut_min_duration {

          .el-slider__bar {

            background-color: #3d68e1;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #3d68e1;

            box-sizing: border-box;

          }

        }



        #cut_max_duration {

          .el-slider__bar {

            background-color: #ff9e6e;

          }

          .el-slider__button-wrapper .el-tooltip {

            width: 18px;

            height: 18px;

            border: 4px solid #ff9e6e;

            box-sizing: border-box;

          }

        }

      }

    }