UI调整

api/user/user.js

@@ -24,7 +24,7 @@ export function getUserListByDept(deptId,username){
     let url='/system/user/list?pageNum=1&pageSize=20&deptId='+deptId;
     if(username){
         username = encodeURIComponent(username);
-        url = url+"&userName="+userName
+        url = url+"&userName="+username
     }
     return request({
       url:url,
@@ -65,3 +65,10 @@ export function deleteUser(id){
         method: 'delete'
     })
 }
+//获取用户详情
+export function getUserById(id){
+    return request({
+        url:'/system/user/'+id,
+        method: 'get'
+    })
+}

pages.json

@@ -6,6 +6,18 @@
         "navigationBarTitleText": "登录"
       }
     },
+    {
+      "path": "pages/device/index",
+      "style": {
+        "navigationBarTitleText": "设备列表"
+      }
+    },
+    {
+      "path": "pages/user/list",
+      "style": {
+        "navigationBarTitleText": "用户列表"
+      }
+    },
     {
       "path": "pages/index",
       "style": {
@@ -79,12 +91,6 @@
         "navigationBarTitleText": "浏览文本"
       }
     },
-    {
-      "path": "pages/device/index",
-      "style": {
-        "navigationBarTitleText": "设备列表"
-      }
-    },
     {
       "path": "pages/device/detail",
       "style": {
@@ -109,12 +115,7 @@
         "navigationBarTitleText": "客户列表"
       }
     },
-    {
-      "path": "pages/user/list",
-      "style": {
-        "navigationBarTitleText": "用户列表"
-      }
-    },
+
     {
       "path": "pages/device/alert",
       "style": {

pages/device/detail.vue

@@ -336,8 +336,11 @@
       <u-modal @cancel="cancel" :show="showErrDlg" title="异常上报" :showCancelButton="true" @confirm="doReportError" >
         <view class="slot-content">
 
-          <u--textarea style="width:500rpx" autoheight v-model="errorMsg" placeholder="请输入异常内容" ></u--textarea>
+          <view style="margin:10px">
+            <textarea auto-height	="true"  v-model="errorMsg" placeholder="请输入异常内容" ></textarea>
 
+
+          </view>
         </view>
       </u-modal>
 
@@ -374,7 +377,7 @@ export default {
         },
         showTimeDlg:false,
         showErrDlg:null,
-        errorMsg:"",
+        errorMsg:"asdasdasdasd",
         show:null,
         value:"",
         deviceInfo:{},

pages/device/index.vue

@@ -1,35 +1,51 @@
 <template>
   <view class="content">
-    <view class="header">
-      <u-search placeholder="请输入设备名称" :clearabled="true" @clear="searchDevice" @custom="searchDevice" v-model="search.deviceName" @search="searchDevice"></u-search>
+    <view class="header" style="padding:0 20rpx">
+      <u-search placeholder="请输入设备名称" :showAction="false" :clearabled="true" @clear="searchDevice" @custom="searchDevice" v-model="search.deviceName" @search="searchDevice"></u-search>
     </view>
     <view class="text-area">
-      <u-grid
-          :border="true"
-          col="3"
-      >
-        <u-grid-item @click="goDeviceDetail(listItem)"
-            v-for="(listItem,listIndex) in deviceList"
-            :key="listIndex"
-        >
-          <u--image  :showLoading="true" src="/static/images/device/device.png" width="50px" height="50px"></u--image>
+    <view v-for="(item,listIndex) in deviceList" @click="goDeviceDetail(item)">
+      <uni-card>
+        <template v-slot:cover>
+          <view style="position: relative;display: flex;flex-direction: row;height: 100rpx">
+            <view style="width: 60rpx;height: 40rpx;position: absolute;top: 32rpx;">
+              <u-image :showLoading="true" src="/static/images/device/device.png" width="80rpx" height="80rpx" ></u-image>
+            </view>
+            <view style="position: absolute;top: 32rpx;left: 100rpx;display: flex;flex-direction: column;color: #545454;">
+              <view style="font-size: 24rpx;font-weight:600;margin-bottom:16rpx">
+                {{ item.deviceName }}
+              </view>
+              <view style="font-size: 20rpx;">
+                {{item.serialNumber}}
 
-          <text class="grid-text" style="text-align: center;font-size: 24rpx">{{ listItem.deviceName }}
-          </text>
-          <text>
-            {{listItem.serialNumber}}
+              </view>
 
-          </text>
-          <view style="margin:20rpx 0px">
-            <u-tag v-if="listItem.status === 4" text="离线"  size="mini" type="info"></u-tag>
-            <u-tag v-if="listItem.status === 3" text="在线"  size="mini" type="success"></u-tag>
-            <u-tag v-if="listItem.status === 2" text="禁用"  size="mini" type="error"></u-tag>
-            <u-tag v-if="listItem.status === 1" text="未激活"  size="mini" type="error"></u-tag>
-          </view>
+            </view>
+            <view style="position: absolute;right:20rpx;top:24rpx;display: flex;flex-direction: column;">
+              <view v-if="item.status == 2">
+                <u-image :showLoading="true" src="/static/images/device/online.png" width="60rpx" height="60rpx" ></u-image>
+                <view style="color:#48C373;font-size: 20rpx;text-align: center">在线</view>
+              </view>
+
+              <view v-if="item.status == 4">
+                <u-image :showLoading="true" src="/static/images/device/outline.png" width="60rpx" height="60rpx" ></u-image>
+                <view style="color:#CECDCD;font-size: 20rpx;text-align: center">离线</view>
+              </view>
 
-        </u-grid-item>
-      </u-grid>
+              <view v-if="item.status == 2">
+                <u-image :showLoading="true" src="/static/images/device/outline.png" width="60rpx" height="60rpx" ></u-image>
+                <view style="color:#CECDCD;font-size: 20rpx;text-align: center">禁用</view>
+              </view>
 
+              <view v-if="item.status == 1">
+                <u-image :showLoading="true" src="/static/images/device/outline.png" width="60rpx" height="60rpx" ></u-image>
+                <view style="color:#CECDCD;font-size: 20rpx;text-align: center">未激活</view>
+              </view>
+            </view>
+          </view>
+        </template>
+      </uni-card>
+    </view>
     </view>
     <u-picker @cancel="show=false" :show="show" :columns="columns" @confirm="chooseGroup" keyName="label"></u-picker>
   </view>

pages/user/list.vue

@@ -1,28 +1,55 @@
 <template>
   <view class="work-container">
-    <view class="header">
-      <u-search placeholder="请输入客户名称" :clearabled="true" @clear="searchDept" @custom="searchDept" v-model="search.userName" @search="searchDept"></u-search>
+    <view class="header" style="padding:0 20rpx">
+      <u-search placeholder="请输入用户手机号" :showAction="false" :clearabled="true" @clear="searchDept" @custom="searchDept" v-model="search.userName" @search="searchDept"></u-search>
     </view>
-    <view style="margin-top: 10px">
-      <uni-list :border="true">
-        <!-- 显示圆形头像 -->
-        <view style="position: relative" v-for="item in userList">
+    <view style="margin-top: 20rpx;padding-bottom: 100rpx;">
 
-          <uni-list-chat v-if="item.avatar != ''"  :avatar-circle="true" :title="item.nickName" :avatar="item.avatar" :note="item.phonenumber" :time="item.createTime" ></uni-list-chat>
-          <uni-list-chat  v-else :avatar-circle="true" :title="item.nickName" avatar="/static/images/device/user.png" :note="item.phonenumber" :time="item.createTime" ></uni-list-chat>
-
-          <view v-if="isCanEdit()" @click="modifyUser(item)" style="position: absolute;right: 120rpx;bottom: 20rpx;font-size: 12px;z-index: 999">修改</view>
-          <view v-if="isCanEdit()" @click="delUser(item)" style="position: absolute;right: 40rpx;bottom: 20rpx;font-size: 12px;z-index: 999">删除</view>
-          <view  style="position: absolute;right: 270rpx;bottom: 10px;font-size: 12px">
-            <u-tag v-if="item.status == 1" text="禁用" plain size="mini" type="warning"></u-tag>
-            <u-tag v-if="item.status == 0" text="启用" plain size="mini" type="success"></u-tag>
-          </view>
-        </view>
+      <uni-card title="管理员"  extra="额外信息" padding="0" thumbnail="/static/images/user/user.png" v-for="item in userList">
+        <template v-slot:cover>
+         <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;border-bottom: 1px solid lightgray;height: 60rpx">
+            <view style="width: 60rpx;height: 40rpx;position: absolute;top: 2rpx;">
+              <u-image :showLoading="true" src="/static/images/user/user.png" width="60rpx" height="40rpx" ></u-image>
+            </view>
+           <view style="font-size: 24rpx;margin-left:10rpx;position: absolute;top: 8rpx;left: 64rpx;font-weight: bold">
+             {{ item.nickName }}
+           </view>
+           <view style="position: absolute;right:-14rpx;top:-2rpx">
+             <u-tag v-if="item.status == 0" text="启用"   type="warning" bgColor="rgb(222,242,228)" color="#48C373" borderColor="rgb(222,242,228)"></u-tag>
+             <u-tag v-if="item.status == 1" text="禁用"  bgColor="rgb(239,239,239)" color="rgb(180,180,180)" borderColor="rgb(239,239,239)"  ></u-tag>
 
+           </view>
+         </view>
+        </template>
+        <template v-slot:title>
+          <view style="position: relative;display: flex;flex-direction: column;margin:20rpx;height: 120rpx;    line-height: 66rpx;
+color: #545454; ">
+            <view>
 
-      </uni-list>
+              联系电话：{{ item.phonenumber }}
+            </view>
+            <view>
 
-      <view v-if="isCanEdit()" style="position: absolute;bottom: 0px;text-align: center;width: 100%">
+              创建时间：{{ item.createTime }}
+            </view>
+          </view>
+        </template>
+        <template v-slot:actions>
+          <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;line-height: 60rpx;
+color: #545454; ">
+            <view v-if="isCanEdit()" @click="modifyUser(item)" style="display:flex;flex-direction: row;margin-left: 100rpx;">
+                <u-image src="/static/images/user/edit.png" width="50rpx" height="50rpx"></u-image>
+                <view style="margin-left: 10rpx">修改</view>
+            </view>
+            <view v-if="isCanEdit()" @click="delUser(item)" style="display:flex;flex-direction: row;margin-left: 180rpx;">
+              <u-image src="/static/images/user/del.png" width="50rpx" height="50rpx"></u-image>
+              <view style="margin-left: 10rpx"> 删除</view>
+            </view>
+          </view>
+        </template>
+      </uni-card>
+    </view>
+      <view v-if="isCanEdit()" style="position: fixed;bottom: 0px;text-align: center;width: 100%">
         <u-button type="primary" text="新增用户" @click="newUser"></u-button>
       </view>
 
@@ -35,7 +62,7 @@
               ref="uForm"
           >
             <u-form-item
-                label="昵称"
+                label="昵称："
                 prop="chooseUser.nickName"
                 borderBottom
                 ref="item1"
@@ -48,7 +75,7 @@
             </u-form-item>
 
             <u-form-item
-                label="手机号"
+                label="手机号："
                 prop="chooseUser.phonenumber"
                 borderBottom
                 ref="item1"
@@ -61,7 +88,7 @@
             </u-form-item>
 
             <u-form-item
-                label="密码"
+                label="密码："
                 prop="chooseUser.password"
                 borderBottom
                 ref="item1"
@@ -78,7 +105,7 @@
             </u-form-item>
 
             <u-form-item
-                label="登录账号"
+                label="登录账号："
                 borderBottom
                 ref="item1"
                 labelWidth="auto"
@@ -90,7 +117,7 @@
               ></u--input>
             </u-form-item>
             <u-form-item
-                label="状态"
+                label="状态："
                 prop="chooseUser.password"
                 borderBottom
                 ref="item1"
@@ -114,17 +141,18 @@
 
         </view>
       </u-modal>
-    </view>
+
   </view>
 </template>
 
 <script>
 import authObj from '@/plugins/auth.js';
-import {getDeptList,getUserListByDept,addUser,editUser,resetPwd,deleteUser} from '@/api/user/user';
+import {getDeptList,getUserListByDept,addUser,editUser,resetPwd,deleteUser,getUserById} from '@/api/user/user';
 import UText from "../../uni_modules/uview-ui/components/u-text/u-text";
 import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
+import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
 export default {
-  components: {UButton, UText},
+  components: {UImage, UButton, UText},
   data() {
       return {
         statusList:[{  name: '启用',
@@ -190,8 +218,13 @@ export default {
 
       },
       modifyUser(user){
-        this.chooseUser = user;
-        this.showEdit = true;
+        let self = this;
+        getUserById(user.userId).then(res=>{
+          self.chooseUser = res.data;
+          self.chooseUser.roleIds = res.roleIds;
+          self.showEdit = true;
+        })
+
       },
       statusChange(e){
         console.log(e);
@@ -207,7 +240,6 @@ export default {
       doAddUser(){
         let self = this;
         this.chooseUser.postIds=[];
-        this.chooseUser.roleIds=[];
         if(this.statusValue == '启用'){
           this.chooseUser.status = 0;
         }else{

pages/work/index.vue

@@ -10,86 +10,126 @@
         </swiper-item>
       </swiper>
     </uni-swiper-dot>
+    <view style="box-sizing: border-box;margin-top:20rpx;padding:0 20rpx">
 
-    <!-- 宫格组件 -->
-    <uni-section title="工作台" type="line"></uni-section>
-    <view class="grid-body">
-      <uni-grid :column="3" :showBorder="false" >
-        <uni-grid-item v-if="hasRole(['admin'])">
-          <view class="grid-item-box" @click="goPage('user')">
-            <u--image :showLoading="true" src="/static/images/icons/user.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">客户列表</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item v-if="isCompanyUser()">
-          <view class="grid-item-box" @click="goPage('deptuser')">
-            <u--image :showLoading="true" src="/static/images/icons/user.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">用户管理</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item v-if="isCompanyUser()">
-          <view class="grid-item-box" @click="goPage('device')">
-            <u--image :showLoading="true" src="/static/images/icons/device.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">设备列表</text>
-          </view>
-        </uni-grid-item>
-        <uni-grid-item>
-          <view class="grid-item-box" @click="goPage('wifi')">
-            <u--image :showLoading="true" src="/static/images/icons/wifi.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">设备配网</text>
+      <view class="grid-item-box" v-if="hasRole(['admin'])" @click="goPage('user')" style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/user.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">客户列表</view>
+          <view class="bottom">Customer List</view>
+        </view>
+      </view>
+
+      <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('deptuser')" style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+          <view class="grid-image">
+            <u-image :showLoading="true" src="/static/images/icons/user.png" width="80rpx" height="80rpx" ></u-image>
           </view>
-        </uni-grid-item>
-        <uni-grid-item v-if="hasRole(['admin'])">
-          <view class="grid-item-box" @click="goPage('scan')">
-            <u--image :showLoading="true" src="/static/images/icons/code.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">绑码激活</text>
+          <view class="grid-text">
+            <view class="top">用户管理</view>
+            <view class="bottom">User Management</view>
           </view>
-        </uni-grid-item>
+      </view>
 
+      <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('device')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/device.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">设备列表</view>
+          <view class="bottom">Device List</view>
+        </view>
+      </view>
 
-        <uni-grid-item v-if="isCompanyUser()">
-          <view class="grid-item-box" @click="scanCode()">
-            <u--image :showLoading="true" src="/static/images/icons/scan.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">用户绑定</text>
-          </view>
-        </uni-grid-item>
 
-        <uni-grid-item>
-          <view class="grid-item-box" @click="watchDevice()">
-            <u--image :showLoading="true" src="/static/images/icons/scan.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">查看设备</text>
-          </view>
-        </uni-grid-item>
+      <view class="grid-item-box" @click="goPage('wifi')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/wifi.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">设备配网</view>
+          <view class="bottom">Wifi Setting</view>
+        </view>
+      </view>
 
-        <uni-grid-item v-if="isCompanyUser()">
-          <view class="grid-item-box" @click="goPage('alert')">
-            <u--image :showLoading="true" src="/static/images/icons/alert.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">设备告警</text>
-          </view>
-        </uni-grid-item>
+      <view class="grid-item-box" v-if="isCompanyUser()" @click="scanCode()"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/bind.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">设备绑定</view>
+          <view class="bottom">Device Binding</view>
+        </view>
+      </view>
 
-        <uni-grid-item v-if="isCompanyUser()">
-          <view class="grid-item-box" @click="goPage('error')">
-            <u--image :showLoading="true" src="/static/images/icons/error.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">异常列表</text>
-          </view>
-        </uni-grid-item>
 
-        <uni-grid-item v-if="hasRole(['admin'])">
-          <view class="grid-item-box" @click="goPage('reset')">
-            <u--image :showLoading="true" src="/static/images/icons/reset.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">注销设备</text>
-          </view>
-        </uni-grid-item>
+      <view class="grid-item-box" v-if="hasRole(['admin'])" @click="goPage('scan')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/bind.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">绑码激活</view>
+          <view class="bottom">Bind Code Activation</view>
+        </view>
+      </view>
 
-        <uni-grid-item>
-          <view class="grid-item-box" @click="goPage('time')">
-            <u--image :showLoading="true" src="/static/images/icons/rank.png" width="50rpx" height="50rpx" ></u--image>
-            <text class="text">时长排名</text>
-          </view>
-        </uni-grid-item>
 
-      </uni-grid>
+      <view class="grid-item-box" @click="watchDevice"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/scan.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">查看设备</view>
+          <view class="bottom">View Device</view>
+        </view>
+      </view>
+
+
+      <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('alert')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/alert.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">设备告警</view>
+          <view class="bottom">Device Alert</view>
+        </view>
+      </view>
+
+
+      <view class="grid-item-box" v-if="isCompanyUser()" @click="goPage('alert')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/error.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">异常列表</view>
+          <view class="bottom">Exception List</view>
+        </view>
+      </view>
+
+      <view class="grid-item-box" @click="goPage('reset')" v-if="hasRole(['admin'])"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/reset.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">注销设备</view>
+          <view class="bottom">Unregister Device</view>
+        </view>
+      </view>
+
+
+      <view class="grid-item-box" @click="goPage('time')"  style="background-image: url('/static/images/icons/bg.png');background-size: 100% 100%">
+        <view class="grid-image">
+          <u-image :showLoading="true" src="/static/images/icons/rank.png" width="80rpx" height="80rpx" ></u-image>
+        </view>
+        <view class="grid-text">
+          <view class="top">时长排名</view>
+          <view class="bottom">Duration Ranking</view>
+        </view>
+      </view>
+    </view>
+    <!-- 宫格组件 -->
+
 
       <u-modal :show="show" :title="dlgTitle" @cancel="cancel" :showCancelButton="true" @confirm="bingDevice" >
         <view class="slot-content">
@@ -101,7 +141,6 @@
 
         </view>
       </u-modal>
-    </view>
   </view>
 </template>
 
@@ -298,12 +337,15 @@ export default {
   .grid-item-box {
     flex: 1;
     /* #ifndef APP-NVUE */
-    display: flex;
+    display: inline-block;
+    position: relative;
     /* #endif */
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 15px 0;
+    height: 250rpx;
+    width:50%;
   }
 
   .uni-margin-wrap {
@@ -345,4 +387,25 @@ export default {
       width: 100%;
     }
   }
+  .grid-image{
+    position: absolute;
+    left: 61rpx;
+    top: 49rpx;
+  }
+  .grid-text{
+    position: absolute;
+    left:184rpx;
+    top:62rpx;
+    color: #545454;
+    .top{
+      font-weight: bold;
+      font-size: 32rpx;
+      margin-bottom: 30rpx;
+    }
+    .bottom{
+      font-size: 18rpx;
+      font-weight: 400;
+    }
+  }
+
 </style>