zhangzengfei
2021-07-07 0b737708e696c45720499759b5c31aced87fdbb6
src/pages/systemSettings/views/generalSettings.vue
@@ -11,12 +11,51 @@
        <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="desc">{{ 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'">
@@ -82,7 +121,7 @@
            </div>
            <div class="btns">
              <span class="icon iconfont">&#xe646;</span>
              <span class="icon iconfont">&#xe646;</span>
              <span class="icon iconfont" @click="removeSound(item)">&#xe646;</span>
            </div>
          </div>
          <div class="add-group">
@@ -90,8 +129,9 @@
              class="upload-demo"
              drag
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :http-request="uploadSound"
              v-show="showUpload"
              :show-file-list="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
@@ -106,88 +146,128 @@
            </div>
          </div>
        </div>
        <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>
      </div>
    </div>
  </div>
</template>
<script>
import { saveAlarmConfig } from "@/api/system";
import { saveAlarmConfig, getDevInfo } from "@/api/system";
import { uploadSound, getSoundList, deleteSound } from "@/api/event";
import config from "../../../../package.json";
import { isIPv4 } from "@/scripts/validate";
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" },
      ],
      soundList: [{ name: "2.mp3" }, { name: "3.mp3" }],
      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: [{}, {}, {}],
    };
  },
  mounted() { },
  mounted() {
    this.getDeviceInfo();
    this.getSounds();
  },
  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() {
@@ -195,6 +275,32 @@
    },
    checkWire(item) {
      this.inWireDetail = true;
    },
    selectIcons(typ) {
    },
    removeSound(item) {
      debugger
      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) => {
@@ -335,8 +441,7 @@
        background-color: rgba(233, 233, 233, 1);
      }
      .add-group {
        margin-top: 170px;
        height: 235px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
@@ -359,7 +464,7 @@
        box-sizing: border-box;
        padding: 0 20px;
        background-color: rgba(248, 248, 248, 1);
        height: 95px;
        height: 105px;
        margin-bottom: 20px;
        border-radius: 15px;
        .title {
@@ -371,6 +476,10 @@
          padding: 0 6px;
          font-size: 14px;
        }
      }
      .min-dur:hover {
        background-color: rgba(233, 233, 233, 1);
      }
      .entity {
@@ -437,5 +546,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>