添加关注bug

heyujie

2021-06-25 e8d850f8559ccd386689576961676fc924bc5421

添加关注bug

 src/api/event.ts

@@ -78,6 +78,16 @@
  })
}


export const uploadSound = (data: any) => {
  return request({
    url: "/data/api-v/voice/upload",
    method: "post",
    data
  })
}


//获取所有的推送字段配置
export const getPushSet = ()=>{
  return request({

 src/api/shuohuang.ts

@@ -24,9 +24,9 @@
    method: 'get'
  })

export const updateVideoAnalyze = (data: any) =>
export const updateFollow = (data: any) =>
  request({
    url: '/data/api-c/lkg/update',
    url: '/data/api-c/lkg/updateFollow',
    method: 'post',
    data
  })

 src/api/system.ts

@@ -147,7 +147,7 @@
  return request({
    url: "/data/api-v/sysset/getNetWorkCards",
    method: "get",
    data: (query)
    data: query
  });
};
export const setNetWorkCard = (query: any) => {
@@ -158,6 +158,37 @@
  });
};

export const getLangs = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getLangs",
    method: "get",
    data: query
  });
};
export const getLang = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getLang",
    method: "get",
    data: query
  });
};


export const getKeyboardLayouts = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getKeyboardLayouts",
    method: "get",
    data: query
  });
};
export const setLang = (query: any) => {
  return request({
    url: "/data/api-v/sysset/setLang",
    method: "post",
    data: qs.stringify(query)
  });
};

export const getNetWorkCardInfo = (query: any) => {
  return request({
    url: "/data/api-v/sysset/getNetWorkCardInfo",

 src/pages/maintain/views/generalSettings.vue

@@ -94,7 +94,7 @@
            class="upload-demo"

            drag

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

            multiple

              :http-request="uploadSound"

            v-show="showUpload"

          >

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

@@ -118,7 +118,7 @@


<script>

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



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

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

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

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

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

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

      ],

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



      soundList: [],

      wireFormRules: {},

      activePage: "basic",

      rules: {

@@ -174,20 +173,6 @@
          { required: true, message: "请输入设备名称", trigger: "change" },

        ],

      },

      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      value: "",

    };

  },

@@ -196,12 +181,37 @@
    ipInput,

    switchBar,

  },

  mounted() {},

  mounted() {

    debugger  
    // this.getSounds()

  },

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    getSounds() {

      getSoundList().then(res => {

        if (res.success) {

          this.soundList = res.data.list

          debugger

        }

      }).catch(

        e => console.log(e)

      )

    },

    uploadSound(params){



      let param = new FormData();

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

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

        console.log(res.data); 
      });

    },

    openRight(typ) {

      this.activePage = typ;

      debugger

      if (typ=="sound") {

        this.getSounds()

      }

    },

    wifiControl(val) {},

    checkWifi() {


 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -26,9 +26,15 @@
          v-show="!checkedConfigs.length"
          class="tip"
          style="padding-left: 5px; margin-top: 3px"
        >还未选择筛选条件</span>
        <div class="config-item" v-for="(config, index) in checkedConfigs" :key="index">
          <span class="title">{{ config.title }}</span>&nbsp;:
          >还未选择筛选条件</span
        >
        <div
          class="config-item"
          v-for="(config, index) in checkedConfigs"
          :key="index"
        >
          <span class="title">{{ config.title }}</span
          >&nbsp;:
          <span class="val" v-for="option in config.data" :key="option.id">
            <!-- <template>
              <div>
@@ -40,17 +46,25 @@
              <i>、</i>
            </span>
          </span>
          <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
          <i
            class="el-icon-close remove"
            @click="removeCheckedConfig(config)"
          ></i>
        </div>
        <el-button
          class="clear-config-btn"
          v-if="checkedConfigs.length"
          size="mini"
          @click="clearCheckedConfigs"
        >取消选择</el-button>
          >取消选择</el-button
        >
      </div>
      <div class="optional-config">
        <div class="config" v-for="(config, index) in optionalConfigs" :key="index">
        <div
          class="config"
          v-for="(config, index) in optionalConfigs"
          :key="index"
        >
          <template v-if="config.isShow">
            <div class="title">{{ config.title }}</div>
            <div class="options-wrap">
@@ -59,23 +73,41 @@
                :ref="'options' + config.id"
                :style="{ height: fixedOneLineHeight + 'px' }"
              >
                <div class="option" v-for="(option, index) in config.data" :key="index">
                <div
                  class="option"
                  v-for="(option, index) in config.data"
                  :key="index"
                >
                  <div v-show="config.isMultCheck">
                    <el-checkbox v-model="option.isChecked"></el-checkbox>
                    <span>{{ option.name }}</span>
                  </div>
                  <div v-show="!config.isMultCheck" @click="checkOption(config, option)">
                  <div
                    v-show="!config.isMultCheck"
                    @click="checkOption(config, option)"
                  >
                    <span>{{ option.name }}</span>
                  </div>
                </div>
              </div>
              <div class="btns text-center" v-show="config.isMultCheck">
                <el-button size="mini" @click="cancleMultCheck(config)">取消</el-button>
                <el-button size="mini" type="primary" @click="checkOption(config)">确定</el-button>
                <el-button size="mini" @click="cancleMultCheck(config)"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="checkOption(config)"
                  >确定</el-button
                >
              </div>
            </div>
            <div class="right-btns">
              <div class="more" v-if="config.showMore" @click="showMore(config)">
              <div
                class="more"
                v-if="config.showMore"
                @click="showMore(config)"
              >
                <span>更多</span>&nbsp;
                <i
                  :class="
@@ -98,7 +130,11 @@
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div>
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-submenu
                class="config-submenu"
                :popper-append-to-body="false"
@@ -113,7 +149,8 @@
                  :index="index + '-' + ind"
                  @click="checkOption(config, option)"
                  class="highlevel-option"
                >{{ option.name }}</el-menu-item>
                  >{{ option.name }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </div>
@@ -124,14 +161,22 @@
      <div class="header-bar clearfix">
        <div class="left">
          <div>
            <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
            <el-select
              v-model="IsFollow"
              size="mini"
              @change="filterSearchData"
            >
              <el-option value label="全部"></el-option>
              <el-option :value="false" label="未关注"></el-option>
              <el-option :value="true" label="已关注"></el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="IsOperate" size="mini" @change="filterSearchData">
            <el-select
              v-model="IsOperate"
              size="mini"
              @change="filterSearchData"
            >
              <el-option value label="全部"></el-option>
              <el-option value="0" label="未处理"></el-option>
              <el-option value="1" label="已处理"></el-option>
@@ -147,7 +192,11 @@
            >
              <i class="el-icon-menu"></i>
            </div>
            <div class="type" :class="{ current: showType == 'list' }" @click="checkType('list')">
            <div
              class="type"
              :class="{ current: showType == 'list' }"
              @click="checkType('list')"
            >
              <i class="el-icon-s-operation"></i>
            </div>
          </div>
@@ -155,7 +204,14 @@
      </div>
      <div class="content" v-show="showType == 'menu'">
        <el-row :gutter="20">
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
          <el-col
            :xs="8"
            :sm="6"
            :md="6"
            :lg="6"
            v-for="data in tabData"
            :key="data.id"
          >
            <div class="card">
              <div class="video-wrap" @click="checkVideoDetail(data)">
                <img :src="data.VideoCover | fixPath" alt />
@@ -180,22 +236,28 @@
                  </div>
                </div>
                <div class="mark-info">
                  <div class="abnormal" v-if="data.LableLst && data.LableLst.length">
                  <div
                    class="abnormal"
                    v-if="data.LableLst && data.LableLst.length"
                  >
                    <span
                      class="abnormal-label"
                      v-for="(label, index) in data.LableLst"
                      :key="index"
                    >
                      {{
                      label.Desc +
                      (index == data.LableLst.length - 1 ? "" : "，")
                        label.Desc +
                        (index == data.LableLst.length - 1 ? "" : "，")
                      }}
                    </span>
                  </div>
                  <div v-else>
                    <span>无异常</span>
                  </div>
                  <div class="event-tag" v-if="data.EventLst && data.EventLst.length">
                  <div
                    class="event-tag"
                    v-if="data.EventLst && data.EventLst.length"
                  >
                    <el-tag
                      size="mini"
                      type="info"
@@ -203,15 +265,25 @@
                      :key="index"
                      style="margin-right: 5px; margin-bottom: 5px"
                      @click="checkEventVideo(label)"
                    >{{ label.Event }}</el-tag>
                      >{{ label.Event }}</el-tag
                    >
                  </div>
                </div>
                <div class="tag-info">
                  <div class="tag" v-for="(tag, index) in data.tags" :key="index">{{ tag }}</div>
                  <div
                    class="tag"
                    v-for="(tag, index) in data.tags"
                    :key="index"
                  >
                    {{ tag }}
                  </div>
                </div>
              </div>
              <div class="star" @click="toggleFollow(data)">
                <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i>
                <i
                  class="iconfont"
                  :class="[data.IsFollow == '0' ? 'follow' : '', 'iconguanzhu']"
                ></i>
              </div>
            </div>
          </el-col>
@@ -229,7 +301,12 @@
        ></el-pagination>
      </div>
      <div class="content" v-show="showType == 'list'">
        <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail">
        <el-table
          :data="tableData"
          fit
          ref="elTable"
          @row-click="checkVideoDetail"
        >
          <el-table-column label="名称" prop="VideoName" sortable width="500">
            <template slot-scope="scope" style="cursor: pointer">
              <div>{{ scope.row.VideoName }}</div>
@@ -250,11 +327,13 @@
                <div class="star">
                  <i
                    class="iconfont"
                    :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']"
                    :class="[
                      scope.row.IsFollow == '0' ? 'follow' : '',
                      'iconguanzhu',
                    ]"
                    @click.stop="toggleFollow(scope.row)"
                  ></i>
                </div>
                <!-- <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i> -->
              </div>
            </template>
          </el-table-column>
@@ -293,7 +372,10 @@
            <span>播放视频</span>
          </div>
        </div>
        <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
        <video-analyze
          v-if="videoDialogVisible"
          :videoDetails="selectedVideo"
        />
      </el-dialog>
      <!-- </div> -->

@@ -315,7 +397,7 @@
<script>
import {
  getlstInit,
  updateVideoAnalyze,
  updateFollow,
  getlst,
  getLabelMap,
  getEventVideo,
@@ -331,11 +413,11 @@
  filters: {
    fixPath(str) {
      if (!str || str == undefined) {
        return ""
        return "";
      }

      return str.replace("/opt/vasystem", "")
    }
      return str.replace("/opt/vasystem", "");
    },
  },
  data() {
    return {
@@ -431,8 +513,8 @@
  methods: {
    checkEventVideo(label) {
      if (label.LKGID != "") {
        this.$message.warning("该事件没有相关联的视频")
        return
        this.$message.warning("该事件没有相关联的视频");
        return;
      }

      this.eventDialogVisible = true;
@@ -446,8 +528,8 @@
      );
    },
    closeDial() {
      this.videoDialogVisible = false
      this.selectedVideo = {}
      this.videoDialogVisible = false;
      this.selectedVideo = {};
    },
    handleTabSizeChange(size) {
      this.tabPageSize = size;
@@ -500,7 +582,7 @@
        if (_this.showType == "list") {
          _this.tableTotal = res.total;
          _this.tableData = res.data;
          debugger
          debugger;
        } else {
          _this.tabTotal = res.total;
          _this.tabData = res.data;
@@ -605,28 +687,22 @@
      });
    },
    toggleFollow(data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
      data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0");
      updateFollow({
        IsFollow: data.IsFollow,
      }).then((res) => {
        this.$notify({
          type: "success",
          message: "已添加关注!",
        });
      }
    },
    updataVideo(data) {
      let _this = this;
      updateVideoAnalyze(data).then((res) => {
        //二级查询
      });
    },

    checkVideoDetail(data) {
      let _this = this;
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;
    },
    checkFollow() { },
    checkFollow() {},
    checkType(type) {
      this.showType = type;
      this.filterSearchData();
@@ -674,7 +750,7 @@
        opt.isChecked = false;
      });
    },
    handleSelect(key, keyPath) { },
    handleSelect(key, keyPath) {},
    showMore(config) {
      config.isShowMore = !config.isShowMore;
      this.$refs[`options${config.id}`][0].style.height = config.isShowMore
@@ -729,43 +805,42 @@
      };
    },
    resize(el, binding, vnode) {
      const dragDom = el.querySelector('.el-dialog')
      dragDom.style.overflow = 'hidden'
      let minWidth = 400
      let minHeight = 300 //
      const dragDom = el.querySelector(".el-dialog");
      dragDom.style.overflow = "hidden";
      let minWidth = 400;
      let minHeight = 300; //

      // 拉伸
      let resizeEl = document.createElement('div')
      dragDom.appendChild(resizeEl) // 在弹窗右下角加上一个10-10px的控制块
      resizeEl.style.cursor = 'nwse-resize'
      let resizeEl = document.createElement("div");
      dragDom.appendChild(resizeEl); // 在弹窗右下角加上一个10-10px的控制块
      resizeEl.style.cursor = "nwse-resize";
      // resizeEl.style.cursor = 'se-resize'
      resizeEl.style.position = 'absolute'
      resizeEl.style.height = '12px'
      resizeEl.style.width = '12px'
      resizeEl.style.right = '0px'
      resizeEl.style.bottom = '0px' //鼠标拉伸弹窗
      resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //鼠标拉伸弹窗
      resizeEl.style.position = "absolute";
      resizeEl.style.height = "12px";
      resizeEl.style.width = "12px";
      resizeEl.style.right = "0px";
      resizeEl.style.bottom = "0px"; //鼠标拉伸弹窗
      resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat'; //鼠标拉伸弹窗

      resizeEl.onmousedown = (e) => {
        // 记录初始x位置
        const clientX = e.clientX // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - resizeEl.offsetLeft
        const disY = e.clientY - resizeEl.offsetTop
        const clientX = e.clientX; // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - resizeEl.offsetLeft;
        const disY = e.clientY - resizeEl.offsetTop;

        document.onmousemove = function (e) {
          e.preventDefault() // 移动时禁用默认事件 // 通过事件委托，计算移动的距离
          e.preventDefault(); // 移动时禁用默认事件 // 通过事件委托，计算移动的距离

          const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
          const y = e.clientY - disY //比较是否小于最小宽高
          dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
          dragDom.style.height =
            y > minHeight ? `${y}px` : minHeight + 'px'
        } //拉伸结束
          const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
          const y = e.clientY - disY; //比较是否小于最小宽高
          dragDom.style.width = x > minWidth ? `${x}px` : minWidth + "px";
          dragDom.style.height = y > minHeight ? `${y}px` : minHeight + "px";
        }; //拉伸结束
        document.onmouseup = function (e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
  },
};

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -283,7 +283,6 @@
<script>
import {
  getlstInit,
  updateVideoAnalyze,
  getlst,
  getRelatedVideoInfo,
  getCarVideos,

 src/pages/systemSettings/views/generalSettings.vue

@@ -89,27 +89,27 @@
              <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 class="add-group">

            <el-upload

              class="upload-demo"

              drag

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

              :http-request="uploadSound"

              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>

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

@@ -118,6 +118,7 @@


<script>

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

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



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

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

@@ -126,18 +127,7 @@


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,



@@ -155,7 +145,7 @@
      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {},

      showUpload:false,

      showUpload: false,

      alarmConf: {

        min_video_len: 0,

        max_video_len: 0,

@@ -196,10 +186,35 @@
    ipInput,

    switchBar,

  },

  mounted() {},

  mounted() {

        this.getSounds()



  },

  beforeDestroy() {},

  props: ["barName"],

  methods: {

    getSounds() {

      getSoundList().then(res => {

        if (res.success) {

          this.soundList = res.data.list

        }

      }).catch(

        e => console.log(e)

      )

    },

    uploadSound(params){

      let param = new FormData();

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

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

        console.log(res.data); 
      });

    },

    openRight(typ) {

      this.activePage = typ;

      if (typ=="sound") {

        this.getSounds()

      }

    },

    openRight(typ) {

      this.activePage = typ;

    },

@@ -348,13 +363,12 @@
      .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;



      .add-group {

        margin-top: 170px;

        height: 235px;

        display: flex;

        flex-direction: column;

        justify-content: space-between;

      }

      .upload-demo {

        .el-upload-dragger {


 src/pages/systemSettings/views/keyboardLanguage.vue

@@ -10,14 +10,22 @@
        </div>

      </div>

      <div class="cluster-right">

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

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

          <div class="title">语言列表</div>

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

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

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

          <div

            class="bar"

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

            :key="i"

            @click="pickLang(item, i)"

          >

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

            <!-- <span class="icon iconfont" v-show="activeLang==item.Lang">&#xe646;</span> -->

            <span class="icon iconfont" v-show="activeLang == item.Lang"

              >已选</span

            >

          </div>

        </div>

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

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

          <div class="title">键盘布局</div>

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

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

@@ -46,6 +54,8 @@
  addESNode,

  getEsClusterInfo,

} from "@/api/clusterManage";



import { getLangs, setLang, getLang, getKeyboardLayouts } from "@/api/system";

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

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

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

@@ -53,66 +63,18 @@


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" }],

      activeLang: "",

      inWifiDetail: false,

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

      isOpenWifi: false,

      inWireDetail: false,

      wireForm: {},

      langList: [

        { name: "简体中文" },

        { name: "英文" },

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

      ],

        keyboardList: [

        { name: "Hanyu Pinyin(algtr)" },

        { name: "ENG" },

      ],

      
      wireFormRules: {},

      langList: [],

      keyboardList: [],

      activePage: "lang",

      rules: {

        deviceName: [

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

        ],

      },

      ipv4Form: {},

      ipv6Form: {},

      ipv4FormRules: {},

      ipv6FormRules: {},

      options: [

        {

          value: "选项1",

          label: "手动",

        },

        {

          value: "选项2",

          label: "自动",

        },

      ],

      value: "",

    };

  },

@@ -121,12 +83,47 @@
    ipInput,

    switchBar,

  },

  mounted() {},

  beforeDestroy() {},

  mounted() {

    this.fetchLangList();

    this.getCurLang();

  },

  props: ["barName"],

  methods: {

    getCurLang() {

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

        if (res && res.success) {

          this.activeLang = res.data.lang;

        }

      });

    },

    fetchLangList() {

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

        if (res && res.success) {

          this.langList = res.data;

        }

      });

    },

    pickLang(item) {

      setLang({

        lang: item.Lang,

      }).then(

        (res) => {

          this.$message.success(res.data);

        },

        (err) => {

          this.$message.error(err.msg);

        }

      );

    },

    openRight(typ) {

      this.activePage = typ;

      if (typ == "keyboard") {

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

          if (res && res.success) {

            this.keyboardList = res.data.slice(0, 5);

          }

        });

      }

    },

    wifiControl(val) {},

    checkWifi() {

@@ -156,7 +153,8 @@
    overflow: auto;

    box-sizing: border-box;

    flex-shrink: 0;

    padding: 10px;    border-right: 5px solid #f8f8f8;

    padding: 10px;

    border-right: 5px solid #f8f8f8;



    // background-color: lavender;

    .menu-item {