shenze-sysMan/src/views/device/modulation.vue

<template>
  <!-- 音量调节 -->
  <div class="page flex-col">
    <s-header :name="$t('device.parameterAdjustment')" :noback="false"></s-header>
    <div class="wrap1 flex-col">
      <div class="box2 flex-col">
        <div class="section3 flex-row justify-between">
          <div class="box3 flex-col"></div>
          <span class="info1">{{$t('device.equipmentName')}}：{{deviceDetal ? deviceDetal.name : ''}}</span>
        </div>
        <img
          class="img1"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng8947935ab81635fdedd8124b11e305eef66286421b69c84fef22233014a3fa9a"
        />
      </div>
      <div class="box4 flex-row justify-between">
        <span class="word3">{{$t('device.slideSliderToAdjustVolume')}}</span>
        <span class="word4">{{volume}}</span>
      </div>
      <van-slider v-model="volume" :max="15"/>
      <van-button round type="primary" class="volumeChangeButton" @click="volumeChange()">{{$t('device.submitModification')}}</van-button>
      <!-- <div class="box6 flex-col"><span class="word5">提交修改</span></div> -->
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { useRoute, useRouter } from 'vue-router';
import { getDeviceDetal, updateVolume } from '@/service/device'
import { Toast, Dialog } from 'vant';
import { useI18n } from 'vue-i18n';

export default {
  setup() {
    const { t } = useI18n();
    const route = useRoute();
	const router = useRouter();
    const deviceId = route.query.deviceId;
    const deviceDetal = ref(null);
    const volume = ref(0);

    // 初始化页面获取列表
    onMounted(async () => {
        getDeviceDetalFun();
        console.log(deviceId);
    });

     // 获取设备列表数据
    const getDeviceDetalFun = async () => {
      const { data } = await getDeviceDetal({id : deviceId});
      if (data.code === '00000') {
        deviceDetal.value = data.data;
        volume.value = data.data.volume ? data.data.volume : 0;
      } else { Toast.fail(data.message); }
    }
    // 音量调节保存
    const volumeChange = async () => {
        // const volumeB = 15 / 100 ;
        // const volumeC = parseInt(volume.value * volumeB);
        const { data } = await updateVolume({id: deviceId, volume: volume.value.toString()});
        if (data.code) {
			Dialog.alert({
			  confirmButtonColor: '#4d6add',
			  message: t('device.sentSuccessfully'),
			}).then(() => {
			 //返回上一页
			  router.go(-1);
			});
        } else { Toast.fail(data.message); }
        console.log('volumeChange', {equipmentId: deviceId, volume: volume.value.toString()});
    }
    return {
        deviceDetal,
        volume,
        volumeChange
    };
  },
  components: { sHeader },
};
</script>
<style lang="less" scoped>
@import "../../common/style/common";
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  height: calc(100vh - 44px);
  overflow: hidden;
  .van-slider {
    width: 92%;
    height: 4px;
    margin: 0 auto;
    margin-top: 35px;
    background-color: #dfdfe5;
    .van-slider__bar { 
        background-color: rgba(77, 193, 147, 1);
    }
    .van-slider__button {
        background-color: rgba(77, 193, 147, 1);
        width: 16px;
        height: 16px;
    }
  }
  .volumeChangeButton {
    background-color: #4d6add;
    width: 220px;
    height: 34px;
    margin: 49px auto;
    .van-button__text { font-size: 15px; }
  }
  .wrap1 {
    width: 100%;
    height: 274px;
    .box2 {
      background-color: rgba(255, 255, 255, 1);
      z-index: 23;
      height: 54px;
      margin-top: 1px;
      width: 100%;
      position: relative;
      .section3 {
        width: 162px;
        height: 20px;
        margin: 17px 0 0 15px;
        .box3 {
          background-color: rgba(128, 150, 236, 1);
          border-radius: 2px;
          width: 4px;
          height: 12px;
          margin-top: 4px;
        }
        .info1 {
          width: 150px;
          height: 20px;
          overflow-wrap: break-word;
          color: rgba(64, 77, 116, 1);
          font-size: 14px;
          font-family: PingFangSC-Medium;
          text-align: left;
          white-space: nowrap;
          line-height: 20px;
          display: block;
        }
      }
      .img1 {
        z-index: 31;
        position: absolute;
        left: 0;
        top: 53px;
        width: 100%;
        height: 2px;
      }
    }
    .box4 {
      width: 147px;
      height: 14px;
      margin: 19px 0 0 15px;
      .word3 {
        width: 104px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 13px;
        text-align: left;
        white-space: nowrap;
        line-height: 13px;
        margin-top: 1px;
        display: block;
      }
      .word4 {
        width: 33px;
        height: 13px;
        overflow-wrap: break-word;
        color: rgba(64, 77, 116, 1);
        font-size: 15px;
        font-family: PingFangSC-Medium;
        text-align: left;
        white-space: nowrap;
        line-height: 15px;
        display: block;
      }
    }
  }
}
</style>