简柏林 / thingskit-app · Commits

Commit 5844ab5070b4761ab83fd424ece2087cc74f6e34

Authored by xp.Huang
2 parents 726d0b8a 1e37fd4d

Merge branch 'ww' into 'main' 

fix: tabbar badge not real update

See merge request huang/thingskit-app!91
Inline Side-by-side
Showing 2 changed files with 354 additions and 333 deletions
1 -<template>  
2 - <view class="alarm-detail-page">  
3 - <!-- 公共组件-每个页面必须引入 -->  
4 - <public-module></public-module>  
5 - <view class="alarm-detail-column">  
6 - <view class="u-flex detail-column">  
7 - <view class="u-flex column">  
8 - <text class="text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>  
9 - <image class="image" src="/static/alarm-device.png"></image>  
10 - </view>  
11 - <view class="column">  
12 - <text class="text-org-bold ">告警级别：</text>  
13 - <text class="text-device-muted" style="color:#DE4437">  
14 - {{  
15 - list.severity == 'CRITICAL'  
16 - ? '危险'  
17 - : list.severity == 'MAJOR'  
18 - ? '重要'  
19 - : list.severity == 'MINOR'  
20 - ? '次要'  
21 - : list.severity == 'WARNING'  
22 - ? '警告'  
23 - : '不确定'  
24 - }}  
25 - </text>  
26 - </view>  
27 - <view class="column">  
28 - <text class="text-org-bold">所属组织：</text>  
29 - <text class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text>  
30 - </view>  
31 - <view class="column">  
32 - <text class="text-org-bold">告警值：</text>  
33 - <text class="text-device-muted">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>  
34 - </view>  
35 - <view class="column">  
36 - <text class="text-org-bold">告警时间：</text>  
37 - <text class="text-device-muted">{{ list.createdTime }}</text>  
38 - </view>  
39 - <view class="column">  
40 - <text class="text-org-bold">告警状态：</text>  
41 - <text class="text-device-muted" style="color: #DE4437;">  
42 - {{  
43 - list.status == 'CLEARED_UNACK'  
44 - ? '清除未确认'  
45 - : list.status == 'ACTIVE_UNACK'  
46 - ? '激活未确认'  
47 - : list.status == 'CLEARED_ACK'  
48 - ? '清除已确认'  
49 - : '激活已确认'  
50 - }}  
51 - </text>  
52 - </view>  
53 - </view>  
54 - </view>  
55 - <!-- #ifdef MP -->  
56 - <view class="handle-result text-org-bold" style="">处理结果</view>  
57 - <view class="hanle-main">  
58 - <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1">  
59 - <u-form-item label="." prop="result" ref="item3">  
60 - <view style="position: relative;left: -60rpx;">  
61 - <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea>  
62 - </view>  
63 - </u-form-item>  
64 - </u--form>  
65 - </view>  
66 - <!-- #endif -->  
67 - <!-- #ifdef APP-PLUS -->  
68 - <view class="handle-result text-org-bold">处理结果</view>  
69 - <view class="hanle-main">  
70 - <view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view>  
71 - </view>  
72 - <!-- #endif -->  
73 - <view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;">  
74 - <view  
75 - :style="[  
76 - { position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' },  
77 - { right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' }  
78 - ]"  
79 - v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'"  
80 - class="u-flex"  
81 - style="width: 260rpx"  
82 - >  
83 - <u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>  
84 - </view>  
85 - <view style="width: 30rpx;"></view>  
86 - <view  
87 - :style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]"  
88 - v-if="list.status == 'ACTIVE_ACK'"  
89 - class="u-flex"  
90 - style="width: 260rpx"  
91 - >  
92 - <u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button>  
93 - </view>  
94 - </view>  
95 - </view>  
96 -</template>  
97 -  
98 -<script>  
99 -export default {  
100 - data() {  
101 - return {  
102 - formModel: {  
103 - result: ''  
104 - },  
105 - list: {}  
106 - };  
107 - },  
108 - onLoad(e) {  
109 - if (e.data !== null) {  
110 - let params = JSON.parse(e.data);  
111 - this.list = params;  
112 - }  
113 - // 隐藏原生的tabbar  
114 - uni.hideTabBar();  
115 - },  
116 - methods: {  
117 - //处理  
118 - handleSubmit() {  
119 - if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');  
120 - else  
121 - uni.$u.http  
122 - .post(`/alarm/${this.list.id}/ack`)  
123 - .then(res => {  
124 - if (res == '') {  
125 - uni.showToast({  
126 - title: '处理成功~',  
127 - icon: 'none'  
128 - });  
129 - let pages = getCurrentPages(); //获取所有页面栈实例列表  
130 - let nowPage = pages[pages.length - 1]; //当前页页面实例  
131 - let prevPage = pages[pages.length - 2]; //上一页页面实例  
132 - prevPage.$vm.detailStatus = true;  
133 - setTimeout(() => {  
134 - uni.navigateBack({  
135 - delta: 1  
136 - });  
137 - }, 500);  
138 - }  
139 - })  
140 - .catch(e => {  
141 - uni.$u.toast(e.data?.message);  
142 - });  
143 - },  
144 - // 清除  
145 - handleRemove() {  
146 - uni.$u.http  
147 - .post(`/alarm/${this.list.id}/clear`)  
148 - .then(res => {  
149 - if (res == '') {  
150 - uni.showToast({  
151 - title: '清除成功~',  
152 - icon: 'none'  
153 - });  
154 - let pages = getCurrentPages(); //获取所有页面栈实例列表  
155 - let nowPage = pages[pages.length - 1]; //当前页页面实例  
156 - let prevPage = pages[pages.length - 2]; //上一页页面实例  
157 - prevPage.$vm.detailStatus = true;  
158 - setTimeout(() => {  
159 - uni.navigateBack({  
160 - delta: 1  
161 - });  
162 - }, 500);  
163 - }  
164 - })  
165 - .catch(e => {  
166 - uni.$u.toast(e.data?.message);  
167 - });  
168 - },  
169 - formatDetailText(e) {  
170 - //去除字符串双引号  
171 - const jsonStr = JSON.stringify(e);  
172 - const str = jsonStr.substring(1, jsonStr.length - 1);  
173 - const newStr = str.replace(/\"/g, '');  
174 - return newStr;  
175 - }  
176 - }  
177 -};  
178 -</script>  
179 -  
180 -<style lang="scss" scoped>  
181 -@import './static/alarmDetail.scss';  
182 -/deep/ .u-button--primary {  
183 - background-color: #377dff !important;  
184 - border-color: #377dff !important;  
185 -} 1 +<template>
  2 + <view class="alarm-detail-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="alarm-detail-column">
  6 + <view class="u-flex detail-column">
  7 + <view class="u-flex column">
  8 + <text class="text-org-bold">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>
  9 + <image class="image" src="/static/alarm-device.png"></image>
  10 + </view>
  11 + <view class="column">
  12 + <text class="text-org-bold ">告警级别：</text>
  13 + <text class="text-device-muted" style="color:#DE4437">
  14 + {{
  15 + list.severity == 'CRITICAL'
  16 + ? '危险'
  17 + : list.severity == 'MAJOR'
  18 + ? '重要'
  19 + : list.severity == 'MINOR'
  20 + ? '次要'
  21 + : list.severity == 'WARNING'
  22 + ? '警告'
  23 + : '不确定'
  24 + }}
  25 + </text>
  26 + </view>
  27 + <view class="column">
  28 + <text class="text-org-bold">所属组织：</text>
  29 + <text
  30 + class="text-device-muted">{{ list.organizationName == null ? '暂无数据' : list.organizationName }}</text>
  31 + </view>
  32 + <view class="column">
  33 + <text class="text-org-bold">告警值：</text>
  34 + <text
  35 + class="text-device-muted">{{ list.details == null ? '暂无数据' : formatDetailText(list.details.data) }}</text>
  36 + </view>
  37 + <view class="column">
  38 + <text class="text-org-bold">告警时间：</text>
  39 + <text class="text-device-muted">{{ list.createdTime }}</text>
  40 + </view>
  41 + <view class="column">
  42 + <text class="text-org-bold">告警状态：</text>
  43 + <text class="text-device-muted" style="color: #DE4437;">
  44 + {{
  45 + list.status == 'CLEARED_UNACK'
  46 + ? '清除未确认'
  47 + : list.status == 'ACTIVE_UNACK'
  48 + ? '激活未确认'
  49 + : list.status == 'CLEARED_ACK'
  50 + ? '清除已确认'
  51 + : '激活已确认'
  52 + }}
  53 + </text>
  54 + </view>
  55 + </view>
  56 + </view>
  57 + <!-- #ifdef MP -->
  58 + <view class="handle-result text-org-bold" style="">处理结果</view>
  59 + <view class="hanle-main">
  60 + <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left"
  61 + :model="formModel" ref="form1">
  62 + <u-form-item label="." prop="result" ref="item3">
  63 + <view style="position: relative;left: -60rpx;">
  64 + <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
  65 + </u--textarea>
  66 + </view>
  67 + </u-form-item>
  68 + </u--form>
  69 + </view>
  70 + <!-- #endif -->
  71 + <!-- #ifdef APP-PLUS -->
  72 + <view class="handle-result text-org-bold">处理结果</view>
  73 + <view class="hanle-main">
  74 + <view>
  75 + <u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count>
  76 + </u--textarea>
  77 + </view>
  78 + </view>
  79 + <!-- #endif -->
  80 + <view style="margin-top: 44rpx;display: flex;align-items: center;justify-content: space-between;">
  81 + <view :style="[
  82 + { position: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? 'relative' : '' },
  83 + { right: list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK' ? '-210rpx' : '' }
  84 + ]" v-if="list.status !== 'CLEARED_ACK' && list.status !== 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx">
  85 + <u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
  86 + </view>
  87 + <view style="width: 30rpx;"></view>
  88 + <view
  89 + :style="[{ position: list.status == 'ACTIVE_ACK' ? 'relative' : '' }, { right: list.status == 'ACTIVE_ACK' ? '207rpx' : '' }]"
  90 + v-if="list.status == 'ACTIVE_ACK'" class="u-flex" style="width: 260rpx">
  91 + <u-button @click="handleRemove" type="error" shape="circle" text="清除"></u-button>
  92 + </view>
  93 + </view>
  94 + </view>
  95 +</template>
  96 +
  97 +<script>
  98 + import {
  99 + mapActions
  100 + } from 'vuex'
  101 + export default {
  102 + data() {
  103 + return {
  104 + formModel: {
  105 + result: ''
  106 + },
  107 + list: {}
  108 + };
  109 + },
  110 + onLoad(e) {
  111 + if (e.data !== null) {
  112 + let params = JSON.parse(e.data);
  113 + this.list = params;
  114 + }
  115 + // 隐藏原生的tabbar
  116 + uni.hideTabBar();
  117 + },
  118 + methods: {
  119 + //处理
  120 + handleSubmit() {
  121 + if (this.formModel.result == '') return uni.$u.toast('请输入处理结果');
  122 + else
  123 + uni.$u.http
  124 + .post(`/alarm/${this.list.id}/ack`)
  125 + .then(res => {
  126 + if (res == '') {
  127 + uni.showToast({
  128 + title: '处理成功~',
  129 + icon: 'none'
  130 + });
  131 + let pages = getCurrentPages(); //获取所有页面栈实例列表
  132 + let nowPage = pages[pages.length - 1]; //当前页页面实例
  133 + let prevPage = pages[pages.length - 2]; //上一页页面实例
  134 + prevPage.$vm.detailStatus = true;
  135 + setTimeout(() => {
  136 + uni.navigateBack({
  137 + delta: 1
  138 + });
  139 + }, 500);
  140 + }
  141 + })
  142 + .catch(e => {
  143 + uni.$u.toast(e.data?.message);
  144 + });
  145 + },
  146 + // 清除
  147 + handleRemove() {
  148 + uni.$u.http
  149 + .post(`/alarm/${this.list.id}/clear`)
  150 + .then(res => {
  151 + if (res == '') {
  152 + uni.showToast({
  153 + title: '清除成功~',
  154 + icon: 'none'
  155 + });
  156 +
  157 + let pages = getCurrentPages(); //获取所有页面栈实例列表
  158 + let nowPage = pages[pages.length - 1]; //当前页页面实例
  159 + let prevPage = pages[pages.length - 2]; //上一页页面实例
  160 + prevPage.$vm.detailStatus = true;
  161 + setTimeout(async () => {
  162 + uni.navigateBack({
  163 + delta: 1
  164 + });
  165 + const res = await uni.$u.http.get('/yt/homepage/app?login=true');
  166 + if (res) {
  167 + //异步实时更新告警徽标数
  168 + await this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
  169 + }
  170 + }, 500);
  171 + }
  172 + })
  173 + .catch(e => {
  174 + uni.$u.toast(e.data?.message);
  175 + });
  176 + },
  177 + ...mapActions(['updateBadgeTotal']),
  178 + formatDetailText(e) {
  179 + //去除字符串双引号
  180 + const jsonStr = JSON.stringify(e);
  181 + const str = jsonStr.substring(1, jsonStr.length - 1);
  182 + const newStr = str.replace(/\"/g, '');
  183 + return newStr;
  184 + }
  185 + }
  186 + };
  187 +</script>
  188 +
  189 +<style lang="scss" scoped>
  190 + @import './static/alarmDetail.scss';
  191 +
  192 + /deep/ .u-button--primary {
  193 + background-color: #377dff !important;
  194 + border-color: #377dff !important;
  195 + }
186 </style> 196 </style>
@@ -2,21 +2,17 @@ @@ -2,21 +2,17 @@
2 <view> 2 <view>
3 <view :class="[isFixed ? 'f-fixed' : '']"> 3 <view :class="[isFixed ? 'f-fixed' : '']">
4 <!-- 二次封装tabbar --> 4 <!-- 二次封装tabbar -->
5 - <u-tabbar  
6 - :value="tabIndex"  
7 - @change="onTabbar"  
8 - :fixed="false"  
9 - :placeholder="false"  
10 - :safeAreaInsetBottom="false"  
11 - :activeColor="activeColor"  
12 - :inactiveColor="inactiveColor"  
13 - :border="border"  
14 - > 5 + <u-tabbar :value="tabIndex" @change="onTabbar" :fixed="false" :placeholder="false"
  6 + :safeAreaInsetBottom="false" :activeColor="activeColor" :inactiveColor="inactiveColor" :border="border">
15 <block v-for="(item, index) in list" :key="index"> 7 <block v-for="(item, index) in list" :key="index">
16 <!-- 自定义icon --> 8 <!-- 自定义icon -->
17 <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle"> 9 <u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
18 - <view slot="active-icon"><image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image></view>  
19 - <view slot="inactive-icon"><image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image></view> 10 + <view slot="active-icon">
  11 + <image style="width:50rpx;height: 50rpx;" :src="item.iconFill" mode=""></image>
  12 + </view>
  13 + <view slot="inactive-icon">
  14 + <image style="width:50rpx;height: 50rpx;" :src="item.icon" mode=""></image>
  15 + </view>
20 </u-tabbar-item> 16 </u-tabbar-item>
21 </block> 17 </block>
22 </u-tabbar> 18 </u-tabbar>
@@ -29,153 +25,168 @@ @@ -29,153 +25,168 @@
29 </template> 25 </template>
30 26
31 <script> 27 <script>
32 -import base from '@/config/baseUrl.js';  
33 -import { mapState } from 'vuex'; 28 + import base from '@/config/baseUrl.js';
  29 + import {
  30 + mapState
  31 + } from 'vuex';
34 32
35 -export default {  
36 - name: 'f-tabbar',  
37 - props: {  
38 - // 是否固定在底部  
39 - isFixed: {  
40 - type: Boolean,  
41 - default: true  
42 - },  
43 - // 是否设置防止塌陷高度  
44 - isFillHeight: {  
45 - type: Boolean,  
46 - default: true  
47 - },  
48 - // 选中的颜色  
49 - activeColor: {  
50 - type: String,  
51 - default: '#377dff'  
52 - },  
53 - // 未选中颜色  
54 - inactiveColor: {  
55 - type: String,  
56 - default: '#606266' 33 + export default {
  34 + name: 'f-tabbar',
  35 + props: {
  36 + // 是否固定在底部
  37 + isFixed: {
  38 + type: Boolean,
  39 + default: true
  40 + },
  41 + // 是否设置防止塌陷高度
  42 + isFillHeight: {
  43 + type: Boolean,
  44 + default: true
  45 + },
  46 + // 选中的颜色
  47 + activeColor: {
  48 + type: String,
  49 + default: '#377dff'
  50 + },
  51 + // 未选中颜色
  52 + inactiveColor: {
  53 + type: String,
  54 + default: '#606266'
  55 + },
  56 + // 是否显示边框色
  57 + border: {
  58 + type: Boolean,
  59 + default: true
  60 + },
  61 + // 右上角的角标提示信息
  62 + badge: {
  63 + type: [String, Number, null],
  64 + default: uni.$u.props.tabbarItem.badge
  65 + },
  66 + // 是否显示圆点，将会覆盖badge参数
  67 + dot: {
  68 + type: Boolean,
  69 + default: uni.$u.props.tabbarItem.dot
  70 + },
  71 + // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
  72 + badgeStyle: {
  73 + type: [Object, String],
  74 + default: uni.$u.props.tabbarItem.badgeStyle
  75 + }
57 }, 76 },
58 - // 是否显示边框色  
59 - border: {  
60 - type: Boolean,  
61 - default: true 77 + data() {
  78 + return {
  79 + systemInfo: base.systemInfo,
  80 + tabIndex: 0,
  81 + path: '', //当前路径
  82 + //#ifdef MP
  83 + list: [{
  84 + name: '首页',
  85 + url: 'pages/index/index',
  86 + icon: '../../../static/home-un.png',
  87 + iconFill: '../../../static/home-yes.png'
  88 + },
  89 + {
  90 + name: '设备',
  91 + url: 'pages/device/device',
  92 + icon: '../../../static/device-un.png',
  93 + iconFill: '../../../static/device-yes.png'
  94 + },
  95 + {
  96 + name: '告警',
  97 + url: 'pages/alarm/alarm',
  98 + icon: '../../../static/alert-un.png',
  99 + iconFill: '../../../static/alert-yes.png',
  100 + badge: this.$store.state.badgeInfo
  101 + },
  102 + {
  103 + name: '我的',
  104 + url: 'pages/personal/personal',
  105 + icon: '../../../static/my-un.png',
  106 + iconFill: '../../../static/my-yes.png'
  107 + }
  108 + ],
  109 + //#endif
  110 + //#ifdef APP-PLUS
  111 + list: [{
  112 + name: '首页',
  113 + url: 'pages/index/index',
  114 + icon: '/static/home-un.png',
  115 + iconFill: '/static/home-yes.png'
  116 + },
  117 + {
  118 + name: '设备',
  119 + url: 'pages/device/device',
  120 + icon: '/static/device-un.png',
  121 + iconFill: '/static/device-yes.png'
  122 + },
  123 + {
  124 + name: '告警',
  125 + url: 'pages/alarm/alarm',
  126 + icon: '/static/alert-un.png',
  127 + iconFill: '/static/alert-yes.png',
  128 + badge: this.$store.state.badgeInfo
  129 + },
  130 + {
  131 + name: '我的',
  132 + url: 'pages/personal/personal',
  133 + icon: '/static/my-un.png',
  134 + iconFill: '/static/my-yes.png'
  135 + }
  136 + ]
  137 + //#endif
  138 + };
62 }, 139 },
63 - // 右上角的角标提示信息  
64 - badge: {  
65 - type: [String, Number, null],  
66 - default: uni.$u.props.tabbarItem.badge 140 + created() {
  141 + //获取页面路径
  142 + let currentPages = getCurrentPages();
  143 + let page = currentPages[currentPages.length - 1];
  144 + this.path = page.route;
  145 + if (this.list.length > 0) {
  146 + this.list.forEach((item, index) => {
  147 + if (this.path == item.url) {
  148 + this.tabIndex = index;
  149 + }
  150 + });
  151 + }
67 }, 152 },
68 - // 是否显示圆点，将会覆盖badge参数  
69 - dot: {  
70 - type: Boolean,  
71 - default: uni.$u.props.tabbarItem.dot 153 + computed: {
  154 + getAlarmBadge() {
  155 + return this.$store.state.badgeInfo
  156 + }
72 }, 157 },
73 - // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性  
74 - badgeStyle: {  
75 - type: [Object, String],  
76 - default: uni.$u.props.tabbarItem.badgeStyle  
77 - }  
78 - },  
79 - data() {  
80 - return {  
81 - systemInfo: base.systemInfo,  
82 - tabIndex: 0,  
83 - path: '', //当前路径  
84 - //#ifdef MP  
85 - list: [  
86 - {  
87 - name: '首页',  
88 - url: 'pages/index/index',  
89 - icon: '../../../static/home-un.png',  
90 - iconFill: '../../../static/home-yes.png'  
91 - },  
92 - {  
93 - name: '设备',  
94 - url: 'pages/device/device',  
95 - icon: '../../../static/device-un.png',  
96 - iconFill: '../../../static/device-yes.png'  
97 - },  
98 - {  
99 - name: '告警',  
100 - url: 'pages/alarm/alarm',  
101 - icon: '../../../static/alert-un.png',  
102 - iconFill: '../../../static/alert-yes.png',  
103 - badge: this.$store.state.badgeInfo  
104 - },  
105 - {  
106 - name: '我的',  
107 - url: 'pages/personal/personal',  
108 - icon: '../../../static/my-un.png',  
109 - iconFill: '../../../static/my-yes.png' 158 + methods: {
  159 + onTabbar(index) {
  160 + // this.list[2].badge = this.getAlarmBadge;
  161 +
  162 + if (this.list[index].url) {
  163 + if (this.path !== this.list[index].url) {
  164 + uni.switchTab({
  165 + url: '/' + this.list[index].url
  166 + });
  167 + }
110 } 168 }
111 - ],  
112 - //#endif  
113 - //#ifdef APP-PLUS  
114 - list: [  
115 - {  
116 - name: '首页',  
117 - url: 'pages/index/index',  
118 - icon: '/static/home-un.png',  
119 - iconFill: '/static/home-yes.png'  
120 - },  
121 - {  
122 - name: '设备',  
123 - url: 'pages/device/device',  
124 - icon: '/static/device-un.png',  
125 - iconFill: '/static/device-yes.png'  
126 - },  
127 - {  
128 - name: '告警',  
129 - url: 'pages/alarm/alarm',  
130 - icon: '/static/alert-un.png',  
131 - iconFill: '/static/alert-yes.png', 169 + }
  170 + },
  171 + watch: {
  172 + getAlarmBadge(oldValue, newValue) {
  173 + const oldRecord = this.list[2]
  174 + this.$set(this.list, 2, {
  175 + ...oldRecord,
132 badge: this.$store.state.badgeInfo 176 badge: this.$store.state.badgeInfo
133 - },  
134 - {  
135 - name: '我的',  
136 - url: 'pages/personal/personal',  
137 - icon: '/static/my-un.png',  
138 - iconFill: '/static/my-yes.png'  
139 - }  
140 - ]  
141 - //#endif  
142 - };  
143 - },  
144 - created() {  
145 - //获取页面路径  
146 - let currentPages = getCurrentPages();  
147 - let page = currentPages[currentPages.length - 1];  
148 - this.path = page.route;  
149 - if (this.list.length > 0) {  
150 - this.list.forEach((item, index) => {  
151 - if (this.path == item.url) {  
152 - this.tabIndex = index;  
153 - }  
154 - });  
155 - }  
156 - },  
157 - methods: {  
158 - onTabbar(index) {  
159 - this.list[2].badge = this.$store.state.badgeInfo; 177 + })
160 178
161 - if (this.list[index].url) {  
162 - if (this.path !== this.list[index].url) {  
163 - uni.switchTab({  
164 - url: '/' + this.list[index].url  
165 - });  
166 - }  
167 } 179 }
168 } 180 }
169 - }  
170 -}; 181 + };
171 </script> 182 </script>
172 183
173 <style lang="scss" scoped> 184 <style lang="scss" scoped>
174 -.f-fixed {  
175 - position: fixed;  
176 - bottom: 0;  
177 - left: 0;  
178 - right: 0;  
179 - z-index: 1000;  
180 -} 185 + .f-fixed {
  186 + position: fixed;
  187 + bottom: 0;
  188 + left: 0;
  189 + right: 0;
  190 + z-index: 1000;
  191 + }
181 </style> 192 </style>