简柏林 / thingskit-app · Commits

Commit 0c81e6a5ecb9632e80e7683404663d2fc197c0b8

Authored by fengtao
1 parent 643d7fdf

feat:新增首页和摄像头，新增设备，refractor：修改登录样式

Inline Side-by-side
Showing 21 changed files with 511 additions and 77 deletions
@@ -11,7 +11,27 @@ @@ -11,7 +11,27 @@
11 { 11 {
12 "path": "pages/device/device", 12 "path": "pages/device/device",
13 "style": { 13 "style": {
14 - "navigationBarTitleText": "设备" 14 + "navigationBarTitleText": "设备",
  15 + "backgroundColorTop": "gray",
  16 + "backgroundColorBottom": "gray",
  17 + "app-plus": {
  18 + "scrollIndicator": "none",
  19 + "titleNView": {
  20 + "titleText": "", //不要设置标题
  21 + "buttons": [{
  22 + "text": "搜索",
  23 + "fontSize": "16",
  24 + "float": "right",
  25 + "color": "blue"
  26 + }],
  27 + "searchInput": {
  28 + "align": "left",
  29 + "placeholder": "输入设备SN或名称搜索",
  30 + "borderRadius": "50upx",
  31 + "backgroundColor": "#fff"
  32 + }
  33 + }
  34 + }
15 } 35 }
16 }, 36 },
17 { 37 {
@@ -62,8 +82,26 @@ @@ -62,8 +82,26 @@
62 }, { 82 }, {
63 "path": "pages/feedback/feedback", 83 "path": "pages/feedback/feedback",
64 "style": { 84 "style": {
65 - "navigationBarTitleText": "意见反馈" 85 + "navigationBarTitleText": "意见反馈",
  86 + "app-plus": {
  87 + "scrollIndicator": "none" //当前页面不显示滚动条
  88 + }
66 } 89 }
  90 + }, {
  91 + "path": "pages/index/camera/camera",
  92 + "style": {
  93 + "navigationBarTitleText": "查看摄像头"
  94 + // "app-plus": {
  95 + // "scrollIndicator": "none" //当前页面不显示滚动条
  96 + // }
  97 + }
  98 +
  99 + }, {
  100 + "path": "pages/index/orgStatus/orgStatus",
  101 + "style": {
  102 + "navigationBarTitleText": "查看组态"
  103 + }
  104 +
67 } 105 }
68 ], 106 ],
69 "globalStyle": { 107 "globalStyle": {
1 <template> 1 <template>
2 - <view class="content">  
3 - <text>设备</text>  
4 - <!-- 公共组件-每个页面必须引入 -->  
5 - <public-module></public-module>  
6 - <f-tabbar></f-tabbar> 2 + <view class="device-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="org-sty">
  6 + <view class="org-item">
  7 + <view class="u-flex" style="flex-direction: row;margin-top: 26rpx;margin-left: 15rpx;">
  8 + <image style="width: 30rpx;height: 30rpx;" src="../../static/org.png" mode=""></image>
  9 + <text style="color:#333333;font-size: 15px;margin-left: 14rpx;">组织关系</text>
  10 + </view>
  11 + <view style="margin-top: 5rpx;margin-left: 15rpx" class=""><text style="color:#666666;font-size: 12px;">设备数：1234</text></view>
  12 + </view>
  13 + <view class="org-item" style="">
  14 + <image style="width: 10px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" mode=""></image>
  15 + </view>
  16 + </view>
  17 + <view class="device-list">
  18 + <view class="list-item" v-for="(item, index) in list" :key="index">
  19 + <view class="item">
  20 + <view>
  21 + <text style="color:#333333;font-size: 15px;">{{ item.name1 }}</text>
  22 + </view>
  23 + <view class="u-flex" style="flex-direction: column;justify-content: flex-start;margin-top: 8rpx;">
  24 + <view>
  25 + <text style="color:#666666;font-size: 14px;">{{ item.name2 }}</text>
  26 + </view>
  27 + <view style="margin-left: -122rpx;">
  28 + <text style="color:#666666;font-size: 14px;">{{ item.name3 }}</text>
  29 + </view>
  30 + </view>
  31 + </view>
  32 + <view class="item">
  33 + <view class="u-flex" style="flex-direction: row;margin-top: -6rpx;">
  34 + <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="item.name4" mode=""></image>
  35 + <view class="">
  36 + <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">{{ item.name5 }}</text>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + </view>
  41 + </view>
  42 + <f-tabbar></f-tabbar>
7 </view> 43 </view>
8 </template> 44 </template>
9 45
@@ -11,21 +47,90 @@ @@ -11,21 +47,90 @@
11 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 47 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
12 48
13 export default { 49 export default {
14 - components:{  
15 - fTabbar,  
16 - },  
17 - data() {  
18 - return {  
19 - }  
20 - },  
21 - onLoad() {  
22 - // 隐藏原生的tabbar  
23 - uni.hideTabBar();  
24 - },  
25 -  
26 -} 50 + components: {
  51 + fTabbar
  52 + },
  53 + data() {
  54 + return {
  55 + list: [
  56 + {
  57 + name1: '1号楼1楼三单元水表',
  58 + name2: '设备编号：SN987633433',
  59 + name3: '所属组:XXXXXX',
  60 + name4: '../../static/online.png',
  61 + name5: '在线'
  62 + },
  63 + {
  64 + name1: '2号楼1楼三单元水表',
  65 + name2: '设备编号：SN987633433',
  66 + name3: '所属组:XXXXXX',
  67 + name4: '../../static/online.png',
  68 + name5: '在线'
  69 + },
  70 + {
  71 + name1: '3号楼1楼三单元水表',
  72 + name2: '设备编号：SN987633433',
  73 + name3: '所属组:XXXXXX',
  74 + name4: '../../static/baojing.png',
  75 + name5: '离线'
  76 + },
  77 + {
  78 + name1: '4号楼1楼三单元水表',
  79 + name2: '设备编号：SN987633433',
  80 + name3: '所属组:XXXXXX',
  81 + name4: '../../static/unonline.png',
  82 + name5: '未激活'
  83 + },
  84 + {
  85 + name1: '5号楼1楼三单元水表',
  86 + name2: '设备编号：SN987633433',
  87 + name3: '所属组:XXXXXX',
  88 + name4: '../../static/online.png',
  89 + name5: '在线'
  90 + }
  91 + ]
  92 + };
  93 + },
  94 + onLoad() {
  95 + // 隐藏原生的tabbar
  96 + uni.hideTabBar();
  97 + }
  98 +};
27 </script> 99 </script>
28 100
29 <style lang="scss" scoped> 101 <style lang="scss" scoped>
30 - 102 +.device-page {
  103 + padding: 0rpx 15rpx;
  104 + min-height: 100vh;
  105 + background-color: #f8f9fa;
  106 +}
  107 +.org-sty {
  108 + width: 750rpx;
  109 + height: 150rpx;
  110 + margin-top: 1rpx;
  111 + background-color: #fff;
  112 + display: flex;
  113 + flex-direction: row;
  114 + justify-content: space-between;
  115 + .org-item {
  116 + width: 350rpx;
  117 + height: 200rpx;
  118 + }
  119 +}
  120 +.device-list {
  121 + display: flex;
  122 + flex-direction: column;
  123 + .list-item {
  124 + height: 200rpx;
  125 + background-color: #fff;
  126 + margin-top: 24rpx;
  127 + display: flex;
  128 + flex-direction: row;
  129 + border-radius: 10px;
  130 + justify-content: space-between;
  131 + .item {
  132 + margin: 30rpx;
  133 + }
  134 + }
  135 +}
31 </style> 136 </style>
@@ -5,31 +5,37 @@ @@ -5,31 +5,37 @@
5 <view class="form-page"> 5 <view class="form-page">
6 <u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="form1"> 6 <u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="form1">
7 <u-form-item label="主题" prop="userInfo.name" borderBottom ref="item1"> 7 <u-form-item label="主题" prop="userInfo.name" borderBottom ref="item1">
8 - <u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 8 + <u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="none"></u--input>
9 </u-form-item> 9 </u-form-item>
10 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"> 10 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
11 - <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 11 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
12 </u-form-item> 12 </u-form-item>
13 <u-form-item label="手机" prop="userInfo.name" borderBottom ref="item1"> 13 <u-form-item label="手机" prop="userInfo.name" borderBottom ref="item1">
14 - <u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 14 + <u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="none"></u--input>
15 </u-form-item> 15 </u-form-item>
16 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"> 16 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
17 - <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 17 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
18 </u-form-item> 18 </u-form-item>
19 <u-form-item label="QQ" prop="userInfo.name" borderBottom ref="item1"> 19 <u-form-item label="QQ" prop="userInfo.name" borderBottom ref="item1">
20 - <u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 20 + <u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="none"></u--input>
21 </u-form-item> 21 </u-form-item>
22 <u-form-item label="邮箱" prop="userInfo.name" borderBottom ref="item1"> 22 <u-form-item label="邮箱" prop="userInfo.name" borderBottom ref="item1">
23 - <u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="bottom"></u--input> 23 + <u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="none"></u--input>
24 </u-form-item> 24 </u-form-item>
25 <u-form-item label="图片" prop="userInfo.name" borderBottom ref="item1"> 25 <u-form-item label="图片" prop="userInfo.name" borderBottom ref="item1">
26 - <u-upload :fileList="fileData" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload> 26 + <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
27 </u-form-item> 27 </u-form-item>
28 - <u-form-item label="反馈信息" prop="userInfo.name" borderBottom ref="item1"> 28 + <u-form-item label="反馈" prop="userInfo.name" borderBottom ref="item1">
29 <u--textarea placeholder="不低于3个字" v-model="feedbackData.intro" count></u--textarea> 29 <u--textarea placeholder="不低于3个字" v-model="feedbackData.intro" count></u--textarea>
30 </u-form-item> 30 </u-form-item>
31 </u--form> 31 </u--form>
32 <u-button class="buttonSty" shape="circle" type="primary" text="提交" customStyle="margin-top: 17rpx" @click="submit"></u-button> 32 <u-button class="buttonSty" shape="circle" type="primary" text="提交" customStyle="margin-top: 17rpx" @click="submit"></u-button>
  33 + <!-- #ifdef MP -->
  34 + <view style="height: 18rpx;"></view>
  35 + <!-- #endif -->
  36 + <!-- #ifndef MP -->
  37 + <view style="height: 72rpx;"></view>
  38 + <!-- #endif -->
33 </view> 39 </view>
34 <f-tabbar></f-tabbar> 40 <f-tabbar></f-tabbar>
35 </view> 41 </view>
@@ -50,7 +56,7 @@ export default { @@ -50,7 +56,7 @@ export default {
50 intro: '' 56 intro: ''
51 } 57 }
52 }, 58 },
53 - fileData: [] 59 + fileList1: []
54 }; 60 };
55 }, 61 },
56 onLoad() { 62 onLoad() {
@@ -60,15 +66,15 @@ export default { @@ -60,15 +66,15 @@ export default {
60 methods: { 66 methods: {
61 // 删除图片 67 // 删除图片
62 deletePic(event) { 68 deletePic(event) {
63 - this[`fileData{event.name}`].splice(event.index, 1); 69 + this[`fileList${event.name}`].splice(event.index, 1);
64 }, 70 },
65 // 新增图片 71 // 新增图片
66 async afterRead(event) { 72 async afterRead(event) {
67 // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式 73 // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
68 let lists = [].concat(event.file); 74 let lists = [].concat(event.file);
69 - let fileListLen = this[`fileData${event.name}`].length; 75 + let fileListLen = this[`fileList${event.name}`].length;
70 lists.map(item => { 76 lists.map(item => {
71 - this[`fileData${event.name}`].push({ 77 + this[`fileList${event.name}`].push({
72 ...item, 78 ...item,
73 status: 'uploading', 79 status: 'uploading',
74 message: '上传中' 80 message: '上传中'
@@ -76,8 +82,8 @@ export default { @@ -76,8 +82,8 @@ export default {
76 }); 82 });
77 for (let i = 0; i < lists.length; i++) { 83 for (let i = 0; i < lists.length; i++) {
78 const result = await this.uploadFilePromise(lists[i].url); 84 const result = await this.uploadFilePromise(lists[i].url);
79 - let item = this[`fileData${event.name}`][fileListLen];  
80 - this[`fileData${event.name}`].splice( 85 + let item = this[`fileList${event.name}`][fileListLen];
  86 + this[`fileList${event.name}`].splice(
81 fileListLen, 87 fileListLen,
82 1, 88 1,
83 Object.assign(item, { 89 Object.assign(item, {
@@ -92,7 +98,7 @@ export default { @@ -92,7 +98,7 @@ export default {
92 uploadFilePromise(url) { 98 uploadFilePromise(url) {
93 return new Promise((resolve, reject) => { 99 return new Promise((resolve, reject) => {
94 let a = uni.uploadFile({ 100 let a = uni.uploadFile({
95 - url: '', // 仅为示例，非真实的接口地址 101 + url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
96 filePath: url, 102 filePath: url,
97 name: 'file', 103 name: 'file',
98 formData: { 104 formData: {
@@ -120,8 +126,7 @@ export default { @@ -120,8 +126,7 @@ export default {
120 } 126 }
121 //#ifndef MP 127 //#ifndef MP
122 .buttonSty { 128 .buttonSty {
123 - margin-top: 30rpx; 129 + margin-top: 80rpx !important;
124 } 130 }
125 -  
126 //#endif 131 //#endif
127 </style> 132 </style>
  1 +<template>
  2 + <view class="camera-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="camera-item"><text>设备</text></view>
  6 + <view class="camera-container">
  7 + <view class="container-item">
  8 + <view @click="openCameraDetail(item.url)" v-for="(item, index) in list" :key="index" class="item">
  9 + <view style="width: 320rpx;height: 320rpx"><video style="width: 320rpx;height: 320rpx;" :src="item.url" controls></video></view>
  10 + <view style="position: relative;top: 8rpx;text-align: center;">{{ item.name }}</view>
  11 + </view>
  12 + </view>
  13 + </view>
  14 + <f-tabbar></f-tabbar>
  15 + </view>
  16 +</template>
  17 +
  18 +<script>
  19 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  20 +
  21 +export default {
  22 + components: {
  23 + fTabbar
  24 + },
  25 + data() {
  26 + return {
  27 + list: [
  28 + {
  29 + url: 'http://113.204.115.250:83/openUrl/e5NZg76/live.m3u8',
  30 + name: '摄像头1'
  31 + },
  32 + {
  33 + url: 'https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg2.mp4',
  34 + name: '摄像头2'
  35 + },
  36 + {
  37 + url: 'https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4',
  38 + name: '摄像头3'
  39 + },
  40 + {
  41 + url: 'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4',
  42 + name: '摄像头4'
  43 + },
  44 + {
  45 + url: 'https://stream7.iqilu.com/10339/article/202002/16/3be2e4ef4aa21bfe7493064a7415c34d.mp4',
  46 + name: '摄像头5'
  47 + },
  48 + {
  49 + url: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4',
  50 + name: '摄像头6'
  51 + }
  52 + ]
  53 + };
  54 + },
  55 + onLoad() {
  56 + // 隐藏原生的tabbar
  57 + uni.hideTabBar();
  58 + },
  59 + methods: {
  60 + openCameraDetail(e) {
  61 + console.log(e);
  62 + }
  63 + }
  64 +};
  65 +</script>
  66 +
  67 +<style lang="scss" scoped>
  68 +.camera-page {
  69 + padding: 0rpx 15rpx;
  70 + min-height: 100vh;
  71 + background-color: #fff;
  72 +}
  73 +.camera-item {
  74 + height: 200rpx;
  75 + border: 0.1px solid gray;
  76 +}
  77 +.camera-container {
  78 + padding: 0 15rpx;
  79 + margin-top: 15rpx;
  80 + .container-item {
  81 + width: 717rpx;
  82 + display: flex;
  83 + justify-content: space-between;
  84 + flex-direction: row;
  85 + flex-wrap: wrap;
  86 + position: relative;
  87 + top: -67rpx;
  88 + .item {
  89 + width: 320rpx;
  90 + height: 320rpx;
  91 + background-color: gray;
  92 + margin-top: 70rpx;
  93 + }
  94 + }
  95 +}
  96 +</style>
1 <template> 1 <template>
2 - <view class="content">  
3 - <text>首页</text>  
4 - <!-- 公共组件-每个页面必须引入 -->  
5 - <public-module></public-module>  
6 - <f-tabbar></f-tabbar> 2 + <view class="index-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view>
  6 + <view class="grid-container">
  7 + <view class="grid-item">
  8 + <view class="item-center">
  9 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/form.png" mode=""></image></view>
  10 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  11 + <text style="font-size:13px;color:#333333">维修工单</text>
  12 + </view>
  13 + </view>
  14 + </view>
  15 + <view class="grid-item">
  16 + <view class="item-center">
  17 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/camer.png" mode=""></image></view>
  18 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  19 + <text @click="openCamera" style="font-size:13px;color:#333333">摄像头管理</text>
  20 + </view>
  21 + </view>
  22 + </view>
  23 + <view class="grid-item">
  24 + <view class="item-center">
  25 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/device.png" mode=""></image></view>
  26 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  27 + <text style="font-size:13px;color:#333333">设备接入</text>
  28 + </view>
  29 + </view>
  30 + </view>
  31 + <view class="grid-item">
  32 + <view class="item-center">
  33 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/status.png" mode=""></image></view>
  34 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  35 + <text @click="openOrgStatus" style="font-size:13px;color:#333333">组态</text>
  36 + </view>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + <!-- 基础统计 -->
  41 + <view class="basic-sty">
  42 + <view class=""><text style="font-size: 15px;color:#333333">基础统计</text></view>
  43 + <view class="basic" style="margin-top: 25rpx;">
  44 + <view class="basic-item">
  45 + <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">
  46 + <image style="width: 50rpx;height: 50rpx;" src="../../static/device-total.png" mode=""></image>
  47 + <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">设备统计</text>
  48 + </view>
  49 + <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">
  50 + <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  51 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>2</text></view>
  52 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>在线</text></view>
  53 + </view>
  54 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  55 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>52</text></view>
  56 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>离线</text></view>
  57 + </view>
  58 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  59 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>299</text></view>
  60 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未激活</text></view>
  61 + </view>
  62 + </view>
  63 + </view>
  64 + <view class="basic-item">
  65 + <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">
  66 + <image style="width: 50rpx;height: 50rpx;" src="../../static/alert.png" mode=""></image>
  67 + <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">告警统计</text>
  68 + </view>
  69 + <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">
  70 + <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  71 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>12</text></view>
  72 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未处理</text></view>
  73 + </view>
  74 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  75 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>522</text></view>
  76 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>已处理</text></view>
  77 + </view>
  78 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  79 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>99</text></view>
  80 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>误报</text></view>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + </view>
  85 + </view>
  86 + </view>
  87 + <f-tabbar></f-tabbar>
7 </view> 88 </view>
8 </template> 89 </template>
9 90
@@ -11,19 +92,85 @@ @@ -11,19 +92,85 @@
11 import fTabbar from '@/components/module/f-tabbar/f-tabbar'; 92 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
12 93
13 export default { 94 export default {
14 - components:{  
15 - fTabbar,  
16 - },  
17 - data() {  
18 - return {  
19 - }  
20 - },  
21 - onLoad() {  
22 - // 隐藏原生的tabbar  
23 - uni.hideTabBar();  
24 - },  
25 -} 95 + components: {
  96 + fTabbar
  97 + },
  98 + data() {
  99 + return {
  100 + openCamera() {
  101 + uni.navigateTo({
  102 + url: 'camera/camera'
  103 + });
  104 + },
  105 + openOrgStatus() {
  106 + uni.navigateTo({
  107 + url: 'orgStatus/orgStatus'
  108 + });
  109 + }
  110 + };
  111 + },
  112 + onLoad() {
  113 + // 隐藏原生的tabbar
  114 + uni.hideTabBar();
  115 + }
  116 +};
26 </script> 117 </script>
27 118
28 <style lang="scss" scoped> 119 <style lang="scss" scoped>
  120 +.index-page {
  121 + padding: 27rpx 15rpx;
  122 + min-height: 100vh;
  123 + background-color: #f8f9fa;
  124 +}
  125 +.grid-container {
  126 + display: grid;
  127 + width: 750rpx;
  128 + height: 400rpx;
  129 + grid-template-columns: repeat(2, 350rpx);
  130 + grid-template-rows: repeat(2, 200rpx);
  131 + grid-gap: 20rpx;
  132 +}
  133 +
  134 +.grid-item {
  135 + background-color: #fff;
  136 + border: 0.01rpx solid #fff;
  137 + padding: 40rpx;
  138 + border-radius: 7px;
  139 + .item-center {
  140 + width: 290rpx;
  141 + height: 150rpx;
  142 + margin: -15rpx;
  143 + display: flex;
  144 + flex-direction: row;
  145 + justify-content: space-between;
  146 + align-items: center;
  147 + .center {
  148 + width: 130rpx;
  149 + height: 150rpx;
  150 + }
  151 + }
  152 +}
  153 +.basic-sty {
  154 + padding: 0 10rpx;
  155 + margin-top: 50rpx;
  156 + .basic {
  157 + width: 750rpx;
  158 + height: 500rpx;
  159 + display: flex;
  160 + justify-content: space-between;
  161 + align-items: flex-start;
  162 + flex-direction: column;
  163 + .basic-item {
  164 + width: 700rpx;
  165 + height: 240rpx;
  166 + background-color: #fff;
  167 + display: flex;
  168 + justify-content: space-between;
  169 + align-items: flex-start;
  170 + flex-direction: column;
  171 + .item-child {
  172 + }
  173 + }
  174 + }
  175 +}
29 </style> 176 </style>
  1 +<template>
  2 + <view class="content">
  3 + <text>组态</text>
  4 + <!-- 公共组件-每个页面必须引入 -->
  5 + <public-module></public-module>
  6 + <f-tabbar></f-tabbar>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  12 +
  13 +export default {
  14 + components:{
  15 + fTabbar,
  16 + },
  17 + data() {
  18 + return {
  19 + }
  20 + },
  21 + onLoad() {
  22 + // 隐藏原生的tabbar
  23 + uni.hideTabBar();
  24 + },
  25 +
  26 +}
  27 +</script>
  28 +
  29 +<style lang="scss" scoped>
  30 +
  31 +</style>
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <view class="form-row"> 15 <view class="form-row">
16 <input class="input" type="number" v-model="vCode" placeholder="请输入验证码" 16 <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
17 placeholder-style="font-weight:normal;color:#bbbbbb;"></input> 17 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
18 - <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 + <view style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 </view> 19 </view>
20 <button class="submit" size="default" @click="onSubmit"> 20 <button class="submit" size="default" @click="onSubmit">
21 <text style="color:#FFFFFF">登录</text> 21 <text style="color:#FFFFFF">登录</text>
@@ -139,7 +139,7 @@ @@ -139,7 +139,7 @@
139 height: 80rpx; 139 height: 80rpx;
140 color: #333; 140 color: #333;
141 line-height: 80rpx; 141 line-height: 80rpx;
142 - background: #eee; 142 + // background: #eee;
143 min-width: 188rpx; 143 min-width: 188rpx;
144 text-align: center; 144 text-align: center;
145 border-radius: 8rpx; 145 border-radius: 8rpx;
@@ -150,8 +150,8 @@ @@ -150,8 +150,8 @@
150 z-index: 11; 150 z-index: 11;
151 151
152 &.forhidden { 152 &.forhidden {
153 - background: #eee;  
154 - color: #cccccc; 153 + // background: #eee;
  154 + // color: #cccccc;
155 } 155 }
156 } 156 }
157 } 157 }
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 <view class="form-row"> 15 <view class="form-row">
16 <input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码" 16 <input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码"
17 placeholder-style="font-weight:normal"></input> 17 placeholder-style="font-weight:normal"></input>
18 - <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 + <view style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 </view> 19 </view>
20 <button class="submit" size="default" @click="onNextSubmit"> 20 <button class="submit" size="default" @click="onNextSubmit">
21 <text style="color:#fff">下一步</text> 21 <text style="color:#fff">下一步</text>
@@ -138,9 +138,7 @@ @@ -138,9 +138,7 @@
138 .loginPhone { 138 .loginPhone {
139 .form-row { 139 .form-row {
140 position: relative; 140 position: relative;
141 - border-radius: 32px;  
142 - border: 1px solid #F7F9FF;  
143 - background: #F7F9FF; 141 + border-bottom: 1px solid #e5e5e5;
144 .input { 142 .input {
145 font-size: 34rpx; 143 font-size: 34rpx;
146 line-height: 102rpx; 144 line-height: 102rpx;
@@ -148,7 +146,6 @@ @@ -148,7 +146,6 @@
148 width: 100%; 146 width: 100%;
149 box-sizing: border-box; 147 box-sizing: border-box;
150 font-size: 30rpx; 148 font-size: 30rpx;
151 - padding: 0 34rpx;  
152 font-weight: bold; 149 font-weight: bold;
153 } 150 }
154 151
@@ -157,7 +154,6 @@ @@ -157,7 +154,6 @@
157 height: 80rpx; 154 height: 80rpx;
158 color: #333; 155 color: #333;
159 line-height: 80rpx; 156 line-height: 80rpx;
160 - // background: #eee;  
161 min-width: 188rpx; 157 min-width: 188rpx;
162 text-align: center; 158 text-align: center;
163 border-radius: 8rpx; 159 border-radius: 8rpx;
@@ -166,10 +162,7 @@ @@ -166,10 +162,7 @@
166 transform: translateY(-50%); 162 transform: translateY(-50%);
167 right: 0; 163 right: 0;
168 z-index: 11; 164 z-index: 11;
169 -  
170 &.forhidden { 165 &.forhidden {
171 - // background: #eee;  
172 - // color: #cccccc;  
173 } 166 }
174 } 167 }
175 } 168 }
@@ -11,19 +11,24 @@ @@ -11,19 +11,24 @@
11 </view> 11 </view>
12 <view class="f__login"> 12 <view class="f__login">
13 <view class="loginPhone"> 13 <view class="loginPhone">
14 - <view class="form-row"><u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input></view>  
15 <view class="form-row"> 14 <view class="form-row">
16 - <u--input 15 + <u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="loginForm.account"></u--input>
  16 + </view>
  17 + <view class="form-row">
  18 + <u-input
17 border="bottom" 19 border="bottom"
18 class="input" 20 class="input"
19 prefixIcon="lock-fill" 21 prefixIcon="lock-fill"
20 - :suffixIcon="showPasswordIcon"  
21 suffixIconStyle="color: #909399" 22 suffixIconStyle="color: #909399"
22 - type="password" 23 + :type="showPasswordOrText"
23 placeholder="请输入密码" 24 placeholder="请输入密码"
24 - v-model="password" 25 + v-model="loginForm.password"
25 @change="passwordChange" 26 @change="passwordChange"
26 - ></u--input> 27 + >
  28 + <template slot="suffix">
  29 + <u-icon @click="showPasswordMode" :name="showPasswordIcon"></u-icon>
  30 + </template>
  31 + </u-input>
27 </view> 32 </view>
28 <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button> 33 <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>
29 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;"> 34 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
@@ -33,7 +38,7 @@ @@ -33,7 +38,7 @@
33 <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;"> 38 <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;">
34 <view style="color:#999999;font-size: 13px;">第三方账号登录</view> 39 <view style="color:#999999;font-size: 13px;">第三方账号登录</view>
35 <view style="height:20rpx"></view> 40 <view style="height:20rpx"></view>
36 - <view ><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view> 41 + <view><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view>
37 <view class="circleStyleBottom"></view> 42 <view class="circleStyleBottom"></view>
38 </view> 43 </view>
39 </view> 44 </view>
@@ -45,7 +50,12 @@ @@ -45,7 +50,12 @@
45 export default { 50 export default {
46 data() { 51 data() {
47 return { 52 return {
48 - showPasswordIcon: 'eye-off' 53 + showPasswordIcon: 'eye-off',
  54 + showPasswordOrText: 'password',
  55 + loginForm: {
  56 + account: '',
  57 + password: ''
  58 + }
49 }; 59 };
50 }, 60 },
51 methods: { 61 methods: {
@@ -60,6 +70,15 @@ export default { @@ -60,6 +70,15 @@ export default {
60 uni.navigateTo({ 70 uni.navigateTo({
61 url: './findPassword' 71 url: './findPassword'
62 }); 72 });
  73 + },
  74 + showPasswordMode() {
  75 + if (this.loginForm.password.length !== 0) {
  76 + this.showPasswordOrText = 'text';
  77 + this.showPasswordIcon = 'eye-fill';
  78 + } else {
  79 + this.showPasswordOrText = 'password';
  80 + this.showPasswordIcon = 'eye-off';
  81 + }
63 } 82 }
64 } 83 }
65 }; 84 };
@@ -261,7 +261,7 @@ export default { @@ -261,7 +261,7 @@ export default {
261 <style lang="scss" scoped> 261 <style lang="scss" scoped>
262 .headBox { 262 .headBox {
263 background-color: #fff; 263 background-color: #fff;
264 - border-top: 0.2px solid gray; 264 + border-top: 0.01px solid #f5f5f5;
265 height: 250rpx; 265 height: 250rpx;
266 266
267 .avatar { 267 .avatar {