chenJinxu
/
TelpoH5FrontendWeb
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
天波h5前端应用
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
525 提交
4 分支
15MB
目錄樹: 3cc34f40fe
分支列表 標籤
${ item.name }
建立分支 ${ searchTerm }
從 '3cc34f40fe'
${ noResults }
TelpoH5FrontendWeb/src/views/gps-card-frontend/device-setting/index.vue

447 line
19KB
原始文件 Blame 歷史記錄 

  1. <!--

  2.  * @Date: 2023-10-11 15:34:12

  3.  * @LastEditors: JinxChen

  4.  * @LastEditTime: 2023-10-27 14:19:16

  5.  * @FilePath: \TelpoH5FrontendWeb\src\views\gps-card-frontend\device-setting\index.vue

  6.  * @description:

  7. -->

  8. <template>

  9.     <div classs="device-setting">

  10.         <div class="tree-select">

  11.             <van-tree-select  :items="settingItems" :main-active-index.sync="active" :height="clientHeight" @click-nav="onCkickNav">

  12.                 <template #content>

  13.                     <div class="item" v-for="(item, index) in settingItems" :key="index" v-show="item.index === active">

  14.                         <div class="item-setting" v-for="(child, index) in item.data" :key="index">

  15.                             <customCell :title="child.name" :value="child.value" :click="child.router"/>

  16.                         </div>

  17.                     </div>

  18.                     <div class="power" v-show="active === 10 || active === 11 || active === 12">

  19.                             <van-button @click="onClick(active)">点击查看</van-button>

  20.                         </div>

  21.                 </template>

  22.             </van-tree-select>

  23.         </div>

  24.     </div>

  25. </template>

  26. 

  27. <script>

  28. import customCell from '@/components/custom-cell/index';

  29. import { isNotNull} from "@/utils/index";

  30. import APICore from "@/api/core";

  31. export default {

  32.   name:'',

  33.   components: { customCell },

  34.   data(){

  35.    return {

  36.        active: 0,

  37.        settingItems: [

  38.            { text: '监护角色', index: 0, data: [],},

  39.            { text: '场景模式', index: 1, data: []},

  40.            { text: '加强省电模式', index: 2, data: []},

  41.            { text: '定位监测', index: 3, data: []},

  42.            { text: '危险区域监测', index: 4, data: [] },

  43.            { text: '健康监测', index: 5, data: []},

  44.            { text: '血压监测', index: 6, data: []},

  45.            { text: '心理监测', index: 7, data: []},

  46.            { text: '佩戴监测', index: 8, data: []},

  47.            /* { text: '久坐提醒', index: 9, data: []}, */

  48.            { text: '上报周期', index: 10, data: []},

  49.            { text: '电量查看', index: 11, data: []},

  50.            { text: '设备信号强度查看', index: 12, data: []},

  51.            { text: '设备行为日志查看', index: 13, data: []},

  52.        ],

  53.        dateList: [], //时间列表

  54.        clientHeight: '', //当前窗口可视页面高度

  55.    }

  56.   },

  57.   computed: {

  58.     imei() {

  59.         return this.$store.getters.imei/* '861281060086216' */;

  60.     },

  61.   },

  62.   created() {

  63.     this.getAuth();

  64.     this.getUrlQueryParams();

  65.   },

  66.   mounted() {

  67.     this.$toast.loading({message: "加载中"});

  68.     this.getWatchConfig();

  69.     this.getIotCtlMode();

  70.     this.getLocationConfig();

  71.     this.getDrownConfig();

  72.     this.getHealthConfig();

  73.     this.getBloodConfig();

  74.     this.getPsychAbilityConfig();

  75.     this.getNowearConfig();

  76.     this.getUploadConfig();

  77.     this.clientHeight = document.documentElement.clientHeight;

  78.     this.active = Number(this.$store.getters.active) || 0;

  79.     this.$toast.success({message: "加载完成"});

  80.   },

  81.   methods: {

  82.    // 获取b端接口的token

  83.     getAuth() {

  84.         let manufactorId = "5bf13062-a41e-4d00-ba14-1101aad12650";

  85.         APICore.getAuth({ manufactorId: manufactorId }).then(res => {

  86.             this.$store.commit("gatewayToken", res.data.data);

  87.         });

  88.     },

  89.     getUrlQueryParams() {

  90.         // 从url中获取参数并缓存

  91.         let params = this.$route.query;

  92.         if (isNotNull( params )) {

  93.             // 首次进入且正确传参

  94.             //this.imei = params.imei;

  95.             if(params.accessToken) {this.$store.commit('accessToken', params.accessToken); }

  96.             this.$store.commit('imei', params.imei);

  97.         }

  98.     },

  99.     // 获取设备场景模式参数

  100.     getWatchConfig() {

  101.         APICore.getWatchConfig({imei: this.imei}).then(res => {

  102.             let data = res.data.data;

  103.             if(data) {

  104.                 const modeId = data.modeId;

  105.                 const roleId = data.roleId;

  106.                 this.modeId = data.modeId;

  107.                 this.roleId = roleId;

  108.                 this.settingItems[0].text = `监护角色(${roleId === 1 ? '学生' : '老人'})`;

  109.                 this.settingItems[1].text = `场景模式(${this.getModeById(modeId)})`;

  110.             } else {

  111.                 this.settingItems[0].text = `监护角色(无数据)`;

  112.                 this.settingItems[1].text = `场景模式(无数据)`;

  113.                 /* this.modeId = 1;

  114.                 this.roleId = 1; */

  115.             }

  116.         })

  117.     },

  118.      // 通过模式id获取场景模式

  119.     getModeById(id) {

  120.         if(id === 1) {

  121.             return '标准'

  122.         } else if (id === 2) {

  123.             return '省电'

  124.         } else {

  125.             return '个性'

  126.         }

  127.     },

  128.     // 组装选项数据

  129.     concatTitle(title, status, power){

  130.         return `${title}(${status}) (${power})`

  131.     },

  132.     // 获取加强省电模式参数配置

  133.     getIotCtlMode() {

  134.          APICore.getIotCtlMode(this.imei).then(res => {

  135.             let data = res.data.data;

  136.             if(data) {

  137.                 this.checked = data.mode === 1;

  138.                 this.settingItems[2].text = this.concatTitle('加强省电模式', data.mode === 1 ? '打开' : '关闭', data.mode === 1 ? '耗电高' : '耗电低');

  139.                 this.settingItems[2].data = [

  140.                 { name: '开启状态:', value: data.enabled === 1 ? '打开': '关闭' },

  141.               ];

  142.             } else {

  143.                 this.settingItems[2].text = this.concatTitle('加强省电模式','关闭', '耗电低');

  144.             }

  145.         })

  146.     },

  147.     // 获取设备定位参数

  148.     getLocationConfig() {

  149.         APICore.getLocationConfig({imei: this.imei}).then(res => {

  150.             let data = res.data.data;

  151.             if(data) {

  152.               this.settingItems[3].text = this.concatTitle('定位监测', data.enabled === 1 ? '打开': '关闭', data.enabled === 1 ? '耗电高' : '耗电低');

  153.               this.settingItems[3].data = [

  154.                 { name: '开启状态:', value: data.enabled === 1 ? '打开': '关闭' },

  155.                 { name: '检测周期:', value: data.sampleinteval + '分钟' },

  156.               ];

  157.             } else {

  158.                 this.settingItems[3].text = this.concatTitle('定位监测','关闭', '耗电低');

  159.             }

  160.         })

  161.     },

  162.     // 获取免告警水域

  163.     getDrownReportFilterQuery() {

  164.         APICore.getDrownReportFilterQuery({imei: this.imei}).then(res => {

  165.             let data = res.data.data;

  166.             if(data) {

  167.                 let json = {};

  168.                 for(var i=0; i<data.length; i++){

  169.                     json[i] = data[i];

  170.                 }

  171.                 this.drownWhite = JSON.stringify(json);

  172.             }

  173.         })

  174.     },

  175.     // 获取设备危险区域参数

  176.     getDrownConfig() {

  177.         APICore.getDrownConfig({imei: this.imei}).then(res => {

  178.             let data = res.data.data;

  179.             if(data) {

  180.                 this.settingItems[4].text = this.concatTitle('危险区域监测', data.enabled === 1 ? '打开': '关闭', data.enabled === 1 ? '耗电高' : '耗电低');

  181.                 this.settingItems[4].data = [

  182.                     { name: '涉水监测:', value: data.enabled === 1 ? '打开': '关闭' },

  183.                     { name: '检测周期:', value: data.config.intervallvl1 + data.config.intervallvl2 + '分钟' },

  184.                     { name: '告警阈值:', value: data.config.warningdistance + '米' },

  185.                     { name: '涉水停留告警间隔:', value: (data.config.distancelvl2 / 60) + '分钟' },

  186.                     { name: '告警提示持续次数:', value: data.config.warningtimes + '次' },

  187.                     { name: '首次告警逗留设置:', value: data.config.delaytimes + '次' },

  188.                     { name: '时速免告警(≥):', value: data.config.ignorespeed + '公里' },

  189.                     { name: '免告警水域:', value: '查看', router: 'drownWhiteList' },

  190.                     { name: '告警方式:', value: `${data.config.vibrateenabled === 1 ? '震动' : '无'} , ${data.config.lcdenabled === 1 ? '亮屏' : '无'} , ${data.config.musicenabled === 1 ? '声音' : '无'}`},

  191.                 ];

  192.             } else {

  193.                 this.settingItems[4].text = this.concatTitle('危险区域监测','关闭', '耗电低');

  194.                 this.settingItems[4].data = [];

  195.             }

  196.         })

  197.     },

  198. 

  199.     // 格式化某些特殊参数值的时间显示方式

  200.     formatInteval(value) {

  201.         return value >= 360 ? (value / 60) + '小时' : value + '分钟'

  202.     },

  203.     // 获取设备健康参数

  204.     getHealthConfig() {

  205.         APICore.getHealthConfig({imei: this.imei}).then(res => {

  206.             let data = res.data.data;

  207.             if(data) {

  208.                 let healthEnablelist = [

  209.                     { enabled: data.config.heartrateenabled},

  210.                     { enabled: data.config.spo2enabled},

  211.                     { enabled: data.config.temperatureenabled},

  212.                 ];

  213.                 let config = data.config;

  214.                 // 获取健康设置打开的次数

  215.                 const healthSettingCount = healthEnablelist.reduce((acc, cur) => cur.enabled === 1 ? ++acc : acc, 0);

  216.                 this.settingItems[5].text = this.concatTitle('健康监测', healthSettingCount >= 3 ? '打开'

  217.                 : healthSettingCount >= 1 ?  '部分'

  218.                 : '关闭', healthSettingCount > 2 ? '耗电高': healthSettingCount === 2 ? '耗电中': '耗电低');

  219.                 this.settingItems[5].data = [

  220.                     { name: '体温监测:', value: config.temperatureenabled === 1 ? '打开': '关闭' },

  221.                     { name: '检测周期:', value: this.formatInteval(config.temperatureinteval) },

  222.                     { name: '告警阈值-高温:', value: (config.temperaturemaxvalue / 10) + '度' },

  223.                     /* { name: '告警阈值-低温:', value: config.temperatureminvalue + '度' }, */

  224.                     { name: '告警方式:', value: `${config.temperaturevibrateenabled === 1 ? '震动' : '无'} , ${config.temperaturelcdenabled === 1 ? '亮屏' : '无'}`},

  225. 

  226.                     { name: '心率监测:', value: config.heartrateenabled === 1 ? '打开': '关闭' },

  227.                      { name: '检测周期:', value: this.formatInteval(config.heartrateinteval) },

  228.                     { name: '告警阈值-上限:', value: config.heartratemaxvalue + '次' },

  229.                     { name: '告警阈值-下限:', value: config.heartrateminvalue + '次' },

  230.                     { name: '告警方式:', value: `${config.heartratevibrateenabled === 1 ? '震动' : '无'} , ${config.heartratelcdenabled === 1 ? '亮屏' : '无'}`},

  231. 

  232.                     { name: '血氧监测:', value: config.spo2enabled === 1 ? '打开': '关闭' },

  233.                      { name: '检测周期:', value: this.formatInteval(config.spo2inteval) },

  234.                     { name: '告警阈值-低于:', value: config.spo2minvalue + '%' },

  235.                     /* { name: '告警阈值-低温:', value: config.temperatureminvalue + '度' }, */

  236.                     { name: '告警方式:', value: `${config.spo2vibrateenabled === 1 ? '震动' : '无'} , ${config.spo2lcdenabled === 1 ? '亮屏' : '无'}`},

  237.                 ]

  238.             } else {

  239.                 this.settingItems[5].text = this.concatTitle('健康监测','关闭', '耗电低');

  240.                 this.settingItems[5].data = [];

  241.             }

  242.         })

  243.     },

  244.     // 获取血压监测参数设置

  245.     getBloodConfig() {

  246.         APICore.getBloodPressConfig({imei: this.imei}).then(res => {

  247.             let data = res.data.data;

  248.             if(data) {

  249.                 this.settingItems[6].text = this.concatTitle('血压监测', data.bloodPressenabled === 1 ? '打开': '关闭', data.bloodPressenabled === 1 ? '耗电高' : '耗电低');

  250.                 this.settingItems[6].data = [

  251.                     { name: '血压监测:', value: data.bloodPressenabled === 1 ? '打开': '关闭' },

  252.                     { name: '检测周期:', value: this.formatInteval(data.bloodPressinteval) },

  253.                     { name: '告警阈值-收缩压:', value: String(data.systolicmaxvalue)},

  254.                     { name: '告警方式:', value: `${data.bloodPressvibrateenabled === 1 ? '震动' : '无'} ,${data.bloodPresslcdenabled === 1 ? '亮屏' : '无'}`},

  255.                 ]

  256.             } else {

  257.                 this.settingItems[6].text = this.concatTitle('血压监测','关闭', '耗电低');

  258.                 this.settingItems[6].data = [];

  259.             }

  260.         })

  261.     },

  262.     // 格式化等级

  263.     formatReminder(value) {

  264.         let text = "";

  265.         if (value == 1) {

  266.             text = "轻度";

  267.         } else if (value == 2) {

  268.             text = "中度";

  269.         } else if (value == 3) {

  270.             text = "重度";

  271.         }

  272.         return text;

  273.     },

  274.     // 格式化监测时段

  275.     formatTimeArea(timeArr) {

  276.         let timeToString = timeArr.map(item => {

  277.             return `{时段: ${item.time},时长:${item.duration};}`;

  278.         });

  279.         return String(timeToString);

  280.     },

  281.     // 获取心理监测参数设置

  282.     getPsychAbilityConfig() {

  283.         APICore.getPsychAbilityConfig({imei: this.imei}).then(res => {

  284.             let data = res.data.data;

  285.             if (data) {

  286.                 this.settingItems[7].text = this.concatTitle('心理监测', data.enabled === 1 ? '打开': '关闭', data.enabled === 1 ? '耗电高' : '耗电低');

  287.                 this.settingItems[7].data = [

  288.                     { name: '心理监测:', value: data.enabled === 1 ? '打开': '关闭' },

  289.                     { name: '设备显示:', value: data.device_display === 1 ? '打开': '关闭' },

  290.                     { name: '监测时段:', value: this.formatTimeArea(data.time_area) },

  291.                     { name: '提醒设置:', value: data.reminder_setting.enable === 1 ? '打开': '关闭' },

  292.                     { name: '抑郁等级:', value: this.formatReminder(data.reminder_setting.setting.depressive) },

  293.                     { name: '压力等级:', value: this.formatReminder(data.reminder_setting.setting.pressure) },

  294.                     { name: '疲劳等级:', value: this.formatReminder(data.reminder_setting.setting.fatigue) },

  295.                     { name: '告警方式:', value: `${data.vibrating_screen === 1 ? '震动' : '无'}, ${data.brightening_screen === 1 ? '亮屏' : '无'}`},

  296.                 ]

  297.             } else {

  298.                 this.settingItems[7].text = this.concatTitle('心理监测', '关闭', '耗电低');

  299.                 this.settingItems[7].data = [];

  300.             }

  301.         })

  302.     },

  303.      // 转换时间格式

  304.     shiftTime(time, model) {

  305.         if(time) {

  306.             let startTime = '{' + time.slice(0,2) + ":" + time.slice(2,4);

  307.             let endTime = time.slice(4,6) + ":" + time.slice(6,8) + '}';

  308.             let timeObj = {

  309.                 startTime: startTime,

  310.                 endTime: endTime,

  311.             };

  312.             this.dateList.push(timeObj);

  313.         }

  314.     },

  315.     // 转化时间数组 :)

  316.     fomatTimeArr(arr) {

  317.         let timeString = arr.map(item => {

  318.             return item.startTime + '-' + item.endTime

  319.         });

  320.         return String(timeString);

  321.     },

  322.     // 获取佩戴监测参数设置

  323.     getNowearConfig() {

  324.         APICore.getNowearConfig({ imei: this.imei }).then(res => {

  325.             let data = res.data.data;

  326.             if(data) {

  327.                 this.dateList = [];

  328.                 this.shiftTime(data.timearea1, 0);

  329.                 this.shiftTime(data.timearea2, 1);

  330.                 this.shiftTime(data.timearea3, 2);

  331.                 this.shiftTime(data.timearea4, 3);

  332.                 this.shiftTime(data.timearea5, 4);

  333.                 this.shiftTime(data.timearea6, 5);

  334.                 this.shiftTime(data.timearea7, 6);

  335.                 this.shiftTime(data.timearea8, 7);

  336.                 this.shiftTime(data.timearea9, 8);

  337.                 this.shiftTime(data.timearea10, 9);

  338.                 this.settingItems[8].text = this.concatTitle('佩戴监测', data.enabled === 1 ? '打开': '关闭', data.enabled === 1 ? '耗电高' : '耗电低');

  339.                 this.settingItems[8].data = [

  340.                     { name: '佩戴监测:', value: data.enabled === 1 ? '打开': '关闭' },

  341.                     { name: '检测周期:', value: (data.interval / 60) + '分钟' },

  342.                     { name: '检测时段:', value: this.fomatTimeArr(this.dateList)},

  343.                     { name: '未佩戴处理方式:', value: data.mode === 1 ? '不处理': '飞行模式' },

  344.                     { name: '佩戴提醒:', value: data.warningtimes !== 0 ? '打开' : '关闭' },

  345.                     { name: '提醒时间间隔:', value: (data.warninginterval / 60) + '分钟' },

  346.                     { name: '提醒次数:', value: data.warningtimes + '次'},

  347.                     { name: '告警方式:', value: `${data.vibrateenabled === 1 ? '震动' : '无'} ,${data.lcdenabled === 1 ? '亮屏' : '无'} ,${data.soundenabled === 1 ? '声音' : '无'}`},

  348.                 ]

  349.             } else {

  350.                 this.settingItems[8].text = this.concatTitle('佩戴监测', '关闭', '耗电低');

  351.                 this.settingItems[8].data = [];

  352.             }

  353.         })

  354.     },

  355.     // 获取设备上报参数

  356.     getUploadConfig() {

  357.         APICore.getUploadConfig({imei: this.imei}).then(res => {

  358.             const data = res.data.data;

  359.             if(data) {

  360.                 this.settingItems[9].text = `上报周期(${data.uploadinteval}分钟)`;

  361.             } else {

  362.                 this.settingItems[9].text = '上报周期(关闭)';

  363.             }

  364.         })

  365.     },

  366.     // 点击左边树形图

  367.     onCkickNav(value) {

  368.         this.active = value;

  369.         this.$store.commit('active', value);

  370.         switch(value) {

  371.             /* case 10:

  372.             case 11:

  373.             case 12:

  374.                 this.$router.push({

  375.                 name: 'devicePower',

  376.                 query: {

  377.                     title: `${value === 10 ? 'BatteryLevel' : value === 11 ? 'status': 'Offline'}`

  378.                 }

  379.             });

  380.                 break; */

  381.             case 0:

  382.                 this.getWatchConfig();

  383.                 break;

  384.             case 1:

  385.                 this.getWatchConfig();

  386.                 break;

  387.             case 2:

  388.                 this.getIotCtlMode();

  389.                 break;

  390.             case 3:

  391.                 this.getLocationConfig();

  392.                 break;

  393.             case 4:

  394.                 this.getDrownConfig();

  395.                 break;

  396.             case 5:

  397.                 this.getHealthConfig();

  398.                 break;

  399.             case 6:

  400.                 this.getBloodConfig();

  401.                 break;

  402.             case 7:

  403.                 this.getPsychAbilityConfig();

  404.                 break;

  405.             case 8:

  406.                 this.getNowearConfig();

  407.                 break;

  408.             case 9:

  409.                 this.getUploadConfig();

  410.                 break;

  411.             default: break;

  412. 

  413.         }

  414.     },

  415.     // 点击页面查看按钮

  416.     onClick(value) {

  417.         if(value) {

  418.             this.$router.push({

  419.                 name: 'devicePower',

  420.                 query: {

  421.                     title: `${value === 10 ? 'BatteryLevel' : value === 11 ? 'status': 'Offline'}`

  422.                 }

  423.             })

  424.         }

  425.     }

  426.   }

  427. }

  428. </script>

  429. 

  430. <style lang="scss">

  431.     .van-tree-select__nav-item {

  432.         padding: 15px 5px !important;

  433.     }

  434.     .van-tree-select__content {

  435.         padding: 5px;

  436.     }

  437.     .van-tree-select__nav{

  438.         flex: 1 !important;

  439.     }

  440.     .van-tree-select__content {

  441.         @include center();

  442.     }

  443. </style>

  444. <style scoped lang="scss">

  445.     @import "./index.scss";

  446. </style>