From 30daccd0d36c1d3259888559e399781fbe088536 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Mon, 18 Dec 2023 09:21:01 +0800
Subject: [PATCH] =?UTF-8?q?`2023=E5=B9=B412=E6=9C=8816=E6=97=A5`=20FETURE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加 接口文件
- 增加 store 文件
- 增加 封装 toast ,notify 和 dialog
- 增加 亲情号码，增加/修改亲情号码页面
- 修改 tabBar 文件
---
 README.md                               |   4 +-
 src/components/TabBar.vue               |  47 +-
 src/plugins/vant.js                     |  95 +++-
 src/router/router.config.js             |  18 +
 src/services/notify-service.js          |  15 +
 src/views/development/index.vue         |   6 +-
 src/views/insight/index.vue             |   6 +-
 src/views/layouts/index.vue             |   8 +-
 src/views/myself/addFamilyNumber.vue    | 552 ++++++++++++++++++++++
 src/views/myself/changeFamilyNumber.vue | 594 ++++++++++++++++++++++++
 src/views/myself/familyNumber.vue       | 310 +++++++++++++
 src/views/myself/index.vue              |  12 +-
 src/views/optimize/index.vue            |   6 +-
 src/views/today/index.vue               |   6 +-
 14 files changed, 1658 insertions(+), 21 deletions(-)
 create mode 100644 src/services/notify-service.js
 create mode 100644 src/views/myself/addFamilyNumber.vue
 create mode 100644 src/views/myself/changeFamilyNumber.vue
 create mode 100644 src/views/myself/familyNumber.vue

diff --git a/README.md b/README.md
index b58bea1..e8df1db 100644
--- a/README.md
+++ b/README.md
@@ -43,4 +43,6 @@ npm run lint
 
 - 增加 接口文件
 - 增加 store 文件
-- 增加 封装的 toast 和 dialog 文件
+- 增加 封装 toast ,notify 和 dialog
+- 增加 亲情号码，增加/修改亲情号码页面
+- 修改 tabBar 文件
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 274820c..7919d3d 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <van-tabbar fixed route v-model="active" @change="handleChange">
-      <van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :key="index">
+      <van-tabbar-item v-for="(item, index) in tabbars" :to="item.to" :icon="item.icon" :key="index">
         {{ item.title }}
       </van-tabbar-item>
     </van-tabbar>
@@ -14,17 +14,48 @@ export default {
     defaultActive: {
       type: Number,
       default: 0
-    },
-    data: {
-      type: Array,
-      default: () => {
-        return [];
-      }
     }
   },
   data() {
     return {
-      active: this.defaultActive
+      active: this.defaultActive,
+      tabbars: [
+        {
+          title: '成长',
+          to: {
+            name: 'Development'
+          },
+          icon: 'guide-o'
+        },
+        {
+          title: '今日',
+          to: {
+            name: 'Today'
+          },
+          icon: 'notes-o'
+        },
+        {
+          title: '洞悉',
+          to: {
+            name: 'Insight'
+          },
+          icon: 'apps-o'
+        },
+        {
+          title: '优化',
+          to: {
+            name: 'Optimize'
+          },
+          icon: 'diamond-o'
+        },
+        {
+          title: '我的',
+          to: {
+            name: 'Myself'
+          },
+          icon: 'user-circle-o'
+        }
+      ]
     };
   },
   methods: {
diff --git a/src/plugins/vant.js b/src/plugins/vant.js
index 1a38e19..9ef1d65 100644
--- a/src/plugins/vant.js
+++ b/src/plugins/vant.js
@@ -1,4 +1,95 @@
 // 按需全局引入 vant组件
 import Vue from 'vue';
-import { Button, Tabbar, TabbarItem, Toast, NavBar } from 'vant';
-Vue.use(Button).use(Tabbar).use(TabbarItem).use(Toast).use(NavBar);
+import {
+  Button,
+  Tabbar,
+  TabbarItem,
+  Calendar,
+  Cell,
+  CellGroup,
+  Col,
+  DatetimePicker,
+  Dialog,
+  Field,
+  Form,
+  Icon,
+  Image,
+  List,
+  Loading,
+  NavBar,
+  NoticeBar,
+  Notify,
+  Overlay,
+  Popup,
+  PullRefresh,
+  Radio,
+  RadioGroup,
+  Row,
+  Slider,
+  Swipe,
+  SwipeCell,
+  SwipeItem,
+  Switch,
+  Tab,
+  Tabs,
+  Toast,
+  Tag,
+  Image as VanImage,
+  ActionSheet,
+  DropdownMenu,
+  DropdownItem,
+  Uploader,
+  Checkbox,
+  CheckboxGroup,
+  Circle,
+  Collapse,
+  CollapseItem,
+  ImagePreview,
+  Picker
+} from 'vant';
+Vue.use(Button)
+  .use(NavBar)
+  .use(Calendar)
+  .use(Cell)
+  .use(CellGroup)
+  .use(Col)
+  .use(DatetimePicker)
+  .use(Dialog)
+  .use(Icon)
+  .use(Image)
+  .use(Form)
+  .use(Field)
+  .use(List)
+  .use(Loading)
+  .use(NavBar)
+  .use(NoticeBar)
+  .use(Notify)
+  .use(Overlay)
+  .use(Popup)
+  .use(PullRefresh)
+  .use(Radio)
+  .use(RadioGroup)
+  .use(Row)
+  .use(Slider)
+  .use(Tabbar)
+  .use(TabbarItem)
+  .use(Swipe)
+  .use(SwipeCell)
+  .use(SwipeItem)
+  .use(Switch)
+  .use(Tab)
+  .use(Tabs)
+  .use(Toast)
+  .use(Tag)
+  .use(VanImage)
+  .use(ActionSheet)
+  .use(DropdownMenu)
+  .use(DropdownItem)
+  .use(Uploader)
+  .use(Checkbox)
+  .use(CheckboxGroup)
+  .use(Circle)
+  .use(Collapse)
+  .use(CollapseItem)
+  .use(ImagePreview)
+  .use(Picker);
diff --git a/src/router/router.config.js b/src/router/router.config.js
index c0ee77a..a84d307 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -41,6 +41,24 @@ export const constantRouterMap = [
         name: 'Myself',
         component: () => import('@/views/myself/index'),
         meta: { title: '我的', keepAlive: false }
+      },
+      {
+        path: '/familyNumber',
+        name: 'familyNumber',
+        component: () => import('@/views/myself/familyNumber'),
+        meta: { title: '亲情号码', keepAlive: false }
+      },
+      {
+        path: '/changeFamilyNumber',
+        name: 'changeFamilyNumber',
+        component: () => import('@/views/myself/changeFamilyNumber'),
+        meta: { title: '修改亲情号码', keepAlive: false }
+      },
+      {
+        path: '/addFamilyNumber',
+        name: 'addFamilyNumber',
+        component: () => import('@/views/myself/addFamilyNumber'),
+        meta: { title: '增加亲情号码', keepAlive: false }
       }
     ]
   }
diff --git a/src/services/notify-service.js b/src/services/notify-service.js
new file mode 100644
index 0000000..675527b
--- /dev/null
+++ b/src/services/notify-service.js
@@ -0,0 +1,15 @@
+import { Notify } from 'vant';
+
+let NotifyService = {
+  notify({ type, message, duration, className, onClickCallback }) {
+    Notify({
+      type: type || 'warning', // success | primary | danger
+      message,
+      duration: duration || 1500,
+      className,
+      onClickCallback
+    });
+  }
+};
+
+export default NotifyService;
diff --git a/src/views/development/index.vue b/src/views/development/index.vue
index a137f5e..4f139b0 100644
--- a/src/views/development/index.vue
+++ b/src/views/development/index.vue
@@ -1,10 +1,14 @@
 <!--  -->
 <template>
-  <div></div>
+  <div>
+    <TabBar />
+  </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar';
 export default {
+  components: { TabBar },
   data() {
     return {};
   },
diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue
index a137f5e..4f139b0 100644
--- a/src/views/insight/index.vue
+++ b/src/views/insight/index.vue
@@ -1,10 +1,14 @@
 <!--  -->
 <template>
-  <div></div>
+  <div>
+    <TabBar />
+  </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar';
 export default {
+  components: { TabBar },
   data() {
     return {};
   },
diff --git a/src/views/layouts/index.vue b/src/views/layouts/index.vue
index 9e5e682..741d278 100644
--- a/src/views/layouts/index.vue
+++ b/src/views/layouts/index.vue
@@ -6,14 +6,14 @@
       </keep-alive>
       <router-view v-else></router-view>
     </div>
-    <div class="layout-footer">
+    <!--  <div class="layout-footer">
       <TabBar :data="tabbars" @change="handleChange" />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-import TabBar from '@/components/TabBar';
+/* import TabBar from '@/components/TabBar'; */
 export default {
   name: 'AppLayout',
   data() {
@@ -58,7 +58,7 @@ export default {
     };
   },
   components: {
-    TabBar
+    /* TabBar */
   },
   methods: {
     handleChange(v) {
diff --git a/src/views/myself/addFamilyNumber.vue b/src/views/myself/addFamilyNumber.vue
new file mode 100644
index 0000000..2f7a574
--- /dev/null
+++ b/src/views/myself/addFamilyNumber.vue
@@ -0,0 +1,552 @@
+<template>
+  <div class="addFamilyNumber familyNumber replace">
+    <div class="management">
+      <div class="oh_100vh">
+        <div class="top-con">
+          <van-nav-bar title="新增亲情号" left-text="返回" :border="true" @click-left="onNavBack">
+            <div class="family_save" slot="right" @click="submit">保存</div>
+          </van-nav-bar>
+
+          <van-cell-group>
+            <van-field
+              v-model.trim="nickName"
+              maxlength="6"
+              label="昵称"
+              required
+              placeholder="如爸爸，妈妈，必须少于6个汉字"
+              input-align="right"
+            />
+            <van-field
+              v-model.trim="phone"
+              maxlength="12"
+              label="号码"
+              required
+              oninput="value=value.replace(/\s+/g,'')"
+              placeholder="可输入手机，固话，短号"
+              input-align="right"
+            />
+            <van-cell center required>
+              <template #title>
+                <span class="custom-title">快捷键</span>
+              </template>
+              <template #extra>
+                <div>
+                  <van-dropdown-menu>
+                    <van-dropdown-item v-model="value1" @change="onDrodownClick" :options="shortKeylist" />
+                  </van-dropdown-menu>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+          <div class="tips-container" v-show="isUnicom">
+            <div class="inside-tips">
+              <p>注：</p>
+              <p>1）由于网络因素影响，亲情号码设置后，最长需要等待10分钟后才可拨打。</p>
+              <p>
+                2）设备最多可设置{{
+                  setPhoneNumber
+                }}个亲情号码，添加首月无法删除，次月起每月最多允许删除1个亲情号，请慎重操作。
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DeviceCommandModel, FamilyNumberModel } from '../../config/models';
+import DialogService from '../../services/dialog-service';
+import ToastService from '../../services/toast-service';
+import NotifyService from '../../services/notify-service';
+import APICommand from '@/api/command';
+export default {
+  data() {
+    return {
+      loading: false,
+      nickName: '',
+      phone: '',
+      checked: false,
+      shortcutKey: '',
+      listData: [],
+      sos: false,
+      mbnoneDisabled: false,
+      sureFalg: true, // radio 联系方式类型
+      /* contactType: "0" */ value1: '',
+      shortKeylist: [], //当前可设置的快捷键
+      newShortKeyList: ['1', '2', '3', '4', '5'], //对比的快捷键
+      familyNameList: [], //亲情号码名字
+      familyShortKeyList: [], //亲情号码快捷键
+      namePhoneList: [] //名字和亲情号码
+    };
+  },
+  methods: {
+    // 点击其他按钮，号码清空
+    onClearCornet() {
+      this.phone = '';
+    },
+    onClearMobile() {
+      this.phone = '';
+    },
+    onClearPhone() {
+      this.phone = '';
+    },
+    // 返回
+    onNavBack() {
+      this.$router.push({ name: 'familyNumber' });
+    },
+    // 校验联系方式
+    checkedContact() {
+      switch (this.contactType) {
+        case '0':
+          // eslint-disable-next-line no-case-declarations
+          let reg = /^1[3456789]\d{9}$/;
+          if (reg.test(this.phone)) {
+            return true;
+          } else {
+            DialogService.confirm({ title: '请输入正确的号码' });
+          }
+        // eslint-disable-next-line no-fallthrough
+        case '1':
+          // eslint-disable-next-line no-case-declarations
+          let reg1 = /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/;
+          if (reg1.test(this.phone)) {
+            return true;
+          } else {
+            DialogService.confirm({ title: '请输入正确的号码' });
+            return false;
+          }
+        case '2':
+          if (this.phone.length <= 6 && this.phone.length >= 2) {
+            return true;
+          } else {
+            DialogService.confirm({
+              title: '请输入正确的2-6位短号'
+            });
+            return false;
+          }
+        default:
+          DialogService.confirm({ title: '未知号码' });
+          return false;
+      }
+    },
+    // TODO 设置为亲情号码按钮事件
+    checkedClick() {
+      if (!this.checked) {
+        this.mbnoneDisabled = true;
+        this.shortcutKey = '5';
+        this.sos = true;
+        //TODO:轮询号码列表是有sos号码
+        let over = this.listData.find(val => {
+          return val.PressKey == 5;
+        });
+        if (over != null) {
+          DialogService.confirm({
+            title: '已有sos号码，是否覆盖原sos号码？',
+            showCancelButton: true
+          })
+            .then(() => {
+              //TODO:删除原有sos号码
+              this.listData = this.listData.filter(val => {
+                return val.PressKey != 5;
+              });
+              this.listData.forEach(val => {
+                if (val.SOS == 1) {
+                  val.SOS = 0;
+                }
+              });
+            })
+            .catch(() => {
+              this.checked = false;
+              this.mbnoneDisabled = false;
+              this.shortcutKey = '';
+              this.sos = false;
+            });
+        }
+      } else {
+        this.mbnoneDisabled = false;
+        this.shortcutKey = '';
+        this.sos = false;
+      }
+    },
+    submit() {
+      if (!this.sureFalg) {
+        ToastService.success({
+          message: '保存成功',
+          onClose: () => this.onNavBack()
+        });
+        return;
+      }
+      // 数字正则
+      let numberReg = /^-?\d*\.?\d+$/;
+      // 2022 . 6 .29 修改手机正则表达式
+      // 固话正则
+      // 是否存在空格
+      let spaceReg = /(^\s+)|(\s+$)|\s+/g;
+      if (this.nickName == '') {
+        DialogService.confirm({ title: '昵称不能为空' });
+        return;
+      }
+      if (spaceReg.test(this.phone)) {
+        DialogService.confirm({ title: '号码不能有空格,请您检查后重新输入' });
+        return;
+      }
+      if (!numberReg.test(this.phone)) {
+        DialogService.confirm({ title: '号码只能是数字,请您重新输入' });
+        return;
+      }
+      if (this.phone.length < 3) {
+        DialogService.confirm({ title: '请至少输入3位的短号' });
+        return;
+      }
+      // 2022.7.13 取消正则匹配
+      /* if(this.phone.length === 11) {
+                if(!mobileReg.test(this.phone)) {
+                    DialogService.confirm({ title: "请输入正确的手机号码" });
+                    return;
+                }
+            }
+            if(this.phone.length > 11) {
+                if(!fixMobileReg.test(this.phone)) {
+                    DialogService.confirm({ title: "请输入正确的固话" });
+                    return;
+                }
+            } */
+      /* if (!mobileReg.test(Number(phoneNumber))) {
+                DialogService.confirm({ title: "请输入正确的手机号码" });
+                return;
+            } */
+      if (this.phone == '') {
+        DialogService.confirm({ title: '号码不能为空' });
+        return;
+      }
+      /* 取消校验方式 */
+      /*  if (!this.checkedContact()) {
+                    return;
+                } */
+      // 找出重复的用户名
+      let repetition = this.namePhoneList.filter(val => {
+        return val.relationship == this.nickName;
+      });
+      //  找出重复的号码
+      let exists = this.namePhoneList.filter(val => {
+        return val.phone == this.phone;
+      });
+
+      // 判断重复的用户名
+      if (typeof repetition != 'undefined' && repetition.length > 0 && !this.sos) {
+        if (repetition.length == 1) {
+          let existNum = repetition[0];
+          if (existNum.PressKey !== '5') {
+            DialogService.confirm({ title: '用户名已存在' });
+            return;
+          }
+        } else {
+          DialogService.confirm({ title: '用户名已存在' });
+          return;
+        }
+      }
+      //TODO:判断重复号码 允许仅一个号码与sos号码相同
+      if (typeof exists != 'undefined' && exists.length > 0 && !this.sos) {
+        if (exists.length == 1) {
+          let existNum = exists[0];
+          if (existNum.PressKey !== '5') {
+            DialogService.confirm({ title: '电话号码已存在' });
+            return;
+          }
+        } else {
+          DialogService.confirm({ title: '电话号码已存在' });
+          return;
+        }
+      }
+      this.sure();
+    },
+    sure() {
+      //  保存中的弹窗
+      this.listData.push({
+        relationship: this.nickName,
+        phone: this.phone.replace(/\s+/g, ''),
+        SOS: this.checked ? 1 : 0,
+        PressKey: this.shortcutKey,
+        AppType: FamilyNumberModel.appType.parentWeb,
+        Editable: FamilyNumberModel.editable.parentWeb,
+        Level: FamilyNumberModel.level,
+        CallOut: FamilyNumberModel.callOut,
+        Outtime: FamilyNumberModel.outtime,
+        Incoming: FamilyNumberModel.inComing,
+        IncomingTime: FamilyNumberModel.incomingTime
+      });
+      let cmdCode = DeviceCommandModel.familyNum;
+      let cmdValue = { WhiteList: this.listData };
+
+      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
+    },
+    inputChange() {
+      this.shortcutKey = this.shortcutKey.replace(/[^\d]/g, '');
+    },
+    getCommandList() {
+      ToastService.loading();
+      /* let url = `/api/Command/CommandList`;
+                let jsonData = { deviceId: this.$store.getters.deviceId }; */
+      let _this = this;
+      /* _this.$axios
+                    .post(url, jsonData) */
+      APICommand.commandList({
+        deviceId: this.$store.getters.deviceId
+      })
+        .then(res => {
+          let item = res.data;
+          let listData = [];
+          if (item.items.length > 0) {
+            let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum);
+            if (cmdData.length) {
+              let parseValue = JSON.parse(cmdData[0].cmdValue);
+              parseValue.WhiteList.forEach(val => {
+                listData.push(val);
+              });
+              // 获取白名单列表相关数据
+              _this.listData = listData; // 接口调用的数组
+              _this.namePhoneList = listData; //专门来筛选名字和亲情号码的数组
+              _this.setFamilyNum();
+              _this.setFamilyShortKey();
+            }
+          }
+        })
+        .catch(err => console.log(err))
+        .finally(() => ToastService.clear());
+    },
+    setFamilyNum() {
+      this.$store.commit('familyNameList', '');
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyNameList', '');
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey !== '5';
+          })
+          .forEach(f => {
+            _this.familyNameList.push(f.relationship);
+            this.$store.commit('familyNameList', _this.familyNameList);
+          });
+      }
+    },
+    // 缓存亲情号码快捷键
+    setFamilyShortKey() {
+      this.$store.commit('familyShortKeyList', '');
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyShortKeyList', '');
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey != '';
+          })
+          .forEach(f => {
+            _this.familyShortKeyList.push(f.PressKey);
+            this.$store.commit('familyShortKeyList', _this.familyShortKeyList);
+          });
+      }
+    },
+    sendCommand(cmdCode, cmdValue) {
+      ToastService.loading({ message: '设置中,请稍后...' });
+      /* let url = `/api/Command/SendCommand`;
+                let jsonData = {
+                    deviceId: this.$store.getters.deviceId,
+                    userId: this.$store.getters.userId,
+                    serialNo: this.$store.getters.serialNo,
+                    cmdCode,
+                    cmdValue
+                }; */
+      this.sureFalg = false;
+      this.loading = true;
+      /* this.$axios
+                    .post(url, jsonData) */
+      APICommand.SetIotWhiteList({
+        deviceId: this.$store.getters.deviceId,
+        userId: this.$store.getters.userId,
+        serialNo: this.$store.getters.serialNo,
+        cmdCode,
+        cmdValue
+      })
+        .then(res => {
+          ToastService.clear();
+          let item = res.data;
+          if (item.stateCode == 1) {
+            ToastService.success({
+              message: item.message,
+              onClose: () => this.onNavBack()
+            });
+          } else {
+            DialogService.confirm({
+              title: '保存失败',
+              message: item.message
+            });
+            // 失败初始化筛选名字和亲情号码的数组,防止在此判断重复
+            this.namePhoneList = [];
+            ToastService.clear();
+          }
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.sureFalg = true;
+          this.loading = false;
+          ToastService.clear();
+        });
+    },
+    // 选择下拉框的值
+    onDrodownClick(value) {
+      console.log('选择了', value);
+      if (value === '5') {
+        this.shortcutKey = '5';
+        this.sos = true;
+        this.checked = true;
+      } else {
+        this.shortcutKey = value;
+        this.sos = false;
+        this.checked = false;
+      }
+    },
+    // 初始化快捷键数组
+    initShortKey() {
+      ToastService.loading();
+      let familyShortKeyList = this.familyShortKeyList;
+      if (typeof familyShortKeyList === 'string') {
+        familyShortKeyList = Array.from(familyShortKeyList.replace(/,/g, ''));
+      }
+      let newShorList = this.findDiffShortKey(this.newShortKeyList, familyShortKeyList);
+      this.shortKeylist = newShorList
+        .map(s => {
+          let text = s;
+          if (s === '5') {
+            text = 'sos';
+          }
+          return {
+            text: text,
+            value: s
+          };
+        })
+        .filter(s => {
+          return s.text != '';
+        });
+      let defaultObj = {
+        text: '无',
+        value: ''
+      };
+      this.shortKeylist.push(defaultObj);
+      this.value1 = this.shortKeylist[0].value;
+      this.shortcutKey = this.value1;
+    },
+    // 找出两个数组中未设置的快捷键
+    findDiffShortKey(arr1, arr2) {
+      return arr1.concat(arr2).filter((v, i, arr) => {
+        return arr.indexOf(v) === arr.lastIndexOf(v);
+      });
+    }
+  },
+  computed: {
+    theNextClass() {
+      let reg = /^1[3456789]\d{9}$/;
+      let mobileReg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
+      if (this.nickName == '' || this.phone == '') {
+        return false;
+      }
+
+      if (!reg.test(this.phone)) {
+        if (!mobileReg.test(this.phone)) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+    // 获取物联网卡号码，非空为物联网卡，空则为普通电话卡，不显示提示
+    isUnicom() {
+      return this.$store.getters.uniPhone !== '';
+    },
+    // 截取物联网卡前3个数字，148是移动，其它是联通，移动可设5个亲情号码，联通可设10个
+    setPhoneNumber() {
+      const startNumber = this.$store.getters.uniPhone.slice(0, 3);
+      return startNumber === '148' ? 5 : 10;
+    }
+  },
+  watch: {
+    shortcutKey(key) {
+      /* if (!this.sos && key > 4) {
+                    DialogService.confirm({
+                        title: "快捷键1-4的数字",
+                    })
+                        .then(() => {
+                            this.shortcutKey = "";
+                        });
+                } */
+      // 当快捷键等于0的时候
+      if (!this.sos && key === '0') {
+        DialogService.confirm({
+          title: '快捷键1-4的数字'
+        }).then(() => {
+          this.shortcutKey = '';
+        });
+      }
+      if (key === '5') {
+        this.sos = true;
+        this.checked = true;
+      }
+      if (key) {
+        this.listData.forEach(val => {
+          if (key == val.PressKey && key < 5) {
+            DialogService.confirm({
+              title: '快捷键已经存在,请另外设置其它的快捷健'
+            }).then(() => {
+              this.sos = false;
+              this.shortcutKey = '';
+            });
+          }
+        });
+      }
+    },
+    nickName() {
+      if (this.nickName.length >= 6) {
+        NotifyService.notify({
+          type: 'warning',
+          message: '昵称最长可设置6位'
+        });
+      }
+    },
+    phone() {
+      if (this.phone.length > 11) {
+        return (this.phone = this.phone.replace(/\s+/g, ''));
+      }
+    }
+  },
+  created() {
+    this.getCommandList();
+    setTimeout(() => {
+      this.initShortKey();
+      ToastService.clear();
+    }, 1000);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.family_save {
+  width: 100px;
+  line-height: 60px;
+  background: #1989fa;
+  color: #fff;
+  font-size: 30px;
+}
+.tips-container {
+  padding: 20px;
+  .inside-tips {
+    padding: 40px;
+    border-radius: 30px;
+    border: 1px solid green;
+    p {
+      font-size: 32px;
+    }
+  }
+}
+</style>
diff --git a/src/views/myself/changeFamilyNumber.vue b/src/views/myself/changeFamilyNumber.vue
new file mode 100644
index 0000000..5c283bb
--- /dev/null
+++ b/src/views/myself/changeFamilyNumber.vue
@@ -0,0 +1,594 @@
+<template>
+  <div class="addFamilyNumber familyNumber replace">
+    <div class="management">
+      <div class="oh_100vh">
+        <div class="top-con">
+          <van-nav-bar title="修改亲情号" left-arrow :border="true" @click-left="onNavBack">
+            <div class="save" slot="right" @click="onSubmit">保存</div>
+          </van-nav-bar>
+          <!-- <van-cell>
+            <div class="con">
+              <span class="cell mbnone">昵称</span>
+            </div>
+            <input type="text" maxlength="6" placeholder="如爸爸，妈妈，必须少于6个汉字" v-model.trim="nickName" />
+          </van-cell> -->
+          <van-cell-group>
+            <van-field
+              v-model.trim="nickName"
+              maxlength="6"
+              label="昵称"
+              required
+              placeholder="如爸爸，妈妈，必须少于6个汉字"
+              input-align="right"
+            />
+            <van-field
+              v-model.trim="phone"
+              maxlength="12"
+              label="号码"
+              required
+              oninput="value=value.replace(/\s+/g,'')"
+              placeholder="可输入手机，固话，短号"
+              input-align="right"
+            />
+            <van-cell center required>
+              <template #title>
+                <span class="custom-title">快捷键</span>
+              </template>
+              <template #extra>
+                <div>
+                  <van-dropdown-menu>
+                    <van-dropdown-item v-model="value1" @change="onDrodownClick" :options="shortKeylist" />
+                  </van-dropdown-menu>
+                </div>
+              </template>
+            </van-cell>
+          </van-cell-group>
+          <div class="tips-container" v-show="true">
+            <div class="inside-tips">
+              <p>注：</p>
+              <p>1）由于网络因素影响，亲情号码设置后，最长需要等待10分钟后才可拨打。</p>
+              <p>
+                2）设备最多可设置{{
+                  setPhoneNumber
+                }}个亲情号码，添加首月无法删除，次月起每月最多允许删除1个亲情号，请慎重操作。
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!--<div class="submit">
+          <a href="javascript: void(0)"
+             :class="{next: theNextClass}"
+             @click="submit">保存</a>
+                </div>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DeviceCommandModel } from '../../config/models';
+import ToastService from '../../services/toast-service';
+import DialogService from '../../services/dialog-service';
+import NotifyService from '../../services/notify-service';
+import APICommand from '@/api/command';
+export default {
+  data() {
+    return {
+      nickName: '',
+      phone: '',
+      checked: false,
+      shortcutKey: '',
+      listData: [],
+      sos: false,
+      mbnoneDisabled: false,
+      sureFalg: true,
+      familyId: 0, //路由跳转过来的ID // radio 联系方式类型
+      /* contactType: ""  */ value1: '',
+      shortKeylist: [], //当前可设置的快捷键
+      newShortKeyList: ['1', '2', '3', '4', '5'], //对比的快捷键
+      familyNameList: [], //亲情号码名字
+      familyShortKeyList: [] //亲情号码快捷键
+    };
+  },
+  methods: {
+    // 返回
+    onNavBack() {
+      this.$router.push({ name: 'familyNumber' });
+    },
+    // 点击其他按钮，号码清空
+    onClearCornet() {
+      this.phone = '';
+    },
+    onClearMobile() {
+      this.phone = '';
+    },
+    onClearPhone() {
+      this.phone = '';
+    },
+    initContactType() {
+      if (/* /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/ */ /^1[3456789]\d{9}$/.test(this.phone)) {
+        this.contactType = '0';
+      } else if (/* /^[1-9][0-9][0-9]$/ */ /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/.test(this.phone)) {
+        this.contactType = '1';
+      } else if (this.phone.length <= 5 || this.phone.length >= 2) {
+        this.contactType = '2';
+      }
+    },
+    // 校验联系方式
+    checkedContact() {
+      switch (this.contactType) {
+        case '0':
+          // eslint-disable-next-line no-case-declarations
+          let reg = /^1[3456789]\d{9}$/;
+          if (reg.test(this.phone)) {
+            return true;
+          } else {
+            DialogService.confirm({ title: '请输入正确的号码' });
+            return false;
+          }
+        case '1':
+          // eslint-disable-next-line no-case-declarations
+          let reg1 = /^(0[0-9]{2,3})([2-9][0-9]{6,7})+([0-9]{1,4})?$/;
+          if (reg1.test(this.phone)) {
+            return true;
+          } else {
+            DialogService.confirm({ title: '请输入正确的号码' });
+            return false;
+          }
+        case '2':
+          if (this.phone.length <= 6 && this.phone.length >= 2) {
+            return true;
+          } else {
+            DialogService.confirm({
+              title: '请输入正确的2-6位短号'
+            });
+            return false;
+          }
+        default:
+          DialogService.confirm({ title: '未知号码' });
+          return false;
+      }
+    },
+    checkedClick() {
+      if (!this.checked) {
+        this.mbnoneDisabled = true;
+        this.shortcutKey = '5';
+        this.sos = true;
+        let _this = this;
+        //TODO:轮询号码列表是否有sos号码(除了自身)
+        let over = this.listData.find(val => {
+          return val.PressKey == 5 && val.Id != _this.familyId;
+        });
+        if (over != null) {
+          DialogService.confirm({
+            title: '已有sos号码，是否覆盖原sos号码？',
+            showCancelButton: true
+          })
+            .then(() => {
+              //TODO:修改原有sos号码为亲情号
+              this.listData = this.listData.filter(val => {
+                return val.PressKey != 5;
+              });
+              this.listData.forEach(val => {
+                if (val.SOS == 1) {
+                  val.SOS = 0;
+                }
+              });
+            })
+            .catch(() => {
+              this.checked = false;
+              this.mbnoneDisabled = false;
+              this.shortcutKey = '';
+              this.sos = false;
+            });
+        }
+      } else {
+        this.mbnoneDisabled = false;
+        this.shortcutKey = '';
+        this.sos = false;
+      }
+    },
+    onSubmit() {
+      if (!this.sureFalg) {
+        ToastService.loading();
+        ToastService.success({
+          message: '保存成功',
+          onClose: () => this.onNavBack()
+        });
+        return;
+      }
+      // 数字正则
+      let numberReg = /^-?\d*\.?\d+$/;
+      // 2022 . 6 .29 修改手机正则表达式
+      // 固话正则
+      // 是否存在空格
+      let spaceReg = /(^\s+)|(\s+$)|\s+/g;
+      if (this.nickName == '') {
+        DialogService.confirm({ title: '昵称不能为空' });
+        return;
+      }
+      if (spaceReg.test(this.phone)) {
+        DialogService.confirm({ title: '号码不能有空格,请您检查后重新输入' });
+        return;
+      }
+      if (!numberReg.test(this.phone)) {
+        DialogService.confirm({ title: '号码只能是数字,请您重新输入' });
+        return;
+      }
+      if (this.phone.length < 3) {
+        DialogService.confirm({ title: '请至少输入3位的短号' });
+        return;
+      }
+      // 2022.7.13 取消正则匹配
+      /* if(this.phone.length === 11) {
+                if(!mobileReg.test(this.phone)) {
+                    DialogService.confirm({ title: "请输入正确的手机号码" });
+                    return;
+                }
+            }
+            if(this.phone.length > 11) {
+                if(!fixMobileReg.test(this.phone)) {
+                    DialogService.confirm({ title: "请输入正确的固话" });
+                    return;
+                }
+            } */
+      if (this.phone == '') {
+        DialogService.confirm({ title: '号码不能为空' });
+        return;
+      }
+      /* if (!this.checkedContact()) {
+        return;
+      } */
+      // 找出重复的用户名
+      let repetition = this.listData.filter(val => {
+        return val.relationship != this.nickName;
+      });
+      let exists = this.listData.filter(val => {
+        return val.phone == this.phone;
+      });
+      // 判断重复的用户名
+      if (repetition !== undefined && repetition.length > 0 && !this.sos) {
+        if (repetition.length == 1 || repetition.length >= 2) {
+          let nickName = this.nickName;
+          let queryName = this.$route.query.relationship;
+          let familyNameList = this.$store.getters.familyNameList || [];
+          let notQuery = familyNameList.filter(function (item) {
+            return item != queryName;
+          });
+          if (notQuery.includes(queryName) == true) {
+            DialogService.confirm({ title: '用户名已存在' });
+            return;
+          } else if (notQuery.includes(nickName) == true) {
+            DialogService.confirm({ title: '用户名已存在' });
+            return;
+          }
+        }
+      }
+      //    根据是否是sos并且进行了取消sos按键的快捷操作
+      if (this.$route.query.sos === 1 && this.shortcutKey !== 5) {
+        let nickName = this.nickName;
+        let familyNameList = this.$store.getters.familyNameList || [];
+        let onlyName = familyNameList.filter(function (item) {
+          return item;
+        });
+        if (this.shortcutKey != 5 && onlyName.includes(nickName) == true) {
+          DialogService.confirm({ title: '用户名已存在' });
+          return;
+        }
+      }
+      //TODO:判断重复号码
+      if (exists !== undefined && exists.length > 0 && !this.sos) {
+        if (exists.length <= 2) {
+          let existNum = exists[0];
+          //TODO:根据familyId识别是否正在修改的亲情号
+          if (existNum.Id !== this.familyId && existNum.PressKey !== '5') {
+            DialogService.confirm({ title: '电话号码已存在' });
+            return;
+          }
+        } else {
+          DialogService.confirm({ title: '电话号码已存在' });
+          return;
+        }
+      }
+      // 成功保存触发
+      this.sure();
+    },
+    sure() {
+      //TODO:查询已存在的号码
+      let _this = this;
+      let exist = this.listData.find(val => {
+        return _this.familyId === val.Id;
+      });
+      if (exist !== undefined) {
+        exist.relationship = this.nickName;
+        exist.phone = this.phone.replace(/\s+/g, '');
+        exist.SOS = this.checked ? 1 : 0;
+        exist.PressKey = this.shortcutKey;
+      }
+
+      let cmdCode = DeviceCommandModel.familyNum;
+      let cmdValue = {
+        WhiteList: this.listData
+      };
+
+      this.sendCommand(cmdCode, JSON.stringify(cmdValue));
+    },
+    getCommandList() {
+      ToastService.loading();
+      /* let url = `/api/Command/CommandList`;
+      let jsonData = { deviceId: this.$store.getters.deviceId }; */
+      let _this = this;
+      /* _this.$axios
+        .post(url, jsonData) */
+      APICommand.commandList({
+        deviceId: this.$store.getters.deviceId
+      })
+        .then(res => {
+          let item = res.data;
+          let listData = [];
+          if (item.items.length > 0) {
+            let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum);
+            let parseValue = JSON.parse(cmdData[0].cmdValue);
+            parseValue.WhiteList.forEach(val => {
+              if (val.Id == _this.$route.query.id) {
+                _this.familyId = val.Id;
+                _this.nickName = val.relationship;
+                _this.phone = val.phone;
+                _this.checked = val.SOS == 1;
+                _this.shortcutKey = val.PressKey;
+                _this.sos = _this.checked;
+                _this.mbnoneDisabled = _this.sos;
+                _this.initContactType();
+              }
+              listData.push(val);
+            });
+            _this.listData = listData;
+            _this.setFamilyNum();
+            _this.setFamilyShortKey();
+          }
+        })
+        .catch(() => {})
+        .finally(() => ToastService.clear());
+    },
+    setFamilyNum() {
+      this.$store.commit('familyNameList', []);
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyNameList', []);
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey !== '5';
+          })
+          .forEach(f => {
+            _this.familyNameList.push(f.relationship);
+            this.$store.commit('familyNameList', _this.familyNameList);
+          });
+      }
+    },
+    // 缓存亲情号码快捷键
+    setFamilyShortKey() {
+      this.$store.commit('familyShortKeyList', []);
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyShortKeyList', []);
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey != '';
+          })
+          .forEach(f => {
+            _this.familyShortKeyList.push(f.PressKey);
+            this.$store.commit('familyShortKeyList', _this.familyShortKeyList);
+          });
+      }
+    },
+    sendCommand(cmdCode, cmdValue) {
+      ToastService.loading({ message: '设置中,请稍后...' });
+      /* let url = `/api/Command/SendCommand`;
+      let jsonData = {
+        deviceId: this.$store.getters.deviceId,
+        userId: this.$store.getters.userId,
+        serialNo: this.$store.getters.serialNo,
+        cmdCode,
+        cmdValue
+      }; */
+      this.sureFalg = false;
+      ToastService.loading();
+      /*  this.$axios
+        .post(url, jsonData) */
+      APICommand.SetIotWhiteList({
+        deviceId: this.$store.getters.deviceId,
+        userId: this.$store.getters.userId,
+        serialNo: this.$store.getters.serialNo,
+        cmdCode,
+        cmdValue
+      })
+        .then(res => {
+          ToastService.clear();
+          let item = res.data;
+          this.sureFalg = true;
+          if (item.stateCode == 1) {
+            ToastService.success({
+              message: item.message,
+              onClose: () => this.onNavBack()
+            });
+          } else {
+            DialogService.confirm({
+              title: '保存失败',
+              message: item.message
+            });
+          }
+        })
+        .catch(() => {
+          this.sureFalg = true;
+          ToastService.clear();
+        });
+    },
+    /* dialog(title) {
+      this.$dialog.confirm({
+        title,
+        className: "device_confirm",
+        showCancelButton: false
+      });
+    }, */
+    inputChange() {
+      this.shortcutKey = this.shortcutKey.replace(/[^\d]/g, '');
+    },
+    //初始化快捷键数组
+    initShortKey() {
+      let familyShortKeyList = this.$store.getters.familyShortKeyList;
+      let selfKey = this.$route.query.shortKey;
+      if (typeof familyShortKeyList === 'string') {
+        familyShortKeyList = Array.from(familyShortKeyList.replace(/,/g, ''));
+      }
+      let keyOtherList = this.newShortKeyList.filter(f => {
+        return f != selfKey;
+      });
+      let newShorList = this.findDiffShortKey(keyOtherList, familyShortKeyList);
+
+      this.shortKeylist = newShorList
+        .map(s => {
+          let text = s;
+          if (s === '5') {
+            text = 'sos';
+          }
+          return {
+            text: text,
+            value: s
+          };
+        })
+        .filter(s => {
+          return s.text != '';
+        });
+      let defaultObj = {
+        text: '无',
+        value: ''
+      };
+      this.shortKeylist.push(defaultObj);
+      this.value1 = this.$route.query.shortKey;
+    },
+    // 选择下拉框的值
+    onDrodownClick(value) {
+      console.log('选择了', value);
+      if (value === '5') {
+        this.shortcutKey = '5';
+        this.sos = true;
+        this.checked = true;
+      } else {
+        this.shortcutKey = value;
+        this.sos = false;
+        this.checked = false;
+      }
+    },
+    // 找出两个数组中未设置的快捷键
+    findDiffShortKey(arr1, arr2) {
+      return arr1.concat(arr2).filter((v, i, arr) => {
+        return arr.indexOf(v) === arr.lastIndexOf(v);
+      });
+    }
+  },
+  computed: {
+    theNextClass() {
+      let reg = /^1[3456789]\d{9}$/;
+      let mobileReg = /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/;
+      if (this.nickName == '' || this.phone == '') {
+        return false;
+      }
+
+      if (!reg.test(this.phone)) {
+        if (!mobileReg.test(this.phone)) {
+          return false;
+        }
+      }
+
+      return true;
+    },
+    // 获取物联网卡号码，非空为物联网卡，空则为普通电话卡，不显示提示
+    isUnicom() {
+      return this.$store.getters.uniPhone !== '';
+    },
+    // 截取物联网卡前3个数字，148是移动，其它是联通，移动可设5个亲情号码，联通可设10个
+    setPhoneNumber() {
+      const startNumber = this.$store.getters.uniPhone.slice(0, 3);
+      return startNumber === '148' ? 5 : 10;
+    }
+  },
+  watch: {
+    shortcutKey(key) {
+      let _this = this;
+      /* if (!_this.sos && key > 4) {
+                DialogService.confirm({
+                    title: "快捷键1-4的数字"
+                }).then(() => {
+                    _this.shortcutKey = "";
+                });
+            } */
+      if (key) {
+        _this.listData.forEach(val => {
+          //TODO:根据familyId识别是否正在修改的亲情号
+          if (key == val.PressKey && key < 5 && _this.familyId !== val.Id) {
+            DialogService.confirm({
+              title: '快捷键已经存在,请另外设置其它的快捷健'
+            })
+              .then(() => {
+                _this.shortcutKey = '';
+              })
+              .catch(() => {
+                _this.shortcutKey = '';
+              });
+          }
+        });
+      }
+    },
+    nickName() {
+      if (this.nickName.length >= 6 && this.nickName != this.$route.query.relationship) {
+        NotifyService.notify({
+          type: 'warning',
+          message: '昵称最长可设置6位'
+        });
+      }
+    },
+    phone() {
+      if (this.phone.length > 11) {
+        this.phone = this.phone.replace(/\s+/g, '');
+      }
+    }
+  },
+  mounted() {
+    this.getCommandList();
+    setTimeout(() => {
+      this.initShortKey();
+      ToastService.clear();
+    }, 1000);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.addFamilyNumber {
+  .required {
+    color: red;
+    padding: 0 10px;
+  }
+  .save {
+    width: 100px;
+    line-height: 60px;
+    background: #1989fa;
+    color: #fff;
+    font-size: 30px;
+  }
+  .tips-container {
+    padding: 20px;
+    .inside-tips {
+      padding: 40px;
+      border-radius: 30px;
+      border: 1px solid green;
+      p {
+        font-size: 32px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/myself/familyNumber.vue b/src/views/myself/familyNumber.vue
new file mode 100644
index 0000000..b6e57cc
--- /dev/null
+++ b/src/views/myself/familyNumber.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="familyNumber">
+    <van-nav-bar title="亲情号码" left-arrow :borvan-tabbarder="true" @click-left="onNavBack">
+      <van-icon name="plus" slot="right" @click="onAddNumber" />
+    </van-nav-bar>
+    <div class="management" v-show="isPageShow">
+      <div v-if="listData.length > 0">
+        <van-cell v-for="(item, index) in listData" :key="index">
+          <van-swipe-cell>
+            <div class="conArea">
+              <div class="con" @click="conClick(item)">
+                <span class="cell">{{ item.relationship }}</span>
+                <span>
+                  {{ item.phone }}
+                  <i>（快捷键 {{ item.PressKey == '' ? '无' : item.PressKey }}）</i>
+                  <van-icon name="lock" v-if="!item.Editable && item.AppType == familyNumberModel.appType.manufactor" />
+                </span>
+              </div>
+              <em class="fs30" v-show="!isUnicom"
+                ><span>{{ item.SOS == 1 ? 'SOS' : '' }}</span></em
+              >
+              <!-- 增加物联网卡提示，标识亲情号码是否已经下发同步成功 0,1 同步成功， 2同步中-->
+              <em class="fs30" v-show="isUnicom" @click="onClickEm">
+                <span>{{ item.SOS == 1 ? 'SOS' : '' }}</span>
+                {{ item.status >= 2 ? '同步中' : '' }}
+              </em>
+            </div>
+            <template slot="right">
+              <van-button square type="danger" text="删除" @click="onDelete(item)" />
+            </template>
+          </van-swipe-cell>
+        </van-cell>
+      </div>
+      <div class="newsNotData" v-else>您还没添加亲情号码，赶紧去添加吧~</div>
+      <div class="tips-container" v-if="isUnicom">
+        <div class="inside-tips">
+          <p>注：</p>
+          <p>1）由于网络因素影响，亲情号码设置后，最长需要等待10分钟后才可拨打。</p>
+          <p>
+            2）设备最多可设置{{
+              setPhoneNumber
+            }}个亲情号码，添加首月无法删除，次月起每月最多允许删除1个亲情号，请慎重操作。
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DeviceCommandModel, FamilyNumberModel } from '@/config/models';
+import DialogService from '@/services/dialog-service';
+import ToastService from '@/services/toast-service';
+import APICommand from '@/api/command';
+export default {
+  computed: {
+    familyNumberModel() {
+      return FamilyNumberModel;
+    },
+    // 获取物联网卡号码，非空为物联网卡，空则为普通电话卡，不显示提示
+    isUnicom() {
+      return this.$store.getters.uniPhone !== '';
+    },
+    // 截取物联网卡前3个数字，148是移动，其它是联通，移动可设5个亲情号码，联通可设10个
+    setPhoneNumber() {
+      const startNumber = this.$store.getters.uniPhone.slice(0, 3);
+      return startNumber === '148' ? 5 : 10;
+    }
+  },
+  data() {
+    return {
+      listData: [],
+      numberMax: 30,
+      familyNameList: [], //亲情号码名字
+      familyShortKeyList: [], //亲情号码快捷键
+      uniWhiteList: [], //第三方物联网卡列表
+      // 测试数据，不需要后可删除
+      testList: [{ phone: '15111511', status: 2 }],
+      isPageShow: false
+    };
+  },
+  methods: {
+    // 点击标识
+    onClickEm() {
+      DialogService.confirm({
+        title: '温馨提示',
+        message: '请再保存一次号码，进行白名单同步。'
+      });
+    },
+    // 返回
+    onNavBack() {
+      this.$router.push({ name: 'Myself' });
+    },
+    onAddNumber() {
+      // TODO iot平台
+      if (this.listData.length >= this.numberMax) {
+        DialogService.confirm({
+          title: `亲情号码最多只能设置${this.numberMax}个`
+        });
+      } else {
+        this.$router.push({
+          name: 'addFamilyNumber',
+          query: { serialNo: this.$store.getters.serialNo }
+        });
+      }
+    },
+    conClick(item) {
+      if (item.AppType !== FamilyNumberModel.appType.manufactor) {
+        this.$router.push({
+          name: 'changeFamilyNumber',
+          query: {
+            id: item.Id,
+            serialNo: this.$store.getters.serialNo,
+            relationship: item.relationship,
+            sos: item.SOS,
+            shortKey: item.PressKey
+          }
+        });
+      } else {
+        this.tipsOnEditable();
+      }
+    },
+    tipsOnEditable() {
+      DialogService.confirm({
+        title: '抱歉，该记录不可操作',
+        message: '该记录为教师端所设，家长端不可以操作',
+        className: 'device_confirm'
+      });
+    },
+    getCommandList() {
+      ToastService.loading({ message: '数据加载中...' });
+      APICommand.commandList({
+        deviceId: this.$store.getters.deviceId
+      })
+        .then(res => {
+          let item = res.data;
+          let listData = [];
+          if (item.items.length > 0) {
+            let cmdData = item.items.filter(val => val.cmdCode == DeviceCommandModel.familyNum);
+            if (cmdData.length) {
+              let parseValue = JSON.parse(cmdData[0].cmdValue);
+              parseValue.WhiteList.forEach(val => {
+                listData.push(val);
+              });
+            }
+            console.log('随手精灵亲情号码列表::', listData);
+            // 判断是否是小台风物联网卡
+            // 1. 是，查询小台风第三方亲情号卡列表，合并相同亲情号码的列表
+            if (this.isUnicom) {
+              let that = this;
+              console.log('小台风白名单列表::', that.uniWhiteList);
+              if (that.uniWhiteList.length > 0) {
+                // 如果小台风白名单列表有数据，就开始拿一一对应亲情号码的状态赋予到随手精灵亲亲号码的列表
+                listData.map(item => {
+                  // 先判断小台风白名单列表是否有一一对应的亲亲号码，有那就拿相应的状态，无则同步状态默认给2，即同步中
+                  item.status = that.uniWhiteList.find(u => u.phone === item.phone)
+                    ? that.uniWhiteList.find(u => u.phone === item.phone).status
+                    : 2;
+                });
+                that.listData = listData;
+              } else {
+                that.listData = listData;
+              }
+            } else {
+              // 2. 否，照旧
+              this.listData = listData;
+            }
+            ToastService.success({
+              message: '加载完成'
+            });
+            this.isPageShow = true;
+          }
+        })
+        .catch(err => {
+          console.log(err);
+          this.isPageShow = true;
+        })
+        .finally(() => ToastService.clear());
+    },
+    // 如果是小台风物联网卡，获取第三方物联网卡同步的亲情号码列表
+    getIotCardWiteList() {
+      APICommand.GetIotCardWiteList(this.$store.getters.serialNo).then(res => {
+        this.uniWhiteList = res.data.data.items || [];
+      });
+    },
+    onDelete(item) {
+      if (item.AppType !== FamilyNumberModel.appType.manufactor) {
+        const req = this.listData.filter(val => val.Id !== item.Id);
+        let cmdCode = DeviceCommandModel.familyNum;
+        let cmdValue = {
+          WhiteList: req
+        };
+        this.sendCommand(cmdCode, JSON.stringify(cmdValue));
+        ToastService.success({
+          message: '操作成功'
+        });
+      } else {
+        this.tipsOnEditable();
+      }
+    },
+    sendCommand(cmdCode, cmdValue) {
+      ToastService.loading({ message: '删除中,请稍后...' });
+      /* let url = `/api/Command/SendCommand`;
+      let jsonData = {
+        deviceId: this.$store.getters.deviceId,
+        userId: this.$store.getters.userId,
+        serialNo: this.$store.getters.serialNo,
+        cmdCode,
+        cmdValue
+      }; */
+      /* this.$axios
+        .post(url, jsonData) */
+      APICommand.SetIotWhiteList({
+        deviceId: this.$store.getters.deviceId,
+        userId: this.$store.getters.userId,
+        serialNo: this.$store.getters.serialNo,
+        cmdCode,
+        cmdValue
+      })
+        .then(res => {
+          let item = res.data;
+          if (item.stateCode == 1) {
+            ToastService.success({
+              message: '操作成功'
+            });
+          } else {
+            DialogService.confirm({
+              title: '操作失败，请重新设置'
+            });
+          }
+          this.getCommandList();
+        })
+        .catch(() => {
+          ToastService.clear();
+        });
+    },
+    setFamilyNum() {
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyNameList', '');
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey !== '5';
+          })
+          .forEach(f => {
+            _this.familyNameList.push(f.relationship);
+            this.$store.commit('familyNameList', _this.familyNameList);
+          });
+      }
+    },
+    // 缓存亲情号码快捷键
+    setFamilyShortKey() {
+      let _this = this;
+      if (_this.listData == null || this.listData.length == 0) {
+        this.$store.commit('familyShortKeyList', '');
+      } else {
+        _this.listData
+          .filter(val => {
+            return val.PressKey != '';
+          })
+          .forEach(f => {
+            _this.familyShortKeyList.push(f.PressKey);
+            this.$store.commit('familyShortKeyList', _this.familyShortKeyList);
+          });
+      }
+    }
+  },
+  created() {
+    let that = this;
+    this.getIotCardWiteList();
+    setTimeout(() => {
+      that.getCommandList();
+    }, 300);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.familyNumber {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  font-size: 32px;
+  .management {
+    position: relative;
+    height: calc(100vh - 160px);
+    overflow: scroll;
+    .newsNotData {
+      height: 400px;
+      @include flexbox(center, center, column, nowrap);
+      font-size: 32px;
+    }
+    .conArea {
+      .con {
+        height: 100px;
+        @include flexbox(center, flex-start, column, nowrap);
+      }
+    }
+    .tips-container {
+      padding: 20px;
+      .inside-tips {
+        padding: 40px;
+        border-radius: 30px;
+        border: 1px solid green;
+      }
+    }
+  }
+}
+</style>
+>
diff --git a/src/views/myself/index.vue b/src/views/myself/index.vue
index ca6c9d1..4eb8ad3 100644
--- a/src/views/myself/index.vue
+++ b/src/views/myself/index.vue
@@ -53,6 +53,7 @@
         <SubmenuList :title="othersSetting.title" :list="othersSetting.list"> </SubmenuList>
       </div>
     </div>
+    <TabBar />
   </div>
 </template>
 
@@ -63,8 +64,9 @@ import APIUser from '@/api/user';
 import APIDevice from '@/api/device';
 import ToastService from '@/services/toast-service';
 import { isNotNull } from '@/services/utils-service';
+import TabBar from '@/components/TabBar';
 export default {
-  components: { /* NavBar,  */ SubmenuList },
+  components: { /* NavBar,  */ SubmenuList, TabBar },
   data() {
     return {
       userInfos: {},
@@ -72,7 +74,13 @@ export default {
       family: {
         title: '亲情沟通',
         list: [
-          { imgPath: require('../../assets/logo.png'), text: '亲情号码', bgColor: 'red' },
+          {
+            imgPath: require('../../assets/logo.png'),
+            text: '亲情号码',
+            bgColor: 'red',
+            showType: 'newPage',
+            routerName: 'familyNumber'
+          },
           { imgPath: require('../../assets/logo.png'), text: '留言', bgColor: 'green' },
           { imgPath: require('../../assets/logo.png'), text: '通话记录', bgColor: 'red' }
         ]
diff --git a/src/views/optimize/index.vue b/src/views/optimize/index.vue
index a137f5e..4f139b0 100644
--- a/src/views/optimize/index.vue
+++ b/src/views/optimize/index.vue
@@ -1,10 +1,14 @@
 <!--  -->
 <template>
-  <div></div>
+  <div>
+    <TabBar />
+  </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar';
 export default {
+  components: { TabBar },
   data() {
     return {};
   },
diff --git a/src/views/today/index.vue b/src/views/today/index.vue
index a137f5e..4f139b0 100644
--- a/src/views/today/index.vue
+++ b/src/views/today/index.vue
@@ -1,10 +1,14 @@
 <!--  -->
 <template>
-  <div></div>
+  <div>
+    <TabBar />
+  </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar';
 export default {
+  components: { TabBar },
   data() {
     return {};
   },