问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/systemSettings/views/generalSettings.vue

@@ -11,57 +11,177 @@
        <div class="menu-item" @click="openRight('sound')">

          <div>事件声音</div>

        </div>

        <div class="menu-item" @click="openRight('personalise')">

          <div>个性化设置</div>

        </div>

      </div>

      <div class="cluster-right">

        <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>

          <div class="bar">

            <span class="name">设备ID</span>

            <span class="desc">{{ deviceInfo.server_id }}</span>

          </div>

          <div class="bar">

            <span class="name">设备型号</span>

            <span class="desc">{{ deviceInfo.deviceModel }}</span>

          </div>

          <div class="bar">

            <span class="name">设备类型</span>

            <span class="desc">{{ deviceInfo.deviceDesc }}</span>

          </div>

          <div class="bar">

            <span class="name">通道个数</span>

            <span class="desc">{{ deviceInfo.channelCount }}</span>

          </div>

          <div class="bar">

            <span class="name">主控版本</span>

            <span class="desc">{{ deviceInfo.masterVersion }}</span>

          </div>

          <div class="bar">

            <span class="name">web版本</span>

            <span class="desc">{{ deviceInfo.webVersion }}</span>

          </div>

          <div class="bar">

            <span class="name">硬盘信息</span>

            <span class="desc">{{ deviceInfo.disks }}</span>

          </div>

          <div class="bar">

            <span class="name">CPU</span>

            <span class="desc">{{ deviceInfo.cpu }}</span>

          </div>

          <div class="bar">

            <span class="name">内存</span>

            <span class="desc">{{ deviceInfo.memory }}</span>

          </div>

          <div class="bar">

            <span class="name">运行时间</span>

            <span class="desc">{{ deviceInfo.runningTime }}</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

                >

                </el-slider>

                  :show-tooltip="false"

                ></el-slider>

              </div>

              &nbsp;s

              <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

                >

                </el-slider>

                  :show-tooltip="false"

                ></el-slider>

              </div>

              &nbsp;s

              <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 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" @click="removeSound(item)">&#xe646;</span>

            </div>

          </div>

          <div class="add-group">

            <el-upload

              class="upload-demo"

              drag

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

              :http-request="uploadSound"

              v-show="showUpload"

              :show-file-list="false"

            >

              <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 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="btns">

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

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



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

          <div class="title">图标主题</div>



          <div class="min-dur" style="cursor:pointer;" @click="selectIcons(0)">

            <div class="title">扁平写实图标</div>

            <div class="entity">

              <div

                class="entity-img"

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

                :key="i"

              ></div>

            </div>

          </div>

          <div class="min-dur" style="cursor:pointer;" @click="selectIcons(1)">

            <div class="title">扁平化图标</div>

            <div class="entity">

              <div

                class="entity-img"

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

                :key="i"

              ></div>

            </div>

          </div>

          <div class="title">桌面背景主题</div>

          <div class="min-dur" style="padding-top:25px;">

            <div class="bg-list">

              <div

                class="bg-img"

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

                :key="i"

              ></div>

            </div>

          </div>

        </div>

@@ -71,104 +191,99 @@
</template>



<script>

import {

  createSerfCluster,

  randomPwd,

  search,

  getSearchNodes,

  stopSearching,

  findCluster,

  updateClusterName,

  joinCluster,

  leave,

  getVrrp,

  setVrrp,

  createESNode,

  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";

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

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

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

import { uploadSound, getSoundList ,deleteSound} from "@/api/event";

import config from "../../../../package.json";



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

import switchBar from "../components/switchBar";



export default {

  data() {

    const checkPwd = (rule, value, callback) => {

      if (!value) {

        return callback(new Error("密码不能为空"));

      }

      setTimeout(() => {

        if (value.length != 6) {

          callback(new Error("密码应为6位!"));

        } else {

          callback();

        }

      }, 1000);

    };

    return {

      isHighClass: false,



      ruleForm: {

        deviceName: "",

        port: "",

      },

      wifiForm: {

        name: "",

        password: "",

      },

      wireArr: [{ name: "有线网络1" }, { name: "有线网络2" }],

      inWifiDetail: false,

      wifiList: [{ name: "无线网络1" }, { name: "无线网络2" }],

      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {},

      showUpload: false,

      alarmConf: {

        min_video_len: 0,

        max_video_len: 0,

        min_video_len: 10,

        max_video_len: 15,

      },

      basioInfoList: [

        { name: "简体中文", desc: "fesF" },

        { name: "英文", desc: "fesF" },

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

      ],

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



      wireFormRules: {},

      soundList: [],

      activePage: "basic",

      rules: {

        deviceName: [

          { required: true, message: "请输入设备名称", trigger: "change" },

        ],

      deviceInfo: {

        cpu: "",

        runningTime: "",

        server_id: "",

        deviceModel: "",

        deviceDesc: "",

        masterVersion: "",

        channelCount: "",

        webVersion: "",

        disks: "",

        memory: "",

      },

      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      value: "",

      realIconList: [{}, {}, {}],

      flatIconList: [{}, {}, {}],

      tableBGList: [{}, {}, {}],

    };

  },

  components: {

    cloudNode,

    ipInput,

    switchBar,

  mounted() {

    this.getDeviceInfo();

        this.getSounds();



  },

  mounted() {},

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    getDeviceInfo() {

      getDevInfo().then((res) => {

        let info = res.data.deviceInfo;

        let basic = res.data;

        this.deviceInfo.cpu = info.cpu[0].modelName;

        this.deviceInfo.runningTime = this.secondsFormat(info.host.uptime);

        this.deviceInfo.server_id = basic.server_id;

        this.deviceInfo.deviceModel = basic.deviceModel;

        this.deviceInfo.deviceDesc = basic.deviceDesc;

        this.deviceInfo.masterVersion = basic.masterVersion;

        this.deviceInfo.channelCount = basic.channelCount;

        this.deviceInfo.webVersion = "V" + config.version;

        this.deviceInfo.disks = "( " + info.disk + ") ";

        this.deviceInfo.memory =

          (info.mem.total / 1024 / 1024 / 1024).toFixed(2) + "GB";

        this.alarmConf.min_video_len = basic.min_video_len

        this.alarmConf.max_video_len = basic.max_video_len

      });

    },



    getSounds() {

      getSoundList()

        .then((res) => {

          if (res.success) {

            this.soundList = res.data;

          }

        })

        .catch((e) => console.log(e));

    },

    secondsFormat(s) {

      var day = (s / (24 * 3600)) | 0;

      var hour = ((s - day * 24 * 3600) / 3600) | 0;

      var minute = ((s - day * 24 * 3600 - hour * 3600) / 60) | 0;

      var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;

      return day + "天 " + hour + "小时 " + minute + "分 " + second + "秒";

    },

    uploadSound(params) {

      let param = new FormData();

      param.append("file", params.file);

      uploadSound(param).then((res) => {

        console.log(res.data);

        this.getSounds();

      });

    },

    openRight(typ) {

      this.activePage = typ;

      // if (typ == "sound") {

      //   this.getSounds();

      // }

    },

    wifiControl(val) {},

    checkWifi() {

@@ -176,6 +291,48 @@
    },

    checkWire(item) {

      this.inWireDetail = true;

    },

    selectIcons(typ){



    },

    removeSound(item){

      this.$confirm('您是否确认删除事件声音', '删除事件声音', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          deleteSound({

            id:item.id

          }).then((res) => {

            if (res.success) {

              this.getSounds()

               this.$message({

                  type: 'success',

                  message: '删除成功!'

                });

                this.showUpload=false

            }

          },err=>{

            this.$message.error(err.msg)

          })

        })

    },

    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: "保存成功",

          });

        }

      });

    },

  },

};

@@ -194,12 +351,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 +413,90 @@
      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: 50px;

        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: 105px;

        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;

        }

      }



      .min-dur:hover {

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

      }



      .entity {

        display: flex;

        align-items: center;

@@ -288,10 +505,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;

          }

        }

      }

    }

@@ -307,5 +561,29 @@
      margin-top: 20px;

    }

  }



  .lang {

    .min-dur {

      .bg-list {

        display: flex;

        .bg-img {

          background-color: aquamarine;

          width: 100px;

          height: 60px;

          margin-right: 10px;

        }

      }

      .entity {

        display: flex;



        .entity-img {

          background-color: aquamarine;

          width: 50px;

          height: 50px;

          margin-right: 10px;

        }

      }

    }

  }

}

</style>