页面切图

App.vue

@@ -5,6 +5,10 @@ export default {
     },
     onShow: function () {
         console.log('App Show')
+        uni.setTabBarBadge({
+            index: 1,
+            text: '6'
+        })
     },
     onHide: function () {
         console.log('App Hide')
@@ -15,6 +19,15 @@ export default {
 <style lang="scss">
 /*每个页面公共css */
 @import './common/css/base.scss';
+/deep/ uni-tabbar .uni-tabbar__badge{
+    width: auto;
+    height: 28rpx;
+    line-height: 28rpx;
+    border-radius: 28rpx;
+    min-width: 28rpx;
+    font-size: 20rpx;
+    padding: 0 8rpx;
+}
 
 
 </style>

common/css/base.scss

@@ -109,3 +109,31 @@ page {
     }
 }
 
+
+.index {
+
+    .header {
+        margin: 0 30rpx;
+        background: $uni-theme-white;
+        border-radius: 12rpx;
+        background: $uni-color-primary;
+        padding: 30rpx 10rpx 40rpx;
+        display: grid;
+        grid-gap: 60rpx 0;
+        grid-template-columns: 1fr 1fr 1fr;
+    
+        .header-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: #fff;
+            font-size: 28rpx;
+    
+            .header-item-value {
+            font-size: 40rpx;
+                margin-bottom: 10rpx;
+            }
+        }
+    }
+}

common/js/cacheKey.js

@@ -0,0 +1,4 @@
+export default {
+    config: 'config', // 全剧配置
+    userInfo: 'userInfo', // 用户信息
+}

common/js/util.js

@@ -1,5 +1,5 @@
 import request from './request'
-import config from './config.js'
+import cache from './cacheKey.js'
 const toast = (title, duration = 1500, call, mask = false, icon = 'none') => {
     if (Boolean(title) === false) {
         return

main.js

@@ -3,12 +3,14 @@ import App from './App'
 import util from './common/js/util'
 import request from './common/js/request'
 import config from './common/js/config'
+import cacheKey from './common/js/cacheKey'
 import Vue from 'vue'
 import share from "@/common/js/share.js";
 Vue.config.productionTip = false
 Vue.prototype.$request = request
 Vue.prototype.$util = util
 Vue.prototype.$config = config
+Vue.prototype.$cacheKey = cacheKey
 Vue.mixin(share);
 App.mpType = 'app'
 const app = new Vue({

pages.json

@@ -8,9 +8,9 @@
       }
     },
     {
-      "path": "pages/index/report",
+      "path": "pages/index/message",
       "style": {
-        "navigationBarTitleText": "告警"
+        "navigationBarTitleText": "消息"
       }
     },
     {
@@ -156,6 +156,24 @@
       "style": {
         "navigationBarTitleText": "通过网关添加设备"
       }
+    },
+    {
+      "path": "pages/message/incident",
+      "style": {
+        "navigationBarTitleText": "系统消息"
+      }
+    },
+    {
+      "path": "pages/message/report",
+      "style": {
+        "navigationBarTitleText": "告警"
+      }
+    },
+    {
+      "path": "pages/message/system",
+      "style": {
+        "navigationBarTitleText": "事件"
+      }
     }
   ],
   "tabBar": {
@@ -173,10 +191,10 @@
         "text": "首页"
       },
       {
-        "pagePath": "pages/index/report",
-        "iconPath": "static/report.png",
-        "selectedIconPath": "static/report2.png",
-        "text": "告警"
+        "pagePath": "pages/index/message",
+        "iconPath": "static/notice.png",
+        "selectedIconPath": "static/notice2.png",
+        "text": "消息"
       },
       {
         "pagePath": "pages/index/mine",

pages/index/comp/indexGongCheng.vue

@@ -0,0 +1,42 @@
+<template>
+    <view class="index-gongcheng">
+        <div class="header">
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">正常设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">报警设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">离线设备</div>
+            </div>
+        </div>
+        <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
+            thumbnail="/static/device.png">
+            <text>设备基础信息 </text>
+        </uni-card>
+        <uni-load-more status="nomore"></uni-load-more>
+    </view>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+        jump () {
+            uni.navigateTo({
+                url: '/pages/device/detailAPF'
+            })
+        },
+    }
+}
+</script>
+<style lang='scss'>
+.index-gongcheng {}
+</style>

pages/index/comp/indexYunWei.vue

@@ -0,0 +1,42 @@
+<template>
+    <view class="index-yunwei">
+        <div class="header">
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">正常设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">报警设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">离线设备</div>
+            </div>
+        </div>
+        <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
+            thumbnail="/static/device.png">
+            <text>设备基础信息 </text>
+        </uni-card>
+        <uni-load-more status="nomore"></uni-load-more>
+    </view>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+        jump () {
+            uni.navigateTo({
+                url: '/pages/device/detailAPF'
+            })
+        },
+    }
+}
+</script>
+<style lang='scss'>
+.index-yunwei {}
+</style>

pages/index/comp/indexZhuYongHu.vue

@@ -0,0 +1,37 @@
+<template>
+    <view class="index-zhuyonghu">
+        <div class="header">
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">正常设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">报警设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">离线设备</div>
+            </div>
+        </div>
+        <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
+            thumbnail="/static/device.png">
+            <text>设备基础信息 </text>
+        </uni-card>
+        <uni-load-more status="nomore"></uni-load-more>
+    </view>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.index-zhuyonghu {}
+</style>

pages/index/comp/indexZhuanZhi.vue

@@ -0,0 +1,48 @@
+<template>
+    <view class="index-zhuanzhi">
+        <div class="header">
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">设备总数</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">正常设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">报警设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">离线设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">告警数量</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">事件数量</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">项目个数</div>
+            </div>
+        </div>
+    </view>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.index-zhuanzhi {}
+</style>

pages/index/comp/indexZiYongHu.vue

@@ -0,0 +1,37 @@
+<template>
+    <view class="index-ziyonghu">
+        <div class="header">
+            <div class="header-item">
+                <div class="header-item-value">3</div>
+                <div class="header-item-label">正常设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">1</div>
+                <div class="header-item-label">报警设备</div>
+            </div>
+            <div class="header-item">
+                <div class="header-item-value">0</div>
+                <div class="header-item-label">离线设备</div>
+            </div>
+        </div>
+        <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
+            thumbnail="/static/device.png">
+            <text>设备基础信息 </text>
+        </uni-card>
+        <uni-load-more status="nomore"></uni-load-more>
+    </view>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.index-ziyonghu {}
+</style>

pages/index/index.vue

@@ -2,27 +2,17 @@
     <Cn-page :loading="loading">
         <view slot="body">
             <view class="index">
-                <div class="header">
-                    <div class="header-content">
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">3</div>
-                            <div class="header-content-item-label">正常设备</div>
-                        </div>
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">1</div>
-                            <div class="header-content-item-label">报警设备</div>
-                        </div>
-                        <div class="header-content-item">
-                            <div class="header-content-item-value">0</div>
-                            <div class="header-content-item-label">离线设备</div>
-                        </div>
-                    </div>
-                </div>
-                <uni-card title="基础设备" sub-title="副标题" extra="APF" v-for="item in 3" :key="item" @click="jump"
-                    thumbnail="/static/device.png">
-                    <text>设备基础信息 </text>
-                </uni-card>
-                <uni-load-more status="nomore"></uni-load-more>
+                <!-- 运维 -->
+                <YunWei v-if="userInfo.role == 1" />
+                <!-- 专职 -->
+                <ZhuanZhi v-if="userInfo.role == 2" />
+                <!-- 工程 -->
+                <GongCheng v-if="userInfo.role == 3" />
+                <!-- 主用户 -->
+                <ZhuYongHu v-if="userInfo.role == 4" />
+                <!-- 子用户 -->
+                <ZiYongHu v-if="userInfo.role == 5" />
+
                 <uni-fab ref="fab" direction="vertical" horizontal="right" vertical="bottom" :content="content"
                     @trigger="trigger" />
             </view>
@@ -30,18 +20,57 @@
     </Cn-page>
 </template>
 <script>
+import YunWei from "./comp/indexYunWei.vue";
+import GongCheng from "./comp/indexGongCheng.vue";
+import ZhuYongHu from "./comp/indexZhuYongHu.vue";
+import ZiYongHu from "./comp/indexZiYongHu.vue";
+import ZhuanZhi from "./comp/indexZhuanZhi.vue";
 export default {
+    components: {
+        YunWei,
+        GongCheng,
+        ZhuYongHu,
+        ZiYongHu,
+        ZhuanZhi
+    },
     data () {
         return {
             loading: false,
-            content: [{
+            userInfo: {
+                role: 1
+            }
+        }
+    },
+    computed: {
+        content () {
+            let arr = [1, 3, 4]
+            let content = [{
+                iconPath: '/static/mine3.png',
+                text: '运维管理',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '专职管理',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '工程',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '主用户',
+            }, {
+                iconPath: '/static/mine3.png',
+                text: '子用户',
+            }
+            ]
+            if (arr.indexOf(this.userInfo.role) > -1) {
+                content.push({
                     iconPath: '/static/device.png',
                     text: '添加设备',
                 }, {
                     iconPath: '/static/gateway.png',
                     text: '添加网关',
-            },
-            ]
+                })
+            }
+            return content
         }
     },
     methods: {
@@ -57,58 +86,55 @@ export default {
                 }
             })
         },
-        jump () {
-            uni.navigateTo({
-                url: '/pages/device/detailAPF'
-            })
-        },
+
         trigger (e) {
-            if (e.index === 0) {
+            if (e.index === 5) {
                 uni.navigateTo({
                     url: '/pages/device/new'
                 })
-            }else if(e.index === 1){
+            } else if (e.index === 6) {
                 uni.navigateTo({
                     url: '/pages/gateway/new'
                 })
+            } else {
+                this.userInfo.role = e.index + 1
+                uni.setStorageSync('userInfo', {
+                    role: e.index + 1
+                })
+                let roleName = ''
+                switch (e.index + 1) {
+                    case 1:
+                        roleName = '运维管理'
+                        break
+                    case 2:
+                        roleName = '专职管理'
+                        break
+                    case 3:
+                        roleName = '工程'
+                        break
+                    case 4:
+                        roleName = '主用户'
+                        break
+                    case 5:
+                        roleName = '子用户'
+                        break
                 }
+                this.$util.toast(roleName + '角色切换成功')
+            }
+            this.$refs.fab.close()
         }
     },
-    onShow () {
-        setTimeout(() => {
+    onLoad (options) {
         this.loading = false
-        }, 500);
+    },
+    onShow () {
+        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo) || { role: 1 }
     }
 }
 </script>
 <style lang="scss">
 .index {
     padding: 34rpx 0;
-
-    .header {
-        margin: 0 30rpx;
-        background: $uni-theme-white;
-        border-radius: 12rpx;
-        background: $uni-color-primary;
-        padding: 30rpx 10rpx 40rpx;
-
-        .header-content {
-            display: flex;
-            justify-content: space-around;
-
-            .header-content-item {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                color: #fff;
-                font-size: 28rpx;
-
-                .header-content-item-value {
-                    margin-bottom: 10rpx;
-                }
-            }
-        }
-    }
 }
 
 /deep/ .uni-card {

pages/index/message.vue

@@ -0,0 +1,128 @@
+<template>
+    <view :loading="loading">
+        <view class="message">
+            <view class="message-nav" @click="jump('system')">
+                <image mode="aspectFill" class="message-nav-icon" src="/static/message3.png" />
+                <view class="message-nav-label">系统</view>
+                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
+            </view>
+            <view class="message-nav" @click="jump('report')">
+                <image mode="aspectFill" class="message-nav-icon" src="/static/report.png" />
+                <view class="message-nav-label">告警</view>
+                <uni-badge text="3"></uni-badge>
+                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
+            </view>
+            <view class="message-nav" @click="jump('incident')">
+                <image mode="aspectFill" class="message-nav-icon" src="/static/incident.png" />
+                <view class="message-nav-label">事件</view>
+                <uni-badge text="3"></uni-badge>
+                <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+        init () {
+        },
+        upgrade (code) {
+            console.log(code);
+            uni.showToast({
+                title: '升级成功',
+                icon: 'none'
+            })
+        },
+        jump (type) {
+            switch (type) {
+                case 'login':
+                    uni.navigateTo({
+                        url: `/pages/user/login`
+                    })
+                    break;
+                case 'gateway':
+                    uni.navigateTo({
+                        url: `/pages/gateway/list`
+                    })
+                    break;
+                case 'upgrade':
+                    this.$refs.inputDialog.open()
+                    break;
+                default:
+                    uni.navigateTo({
+                        url: `/pages/message/${type}`
+                    })
+                    break;
+            }
+        }
+    },
+    onLoad () {
+        this.init()
+    },
+}
+</script>
+
+<style lang="scss">
+.message {
+    padding-top: 20rpx;
+    .message-header {
+        padding: 200rpx 34rpx 34rpx;
+        display: flex;
+        align-items: center;
+        background: $uni-theme-white;
+        margin-bottom: 20rpx;
+        box-shadow: 0 4rpx 8rpx #e7e7e74c;
+
+        .message-header-head {
+            margin-right: 30rpx;
+            height: 128rpx;
+            width: 128rpx;
+            border-radius: $uni-theme-radius;
+            overflow: hidden;
+        }
+
+        .message-header-name {
+            margin-right: 30rpx;
+            flex: 1;
+            font-size: 36rpx;
+            color: #111;
+            font-weight: 700;
+
+            .tag {
+                margin-top: 10rpx;
+                font-size: 24rpx;
+                color: #aaa;
+            }
+        }
+    }
+
+    .message-nav {
+        padding: 34rpx;
+        display: flex;
+        align-items: center;
+        background: $uni-theme-white;
+        border-bottom: 1rpx solid #e8e8e8;
+
+        &-icon {
+            margin-right: 30rpx;
+            height: 44rpx;
+            width: 44rpx;
+            border-radius: $uni-theme-radius;
+            overflow: hidden;
+        }
+
+        &-label {
+            margin-right: 30rpx;
+            flex: 1;
+            font-size: 28rpx;
+            color: #111;
+        }
+    }
+}
+</style>

pages/index/mine.vue

@@ -5,7 +5,7 @@
                 <image mode="aspectFill" class="mine-header-head" src="/static/head.png" />
                 <view class="mine-header-name hide-txt">
                     <view>灿能电力</view>
-                    <view class="tag">工程</view>
+                    <view class="tag">{{roleName}}</view>
                 </view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
             </view>
@@ -14,10 +14,9 @@
                 <view class="mine-nav-label">角色升级</view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
             </view> -->
-            <view class="mine-nav" @click="jump('message')"
-              >
-                <image mode="aspectFill" class="mine-nav-icon" src="/static/message2.png" />
-                <view class="mine-nav-label">个人消息</view>
+            <view class="mine-nav" @click="jump('message')">
+                <image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
+                <view class="mine-nav-label">子用户列表</view>
                 <uni-icons type="forward" color="#aaa" size="20"></uni-icons>
             </view>
             <view class="mine-nav" @click="jump('gateway')"
@@ -43,11 +42,38 @@
 export default {
     data () {
         return {
-            loading: false
+            loading: true,
+            userInfo: {}
         }
     },
+    computed: {
+        roleName () {
+            let roleName = ''
+            switch (this.userInfo.role) {
+                case 1:
+                    roleName = '运维管理'
+                    break
+                case 2:
+                    roleName = '专职管理'
+                    break
+                case 3:
+                    roleName = '工程'
+                    break
+                case 4:
+                    roleName = '主用户'
+                    break
+                case 5:
+                    roleName = '子用户'
+                    break
+            }
+            return roleName
+
+        }
+
+    },
     methods: {
         init () {
+            this.loading = false
         },
         upgrade (code) {
             console.log(code);
@@ -79,8 +105,8 @@ export default {
             }
         }
     },
-    onLoad () {
-        this.init()
+    onShow () {
+        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
     },
 }
 </script>

pages/message/incident.vue

@@ -0,0 +1,36 @@
+<template>
+    <view class="content">
+        <uni-list :border="false">
+            <uni-list-item :show-badge="item<4" badgeType="error" isDot badge-text="未读" title="输入电压异常"
+                note="2023-02-01 15:10:29" v-for="item in 5" />
+        </uni-list>
+        <uni-load-more status="nomore"></uni-load-more>
+    </view>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            title: '灿能'
+        }
+    },
+    onLoad () {
+
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style lang="scss">
+.content {
+    padding-top: 20rpx;
+}
+
+
+/deep/ .uni-list-item {
+    background-color: $uni-theme-white !important;
+}
+</style>

pages/message/report.vue

@@ -1,7 +1,8 @@
 <template>
     <view class="content">
         <uni-list :border="false">
-            <uni-list-item title="输入电压异常" rightText="2023-02-01 15:10:29" v-for="item in 5" />
+            <uni-list-item :show-badge="item<4" badgeType="error" isDot badge-text="未读" title="输入电压异常"
+                note="2023-02-01 15:10:29" v-for="item in 5" />
         </uni-list>
         <uni-load-more status="nomore"></uni-load-more>
     </view>
@@ -24,10 +25,12 @@ export default {
 </script>
 
 <style lang="scss">
-.content {}
+.content {
+    padding-top: 20rpx;
+}
+
 
 /deep/ .uni-list-item {
     background-color: $uni-theme-white !important;
-
 }
 </style>

pages/message/system.vue

@@ -0,0 +1,31 @@
+<template>
+    <Cn-page :loading='loading'>
+        <view slot='body'>
+            <view class='index'>
+                <uni-list>
+                    <uni-list-item title="登录成功" rightText="9-18" />
+                    <uni-list-item title="登录成功" rightText="9-18" />
+                    <uni-list-item title="登录成功" note="新用户" rightText="9-18" />
+                </uni-list>
+                <uni-load-more status="nomore"></uni-load-more>
+            </view>
+        </view>
+    </Cn-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.index {}
+/deep/ .uni-list-item {
+    background-color: $uni-theme-white !important;
+}
+</style>

pages/mine/subordinate.vue

@@ -0,0 +1,24 @@
+<template>
+    <Rc-page :loading='loading'>
+        <view slot='body'>
+            <view class='index'>
+            </view>
+        </view>
+    </Rc-page>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            loading: false
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang='scss'>
+.index {
+    padding: 34rpx;
+}
+</style>