简柏林 / thingskit-app · Commits

Commit f7cd33b3f1676023b93230e8d831aad779093166

Authored by fengtao
1 parent 170694bb

refractor:重新抽取所有页面样式问题,feat:通知详情新增图片显示

Inline Side-by-side
Showing 35 changed files with 2008 additions and 1498 deletions
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 // 主页页面的页面路径 57 // 主页页面的页面路径
58 // 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。 58 // 关联功能：打开的页面只有一个的时候右上角自动显示返回首页按钮，下面这个数组是排除显示返回首页的页面。
59 // 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的 59 // 主页使用场景：小程序分享出去的页面，用户点击开是分享页面，很多情况下是没有返回首页按钮的
60 - const mainPagePath = ['pages/index/index', 'pages/goods/goods', 'pages/device/device', 'pages/personal/personal','pages/alert/alert', ]; 60 + const mainPagePath = ['pages/index/index', 'pages/goods/goods', 'pages/device/device', 'pages/personal/personal','pages/alarm/alarm', ];
61 //返回首页的地址 61 //返回首页的地址
62 const homePath = '/pages/index/index'; 62 const homePath = '/pages/index/index';
63 //白色表达值 63 //白色表达值
@@ -97,7 +97,7 @@ export default { @@ -97,7 +97,7 @@ export default {
97 }, 97 },
98 { 98 {
99 name: '告警', 99 name: '告警',
100 - url: 'pages/alert/alert', 100 + url: 'pages/alarm/alarm',
101 icon: '../../../static/alert-un.png', 101 icon: '../../../static/alert-un.png',
102 iconFill: '../../../static/alert-yes.png', 102 iconFill: '../../../static/alert-yes.png',
103 badge: 0 103 badge: 0
@@ -141,7 +141,7 @@ export default { @@ -141,7 +141,7 @@ export default {
141 }, 141 },
142 onTabbar(index) { 142 onTabbar(index) {
143 if (index !== 5) { 143 if (index !== 5) {
144 - this.loadData(); 144 + // this.loadData();
145 } 145 }
146 if (this.path !== this.list[index].url) { 146 if (this.path !== this.list[index].url) {
147 uni.switchTab({ 147 uni.switchTab({
@@ -5,6 +5,7 @@ let baseUrl = ""; @@ -5,6 +5,7 @@ let baseUrl = "";
5 if (process.env.NODE_ENV === 'development') { 5 if (process.env.NODE_ENV === 'development') {
6 // 开发环境 6 // 开发环境
7 baseUrl = 'http://47.99.141.212:8080/api' 7 baseUrl = 'http://47.99.141.212:8080/api'
  8 + // baseUrl = 'http://192.168.10.103:8080/api'
8 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php' 9 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php'
9 } else if (process.env.NODE_ENV === 'production') { 10 } else if (process.env.NODE_ENV === 'production') {
10 // 生产环境 11 // 生产环境
@@ -21,13 +21,13 @@ @@ -21,13 +21,13 @@
21 } 21 }
22 }, 22 },
23 { 23 {
24 - "path": "pages/alert/alert", 24 + "path": "pages/alarm/alarm",
25 "style": { 25 "style": {
26 "navigationBarTitleText": "告警" 26 "navigationBarTitleText": "告警"
27 } 27 }
28 }, 28 },
29 { 29 {
30 - "path": "pages/alert/alertDetail", 30 + "path": "pages/alarm/alarmDetail",
31 "style": { 31 "style": {
32 "navigationBarTitleText": "告警详情" 32 "navigationBarTitleText": "告警详情"
33 } 33 }
@@ -93,7 +93,7 @@ @@ -93,7 +93,7 @@
93 "navigationBarTitleText": "组织筛选" 93 "navigationBarTitleText": "组织筛选"
94 } 94 }
95 }, { 95 }, {
96 - "path": "pages/index/orgStatus/orgStatus", 96 + "path": "pages/index/configuration/configuration",
97 "style": { 97 "style": {
98 "navigationBarTitleText": "查看组态" 98 "navigationBarTitleText": "查看组态"
99 } 99 }
@@ -107,14 +107,14 @@ @@ -107,14 +107,14 @@
107 107
108 }, 108 },
109 { 109 {
110 - "path": "pages/index/orgStatus/statusDetail", 110 + "path": "pages/index/configuration/configurationDetail",
111 "style": { 111 "style": {
112 "navigationBarTitleText": "组态详情" 112 "navigationBarTitleText": "组态详情"
113 } 113 }
114 114
115 }, 115 },
116 { 116 {
117 - "path": "pages/alert/org/org", 117 + "path": "pages/alarm/org/org",
118 "style": { 118 "style": {
119 "navigationBarTitleText": "组织筛选" 119 "navigationBarTitleText": "组织筛选"
120 } 120 }
@@ -148,7 +148,7 @@ @@ -148,7 +148,7 @@
148 "text": "设备" 148 "text": "设备"
149 }, 149 },
150 { 150 {
151 - "pagePath": "pages/alert/alert", 151 + "pagePath": "pages/alarm/alarm",
152 "iconPath": "static/basics.png", 152 "iconPath": "static/basics.png",
153 "selectedIconPath": "static/basics.png", 153 "selectedIconPath": "static/basics.png",
154 "text": "告警" 154 "text": "告警"
  1 +<template>
  2 + <view class="alert-page">
  3 + <f-navbar>
  4 + <view class="u-flex filter" slot="right">
  5 + <view class="filter-input"><u--input prefixIcon="search" placeholder="输入设备SN或名称搜索" border="surround" shape="circle"></u--input></view>
  6 + <view class="filter-text">
  7 + <view><text class="text">筛选</text></view>
  8 + </view>
  9 + <view class="filter-icon"><image class="image" @click="openSearchDialog" src="../../static/shaixuan.png"></image></view>
  10 + </view>
  11 + </f-navbar>
  12 + <!-- 公共组件-每个页面必须引入 -->
  13 + <public-module></public-module>
  14 + <view @click="openOrg" class="org-sty">
  15 + <view class="org-item">
  16 + <view class="u-flex item"><text class="text">组织关系</text></view>
  17 + <view class="u-flex item-child">
  18 + <image class="image" src="../../static/org.png" mode=""></image>
  19 + <text class="text">告警数：{{ alertTotal }}</text>
  20 + </view>
  21 + </view>
  22 + <view class="org-item "><image class="org-image" src="../../static/right-arrow.png"></image></view>
  23 + </view>
  24 + <!-- 自带分页组件 -->
  25 + <mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
  26 + <view class="device-list">
  27 + <view @click="openAlertDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
  28 + <view class="u-flex item">
  29 + <view class="item-text">
  30 + <text class="text-three">{{ item.deviceName == null ? '暂无数据' : item.deviceName }}</text>
  31 + </view>
  32 + <view class="item-text">
  33 + <text class="text">{{ item.details == null ? '暂无数据' : item.details.data }}</text>
  34 + </view>
  35 + <view class="item-text">
  36 + <text class="text">
  37 + {{
  38 + item.status == 'CLEARED_UNACK'
  39 + ? '清除未确认'
  40 + : item.status == 'ACTIVE_UNACK'
  41 + ? '激活未确认'
  42 + : item.status == 'CLEARED_ACK'
  43 + ? '清除已确认'
  44 + : '激活已确认'
  45 + }}
  46 + </text>
  47 + </view>
  48 + <view class="item-text">
  49 + <text class="text-nine">{{ item.createdTime }}</text>
  50 + </view>
  51 + </view>
  52 + <view class="item">
  53 + <view class="u-flex item-right">
  54 + <image class="right-image" :src="bindImageUrl(item.severity)"></image>
  55 + <view class="right-text">
  56 + <text
  57 + :style="[
  58 + item.severity == 'CRITICAL'
  59 + ? { color: '#DE4437' }
  60 + : item.severity == 'MAJOR'
  61 + ? { color: '#DE7337' }
  62 + : item.severity == 'MINOR'
  63 + ? { color: '#FFC107' }
  64 + : item.severity == 'WARNING'
  65 + ? { color: '#DE4437' }
  66 + : { color: '#00C9A7' }
  67 + ]"
  68 + >
  69 + {{
  70 + item.severity == 'CRITICAL'
  71 + ? '危险'
  72 + : item.severity == 'MAJOR'
  73 + ? '重要'
  74 + : item.severity == 'MINOR'
  75 + ? '次要'
  76 + : item.severity == 'WARNING'
  77 + ? '警告'
  78 + : '不确定'
  79 + }}
  80 + </text>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + </view>
  85 + </view>
  86 + </mescroll-body>
  87 + <!-- 自带分页组件 -->
  88 + <view style="height: 20rpx"></view>
  89 + <!-- 告警筛选 -->
  90 + <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">
  91 + <view class="popup-page">
  92 + <view class="popup-text"><text class="text">筛选条件</text></view>
  93 + <view class="popup-alarm-page u-flex">
  94 + <view>
  95 + <view class="popup-alarm-text"><text class="text">告警状态</text></view>
  96 + <view class="u-flex popup-alarm-child">
  97 + <view
  98 + class="alarm-text"
  99 + @click="getAlertStatus(item, index)"
  100 + :style="[index == current1 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  101 + v-for="(item, index) in alertStatus"
  102 + :key="index"
  103 + >
  104 + <text class="text">{{ item.name }}</text>
  105 + </view>
  106 + </view>
  107 + <view style="margin-top: 120rpx;">
  108 + <view class="popup-alarm-text"><text class="text">设备类型</text></view>
  109 + <view class="u-flex popup-alarm-child">
  110 + <view
  111 + class="alarm-text"
  112 + @click="getTypeStatus(item, index)"
  113 + :style="[index == current2 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  114 + v-for="(item, index) in deviceType"
  115 + :key="index"
  116 + >
  117 + <text class="text">{{ item.name }}</text>
  118 + </view>
  119 + </view>
  120 +
  121 + <view style="margin-top: 120rpx;">
  122 + <view class="popup-alarm-text"><text class="text">告警等级</text></view>
  123 + <view class="u-flex popup-alarm-child">
  124 + <view
  125 + class="alarm-text"
  126 + @click="getLevelStatus(item, index)"
  127 + :style="[index == current3 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  128 + v-for="(item, index) in alertLevel"
  129 + :key="index"
  130 + >
  131 + <text class="text">{{ item.name }}</text>
  132 + </view>
  133 + </view>
  134 + <view style="margin-top: 120rpx;">
  135 + <view class="popup-alarm-text"><text class="text">选择时间</text></view>
  136 + <view class="u-flex popup-alarm-child">
  137 + <view
  138 + class="alarm-text"
  139 + @click="getTimeStatus(item, index)"
  140 + :style="[index == current4 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"
  141 + v-for="(item, index) in timeArea"
  142 + :key="index"
  143 + >
  144 + <text class="text">{{ item.name }}</text>
  145 + </view>
  146 + </view>
  147 + <view style="margin-top: 120rpx;">
  148 + <view class="u-flex popup-alarm-child">
  149 + <view>
  150 + <u--form
  151 + :label-style="{ 'font-size': '29rpx', 'margin-left': '10rpx' }"
  152 + labelPosition="left"
  153 + :model="timeData"
  154 + :rules="rules"
  155 + ref="form1"
  156 + >
  157 + <u-form-item
  158 + style="font-size: 14px"
  159 + label="选择日期"
  160 + prop="selectTime"
  161 + labelWidth="80"
  162 + borderBottom
  163 + @click="
  164 + showCalendar = true;
  165 + hideKeyboard();
  166 + "
  167 + >
  168 + <u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>
  169 + </u-form-item>
  170 + </u--form>
  171 + </view>
  172 + </view>
  173 + </view>
  174 + <view class="u-flex" style="flex-direction: row; margin-top: 128rpx; margin-left: 10rpx">
  175 + <view style="width: 300rpx"><u-button @click="resetData" type="info" shape="circle" text="重置"></u-button></view>
  176 + <view style="width: 300rpx; margin-left: 46rpx"><u-button @click="queryData" type="primary" shape="circle" text="确认"></u-button></view>
  177 + </view>
  178 + <view style="height: 30rpx;"></view>
  179 + </view>
  180 + </view>
  181 + </view>
  182 + </view>
  183 + </view>
  184 + </view>
  185 + </u-popup>
  186 + <u-calendar
  187 + :show="showCalendar"
  188 + mode="range"
  189 + @confirm="calendarConfirm"
  190 + @close="calendarClose"
  191 + startText="开始时间"
  192 + endText="结束时间"
  193 + confirmDisabledText="请选择日期"
  194 + :formatter="formatter"
  195 + ></u-calendar>
  196 + <f-tabbar></f-tabbar>
  197 + </view>
  198 +</template>
  199 +
  200 +<script>
  201 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  202 +import fNavbar from '@/components/module/f-navbar/f-navbar';
  203 +import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
  204 +import { pageNumber, pageSize } from '@/config/constant.js';
  205 +import { alertStatus, deviceType, alertLevel, timeArea } from './static/data.js';
  206 +
  207 +export default {
  208 + mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
  209 + components: {
  210 + fTabbar,
  211 + fNavbar
  212 + },
  213 + data() {
  214 + return {
  215 + alertStatusVal: '',
  216 + deviceTypeVal: '',
  217 + alertLevelVal: '',
  218 + selectTimeVal: '',
  219 + startTime: '',
  220 + endTime: '',
  221 + current1: 0,
  222 + current2: 0,
  223 + current3: 0,
  224 + current4: 0,
  225 + page: {
  226 + num: 0,
  227 + size: 10
  228 + },
  229 + downOption: {
  230 + auto: false //是否在初始化后,自动执行downCallback; 默认true
  231 + },
  232 + upOption: {
  233 + auto: false // 不自动加载
  234 + },
  235 + timeData: {
  236 + selectTime: '',
  237 + getTimeGap: '',
  238 + getDateVal: ''
  239 + },
  240 + showCalendar: false,
  241 + show: false,
  242 + list: [],
  243 + alertStatus,
  244 + deviceType,
  245 + alertLevel,
  246 + timeArea,
  247 + ordId: '',
  248 + detailStatus: false,
  249 + alertTotal: 0
  250 + };
  251 + },
  252 + onShow() {
  253 + if (this.detailStatus) {
  254 + this.loadData(1, null, null, null, null, null, null);
  255 + }
  256 + if (this.ordId == '') {
  257 + } else {
  258 + this.loadData(1, null, null, null, null, null, this.ordId);
  259 + }
  260 + },
  261 + onHide() {
  262 + this.ordId = '';
  263 + this.detailStatus = false;
  264 + this.loadData(1, null, null, null, null, null, null);
  265 + },
  266 + onLoad(e) {
  267 + // 隐藏原生的tabbar
  268 + uni.hideTabBar();
  269 + if (e.type !== undefined) {
  270 + let params = JSON.parse(e.type);
  271 + let type;
  272 + if (Array.isArray(params)) {
  273 + // type = params.join(',');
  274 + type = params[0];
  275 + } else {
  276 + type = params;
  277 + }
  278 + this.loadData(1, type, null, null, null, null, null);
  279 + } else {
  280 + this.loadData(1, null, null, null, null, null, null);
  281 + }
  282 + },
  283 + methods: {
  284 + getAlertStatus(e, i) {
  285 + this.current1 = i;
  286 + this.alertStatusVal = e.value;
  287 + },
  288 + getTypeStatus(e, i) {
  289 + this.current2 = i;
  290 + this.deviceTypeVal = e.value;
  291 + },
  292 + getLevelStatus(e, i) {
  293 + this.current3 = i;
  294 + this.alertLevelVal = e.value;
  295 + },
  296 + getTimeStatus(e, i) {
  297 + this.current4 = i;
  298 + this.selectTimeVal = e.value;
  299 + },
  300 + queryData() {
  301 + let date1 = new Date(this.timeData.getDateVal[0]);
  302 + let date2 = new Date(this.timeData.getDateVal[this.timeData.getDateVal.length - 1]);
  303 + let startTimeVa, endTimeVa;
  304 + if (this.timeData.getDateVal.length == 0) {
  305 + startTimeVa = '';
  306 + endTimeVa = '';
  307 + } else {
  308 + startTimeVa = date1.getTime();
  309 + endTimeVa = date2.getTime();
  310 + }
  311 + this.loadData(1, this.alertStatusVal, startTimeVa, endTimeVa, this.alertLevelVal, this.deviceTypeVal);
  312 + this.show = false;
  313 + },
  314 + resetData() {
  315 + this.current1 = 0;
  316 + this.alertStatusVal = '';
  317 + this.current2 = 0;
  318 + this.deviceTypeVal = '';
  319 + this.current3 = 0;
  320 + this.alertLevelVal = '';
  321 + this.current4 = 0;
  322 + this.selectTimeVal = '';
  323 + this.timeData.getDateVal = '';
  324 + this.timeData.selectTime = '';
  325 + },
  326 + bindImageUrl(e) {
  327 + switch (e) {
  328 + case 'CRITICAL':
  329 + return '../../static/danger.png';
  330 + break;
  331 + case 'MAJOR':
  332 + return '../../static/major.png';
  333 + break;
  334 + case 'MINOR':
  335 + return '../../static/secondary.png';
  336 + break;
  337 + case 'WARNING':
  338 + return '../../static/danger.png';
  339 + break;
  340 + case 'INDETERMINATE':
  341 + return '../../static/noshue.png';
  342 + break;
  343 + default:
  344 + return '';
  345 + break;
  346 + }
  347 + },
  348 + /*下拉刷新的回调 */
  349 + downCallback() {
  350 + //联网加载数据
  351 + this.list.length = 0;
  352 + this.page.num = 1;
  353 + this.loadData(1);
  354 + },
  355 + /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  356 + upCallback() {
  357 + //联网加载数据
  358 + this.page.num += 1;
  359 + this.loadData(this.page.num);
  360 + },
  361 + loadData(pageNo, statusV, startTimeV, endTimeV, severityV, deviceTypeV, organizationV) {
  362 + let httpData = {
  363 + page: pageNo,
  364 + pageSize: 10,
  365 + status: statusV,
  366 + startTime: startTimeV,
  367 + endTime: endTimeV,
  368 + severity: severityV,
  369 + deviceType: deviceTypeV,
  370 + organizationId: organizationV
  371 + };
  372 + uni.$u.http
  373 + .get('/yt/alarm', { params: httpData, custom: { load: false } })
  374 + .then(res => {
  375 + uni.stopPullDownRefresh();
  376 + this.mescroll.endByPage(res.items.length, res.total);
  377 + this.alertTotal = res.total;
  378 + if (pageNo == 1) {
  379 + this.list = res.items;
  380 + } else {
  381 + this.list = this.list.concat(res.items);
  382 + }
  383 + })
  384 + .catch(e => {
  385 + uni.$u.toast(e.data.message);
  386 + //联网失败, 结束加载
  387 + this.mescroll.endErr();
  388 + });
  389 + },
  390 + openOrg() {
  391 + uni.navigateTo({
  392 + url: './org/org'
  393 + });
  394 + },
  395 + open() {},
  396 + close() {
  397 + this.show = false;
  398 + },
  399 + openSearchDialog() {
  400 + this.show = true;
  401 + this.resetData();
  402 + },
  403 + hideKeyboard() {
  404 + uni.hideKeyboard();
  405 + },
  406 + calendarConfirm(e) {
  407 + this.showCalendar = false;
  408 + this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;
  409 + this.timeData.getDateVal = e;
  410 + },
  411 + calendarClose() {
  412 + this.showCalendar = false;
  413 + },
  414 + //跳转告警详情
  415 + openAlertDetail(e) {
  416 + let obj = {
  417 + id: e.id,
  418 + deviceName: e.deviceName,
  419 + severity: e.severity,
  420 + originatorType: e.originatorType,
  421 + details: e.details,
  422 + createdTime: e.createdTime,
  423 + status: e.status
  424 + };
  425 + uni.navigateTo({
  426 + url: './alarmDetail?data=' + JSON.stringify(obj)
  427 + });
  428 + }
  429 + }
  430 +};
  431 +</script>
  432 +
  433 +<style lang="scss" scoped>
  434 +@import './static/alarm.scss';
  435 +</style>
pages/alarm/alarmDetail.vue renamed from pages/alert/alertDetail.vue
1 <template> 1 <template>
2 - <view class="alert-detail-page"> 2 + <view class="alarm-detail-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view style="border-radius: 20px;width: 688rpx;height: 573rpx;background-color: #FFFFFF;">  
6 - <view class="u-flex" style="height: 573rpx;justify-content:space-between;flex-direction: column;align-items: center;">  
7 - <view  
8 - class="u-flex"  
9 - style="flex-direction: row;justify-content: space-between;margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;"  
10 - >  
11 - <text style="color:#333333;font-size: 15px;">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>  
12 - <image style="width: 30rpx;height: 30rpx;" src="../../static/alert-detail.png" mode=""></image> 5 + <view class="alarm-detail-column">
  6 + <view class="u-flex detail-column">
  7 + <view class="u-flex column">
  8 + <text class="text">{{ list.deviceName == null ? '暂无数据' : list.deviceName }}</text>
  9 + <image class="image" src="../../static/alert-detail.png"></image>
13 </view> 10 </view>
14 - <view style="margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;">  
15 - <text style="color:#333333;font-size: 14px;">告警级别：</text>  
16 - <text style="color:#DE4437"> 11 + <view class="column">
  12 + <text class="text-alarm-level">告警级别：</text>
  13 + <text class="text-alarm-level" style="color:#DE4437">
17 {{ 14 {{
18 list.severity == 'CRITICAL' 15 list.severity == 'CRITICAL'
19 ? '危险' 16 ? '危险'
@@ -27,21 +24,21 @@ @@ -27,21 +24,21 @@
27 }} 24 }}
28 </text> 25 </text>
29 </view> 26 </view>
30 - <view style="margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;">  
31 - <text style="color:#333333;font-size: 15px;">所属组织：</text>  
32 - <text style="color:#666666;font-size: 14px;">{{ list.originatorType }}</text> 27 + <view class="column">
  28 + <text class="text-alarm-level-lg">所属组织：</text>
  29 + <text class="text-alarm-lg">{{ list.originatorType }}</text>
33 </view> 30 </view>
34 - <view style="margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;">  
35 - <text style="color:#333333;font-size: 15px;">告警值：</text>  
36 - <text style="color:#666666;font-size: 14px;">{{ list.details == null ? '暂无数据' : list.details.data }}</text> 31 + <view class="column">
  32 + <text class="text-alarm-level-lg">告警值：</text>
  33 + <text class="text-alarm-lg">{{ list.details == null ? '暂无数据' : list.details.data }}</text>
37 </view> 34 </view>
38 - <view style="margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;">  
39 - <text style="color:#333333;font-size: 15px;">告警时间：</text>  
40 - <text style="color:#666666;font-size: 14px;">{{ list.createdTime }}</text> 35 + <view class="column">
  36 + <text class="text-alarm-level-lg">告警时间：</text>
  37 + <text class="text-alarm-lg">{{ list.createdTime }}</text>
41 </view> 38 </view>
42 - <view style="margin-top: 10rpx;line-height:68rpx;width: 614rpx;height:90rpx;text-align: left;border-bottom: 0.1rpx solid #F0F0F0;">  
43 - <text style="color:#333333;font-size: 15px;">告警状态：</text>  
44 - <text style="color:#DE4437;font-size: 14px;"> 39 + <view class="column">
  40 + <text class="text-alarm-level-lg">告警状态：</text>
  41 + <text class="text-alarm-status">
45 {{ 42 {{
46 list.status == 'CLEARED_UNACK' 43 list.status == 'CLEARED_UNACK'
47 ? '清除未确认' 44 ? '清除未确认'
@@ -56,8 +53,8 @@ @@ -56,8 +53,8 @@
56 </view> 53 </view>
57 </view> 54 </view>
58 <!-- #ifdef MP --> 55 <!-- #ifdef MP -->
59 - <view style="color:#333333,font-size:15px;margin-top: 20rpx;">处理结果</view>  
60 - <view style="margin-top: 20rpx;;border-radius: 20px;width: 688rpx;height: 273rpx;background-color: #FFFFFF;"> 56 + <view class="handle-result" style="">处理结果</view>
  57 + <view class="hanle-main">
61 <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1"> 58 <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1">
62 <u-form-item label="." prop="result" ref="item3"> 59 <u-form-item label="." prop="result" ref="item3">
63 <view style="margin-left: -60rpx;"><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view> 60 <view style="margin-left: -60rpx;"><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view>
@@ -66,12 +63,14 @@ @@ -66,12 +63,14 @@
66 </view> 63 </view>
67 <!-- #endif --> 64 <!-- #endif -->
68 <!-- #ifdef APP-PLUS --> 65 <!-- #ifdef APP-PLUS -->
69 - <view style="color:#333333,font-size:15px;margin-top: 20rpx;">处理结果</view>  
70 - <view style="margin-top: 20rpx;;border-radius: 20px;width: 688rpx;height: 273rpx;background-color: #FFFFFF;"> 66 + <view class="handle-result">处理结果</view>
  67 + <view class="hanle-main">
71 <view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view> 68 <view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view>
72 </view> 69 </view>
73 <!-- #endif --> 70 <!-- #endif -->
74 - <view style="width: 500rpx;margin-left: 80rpx;margin-top: 44rpx;"><u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button></view> 71 + <view v-if="list.status !== 'CLEARED_ACK'" style="width: 500rpx;margin-left: 80rpx;margin-top: 44rpx;">
  72 + <u-button @click="handleSubmit" type="primary" shape="circle" text="处理"></u-button>
  73 + </view>
75 <f-tabbar></f-tabbar> 74 <f-tabbar></f-tabbar>
76 </view> 75 </view>
77 </template> 76 </template>
@@ -100,18 +99,24 @@ export default { @@ -100,18 +99,24 @@ export default {
100 }, 99 },
101 methods: { 100 methods: {
102 handleSubmit() { 101 handleSubmit() {
103 - // console.log(this.formModel);  
104 uni.$u.http 102 uni.$u.http
105 .post(`/alarm/${this.list.id}/ack`) 103 .post(`/alarm/${this.list.id}/ack`)
106 .then(res => { 104 .then(res => {
107 - uni.$u.toast('处理成功');  
108 - let pages = getCurrentPages(); //获取所有页面栈实例列表  
109 - let nowPage = pages[pages.length - 1]; //当前页页面实例  
110 - let prevPage = pages[pages.length - 2]; //上一页页面实例  
111 - prevPage.$vm.detailStatus = true;  
112 - uni.navigateBack({  
113 - delta: 1  
114 - }); 105 + if (res == '') {
  106 + uni.showToast({
  107 + title: '处理成功~',
  108 + icon: 'none'
  109 + });
  110 + let pages = getCurrentPages(); //获取所有页面栈实例列表
  111 + let nowPage = pages[pages.length - 1]; //当前页页面实例
  112 + let prevPage = pages[pages.length - 2]; //上一页页面实例
  113 + prevPage.$vm.detailStatus = true;
  114 + setTimeout(() => {
  115 + uni.navigateBack({
  116 + delta: 1
  117 + });
  118 + }, 500);
  119 + }
115 }) 120 })
116 .catch(e => { 121 .catch(e => {
117 uni.$u.toast(e.data?.message); 122 uni.$u.toast(e.data?.message);
@@ -122,7 +127,5 @@ export default { @@ -122,7 +127,5 @@ export default {
122 </script> 127 </script>
123 128
124 <style lang="scss" scoped> 129 <style lang="scss" scoped>
125 -.alert-detail-page {  
126 - padding: 30rpx;  
127 -} 130 +@import './static/alarmDetail.scss';
128 </style> 131 </style>
pages/alarm/org/org.vue renamed from pages/alert/org/org.vue
  1 +.alert-page {
  2 + margin-top: 5rpx;
  3 +
  4 + .filter {
  5 + justify-content: space-between;
  6 + flex-direction: row;
  7 +
  8 + .filter-input {
  9 + width: 580rpx;
  10 + visibility: hidden;
  11 + }
  12 +
  13 + .filter-text {
  14 + margin-left: 7rpx;
  15 +
  16 + .text {
  17 + color: #333333;
  18 + font-size: 14px;
  19 + }
  20 + }
  21 +
  22 + .filter-icon {
  23 + margin-left: 7rpx;
  24 +
  25 + .image {
  26 + width: 40rpx;
  27 + height: 40rpx;
  28 + }
  29 + }
  30 + }
  31 +}
  32 +
  33 +.org-sty {
  34 + width: 750rpx;
  35 + height: 150rpx;
  36 + background-color: #fff;
  37 + display: flex;
  38 + flex-direction: row;
  39 + justify-content: space-between;
  40 +
  41 + .org-item {
  42 + width: 350rpx;
  43 + height: 200rpx;
  44 +
  45 + .item {
  46 + flex-direction: row;
  47 + margin-top: 26rpx;
  48 + margin-left: 15rpx;
  49 +
  50 + .text {
  51 + color: #333333;
  52 + font-size: 15px;
  53 + margin-left: 14rpx;
  54 + }
  55 + }
  56 +
  57 + .item-child {
  58 + margin-top: 5rpx;
  59 + margin-left: 15rpx;
  60 + flex-direction: row;
  61 +
  62 + .image {
  63 + margin-left: 14rpx;
  64 + width: 30rpx;
  65 + height: 30rpx;
  66 + }
  67 +
  68 + .text {
  69 + margin-left: 10rpx;
  70 + color: #666666;
  71 + font-size: 12px;
  72 + }
  73 + }
  74 +
  75 + .org-image {
  76 + width: 6px;
  77 + height: 10px;
  78 + float: right;
  79 + margin-right: 34rpx;
  80 + margin-top: 58rpx;
  81 + }
  82 + }
  83 +}
  84 +
  85 +.device-list {
  86 + display: flex;
  87 + flex-direction: column;
  88 + padding-left: 18rpx;
  89 + justify-content: flex-start;
  90 +
  91 + .list-item {
  92 + width: 713rpx;
  93 + height: 233rpx;
  94 + background-color: #fff;
  95 + margin-top: 24rpx;
  96 + display: flex;
  97 + flex-direction: row;
  98 + border-radius: 10px;
  99 + justify-content: space-between;
  100 +
  101 + .item {
  102 + margin: 30rpx;
  103 + justify-content: flex-start;
  104 + flex-direction: column;
  105 + align-items: center;
  106 +
  107 + .item-text {
  108 + width: 400rpx;
  109 + text-align: left;
  110 +
  111 + .text {
  112 + color: #666666;
  113 + font-size: 15px;
  114 + }
  115 +
  116 + .text-three {
  117 + color: #333333;
  118 + font-size: 15px;
  119 + }
  120 +
  121 + .text-nine {
  122 + color: #999999;
  123 + font-size: 15px;
  124 + }
  125 + }
  126 +
  127 + .item-right {
  128 + flex-direction: row;
  129 + margin-top: -15rpx;
  130 +
  131 + .right-image {
  132 + width: 30rpx;
  133 + height: 30rpx;
  134 + margin-top: 20rpx;
  135 + margin-right: 5rpx;
  136 + }
  137 +
  138 + .right-text {
  139 + color: #333333;
  140 + font-size: 13px;
  141 + margin-left: 5rpx;
  142 + margin-top: 20rpx;
  143 + }
  144 + }
  145 + }
  146 + }
  147 +}
  148 +
  149 +.popup-page {
  150 + height: 1100rpx;
  151 + background: #ffffff;
  152 + border-radius: 20rpx;
  153 + overflow-y: scroll;
  154 +
  155 + .popup-text {
  156 + text-align: center;
  157 + position: relative;
  158 + top: 68rpx;
  159 + margin-top: -40rpx;
  160 +
  161 + .text {
  162 + font-size: 16px;
  163 + color: #333333;
  164 + }
  165 + }
  166 +
  167 + .popup-alarm-page {
  168 + margin-top: 97rpx;
  169 + margin-left: 98rpx;
  170 + flex-direction: column;
  171 + justify-content: space-between;
  172 +
  173 + .popup-alarm-text {
  174 + width: 750rpx;
  175 + margin-left: 14rpx;
  176 +
  177 + .text {
  178 + color: #333333;
  179 + font-size: 14px;
  180 + }
  181 + }
  182 +
  183 + .popup-alarm-child {
  184 + margin-top: 15rpx;
  185 + width: 650rpx;
  186 + height: 60rpx;
  187 + flex-direction: row;
  188 + flex-wrap: wrap;
  189 + justify-content: space-between;
  190 + align-content: space-between;
  191 +
  192 + .alarm-text {
  193 + margin: 10rpx;
  194 + line-height: 50rpx;
  195 + text-align: center;
  196 + width: 180rpx;
  197 + height: 60rpx;
  198 + background-color: #f6f6f6;
  199 + border-radius: 32px;
  200 +
  201 + .text {
  202 + color: #333333;
  203 + font-size: 13px;
  204 + }
  205 + }
  206 + }
  207 + }
  208 +}
  209 +
  210 +.u-form {
  211 + width: 618rpx !important;
  212 +}
  1 +.alarm-detail-page {
  2 + padding: 30rpx;
  3 +}
  4 +.alarm-detail-column {
  5 + border-radius: 20px;
  6 + width: 688rpx;
  7 + height: 573rpx;
  8 + background-color: #ffffff;
  9 + .detail-column {
  10 + height: 573rpx;
  11 + justify-content: space-between;
  12 + flex-direction: column;
  13 + align-items: center;
  14 + .column {
  15 + flex-direction: row;
  16 + justify-content: space-between;
  17 + margin-top: 10rpx;
  18 + line-height: 68rpx;
  19 + width: 614rpx;
  20 + height: 90rpx;
  21 + text-align: left;
  22 + border-bottom: 0.1rpx solid #f0f0f0;
  23 + .text {
  24 + color: #333333;
  25 + font-size: 15px;
  26 + }
  27 + .image {
  28 + width: 30rpx;
  29 + height: 30rpx;
  30 + }
  31 + .text-alarm-level {
  32 + color: #333333;
  33 + font-size: 14px;
  34 + }
  35 + .text-alarm-level-lg {
  36 + color: #333333;
  37 + font-size: 15px;
  38 + }
  39 + .text-alarm-lg {
  40 + color: #666666;
  41 + font-size: 14px;
  42 + }
  43 + .text-alarm-status {
  44 + color: #de4437;
  45 + font-size: 14px;
  46 + }
  47 + }
  48 + }
  49 +}
  50 +.handle-result {
  51 + color: #333333;
  52 + font-size: 15px;
  53 + margin-top: 20rpx;
  54 +}
  55 +.hanle-main {
  56 + margin-top: 20rpx;
  57 + border-radius: 20px;
  58 + width: 688rpx;
  59 + height: 273rpx;
  60 + background-color: #ffffff;
  61 +}
  1 +const alertStatus = [{
  2 + index: 0,
  3 + name: '全部',
  4 + value: '',
  5 + bgColor: '#377DFF',
  6 + textColor: '#377DFF'
  7 + },
  8 + {
  9 + index: 1,
  10 + name: '激活未确认',
  11 + value: 'ACTIVE_UNACK',
  12 + bgColor: '#F6F6F6',
  13 + textColor: '#F6F6F6'
  14 + },
  15 + {
  16 + index: 2,
  17 + name: '激活已确认',
  18 + value: 'ACTIVE_ACK',
  19 + bgColor: '#F6F6F6',
  20 + textColor: '#F6F6F6'
  21 + },
  22 + {
  23 + index: 3,
  24 + name: '清除未确认',
  25 + value: 'CLEARED_UNACK',
  26 + bgColor: '#F6F6F6',
  27 + textColor: '#F6F6F6'
  28 + },
  29 + {
  30 + index: 4,
  31 + name: '清除已确认',
  32 + value: 'CLEARED_ACK',
  33 + bgColor: '#F6F6F6',
  34 + textColor: '#F6F6F6'
  35 + }
  36 +]
  37 +const deviceType = [{
  38 + index: 1,
  39 + name: '全部',
  40 + value: '',
  41 + bgColor: '#377DFF',
  42 + textColor: '#377DFF'
  43 + },
  44 + {
  45 + index: 2,
  46 + name: '网关设备',
  47 + value: 'GATEWAY',
  48 + bgColor: '#F6F6F6',
  49 + textColor: '#F6F6F6'
  50 + },
  51 + {
  52 + index: 3,
  53 + name: '网关子设备',
  54 + value: 'SENSOR',
  55 + bgColor: '#F6F6F6',
  56 + textColor: '#F6F6F6'
  57 + },
  58 + {
  59 + index: 4,
  60 + name: '直连设备',
  61 + value: 'DIRECT_CONNECTION',
  62 + bgColor: '#F6F6F6',
  63 + textColor: '#F6F6F6'
  64 + }
  65 +]
  66 +const alertLevel = [{
  67 + index: 1,
  68 + name: '全部',
  69 + value: '',
  70 + bgColor: '#377DFF',
  71 + textColor: '#377DFF'
  72 + },
  73 + {
  74 + index: 2,
  75 + name: '危险',
  76 + value: 'CRITICAL',
  77 + bgColor: '#F6F6F6',
  78 + textColor: '#F6F6F6'
  79 + },
  80 + {
  81 + index: 3,
  82 + name: '重要',
  83 + value: 'MAJOR',
  84 + bgColor: '#F6F6F6',
  85 + textColor: '#F6F6F6'
  86 + },
  87 + {
  88 + index: 4,
  89 + name: '次要',
  90 + value: 'MINOR',
  91 + bgColor: '#F6F6F6',
  92 + textColor: '#F6F6F6'
  93 + },
  94 + {
  95 + index: 5,
  96 + name: '警告',
  97 + value: 'WARNING',
  98 + bgColor: '#F6F6F6',
  99 + textColor: '#F6F6F6'
  100 + },
  101 + {
  102 + index: 6,
  103 + name: '不确定',
  104 + value: 'INDETERMINATE',
  105 + bgColor: '#F6F6F6',
  106 + textColor: '#F6F6F6'
  107 + }
  108 +]
  109 +
  110 +const timeArea = [{
  111 + index: 1,
  112 + name: '全部',
  113 + value: '全部',
  114 + bgColor: '#F6F6F6',
  115 + textColor: '#F6F6F6'
  116 + },
  117 + {
  118 + index: 2,
  119 + name: '30分钟',
  120 + value: '30',
  121 + bgColor: '#F6F6F6',
  122 + textColor: '#F6F6F6'
  123 + },
  124 + {
  125 + index: 3,
  126 + name: '1小时',
  127 + value: '30',
  128 + bgColor: '#F6F6F6',
  129 + textColor: '#F6F6F6'
  130 + },
  131 + {
  132 + index: 4,
  133 + name: '2小时',
  134 + value: '120',
  135 + bgColor: '#F6F6F6',
  136 + textColor: '#F6F6F6'
  137 + },
  138 + {
  139 + index: 5,
  140 + name: '近一天',
  141 + value: '24',
  142 + bgColor: '#F6F6F6',
  143 + textColor: '#F6F6F6'
  144 + }
  145 +]
  146 +export {
  147 + alertStatus,
  148 + deviceType,
  149 + alertLevel,
  150 + timeArea
  151 +}
1 -<template>  
2 - <view class="alert-page">  
3 - <f-navbar>  
4 - <view class="u-flex" slot="right" style="justify-content: space-between;flex-direction: row;">  
5 - <view style="width: 580rpx;visibility: hidden;"><u--input prefixIcon="search" placeholder="输入设备SN或名称搜索" border="surround" shape="circle"></u--input></view>  
6 - <view style="margin-left: 7rpx;">  
7 - <view class=""><text style="color:#333333;font-size: 14px;">筛选</text></view>  
8 - </view>  
9 - <view style="margin-left: 7rpx;"><image @click="openSearchDialog" style="width: 40rpx;height: 40rpx;" src="../../static/shaixuan.png" mode=""></image></view>  
10 - </view>  
11 - </f-navbar>  
12 - <!-- 公共组件-每个页面必须引入 -->  
13 - <public-module></public-module>  
14 - <view @click="openOrg" class="org-sty">  
15 - <view class="org-item">  
16 - <view class="u-flex" style="flex-direction: row;margin-top: 26rpx;margin-left: 15rpx;">  
17 - <text style="color:#333333;font-size: 15px;margin-left: 14rpx;">组织关系</text>  
18 - </view>  
19 - <view style="margin-top: 5rpx;margin-left: 15rpx;flex-direction: row;" class="u-flex">  
20 - <image style="margin-left: 14rpx;width: 30rpx;height: 30rpx;" src="../../static/org.png" mode=""></image>  
21 - <text style="margin-left: 10rpx;color:#666666;font-size: 12px;">告警数：{{ alertTotal }}</text>  
22 - </view>  
23 - </view>  
24 - <view class="org-item" style="">  
25 - <image style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" mode=""></image>  
26 - </view>  
27 - </view>  
28 - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">  
29 - <view class="device-list">  
30 - <view @click="openAlertDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">  
31 - <view class="u-flex item" style="justify-content: flex-start;flex-direction: column;align-items: center;">  
32 - <view style="width: 400rpx;text-align: left;">  
33 - <text style="color:#333333;font-size: 15px;">{{ item.deviceName == null ? '暂无数据' : item.deviceName }}</text>  
34 - </view>  
35 - <view style="width: 400rpx;text-align: left;">  
36 - <text style="color:#666666;font-size: 15px;">{{ item.details == null ? '暂无数据' : item.details.data }}</text>  
37 - </view>  
38 - <view style="width: 400rpx;text-align: left;">  
39 - <text style="color:#666666;font-size: 15px;">  
40 - {{  
41 - item.status == 'CLEARED_UNACK'  
42 - ? '清除未确认'  
43 - : item.status == 'ACTIVE_UNACK'  
44 - ? '激活未确认'  
45 - : item.status == 'CLEARED_ACK'  
46 - ? '清除已确认'  
47 - : '激活已确认'  
48 - }}  
49 - </text>  
50 - </view>  
51 - <view style="width: 400rpx;text-align: left;">  
52 - <text style="color:#999999;font-size: 15px;">{{ item.createdTime }}</text>  
53 - </view>  
54 - </view>  
55 - <view class="item">  
56 - <view class="u-flex" style="flex-direction: row;margin-top: -6rpx;">  
57 - <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="bindImageUrl(item.severity)" mode=""></image>  
58 - <view class="">  
59 - <text  
60 - :style="[  
61 - item.severity == 'CRITICAL'  
62 - ? { color: '#DE4437' }  
63 - : item.severity == 'MAJOR'  
64 - ? { color: '#DE7337' }  
65 - : item.severity == 'MINOR'  
66 - ? { color: '#FFC107' }  
67 - : item.severity == 'WARNING'  
68 - ? { color: '#DE4437' }  
69 - : { color: '#00C9A7' }  
70 - ]"  
71 - style="color: #333333;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;"  
72 - >  
73 - {{  
74 - item.severity == 'CRITICAL'  
75 - ? '危险'  
76 - : item.severity == 'MAJOR'  
77 - ? '重要'  
78 - : item.severity == 'MINOR'  
79 - ? '次要'  
80 - : item.severity == 'WARNING'  
81 - ? '警告'  
82 - : '不确定'  
83 - }}  
84 - </text>  
85 - </view>  
86 - </view>  
87 - </view>  
88 - </view>  
89 - </view>  
90 - </mescroll-body>  
91 - <view style="height:20rpx"></view>  
92 - <!-- 告警筛选 -->  
93 - <u-popup @close="close" closeable bgColor="transparent" :overlay="true" :show="show" mode="bottom">  
94 - <view style="height: 1100rpx;background:#FFFFFF;border-radius: 20rpx;overflow-y: scroll;">  
95 - <view style="text-align: center;position: relative;top: 68rpx;margin-top: -40rpx;"><text style="font-size: 16px;color: #333333;">筛选条件</text></view>  
96 - <view style="margin-top: 97rpx;margin-left: 43rpx;">  
97 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">告警状态</text></view>  
98 - <view  
99 - class="u-flex"  
100 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
101 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
102 - >  
103 - <view  
104 - @click="getAlertStatus(item, index)"  
105 - :style="[index == current1 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"  
106 - v-for="(item, index) in alertStatus"  
107 - :key="index"  
108 - style="margin: 10rpx;line-height: 50rpx;text-align: center;  
109 - width:180rpx;height: 60rpx;  
110 - background-color:#F6F6F6;border-radius:32px"  
111 - >  
112 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
113 - </view>  
114 - </view>  
115 - </view>  
116 - <view style="margin-top: 145rpx;margin-left: 43rpx;">  
117 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">设备类型</text></view>  
118 - <view  
119 - class="u-flex"  
120 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
121 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
122 - >  
123 - <view  
124 - @click="getTypeStatus(item, index)"  
125 - :style="[index == current2 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"  
126 - v-for="(item, index) in deviceType"  
127 - :key="index"  
128 - style="margin: 10rpx;line-height: 50rpx;text-align: center;  
129 - width:180rpx;height: 60rpx;  
130 - background-color:#F6F6F6;border-radius:32px"  
131 - >  
132 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
133 - </view>  
134 - </view>  
135 - </view>  
136 - <view style="margin-top: 136rpx;margin-left: 43rpx;">  
137 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">告警等级</text></view>  
138 - <view  
139 - class="u-flex"  
140 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
141 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
142 - >  
143 - <view  
144 - @click="getLevelStatus(item, index)"  
145 - :style="[index == current3 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"  
146 - v-for="(item, index) in alertLevel"  
147 - :key="index"  
148 - style="margin: 10rpx;line-height: 50rpx;text-align: center;  
149 - width:180rpx;height: 60rpx;  
150 - background-color:#F6F6F6;border-radius:32px"  
151 - >  
152 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
153 - </view>  
154 - </view>  
155 - </view>  
156 - <view style="margin-top: 136rpx;margin-left: 43rpx;">  
157 - <view style="width: 750rpx;margin-left: 14rpx;" class=""><text style="color: #333333;font-size: 14px;">选择时间</text></view>  
158 - <view  
159 - class="u-flex"  
160 - style="margin-top: 15rpx;width:650rpx;height: 60rpx;flex-direction: row;  
161 - flex-wrap: wrap;justify-content: space-between; align-content: space-between;"  
162 - >  
163 - <view  
164 - @click="getTimeStatus(item, index)"  
165 - :style="[index == current4 ? { background: '#377DFF' } : { background: '#F6F6F6' }]"  
166 - v-for="(item, index) in timeArea"  
167 - :key="index"  
168 - style="margin: 10rpx;line-height: 50rpx;text-align: center;  
169 - width:180rpx;height: 60rpx;  
170 - background-color:#F6F6F6;border-radius:32px"  
171 - >  
172 - <text style="color:#333333;font-size: 13px;">{{ item.name }}</text>  
173 - </view>  
174 - </view>  
175 - </view>  
176 - <view style="margin-top: 136rpx;margin-left: 43rpx;">  
177 - <view class="u-flex" style="margin-left: 10rpx;margin-top: 15rpx;width:750rpx;height: 60rpx;flex-direction: row;">  
178 - <u--form labelPosition="left" :model="timeData" :rules="rules" ref="form1" style="padding-left: 26rpx;width: 617rpx!important;">  
179 - <u-form-item  
180 - style="font-size: 14px;"  
181 - label="选择日期"  
182 - prop="selectTime"  
183 - labelWidth="80"  
184 - borderBottom  
185 - @click="  
186 - showCalendar = true;  
187 - hideKeyboard();  
188 - "  
189 - >  
190 - <u--input v-model="timeData.selectTime" placeholder="请选择日期" border="none"></u--input>  
191 - </u-form-item>  
192 - </u--form>  
193 - </view>  
194 - </view>  
195 - <view class="u-flex" style="flex-direction: row;margin-top: 128rpx;margin-left: 55rpx;">  
196 - <view style="width: 300rpx"><u-button @click="resetData" type="info" shape="circle" text="重置"></u-button></view>  
197 - <view style="width: 300rpx;margin-left:46rpx ;"><u-button @click="queryData" type="primary" shape="circle" text="确认"></u-button></view>  
198 - </view>  
199 - <view style="height: 30rpx;"></view>  
200 - </view>  
201 - </u-popup>  
202 - <u-calendar  
203 - :show="showCalendar"  
204 - mode="range"  
205 - @confirm="calendarConfirm"  
206 - @close="calendarClose"  
207 - startText="开始时间"  
208 - endText="结束时间"  
209 - confirmDisabledText="请选择日期"  
210 - :formatter="formatter"  
211 - ></u-calendar>  
212 - <f-tabbar></f-tabbar>  
213 - </view>  
214 -</template>  
215 -  
216 -<script>  
217 -import fTabbar from '@/components/module/f-tabbar/f-tabbar';  
218 -import fNavbar from '@/components/module/f-navbar/f-navbar';  
219 -import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';  
220 -import { pageNumber, pageSize } from '@/config/constant.js';  
221 -  
222 -export default {  
223 - mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)  
224 - components: {  
225 - fTabbar,  
226 - fNavbar  
227 - },  
228 - data() {  
229 - return {  
230 - alertStatusVal: '',  
231 - deviceTypeVal: '',  
232 - alertLevelVal: '',  
233 - selectTimeVal: '',  
234 - startTime: '',  
235 - endTime: '',  
236 - current1: 0,  
237 - current2: 0,  
238 - current3: 0,  
239 - current4: 0,  
240 - page: {  
241 - num: 0,  
242 - size: 10  
243 - },  
244 - downOption: {  
245 - auto: false //是否在初始化后,自动执行downCallback; 默认true  
246 - },  
247 - timeData: {  
248 - selectTime: '',  
249 - getTimeGap: '',  
250 - getDateVal: ''  
251 - },  
252 - showCalendar: false,  
253 - show: false,  
254 - list: [],  
255 - alertStatus: [  
256 - {  
257 - index: 0,  
258 - name: '全部',  
259 - value: '',  
260 - bgColor: '#377DFF',  
261 - textColor: '#377DFF'  
262 - },  
263 - {  
264 - index: 1,  
265 - name: '激活未确认',  
266 - value: 'ACTIVE_UNACK',  
267 - bgColor: '#F6F6F6',  
268 - textColor: '#F6F6F6'  
269 - },  
270 - {  
271 - index: 2,  
272 - name: '激活已确认',  
273 - value: 'ACTIVE_ACK',  
274 - bgColor: '#F6F6F6',  
275 - textColor: '#F6F6F6'  
276 - },  
277 - {  
278 - index: 3,  
279 - name: '清除未确认',  
280 - value: 'CLEARED_UNACK',  
281 - bgColor: '#F6F6F6',  
282 - textColor: '#F6F6F6'  
283 - },  
284 - {  
285 - index: 4,  
286 - name: '清除已确认',  
287 - value: 'CLEARED_ACK',  
288 - bgColor: '#F6F6F6',  
289 - textColor: '#F6F6F6'  
290 - }  
291 - ],  
292 - deviceType: [  
293 - {  
294 - index: 1,  
295 - name: '全部',  
296 - value: '',  
297 - bgColor: '#377DFF',  
298 - textColor: '#377DFF'  
299 - },  
300 - {  
301 - index: 2,  
302 - name: '网关设备',  
303 - value: 'GATEWAY',  
304 - bgColor: '#F6F6F6',  
305 - textColor: '#F6F6F6'  
306 - },  
307 - {  
308 - index: 3,  
309 - name: '网关子设备',  
310 - value: 'SENSOR',  
311 - bgColor: '#F6F6F6',  
312 - textColor: '#F6F6F6'  
313 - },  
314 - {  
315 - index: 4,  
316 - name: '直连设备',  
317 - value: 'DIRECT_CONNECTION',  
318 - bgColor: '#F6F6F6',  
319 - textColor: '#F6F6F6'  
320 - }  
321 - ],  
322 - alertLevel: [  
323 - {  
324 - index: 1,  
325 - name: '全部',  
326 - value: '',  
327 - bgColor: '#377DFF',  
328 - textColor: '#377DFF'  
329 - },  
330 - {  
331 - index: 2,  
332 - name: '危险',  
333 - value: 'CRITICAL',  
334 - bgColor: '#F6F6F6',  
335 - textColor: '#F6F6F6'  
336 - },  
337 - {  
338 - index: 3,  
339 - name: '重要',  
340 - value: 'MAJOR',  
341 - bgColor: '#F6F6F6',  
342 - textColor: '#F6F6F6'  
343 - },  
344 - {  
345 - index: 4,  
346 - name: '次要',  
347 - value: 'MINOR',  
348 - bgColor: '#F6F6F6',  
349 - textColor: '#F6F6F6'  
350 - },  
351 - {  
352 - index: 5,  
353 - name: '警告',  
354 - value: 'WARNING',  
355 - bgColor: '#F6F6F6',  
356 - textColor: '#F6F6F6'  
357 - },  
358 - {  
359 - index: 6,  
360 - name: '不确定',  
361 - value: 'INDETERMINATE',  
362 - bgColor: '#F6F6F6',  
363 - textColor: '#F6F6F6'  
364 - }  
365 - ],  
366 - timeArea: [  
367 - {  
368 - index: 1,  
369 - name: '全部',  
370 - value: '全部',  
371 - bgColor: '#F6F6F6',  
372 - textColor: '#F6F6F6'  
373 - },  
374 - {  
375 - index: 2,  
376 - name: '30分钟',  
377 - value: '30',  
378 - bgColor: '#F6F6F6',  
379 - textColor: '#F6F6F6'  
380 - },  
381 - {  
382 - index: 3,  
383 - name: '1小时',  
384 - value: '30',  
385 - bgColor: '#F6F6F6',  
386 - textColor: '#F6F6F6'  
387 - },  
388 - {  
389 - index: 4,  
390 - name: '2小时',  
391 - value: '120',  
392 - bgColor: '#F6F6F6',  
393 - textColor: '#F6F6F6'  
394 - },  
395 - {  
396 - index: 5,  
397 - name: '近一天',  
398 - value: '24',  
399 - bgColor: '#F6F6F6',  
400 - textColor: '#F6F6F6'  
401 - }  
402 - ],  
403 - ordId: '',  
404 - detailStatus: false,  
405 - alertTotal: 0  
406 - };  
407 - },  
408 - onShow() {  
409 - if (this.detailStatus) {  
410 - this.loadData(1);  
411 - }  
412 - if (this.ordId == '') {  
413 - } else {  
414 - this.loadData(1, null, null, null, null, null, this.ordId);  
415 - }  
416 - },  
417 - onHide() {  
418 - this.ordId = '';  
419 - this.detailStatus = false;  
420 - },  
421 - onLoad(e) {  
422 - // 隐藏原生的tabbar  
423 - uni.hideTabBar();  
424 - },  
425 - methods: {  
426 - getAlertStatus(e, i) {  
427 - this.current1 = i;  
428 - this.alertStatusVal = e.value;  
429 - },  
430 - getTypeStatus(e, i) {  
431 - this.current2 = i;  
432 - this.deviceTypeVal = e.value;  
433 - },  
434 - getLevelStatus(e, i) {  
435 - this.current3 = i;  
436 - this.alertLevelVal = e.value;  
437 - },  
438 - getTimeStatus(e, i) {  
439 - this.current4 = i;  
440 - this.selectTimeVal = e.value;  
441 - },  
442 - queryData() {  
443 - let date1 = new Date(this.timeData.getDateVal[0]);  
444 - let date2 = new Date(this.timeData.getDateVal[this.timeData.getDateVal.length - 1]);  
445 - let startTimeVa, endTimeVa;  
446 - if (this.timeData.getDateVal.length == 0) {  
447 - startTimeVa = '';  
448 - endTimeVa = '';  
449 - } else {  
450 - startTimeVa = date1.getTime();  
451 - endTimeVa = date2.getTime();  
452 - }  
453 - this.loadData(1, this.alertStatusVal, startTimeVa, endTimeVa, this.alertLevelVal, this.deviceTypeVal);  
454 - this.show = false;  
455 - },  
456 - resetData() {  
457 - this.current1 = 0;  
458 - this.alertStatusVal = '';  
459 - this.current2 = 0;  
460 - this.deviceTypeVal = '';  
461 - this.current3 = 0;  
462 - this.alertLevelVal = '';  
463 - this.current4 = 0;  
464 - this.selectTimeVal = '';  
465 - },  
466 - bindImageUrl(e) {  
467 - switch (e) {  
468 - case 'CRITICAL':  
469 - return '../../static/danger.png';  
470 - break;  
471 - case 'MAJOR':  
472 - return '../../static/major.png';  
473 - break;  
474 - case 'MINOR':  
475 - return '../../static/secondary.png';  
476 - break;  
477 - case 'WARNING':  
478 - return '../../static/danger.png';  
479 - break;  
480 - case 'INDETERMINATE':  
481 - return '../../static/noshue.png';  
482 - break;  
483 - default:  
484 - return '';  
485 - break;  
486 - }  
487 - },  
488 - /*下拉刷新的回调 */  
489 - downCallback() {  
490 - //联网加载数据  
491 - this.list.length = 0;  
492 - this.page.num = 1;  
493 - this.loadData(1);  
494 - },  
495 - /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */  
496 - upCallback() {  
497 - //联网加载数据  
498 - this.page.num += 1;  
499 - this.loadData(this.page.num);  
500 - },  
501 - loadData(pageNo, statusV, startTimeV, endTimeV, severityV, deviceTypeV, organizationV) {  
502 - let httpData = {  
503 - page: pageNo,  
504 - pageSize: 10,  
505 - status: statusV,  
506 - startTime: startTimeV,  
507 - endTime: endTimeV,  
508 - severity: severityV,  
509 - deviceType: deviceTypeV,  
510 - organizationId: organizationV  
511 - };  
512 - uni.$u.http  
513 - .get('/yt/alarm', { params: httpData, custom: { load: false } })  
514 - .then(res => {  
515 - uni.stopPullDownRefresh();  
516 - this.mescroll.endByPage(res.items.length, res.total);  
517 - this.alertTotal = res.total;  
518 - if (pageNo == 1) {  
519 - this.list = res.items;  
520 - } else {  
521 - this.list = this.list.concat(res.items);  
522 - }  
523 - })  
524 - .catch(e => {  
525 - uni.$u.toast(e.data.message);  
526 - //联网失败, 结束加载  
527 - this.mescroll.endErr();  
528 - });  
529 - },  
530 - openOrg() {  
531 - uni.navigateTo({  
532 - url: './org/org'  
533 - });  
534 - },  
535 - open() {},  
536 - close() {  
537 - this.show = false;  
538 - },  
539 - openSearchDialog() {  
540 - this.show = true;  
541 - this.resetData();  
542 - },  
543 - hideKeyboard() {  
544 - uni.hideKeyboard();  
545 - },  
546 - calendarConfirm(e) {  
547 - this.showCalendar = false;  
548 - this.timeData.selectTime = `${e[0]} / ${e[e.length - 1]}`;  
549 - this.timeData.getDateVal = e;  
550 - },  
551 - calendarClose() {  
552 - this.showCalendar = false;  
553 - },  
554 - openAlertDetail(e) {  
555 - let obj = {  
556 - id: e.id,  
557 - deviceName: e.deviceName,  
558 - severity: e.severity,  
559 - originatorType: e.originatorType,  
560 - details: e.details,  
561 - createdTime: e.createdTime,  
562 - status: e.status  
563 - };  
564 - uni.navigateTo({  
565 - url: './alertDetail?data=' + JSON.stringify(obj)  
566 - });  
567 - }  
568 - }  
569 -};  
570 -</script>  
571 -  
572 -<style lang="scss" scoped>  
573 -.alert-page {  
574 - margin-top: 5rpx;  
575 -}  
576 -.device-list {  
577 - display: flex;  
578 - flex-direction: column;  
579 - padding-left: 18rpx;  
580 - justify-content: flex-start;  
581 - .list-item {  
582 - width: 713rpx;  
583 - height: 233rpx;  
584 - background-color: #fff;  
585 - margin-top: 24rpx;  
586 - display: flex;  
587 - flex-direction: row;  
588 - border-radius: 10px;  
589 - justify-content: space-between;  
590 - .item {  
591 - margin: 30rpx;  
592 - }  
593 - }  
594 -}  
595 -.org-sty {  
596 - width: 750rpx;  
597 - height: 150rpx;  
598 - background-color: #fff;  
599 - display: flex;  
600 - flex-direction: row;  
601 - justify-content: space-between;  
602 - .org-item {  
603 - width: 350rpx;  
604 - height: 200rpx;  
605 - }  
606 -}  
607 -.u-form {  
608 - width: 618rpx !important;  
609 -}  
610 -</style>  
@@ -4,35 +4,20 @@ @@ -4,35 +4,20 @@
4 <public-module></public-module> 4 <public-module></public-module>
5 <view class="org-sty"> 5 <view class="org-sty">
6 <view @click="openOrg" class="org-item"> 6 <view @click="openOrg" class="org-item">
7 - <view class="u-flex" style="flex-direction: row;margin-top: 26rpx;margin-left: 15rpx;">  
8 - <text style="color:#333333;font-size: 15px;margin-left: 14rpx;">组织关系</text> 7 + <view class="u-flex org-contact"><text class="text">组织关系</text></view>
  8 + <view class="u-flex org-device">
  9 + <image class="device-image" src="../../../static/org.png"></image>
  10 + <text class="device-text">设备数：{{ deviceTotal }}</text>
9 </view> 11 </view>
10 - <view style="margin-top: 5rpx;margin-left: 15rpx;flex-direction: row;" class="u-flex">  
11 - <image style="margin-left: 14rpx;width: 30rpx;height: 30rpx;" src="../../../static/org.png" mode=""></image>  
12 - <text style="margin-left: 10rpx;color:#666666;font-size: 12px;">设备数：{{ deviceTotal }}</text>  
13 - </view>  
14 - </view>  
15 - <view class="org-item" style="">  
16 - <image style="width: 6px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../../static/right-arrow.png" mode=""></image>  
17 </view> 12 </view>
  13 + <view class="org-item"><image class="image" src="../../../static/right-arrow.png"></image></view>
18 </view> 14 </view>
19 - <!-- <view class="camera-container">  
20 - <view class="container-item">  
21 - <view @click="openCameraDetail(item.url)" v-for="(item, index) in list" :key="index" class="item">  
22 - <video style="border-radius: 20px;width:300rpx ;height: 200rpx;" :src="item.url" controls></video>  
23 - <view style="position: relative;top: 8rpx;text-align: center;">  
24 - <text style="color: #333333;font-size: 13px;">{{ item.name }}</text>  
25 - </view>  
26 - </view>  
27 - </view>  
28 - </view> -->  
29 -  
30 <view class="camera-container"> 15 <view class="camera-container">
31 <view class="container-item"> 16 <view class="container-item">
32 <view @click="openCameraDetail(item.url)" v-for="(item, index) in list" :key="index" class="item"> 17 <view @click="openCameraDetail(item.url)" v-for="(item, index) in list" :key="index" class="item">
33 - <video style="border-radius: 20px;width:300rpx ;height: 200rpx;" :src="item.url" controls></video>  
34 - <view style="position: relative;top: 8rpx;text-align: center;">  
35 - <text style="color: #333333;font-size: 13px;">{{ item.name }}</text> 18 + <video class="video" :src="item.url" controls></video>
  19 + <view class="bottom-text">
  20 + <text class="text">{{ item.name }}</text>
36 </view> 21 </view>
37 </view> 22 </view>
38 </view> 23 </view>
@@ -127,45 +112,5 @@ export default { @@ -127,45 +112,5 @@ export default {
127 </script> 112 </script>
128 113
129 <style lang="scss" scoped> 114 <style lang="scss" scoped>
130 -.camera-page {  
131 - min-height: 100vh;  
132 - background-color: #f0f2f5;  
133 -}  
134 -.org-sty {  
135 - width: 750rpx;  
136 - height: 150rpx;  
137 - margin-top: 1rpx;  
138 - background-color: #fff;  
139 - display: flex;  
140 - flex-direction: row;  
141 - justify-content: space-between;  
142 - .org-item {  
143 - width: 350rpx;  
144 - height: 200rpx;  
145 - }  
146 -}  
147 -.camera-item {  
148 - height: 200rpx;  
149 - border: 0.1px solid gray;  
150 -}  
151 -.camera-container {  
152 - padding: 0 28rpx;  
153 - margin-top: -27rpx;  
154 - .container-item {  
155 - width: 717rpx;  
156 - display: flex;  
157 - justify-content: space-between;  
158 - flex-direction: row;  
159 - flex-wrap: wrap;  
160 - margin-left: -42rpx;  
161 - .item {  
162 - margin-top: 83rpx;  
163 - width: 300rpx;  
164 - height: 200rpx;  
165 - background-color: #fff;  
166 - border-radius: 20px;  
167 - margin-left: 58rpx;  
168 - }  
169 - }  
170 -} 115 +@import '../static/camera.scss';
171 </style> 116 </style>
pages/index/configuration/configuration.vue renamed from pages/index/orgStatus/orgStatus.vue
1 <template> 1 <template>
2 <view class="status-page"> 2 <view class="status-page">
3 <f-navbar navbarType="2" @leftClick="leftClick"> 3 <f-navbar navbarType="2" @leftClick="leftClick">
4 - <view class="u-flex" slot="left" style="justify-content: space-between;flex-direction: row;">  
5 - <view style="width: 700rpx;"><u--input prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view> 4 + <view class="u-flex search-top" slot="left">
  5 + <view class="search-main"><u--input prefixIcon="search" placeholder="请输入组态名称" border="surround" shape="circle"></u--input></view>
6 </view> 6 </view>
7 </f-navbar> 7 </f-navbar>
8 <!-- 公共组件-每个页面必须引入 --> 8 <!-- 公共组件-每个页面必须引入 -->
9 <public-module></public-module> 9 <public-module></public-module>
10 <view class="status-container"> 10 <view class="status-container">
11 - <view @click="openStatusDetail(item.id)" v-for="(item, index) in list" :key="index" class="status-item u-flex" style="flex-direction: column;justify-content: space-between;">  
12 - <view style="margin-top: 38rpx;"><image style="width: 198rpx;height: 119rpx;" :src="item.icon" mode=""></image></view>  
13 - <view style="position: relative;top: -25rpx;">  
14 - <text style="color: #333333;font-size: 14px;">{{ item.name }}</text> 11 + <view @click="openStatusDetail(item.id)" v-for="(item, index) in list" :key="index" class="status-item u-flex">
  12 + <view class="item-image"><image class="image" :src="item.icon"></image></view>
  13 + <view class="item-text">
  14 + <text class="text">{{ item.name }}</text>
15 </view> 15 </view>
16 </view> 16 </view>
17 </view> 17 </view>
@@ -32,15 +32,15 @@ export default { @@ -32,15 +32,15 @@ export default {
32 return { 32 return {
33 list: [ 33 list: [
34 { 34 {
35 - id:1, 35 + id: 1,
36 name: '智慧办公室1', 36 name: '智慧办公室1',
37 icon: '../../../static/test.png' 37 icon: '../../../static/test.png'
38 }, 38 },
39 { 39 {
40 - id:2, 40 + id: 2,
41 name: '智慧办公室2', 41 name: '智慧办公室2',
42 icon: '../../../static/test.png' 42 icon: '../../../static/test.png'
43 - }, 43 + }
44 ] 44 ]
45 }; 45 };
46 }, 46 },
@@ -52,34 +52,15 @@ export default { @@ -52,34 +52,15 @@ export default {
52 leftClick() { 52 leftClick() {
53 return false; 53 return false;
54 }, 54 },
55 - openStatusDetail(e){  
56 - console.log(e); 55 + openStatusDetail(e) {
57 uni.navigateTo({ 56 uni.navigateTo({
58 - url:'statusDetail'  
59 - }) 57 + url: 'configurationDetail'
  58 + });
60 } 59 }
61 } 60 }
62 }; 61 };
63 </script> 62 </script>
64 63
65 <style lang="scss" scoped> 64 <style lang="scss" scoped>
66 -.status-page {  
67 - padding: 15rpx 15rpx;  
68 -}  
69 -.status-container {  
70 - width: 700rpx;  
71 - height: 250rpx;  
72 - display: flex;  
73 - flex-wrap: wrap;  
74 - align-content: space-between;  
75 - justify-content: space-between;  
76 - flex-direction: row;  
77 - .status-item {  
78 - width: 300rpx;  
79 - height: 250rpx;  
80 - margin: 23rpx;  
81 - background-color: #ffffff;  
82 - border-radius: 20px;  
83 - }  
84 -} 65 +@import '../static/configuration.scss';
85 </style> 66 </style>
pages/index/configuration/configurationDetail.vue renamed from pages/index/orgStatus/statusDetail.vue
@@ -5,96 +5,91 @@ @@ -5,96 +5,91 @@
5 <view> 5 <view>
6 <!-- 基础统计 --> 6 <!-- 基础统计 -->
7 <view class="basic-sty"> 7 <view class="basic-sty">
8 - <view class=""><text style="font-size: 15px;color:#333333">基础统计</text></view>  
9 - <view class="basic" style="margin-top: 25rpx;"> 8 + <view class="basic-text"><text class="text">基础统计</text></view>
  9 + <view class="basic">
10 <view class="basic-item"> 10 <view class="basic-item">
11 - <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">  
12 - <image style="width: 50rpx;height: 50rpx;" src="../../static/device-total.png" mode=""></image>  
13 - <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">设备统计</text> 11 + <view class="item-child-top u-flex">
  12 + <image class="item-image" src="../../static/device-total.png"></image>
  13 + <text class="item-text" style="">设备统计</text>
14 </view> 14 </view>
15 - <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">  
16 - <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">  
17 - <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"> 15 + <view class="item-child-bottom u-flex">
  16 + <view class="u-flex sigle-child">
  17 + <view class="sigle-text">
18 <text>{{ deviceData.onLine }}</text> 18 <text>{{ deviceData.onLine }}</text>
19 </view> 19 </view>
20 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>在线</text></view> 20 + <view class="sigle-value"><text>在线</text></view>
21 </view> 21 </view>
22 - <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">  
23 - <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"> 22 + <view class="u-flex sigle-child">
  23 + <view class="sigle-text">
24 <text>{{ deviceData.unLine }}</text> 24 <text>{{ deviceData.unLine }}</text>
25 </view> 25 </view>
26 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>离线</text></view> 26 + <view class="sigle-value"><text>离线</text></view>
27 </view> 27 </view>
28 - <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">  
29 - <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"> 28 + <view class="u-flex sigle-child">
  29 + <view class="sigle-text">
30 <text>{{ deviceData.noActive }}</text> 30 <text>{{ deviceData.noActive }}</text>
31 </view> 31 </view>
32 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未激活</text></view> 32 + <view class="sigle-value"><text>未激活</text></view>
33 </view> 33 </view>
34 </view> 34 </view>
35 </view> 35 </view>
36 <view class="basic-item"> 36 <view class="basic-item">
37 - <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">  
38 - <image style="width: 50rpx;height: 50rpx;" src="../../static/alert.png" mode=""></image>  
39 - <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">告警统计</text> 37 + <view class="item-child-top u-flex">
  38 + <image class="item-image" src="../../static/alert.png"></image>
  39 + <text class="item-text">告警统计</text>
40 </view> 40 </view>
41 - <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">  
42 - <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">  
43 - <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"> 41 + <view class="item-child-bottom u-flex">
  42 + <view @click="navatorAlertUnhandle()" class="u-flex sigle-child">
  43 + <view class="sigle-text">
44 <text>{{ alertData.noHandle }}</text> 44 <text>{{ alertData.noHandle }}</text>
45 </view> 45 </view>
46 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未处理</text></view> 46 + <view class="sigle-value"><text>未处理</text></view>
47 </view> 47 </view>
48 - <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">  
49 - <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"> 48 + <view @click="navatorAlertHandle('CLEARED_ACK')" class="u-flex sigle-child">
  49 + <view class="sigle-text">
50 <text>{{ alertData.doneHandle }}</text> 50 <text>{{ alertData.doneHandle }}</text>
51 </view> 51 </view>
52 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>已处理</text></view> 52 + <view class="sigle-value"><text>已处理</text></view>
53 </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"> 54 + <view @click="navatorAlertFalseAlarm('CLEARED_UNACK')" class="u-flex sigle-child">
  55 + <view class="sigle-text">
56 <text>{{ alertData.errorReport }}</text> 56 <text>{{ alertData.errorReport }}</text>
57 </view> 57 </view>
58 - <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>误报</text></view> 58 + <view class="sigle-value"><text>误报</text></view>
59 </view> 59 </view>
60 </view> 60 </view>
61 </view> 61 </view>
62 </view> 62 </view>
63 </view> 63 </view>
  64 + <!-- 基础统计 -->
  65 + <!-- 四宫格 -->
64 <view class="grid-container"> 66 <view class="grid-container">
65 <view class="grid-item"> 67 <view class="grid-item">
66 <view class="item-center"> 68 <view class="item-center">
67 - <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/form.png" mode=""></image></view>  
68 - <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">  
69 - <text style="font-size:13px;color:#333333">维修工单</text>  
70 - </view> 69 + <view class="center"><image class="image" src="../../static/form.png"></image></view>
  70 + <view class="center-text"><text class="text">维修工单</text></view>
71 </view> 71 </view>
72 </view> 72 </view>
73 <view @click="openCamera" class="grid-item"> 73 <view @click="openCamera" class="grid-item">
74 <view class="item-center"> 74 <view class="item-center">
75 - <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/camer.png" mode=""></image></view>  
76 - <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">  
77 - <text style="font-size:13px;color:#333333">摄像头管理</text>  
78 - </view> 75 + <view class="center"><image class="image" src="../../static/camer.png"></image></view>
  76 + <view class="center-text"><text class="text" style="">摄像头管理</text></view>
79 </view> 77 </view>
80 </view> 78 </view>
81 <view class="grid-item"> 79 <view class="grid-item">
82 <view class="item-center"> 80 <view class="item-center">
83 - <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/device.png" mode=""></image></view>  
84 - <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">  
85 - <text style="font-size:13px;color:#333333">设备接入</text>  
86 - </view> 81 + <view class="center"><image class="image" src="../../static/device.png"></image></view>
  82 + <view class="center-text"><text class="text">设备接入</text></view>
87 </view> 83 </view>
88 </view> 84 </view>
89 <view @click="openOrgStatus" class="grid-item"> 85 <view @click="openOrgStatus" class="grid-item">
90 <view class="item-center"> 86 <view class="item-center">
91 - <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/status.png" mode=""></image></view>  
92 - <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">  
93 - <text style="font-size:13px;color:#333333">组态</text>  
94 - </view> 87 + <view class="center"><image class="image" src="../../static/status.png"></image></view>
  88 + <view class="center-text"><text class="text">组态</text></view>
95 </view> 89 </view>
96 </view> 90 </view>
97 </view> 91 </view>
  92 + <!-- 四宫格 -->
98 </view> 93 </view>
99 <f-tabbar></f-tabbar> 94 <f-tabbar></f-tabbar>
100 </view> 95 </view>
@@ -128,20 +123,16 @@ export default { @@ -128,20 +123,16 @@ export default {
128 }, 123 },
129 methods: { 124 methods: {
130 getDeviceTotalData() { 125 getDeviceTotalData() {
131 - let httpData = {  
132 - page: 1,  
133 - pageSize: 10  
134 - };  
135 uni.$u.http 126 uni.$u.http
136 - .get('/yt/homepage/left/top', { params: httpData, custom: { load: false } }) 127 + .get('/yt/homepage/app')
137 .then(res => { 128 .then(res => {
138 if (res) { 129 if (res) {
139 - this.deviceData.onLine = res.deviceInfo.onLine;  
140 - this.deviceData.unLine = res.deviceInfo.offLine;  
141 - this.deviceData.noActive = res.deviceInfo.inActive;  
142 - this.alertData.noHandle = res.alarmInfo.todayAdd;  
143 - this.alertData.doneHandle = res.alarmInfo.sumCount;  
144 - this.alertData.errorReport = res.alarmInfo.todayAdd; 130 + this.deviceData.onLine = res.totalDevice.onLine;
  131 + this.deviceData.unLine = res.totalDevice.offLine;
  132 + this.deviceData.noActive = res.totalDevice.inActive;
  133 + this.alertData.noHandle = res.totalAlarm.activedAlarm;
  134 + this.alertData.doneHandle = res.totalAlarm.clearedAck;
  135 + this.alertData.errorReport = res.totalAlarm.clearedUnack;
145 } 136 }
146 }) 137 })
147 .catch(e => { 138 .catch(e => {
@@ -155,7 +146,23 @@ export default { @@ -155,7 +146,23 @@ export default {
155 }, 146 },
156 openOrgStatus() { 147 openOrgStatus() {
157 uni.navigateTo({ 148 uni.navigateTo({
158 - url: 'orgStatus/orgStatus' 149 + url: 'configuration/configuration'
  150 + });
  151 + },
  152 + navatorAlertUnhandle() {
  153 + let obj = ['ACTIVE_UNACK', 'ACTIVE_ACK'];
  154 + uni.reLaunch({
  155 + url: '../alarm/alarm?type=' + JSON.stringify(obj)
  156 + });
  157 + },
  158 + navatorAlertHandle(e) {
  159 + uni.reLaunch({
  160 + url: '../alarm/alarm?type=' + JSON.stringify(e)
  161 + });
  162 + },
  163 + navatorAlertFalseAlarm(e) {
  164 + uni.reLaunch({
  165 + url: '../alarm/alarm?type=' + JSON.stringify(e)
159 }); 166 });
160 } 167 }
161 } 168 }
@@ -163,61 +170,5 @@ export default { @@ -163,61 +170,5 @@ export default {
163 </script> 170 </script>
164 171
165 <style lang="scss" scoped> 172 <style lang="scss" scoped>
166 -.index-page {  
167 - padding: 27rpx 15rpx;  
168 - min-height: 100vh;  
169 - background-color: #f8f9fa;  
170 -}  
171 -.grid-container {  
172 - display: grid;  
173 - width: 750rpx;  
174 - height: 400rpx;  
175 - grid-template-columns: repeat(2, 350rpx);  
176 - grid-template-rows: repeat(2, 200rpx);  
177 - grid-gap: 20rpx;  
178 - margin-top: 50rpx;  
179 -}  
180 -  
181 -.grid-item {  
182 - background-color: #fff;  
183 - border: 0.01rpx solid #fff;  
184 - padding: 40rpx;  
185 - border-radius: 7px;  
186 - .item-center {  
187 - width: 290rpx;  
188 - height: 150rpx;  
189 - margin: -15rpx;  
190 - display: flex;  
191 - flex-direction: row;  
192 - justify-content: space-between;  
193 - align-items: center;  
194 - .center {  
195 - width: 130rpx;  
196 - height: 150rpx;  
197 - }  
198 - }  
199 -}  
200 -.basic-sty {  
201 - padding: 0 10rpx;  
202 - // margin-top: 50rpx;  
203 - .basic {  
204 - width: 750rpx;  
205 - height: 500rpx;  
206 - display: flex;  
207 - justify-content: space-between;  
208 - align-items: flex-start;  
209 - flex-direction: column;  
210 - .basic-item {  
211 - width: 700rpx;  
212 - height: 240rpx;  
213 - background-color: #fff;  
214 - display: flex;  
215 - justify-content: space-between;  
216 - align-items: flex-start;  
217 - flex-direction: column;  
218 - .item-child {  
219 - }  
220 - }  
221 - }  
222 -} 173 +@import './static/index.scss';
223 </style> 174 </style>
1 -<template>  
2 - <view>  
3 - <view class="head">  
4 - <view class="search_input">  
5 - <image src="../../static/img/search.png"></image>  
6 - <input type="text" placeholder="请输入想搜索的文章" />  
7 - </view>  
8 - </view>  
9 - <tab :lists="lists" :tab_color="tab_color" @switchover="switchover" :gauge="gauge"></tab>  
10 - <!-- 占位符 -->  
11 - <view style="width: 100%;height: 220rpx;"></view>  
12 - <view class="special">  
13 - <view class="special_list">  
14 - <view class="special_list_top">  
15 - <view class="left">  
16 - 标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题 标题标题标题  
17 - </view>  
18 - <view class="right">  
19 - <image src="../../static/img/banner.png"></image>  
20 - </view>  
21 - </view>  
22 - <view class="special_list_bottom">  
23 - <text>  
24 - 来源：法院法院法院  
25 - </text>  
26 - <text>  
27 - 2021-03-21 19:40  
28 - </text>  
29 -  
30 - </view>  
31 - </view>  
32 - </view>  
33 - </view>  
34 -</template>  
35 -  
36 -<script>  
37 - import Tab from '../../components/Tab.vue';  
38 - export default {  
39 - components:{  
40 - Tab  
41 - },  
42 - data() {  
43 - return {  
44 - //tab切换数组  
45 - lists:[  
46 - {id:1,name:'普法文章'},  
47 - {id:2,name:'测试数据1'},  
48 - {id:3,name:'测试数据测试数据'},  
49 - {id:4,name:'测试数据阿萨德'},  
50 - {id:5,name:'测试数据阿萨德'},  
51 - {id:6,name:'测试数据大声道'},  
52 - {id:7,name:'测试数据fff'},  
53 - {id:8,name:'测试数据1'},  
54 -  
55 - ],  
56 - //tab切换选中的颜色  
57 - tab_color:'#3b87f6',  
58 - // tab组件position: fixed布局距离头部的位置大小（rpx）  
59 - gauge:120  
60 - };  
61 - },  
62 - methods:{  
63 - switchover:function(id){  
64 - console.log(id)  
65 - }  
66 - }  
67 - }  
68 -</script>  
69 -  
70 -<style lang="scss">  
71 -  
72 - .head{  
73 - width: 100%;  
74 - height: 120rpx;  
75 - padding: 0rpx 30rpx;  
76 - box-sizing: border-box;  
77 - background: #3b87f6;  
78 - display: flex;  
79 - align-items: center;  
80 - position: fixed;  
81 - top: 0rpx;  
82 - z-index: 99;  
83 - .search_input {  
84 - width: 100%;  
85 - height: 60rpx;  
86 - background: #fff;  
87 - border-radius: 50rpx;  
88 - display: flex;  
89 - align-items: center;  
90 -  
91 - image {  
92 - width: 28rpx;  
93 - height: 28rpx;  
94 - margin-left: 26rpx;  
95 - }  
96 -  
97 - input {  
98 - font-size: 26rpx;  
99 - margin-left: 25rpx;  
100 - }  
101 - }  
102 - }  
103 - .special{  
104 - width: 100%;  
105 - padding: 0rpx 30rpx;  
106 - box-sizing: border-box;  
107 - .special_list{  
108 - width: 100%;  
109 - height: 270rpx;  
110 - border-bottom: 2rpx solid #e7e7e7;  
111 - padding: 40rpx 0rpx;  
112 - box-sizing: border-box;  
113 - .special_list_top{  
114 - display: flex;  
115 - justify-content: space-between;  
116 - .left{  
117 - width: 65%;  
118 - height: 140rpx;  
119 - line-height: 46rpx;  
120 - overflow : hidden;  
121 - text-overflow: ellipsis;  
122 - display: -webkit-box;  
123 - -webkit-line-clamp: 3;  
124 - -webkit-box-orient: vertical;  
125 - }  
126 - .right{  
127 - width: 30%;  
128 - height: 140rpx;  
129 - image{  
130 - width: 100%;  
131 - height: 100%;  
132 - }  
133 - }  
134 - }  
135 - .special_list_bottom{  
136 - width: 100%;  
137 - height: 100rpx;  
138 - line-height: 100rpx;  
139 - display: flex;  
140 - justify-content: space-between;  
141 - font-size: 24rpx;  
142 - color: #999999;  
143 - }  
144 - }  
145 - }  
146 -</style>  
  1 +.camera-page {
  2 + min-height: 100vh;
  3 + background-color: #f0f2f5;
  4 +}
  5 +.org-sty {
  6 + width: 750rpx;
  7 + height: 150rpx;
  8 + margin-top: 1rpx;
  9 + background-color: #fff;
  10 + display: flex;
  11 + flex-direction: row;
  12 + justify-content: space-between;
  13 + .org-item {
  14 + width: 350rpx;
  15 + height: 200rpx;
  16 + .org-contact {
  17 + flex-direction: row;
  18 + margin-top: 26rpx;
  19 + margin-left: 15rpx;
  20 + .text {
  21 + color: #333333;
  22 + font-size: 15px;
  23 + margin-left: 14rpx;
  24 + }
  25 + }
  26 + .org-device {
  27 + margin-top: 5rpx;
  28 + margin-left: 15rpx;
  29 + flex-direction: row;
  30 + .device-image {
  31 + margin-left: 14rpx;
  32 + width: 30rpx;
  33 + height: 30rpx;
  34 + }
  35 + .device-text {
  36 + margin-left: 10rpx;
  37 + color: #666666;
  38 + font-size: 12px;
  39 + }
  40 + }
  41 + .image {
  42 + width: 6px;
  43 + height: 10px;
  44 + float: right;
  45 + margin-right: 34rpx;
  46 + margin-top: 58rpx;
  47 + }
  48 + }
  49 +}
  50 +.camera-item {
  51 + height: 200rpx;
  52 + border: 0.1px solid gray;
  53 +}
  54 +.camera-container {
  55 + padding: 0 28rpx;
  56 + margin-top: -27rpx;
  57 + .container-item {
  58 + width: 717rpx;
  59 + display: flex;
  60 + justify-content: space-between;
  61 + flex-direction: row;
  62 + flex-wrap: wrap;
  63 + margin-left: -42rpx;
  64 + .item {
  65 + margin-top: 83rpx;
  66 + width: 300rpx;
  67 + height: 200rpx;
  68 + background-color: #fff;
  69 + border-radius: 20px;
  70 + margin-left: 58rpx;
  71 + .video {
  72 + border-radius: 20px;
  73 + width: 300rpx;
  74 + height: 200rpx;
  75 + }
  76 + .bottom-text {
  77 + position: relative;
  78 + top: 8rpx;
  79 + text-align: center;
  80 + .text {
  81 + color: #333333;
  82 + font-size: 13px;
  83 + }
  84 + }
  85 + }
  86 + }
  87 +}
  1 +.status-page {
  2 + padding: 15rpx 15rpx;
  3 + .search-top {
  4 + justify-content: space-between;
  5 + flex-direction: row;
  6 + .search-main {
  7 + width: 700rpx;
  8 + }
  9 + }
  10 +}
  11 +.status-container {
  12 + width: 700rpx;
  13 + height: 250rpx;
  14 + display: flex;
  15 + flex-wrap: wrap;
  16 + align-content: space-between;
  17 + justify-content: space-between;
  18 + flex-direction: row;
  19 + .status-item {
  20 + width: 300rpx;
  21 + height: 250rpx;
  22 + margin: 23rpx;
  23 + background-color: #ffffff;
  24 + border-radius: 20px;
  25 + flex-direction: column;
  26 + justify-content: space-between;
  27 + .item-image {
  28 + margin-top: 38rpx;
  29 + .image {
  30 + width: 198rpx;
  31 + height: 119rpx;
  32 + }
  33 + }
  34 + .item-text {
  35 + position: relative;
  36 + top: -25rpx;
  37 + .text {
  38 + color: #333333;
  39 + font-size: 14px;
  40 + }
  41 + }
  42 + }
  43 +}
  1 +.index-page {
  2 + padding: 27rpx 15rpx;
  3 + min-height: 100vh;
  4 + background-color: #f8f9fa;
  5 +}
  6 +.grid-container {
  7 + display: grid;
  8 + width: 750rpx;
  9 + height: 400rpx;
  10 + grid-template-columns: repeat(2, 350rpx);
  11 + grid-template-rows: repeat(2, 200rpx);
  12 + grid-gap: 20rpx;
  13 + margin-top: 50rpx;
  14 +}
  15 +
  16 +.grid-item {
  17 + background-color: #fff;
  18 + border: 0.01rpx solid #fff;
  19 + padding: 40rpx;
  20 + border-radius: 7px;
  21 + .item-center {
  22 + width: 290rpx;
  23 + height: 150rpx;
  24 + margin: -15rpx;
  25 + display: flex;
  26 + flex-direction: row;
  27 + justify-content: space-between;
  28 + align-items: center;
  29 + .center {
  30 + width: 130rpx;
  31 + height: 150rpx;
  32 + .image {
  33 + width: 100rpx;
  34 + height: 100rpx;
  35 + margin-top: 20rpx;
  36 + }
  37 + }
  38 + .center-text {
  39 + position: relative;
  40 + left: -34rpx;
  41 + text-align: left;
  42 + width: 140rpx;
  43 + font-size: 13px;
  44 + line-height: 144rpx;
  45 + .text {
  46 + font-size: 13px;
  47 + color: #333333;
  48 + }
  49 + }
  50 + }
  51 +}
  52 +.basic-sty {
  53 + padding: 0 10rpx;
  54 + .basic-text {
  55 + .text {
  56 + font-size: 15px;
  57 + color: #333333;
  58 + }
  59 + }
  60 + .basic {
  61 + width: 750rpx;
  62 + height: 500rpx;
  63 + display: flex;
  64 + justify-content: space-between;
  65 + align-items: flex-start;
  66 + flex-direction: column;
  67 + margin-top: 25rpx;
  68 + .basic-item {
  69 + width: 700rpx;
  70 + height: 240rpx;
  71 + background-color: #fff;
  72 + display: flex;
  73 + justify-content: space-between;
  74 + align-items: flex-start;
  75 + flex-direction: column;
  76 + .item-child-top {
  77 + justify-content: space-between;
  78 + padding: 30rpx;
  79 + .item-image {
  80 + width: 50rpx;
  81 + height: 50rpx;
  82 + }
  83 + .item-text {
  84 + color: #333333;
  85 + font-size: 14px;
  86 + margin-left: 10rpx;
  87 + }
  88 + }
  89 + .item-child-bottom {
  90 + justify-content: space-between;
  91 + align-items: center;
  92 + .sigle-child {
  93 + width: 223rpx;
  94 + height: 150rpx;
  95 + justify-content: space-between;
  96 + flex-direction: column;
  97 + .sigle-text {
  98 + height: 70rpx;
  99 + font-size: 14px;
  100 + color: #333333;
  101 + font-weight: 500;
  102 + }
  103 + .sigle-value {
  104 + position: relative;
  105 + top: -40rpx;
  106 + height: 60rpx;
  107 + font-size: 12px;
  108 + color: #999999;
  109 + }
  110 + }
  111 + }
  112 + }
  113 + }
  114 +}
@@ -4,8 +4,8 @@ @@ -4,8 +4,8 @@
4 <public-module></public-module> 4 <public-module></public-module>
5 <view class="f__login"> 5 <view class="f__login">
6 <view class="loginPhone"> 6 <view class="loginPhone">
7 - <view style="margin-top: 173rpx;">  
8 - <text style="font-size: 22px;color: #3A4759 ;position: relative;">手机验证码登录</text> 7 + <view class="phone-main" style="margin-top: 173rpx;">
  8 + <text class="text" style="">手机验证码登录</text>
9 <view class="circleStyle"></view> 9 <view class="circleStyle"></view>
10 </view> 10 </view>
11 <view class="form-row"> 11 <view class="form-row">
@@ -15,13 +15,13 @@ @@ -15,13 +15,13 @@
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 style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 + <view 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 class="text">登录</text>
22 </button> 22 </button>
23 - <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">  
24 - <view style="color: #999999;font-size: 13px;" @click="openAccountFunc">账号密码登录</view> 23 + <view class="u-flex account-style">
  24 + <view class="content" @click="openAccountFunc">账号密码登录</view>
25 </view> 25 </view>
26 <view class="circleStyleBottom"></view> 26 <view class="circleStyleBottom"></view>
27 </view> 27 </view>
@@ -139,85 +139,5 @@ @@ -139,85 +139,5 @@
139 </script> 139 </script>
140 140
141 <style lang="scss" scoped> 141 <style lang="scss" scoped>
142 - .code-page{  
143 - min-height: 100vh;  
144 - background-color: #fff;  
145 - }  
146 - .f__login {  
147 - padding: 48rpx 32rpx;  
148 - border-radius: 18rpx 18rpx 0 0;  
149 - z-index: 99;  
150 - position: relative;  
151 - }  
152 -  
153 - .loginPhone {  
154 - .circleStyle {  
155 - position: absolute;  
156 - width: 145rpx;  
157 - height: 300rpx;  
158 - left: -31rpx;  
159 - top: 10rpx;  
160 - border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;  
161 - background-color: #f0f2f5;  
162 - opacity: 0.5;  
163 - }  
164 - .form-row {  
165 - position: relative;  
166 - border-bottom: 1rpx solid #e8e8e8;  
167 - .input {  
168 - font-size: 34rpx;  
169 - line-height: 102rpx;  
170 - height: 94rpx;  
171 - width: 100%;  
172 - box-sizing: border-box;  
173 - font-size: 30rpx;  
174 - padding: 0;  
175 - font-weight: bold;  
176 - }  
177 -  
178 - .getvcode {  
179 - font-size: 26rpx;  
180 - height: 80rpx;  
181 - color: #333;  
182 - line-height: 80rpx;  
183 - // background: #eee;  
184 - min-width: 188rpx;  
185 - text-align: center;  
186 - border-radius: 8rpx;  
187 - position: absolute;  
188 - top: 50%;  
189 - transform: translateY(-50%);  
190 - right: 0;  
191 - z-index: 11;  
192 -  
193 - &.forhidden {  
194 - // background: #eee;  
195 - // color: #cccccc;  
196 - }  
197 - }  
198 - }  
199 -  
200 -  
201 - .submit {  
202 - margin-top: 60rpx;  
203 - width: 100%;  
204 - position: relative;  
205 - background: linear-gradient(90deg, #5DC2FC 0%, #377DFF 100%);  
206 - border-radius: 46px;  
207 - }  
208 - .circleStyleBottom {  
209 - position: absolute;  
210 - width: 145rpx;  
211 - height: 300rpx;  
212 - right: -31rpx;  
213 - top: 804rpx;  
214 - //#ifndef MP  
215 - top: 804rpx;  
216 - //#endif  
217 - border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;  
218 - background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);  
219 - opacity: 0.1;  
220 - transform: rotate(180deg);  
221 - }  
222 - } 142 + @import './static/code.scss';
223 </style> 143 </style>
1 <template> 1 <template>
2 <view class="find-password-page"> 2 <view class="find-password-page">
3 <public-module></public-module> 3 <public-module></public-module>
4 - <view class="top u-flex" style="justify-content: space-between;flex-direction: row;align-items: center;"> 4 + <view class="top u-flex" >
5 <view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view> 5 <view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
6 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view> 6 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
7 </view> 7 </view>
@@ -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 style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view> 18 + <view 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>
@@ -132,66 +132,5 @@ @@ -132,66 +132,5 @@
132 </script> 132 </script>
133 133
134 <style lang="scss" scoped> 134 <style lang="scss" scoped>
135 - .find-password-page{  
136 - min-height: 100vh;  
137 - background-color: #fff;  
138 - }  
139 - .top {  
140 - width: 750rpx;  
141 - height: 100rpx;  
142 - border: 0.1px solid #f7f9ff;  
143 -  
144 - .item {  
145 - width: 375rpx;  
146 - height: 100rpx;  
147 - border: 0.1px solid #f7f9ff;  
148 - text-align: center;  
149 - line-height: 90rpx;  
150 - }  
151 - }  
152 -  
153 - .f__login {  
154 - padding: 0 30rpx;  
155 -  
156 - .loginPhone {  
157 - .form-row {  
158 - position: relative;  
159 - border-bottom: 1px solid #e5e5e5;  
160 - .input {  
161 - font-size: 34rpx;  
162 - line-height: 102rpx;  
163 - height: 94rpx;  
164 - width: 100%;  
165 - box-sizing: border-box;  
166 - font-size: 30rpx;  
167 - font-weight: bold;  
168 - }  
169 -  
170 - .getvcode {  
171 - font-size: 26rpx;  
172 - height: 80rpx;  
173 - color: #333;  
174 - line-height: 80rpx;  
175 - min-width: 188rpx;  
176 - text-align: center;  
177 - border-radius: 8rpx;  
178 - position: absolute;  
179 - top: 50%;  
180 - transform: translateY(-50%);  
181 - right: 0;  
182 - z-index: 11;  
183 - &.forhidden {  
184 - }  
185 - }  
186 - }  
187 -  
188 -  
189 - .submit {  
190 - margin-top: 60rpx;  
191 - width: 100%;  
192 - background: #377DFF;  
193 - border-radius: 48px;  
194 - }  
195 - }  
196 - } 135 + @import './static/findPassword.scss';
197 </style> 136 </style>
@@ -2,10 +2,10 @@ @@ -2,10 +2,10 @@
2 <view class="login-page"> 2 <view class="login-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view class="u-flex" style="flex-direction: column;">  
6 - <view style="height: 250rpx;margin-top: 90rpx;margin-left: -107rpx;">  
7 - <view style="font-size: 30px;color:#3A4759">您好,</view>  
8 - <view style="position: relative;font-size: 30px;color:#3A4759" class="">欢迎来到ThingsKit!</view> 5 + <view class="u-flex login-main">
  6 + <view class="content">
  7 + <view class="hello">您好,</view>
  8 + <view class="hello-welcome">欢迎来到ThingsKit!</view>
9 <view class="circleStyle"></view> 9 <view class="circleStyle"></view>
10 </view> 10 </view>
11 </view> 11 </view>
@@ -29,16 +29,15 @@ @@ -29,16 +29,15 @@
29 </template> 29 </template>
30 </u-input> 30 </u-input>
31 </view> 31 </view>
32 - <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>  
33 - <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">  
34 - <view style="color: #999999;font-size: 13px;" @click="openCodeFunc">手机验证码登录</view>  
35 - <view style="color: #999999;font-size: 13px;position: relative;" @click="findPassrordFunc">忘记密码</view> 32 + <button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>
  33 + <view class="u-flex row-item">
  34 + <view class="row-phone" @click="openCodeFunc">手机验证码登录</view>
  35 + <view class="row-reset" @click="findPassrordFunc">忘记密码</view>
36 </view> 36 </view>
37 - <!-- <button class="button marginT" @click="onAuthorization" :style="{background:PrimaryColor}">微信授权登录</button> -->  
38 - <view @click="onAuthorization" class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;">  
39 - <view style="color:#999999;font-size: 13px;">第三方账号登录</view> 37 + <view @click="onAuthorization" class="u-flex link-login">
  38 + <view class="link-text">第三方账号登录</view>
40 <view style="height:20rpx"></view> 39 <view style="height:20rpx"></view>
41 - <view><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view> 40 + <view class="link-image"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></view>
42 <view class="circleStyleBottom"></view> 41 <view class="circleStyleBottom"></view>
43 </view> 42 </view>
44 </view> 43 </view>
@@ -169,63 +168,5 @@ export default { @@ -169,63 +168,5 @@ export default {
169 </script> 168 </script>
170 169
171 <style lang="scss" scoped> 170 <style lang="scss" scoped>
172 -.login-page {  
173 - min-height: 100vh;  
174 - background-color: #fff;  
175 - .circleStyle {  
176 - position: absolute;  
177 - width: 145rpx;  
178 - height: 300rpx;  
179 - left: -31rpx;  
180 - top: 10rpx;  
181 - border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;  
182 - background-color: #f0f2f5;  
183 - opacity: 0.5;  
184 - }  
185 -}  
186 -  
187 -.f__login {  
188 - padding: 8rpx 32rpx;  
189 - border-radius: 18rpx 18rpx 0 0;  
190 - z-index: 99;  
191 - position: relative;  
192 -}  
193 -  
194 -.loginPhone {  
195 - .form-row {  
196 - position: relative;  
197 -  
198 - .input {  
199 - font-size: 34rpx;  
200 - line-height: 102rpx;  
201 - height: 114rpx;  
202 - width: 100%;  
203 - box-sizing: border-box;  
204 - font-size: 30rpx;  
205 - padding: 0;  
206 - font-weight: bold;  
207 - }  
208 - }  
209 -  
210 - .submit {  
211 - margin-top: 60rpx;  
212 - background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);  
213 - width: 100%;  
214 - border-radius: 46px;  
215 - }  
216 - .circleStyleBottom {  
217 - position: absolute;  
218 - width: 145rpx;  
219 - height: 300rpx;  
220 - right: -31rpx;  
221 - top: 404rpx;  
222 - //#ifndef MP  
223 - top: 504rpx;  
224 - //#endif  
225 - border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;  
226 - background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);  
227 - opacity: 0.1;  
228 - transform: rotate(180deg);  
229 - }  
230 -} 171 +@import './static/login.scss';
231 </style> 172 </style>
@@ -10,25 +10,21 @@ @@ -10,25 +10,21 @@
10 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar || '/static/logo.png'"></image></view> 10 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar || '/static/logo.png'"></image></view>
11 <view @click="openPersonalInfo" class="u-flex-1"> 11 <view @click="openPersonalInfo" class="u-flex-1">
12 <view class="nickName u-flex"> 12 <view class="nickName u-flex">
13 - <view class="name u-m-r-10" v-if="userInfo.realName">{{ userInfo.realName }}</view> 13 + <view class="name u-m-r-10" v-if="userInfo.realName">
  14 + <text style="#FFFFFF;font-size: 18px;">{{ userInfo.realName }}</text>
  15 + </view>
14 </view> 16 </view>
15 - <view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>  
16 - <view class="detail" v-else>手机号:未绑定</view> 17 + <view style="#FFFFFF;font-size: 14px;" v-if="userInfo.phoneNumber">手机号：{{ userInfo.phoneNumber | phone }}</view>
  18 + <view v-else><text style="#FFFFFF;font-size: 14px;">手机号:未绑定</text></view>
17 </view> 19 </view>
18 </block> 20 </block>
19 <block v-else> 21 <block v-else>
20 <view class="u-m-r-20"> 22 <view class="u-m-r-20">
21 - <view class="avatar u-flex" style="justify-content: center;"><u-icon name="account-fill" color="black" size="30"></u-icon></view> 23 + <view class="avatar u-flex"><u-icon name="account-fill" color="black" size="30"></u-icon></view>
22 </view> 24 </view>
23 <view class="u-flex-1"> 25 <view class="u-flex-1">
24 - <view @click="openLoginFunc" class="u-font-lg" style="color:black;font-weight: bold;">请点击登录</view>  
25 - <view  
26 - @click="clickAccountFunc"  
27 - style="margin-top: 15rpx;text-align: center;border-radius: 22px;;background-color: #FFFFFF;width: 150rpx;height: 50rpx;"  
28 - class="detail"  
29 - >  
30 - <text style="color:#3388FF;font-size: 12px;">绑定账号</text>  
31 - </view> 26 + <view @click="openLoginFunc" class="u-font-lg click-login">请点击登录</view>
  27 + <view @click="clickAccountFunc" class="detail"><text class="text">绑定账号</text></view>
32 </view> 28 </view>
33 </block> 29 </block>
34 <view><u-icon name="arrow-right" color="black" size="13"></u-icon></view> 30 <view><u-icon name="arrow-right" color="black" size="13"></u-icon></view>
@@ -40,9 +36,13 @@ @@ -40,9 +36,13 @@
40 <block v-if="userInfo.isToken"> 36 <block v-if="userInfo.isToken">
41 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar"></image></view> 37 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar"></image></view>
42 <view @click="openPersonalInfo" class="u-flex-1"> 38 <view @click="openPersonalInfo" class="u-flex-1">
43 - <view class="nickName">{{ userInfo.realName }}</view>  
44 - <view class="detail" v-if="userInfo.phoneNum">手机号：{{ userInfo.phoneNum | phone }}</view>  
45 - <view class="detail" v-else>手机号:未绑定</view> 39 + <view class="nickName u-flex">
  40 + <view class="name u-m-r-10" v-if="userInfo.realName">
  41 + <text style="#FFFFFF;font-size: 18px;">{{ userInfo.realName }}</text>
  42 + </view>
  43 + </view>
  44 + <view style="#FFFFFF;font-size: 14px;" v-if="userInfo.phoneNumber">手机号：{{ userInfo.phoneNumber | phone }}</view>
  45 + <view v-else><text style="#FFFFFF;font-size: 14px;">手机号:未绑定</text></view>
46 </view> 46 </view>
47 </block> 47 </block>
48 <block v-else> 48 <block v-else>
@@ -58,41 +58,30 @@ @@ -58,41 +58,30 @@
58 </view> 58 </view>
59 <!-- #endif --> 59 <!-- #endif -->
60 </view> 60 </view>
61 - <view  
62 - class="u-flex"  
63 - style="overflow-x: hidden;position: relative;top:-25rpx;z-index:54;background: #FFFFFF;;border-radius: 17px 17px 0px 0px;;height: 835rpx;width: 750rpx;flex-direction: column;justify-content: space-between;"  
64 - >  
65 - <view style="margin-top: 100rpx;">  
66 - <view @click="onTokenJump('../systemNotify/systemNotify')" class="u-flex" style="flex-direction: row;justify-content: space-between;align-content: space-between;">  
67 - <view style="width: 125rpx;"><image style="width:35rpx;height: 35rpx;" src="../../static/sys-not.png" mode=""></image></view>  
68 - <view style="position: relative;left: -58rpx;width: 420rpx;"><text style="color: #333333;font-size: 15px;">系统通知</text></view>  
69 - <view style="position: relative;right: -112rpx;width: 100rpx;">  
70 - <image style="width: 13rpx;height: 17rpx;" src="../../static/arrow-right.png" mode=""></image>  
71 - </view> 61 + <view class="u-flex my-nav">
  62 + <view class="nav-main">
  63 + <view @click="onTokenJump('../systemNotify/systemNotify')" class="u-flex nav-link">
  64 + <view class="nav-image"><image class="image" src="../../static/sys-not.png"></image></view>
  65 + <view class="nav-center"><text class="text">系统通知</text></view>
  66 + <view class="nav-right"><image class="image" src="../../static/arrow-right.png"></image></view>
72 </view> 67 </view>
73 - <view  
74 - @click="onTokenJump('../feedback/feedback')"  
75 - class="u-flex"  
76 - style="margin-top: 60rpx;flex-direction: row;justify-content: space-between;align-content: space-between;"  
77 - >  
78 - <view style="width: 125rpx;"><image style="width:35rpx;height: 35rpx;" src="../../static/find-sugg.png" mode=""></image></view>  
79 - <view style="position: relative;left: -58rpx;width: 420rpx;"><text style="color: #333333;font-size: 15px;">意见反馈</text></view>  
80 - <view style="position: relative;right: -112rpx;width: 100rpx;">  
81 - <image style="width: 13rpx;height: 17rpx;" src="../../static/arrow-right.png" mode=""></image>  
82 - </view> 68 + <view @click="onTokenJump('../feedback/feedback')" class="u-flex nav-link">
  69 + <view class="nav-image"><image class="image" src="../../static/find-sugg.png"></image></view>
  70 + <view class="nav-center"><text class="text">意见反馈</text></view>
  71 + <view class="nav-right"><image class="image" src="../../static/arrow-right.png"></image></view>
83 </view> 72 </view>
84 </view> 73 </view>
85 - <view class="u-flex" style="justify-content: center;width: 600rpx;"><u-button @click="onLoginoutFunc" type="primary" shape="circle" text="退出账号"></u-button></view> 74 + <view v-if="userInfo.isToken" class="u-flex" style="justify-content: center;width: 600rpx;">
  75 + <u-button @click="onLoginoutFunc" type="primary" shape="circle" text="退出账号"></u-button>
  76 + </view>
86 </view> 77 </view>
87 <f-tabbar></f-tabbar> 78 <f-tabbar></f-tabbar>
88 <!-- 绑定账号 --> 79 <!-- 绑定账号 -->
89 <view> 80 <view>
90 <u-modal :showConfirmButton="false" :show="show" :title="title"> 81 <u-modal :showConfirmButton="false" :show="show" :title="title">
91 <view v-if="!bindPhone" class="loginPhone"> 82 <view v-if="!bindPhone" class="loginPhone">
92 - <view class="form-row" style="background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;">  
93 - <u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input>  
94 - </view>  
95 - <view class="form-row" style="margin-top: 20rpx;background: #F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;"> 83 + <view class="form-row"><u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input></view>
  84 + <view class="form-row item-bind">
96 <u--input 85 <u--input
97 class="input" 86 class="input"
98 shape="circle" 87 shape="circle"
@@ -105,13 +94,13 @@ @@ -105,13 +94,13 @@
105 @change="passwordChange" 94 @change="passwordChange"
106 ></u--input> 95 ></u--input>
107 </view> 96 </view>
108 - <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;">  
109 - <view style="visibility: hidden;">手机验证码登录</view>  
110 - <view style="color: #0079fe;font-size: 14px;" @click="bindPhoneFunc">手机绑定</view> 97 + <view class="u-flex item-phone">
  98 + <view class="phone-hide">手机验证码登录</view>
  99 + <view class="bind-phone-text" @click="bindPhoneFunc">手机绑定</view>
111 </view> 100 </view>
112 </view> 101 </view>
113 <view v-else class="loginPhone"> 102 <view v-else class="loginPhone">
114 - <view class="form-row" style="background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;"> 103 + <view class="form-row">
115 <u--input 104 <u--input
116 shape="circle" 105 shape="circle"
117 class="input" 106 class="input"
@@ -121,7 +110,7 @@ @@ -121,7 +110,7 @@
121 placeholder-style="font-weight:normal;color:#bbbbbb;" 110 placeholder-style="font-weight:normal;color:#bbbbbb;"
122 ></u--input> 111 ></u--input>
123 </view> 112 </view>
124 - <view class="form-row" style="margin-top: 20rpx;background:#F7F9FF;border-radius: 48px;width: 532rpx;height: 80rpx;"> 113 + <view class="form-row row-top">
125 <u--input 114 <u--input
126 shape="circle" 115 shape="circle"
127 class="input" 116 class="input"
@@ -132,15 +121,15 @@ @@ -132,15 +121,15 @@
132 ></u--input> 121 ></u--input>
133 <view style="color:#377DFF" class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view> 122 <view style="color:#377DFF" class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view>
134 </view> 123 </view>
135 - <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;">  
136 - <view style="visibility: hidden;">手机验证码登录</view>  
137 - <view style="color: #0079fe;font-size: 14px;" @click="bindAccountFunc">账号绑定</view> 124 + <view class="u-flex item-phone">
  125 + <view class="phone-hide">手机验证码登录</view>
  126 + <view class="bind-phone-text" @click="bindAccountFunc">账号绑定</view>
138 </view> 127 </view>
139 </view> 128 </view>
140 - <view class="">  
141 - <view class="u-flex" style="flex-direction: row;margin-top: 288rpx;margin-left: -538rpx;">  
142 - <view style="width: 230rpx"><u-button @click="show = false" type="info" shape="circle" text="取消"></u-button></view>  
143 - <view style="width: 230rpx;margin-left: 65rpx;"><u-button @click="bindConfirm" type="primary" shape="circle" text="确认"></u-button></view> 129 + <view class="bottom-content">
  130 + <view class="u-flex content">
  131 + <view class="cancel"><u-button @click="show = false" type="info" shape="circle" text="取消"></u-button></view>
  132 + <view class="confrim"><u-button @click="bindConfirm" type="primary" shape="circle" text="确认"></u-button></view>
144 </view> 133 </view>
145 </view> 134 </view>
146 </u-modal> 135 </u-modal>
@@ -148,17 +137,14 @@ @@ -148,17 +137,14 @@
148 <!-- 退出登录 --> 137 <!-- 退出登录 -->
149 <view> 138 <view>
150 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom"> 139 <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
151 - <view class="u-flex" style="flex-direction: column;height: 300rpx;margin: 30rpx 40rpx;background:#f5f5f5;border-radius: 20rpx;">  
152 - <view style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">  
153 - <text style="color:#999999">确定要退出当前账号？</text>  
154 - </view>  
155 - <view @click="logoutBtn" style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">  
156 - <text style="color:#f95e5a">退出登录</text>  
157 - </view>  
158 - <view style="width:669rpx;height: 100rpx;text-align: center;line-height: 86rpx;"><text @click="closeLogout" style="color:#3478f7">取消</text></view> 140 + <view class="u-flex logout-main">
  141 + <view class="main"><text style="color:#999999">确定要退出当前账号？</text></view>
  142 + <view @click="logoutBtn" class="main"><text style="color:#f95e5a">退出登录</text></view>
  143 + <view class="main"><text @click="closeLogout" style="color:#3478f7">取消</text></view>
159 </view> 144 </view>
160 </u-popup> 145 </u-popup>
161 </view> 146 </view>
  147 + <!-- 退出登录 -->
162 </view> 148 </view>
163 </template> 149 </template>
164 150
@@ -334,134 +320,5 @@ export default { @@ -334,134 +320,5 @@ export default {
334 </script> 320 </script>
335 321
336 <style lang="scss" scoped> 322 <style lang="scss" scoped>
337 -.personal {  
338 - background-color: #ffffff;  
339 -}  
340 -.headBox {  
341 - background: linear-gradient(90deg, #8c9ef2 0%, #5f6ee6 100%);  
342 - border-top: 0.01px solid #f5f5f5;  
343 - height: 250rpx;  
344 -  
345 - .avatar {  
346 - width: 50px;  
347 - height: 50px;  
348 - border-radius: 25px;  
349 - background-color: #ccc;  
350 - }  
351 -  
352 - .nickName {  
353 - .btn {  
354 - font-size: 22rpx;  
355 - font-weight: normal;  
356 - color: #666;  
357 - background: #fff;  
358 - border-radius: 5rpx;  
359 - height: 45rpx;  
360 - line-height: 45rpx;  
361 - padding: 0 10rpx;  
362 - position: relative;  
363 -  
364 - .itemButton {  
365 - border-radius: 0;  
366 - text-align: left;  
367 - opacity: 0;  
368 - width: 100%;  
369 - height: 100%;  
370 - position: absolute;  
371 - left: 0;  
372 - top: 0;  
373 - }  
374 - }  
375 -  
376 - .name {  
377 - color: #fff;  
378 - font-weight: bold;  
379 - font-size: 32rpx;  
380 - }  
381 -  
382 - .placardVip {  
383 - background: #2a2e44;  
384 - color: #f4d6a1;  
385 - font-size: 22rpx;  
386 - padding: 4rpx 10rpx;  
387 - text-align: center;  
388 - border-radius: 4rpx;  
389 - }  
390 - }  
391 -  
392 - .detail {  
393 - color: #fff;  
394 - font-size: 24rpx;  
395 - padding-top: 6rpx;  
396 - }  
397 -}  
398 -  
399 -.cell-group {  
400 - .cell-item {  
401 - border-bottom: 2rpx solid #eee;  
402 - background-color: #fff;  
403 - border-radius: 30rpx;  
404 - padding: 20rpx 24rpx;  
405 -  
406 - .title {  
407 - color: #333;  
408 - font-size: 28rpx;  
409 - padding: 0 10rpx;  
410 - font-weight: bold;  
411 - margin: 0;  
412 - }  
413 -  
414 - .more {  
415 - font-size: 24rpx;  
416 - color: #999;  
417 - }  
418 - }  
419 -}  
420 -  
421 -.submit {  
422 - margin-top: 160rpx;  
423 - color: #fff;  
424 - width: 650rpx;  
425 - border: none;  
426 -}  
427 -  
428 -.loginPhone {  
429 - // width: 750rpx;  
430 - // padding: 0rpx 10rpx;  
431 -  
432 - .form-row {  
433 - position: relative;  
434 -  
435 - .input {  
436 - font-size: 34rpx;  
437 - line-height: 102rpx;  
438 - height: 94rpx;  
439 - box-sizing: border-box;  
440 - font-size: 30rpx;  
441 - padding: 0;  
442 - font-weight: bold;  
443 - }  
444 -  
445 - .getvcode {  
446 - font-size: 26rpx;  
447 - height: 50rpx;  
448 - color: #333;  
449 - line-height: 52rpx;  
450 - // background: #eee;  
451 - min-width: 188rpx;  
452 - text-align: center;  
453 - border-radius: 8rpx;  
454 - position: absolute;  
455 - top: 50%;  
456 - transform: translateY(-50%);  
457 - right: 17rpx;  
458 - z-index: 11;  
459 -  
460 - &.forhidden {  
461 - // background: #eee;  
462 - // color: #cccccc;  
463 - }  
464 - }  
465 - }  
466 -} 323 +@import './static/personal.scss';
467 </style> 324 </style>
@@ -2,15 +2,12 @@ @@ -2,15 +2,12 @@
2 <view class="set-page"> 2 <view class="set-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view  
6 - class="u-flex"  
7 - style="border-radius: 20px;margin-top: 37rpx;padding-left: 15rpx;;justify-content: space-between;width: 690rpx;height: 200rpx;background-color: #FFFFFF;"  
8 - >  
9 - <view style=""><image style="border-radius: 50px;width: 130rpx;height: 130rpx;" :src="avatar" mode=""></image></view>  
10 - <view style="margin-right: 40rpx;"><image style="width: 13rpx;height: 17rpx;" src="../../static/arrow-right.png" mode=""></image></view> 5 + <view class="u-flex set-main">
  6 + <view class="main-image"><image class="image" :src="avatar"></image></view>
  7 + <view class="main-right-image"><image class="image" src="../../static/arrow-right.png"></image></view>
11 </view> 8 </view>
12 - <view class="u-m-t-20"><text style="color:#8f9ca2;font-size: 14px;">基本资料</text></view>  
13 - <view style="background-color: #FFFFFF;border-radius: 20px;margin-top: 20rpx;padding-left: 15rpx;"> 9 + <view class="u-m-t-20 basic-text"><text class="text">基本资料</text></view>
  10 + <view class="basic-main">
14 <u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef"> 11 <u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef">
15 <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.realName" borderBottom ref="item1"> 12 <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.realName" borderBottom ref="item1">
16 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.realName" border="none"></u--input> 13 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.realName" border="none"></u--input>
@@ -49,7 +46,7 @@ @@ -49,7 +46,7 @@
49 </u-form-item> 46 </u-form-item>
50 </u--form> 47 </u--form>
51 </view> 48 </view>
52 - <view style="width: 500rpx;margin-left: 86rpx;"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view> 49 + <view class="basic-bottom"><button class="submit" size="default" @click="onSubmitFunc" :style="{ background: PrimaryColor }">确认</button></view>
53 <!-- #ifdef MP --> 50 <!-- #ifdef MP -->
54 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view> 51 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
55 <!-- #endif --> 52 <!-- #endif -->
@@ -207,15 +204,5 @@ export default { @@ -207,15 +204,5 @@ export default {
207 </script> 204 </script>
208 205
209 <style lang="scss" scoped> 206 <style lang="scss" scoped>
210 -.set-page {  
211 - padding: 0rpx 30rpx;  
212 -  
213 - .submit {  
214 - margin-top: 60rpx;  
215 - color: #fff;  
216 - width: 100%;  
217 - border: none;  
218 - border-radius: 40rpx;  
219 - }  
220 -} 207 +@import './static/set.scss';
221 </style> 208 </style>
  1 +.code-page {
  2 + min-height: 100vh;
  3 + background-color: #fff;
  4 +}
  5 +.f__login {
  6 + padding: 48rpx 32rpx;
  7 + border-radius: 18rpx 18rpx 0 0;
  8 + z-index: 99;
  9 + position: relative;
  10 +}
  11 +
  12 +.loginPhone {
  13 + .phone-main {
  14 + .text {
  15 + font-size: 22px;
  16 + color: #3a4759;
  17 + position: relative;
  18 + }
  19 + .circleStyle {
  20 + position: absolute;
  21 + width: 145rpx;
  22 + height: 300rpx;
  23 + left: -31rpx;
  24 + top: 10rpx;
  25 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  26 + background-color: #f0f2f5;
  27 + opacity: 0.5;
  28 + }
  29 + }
  30 +
  31 + .form-row {
  32 + position: relative;
  33 + border-bottom: 1rpx solid #e8e8e8;
  34 + .input {
  35 + font-size: 34rpx;
  36 + line-height: 102rpx;
  37 + height: 94rpx;
  38 + width: 100%;
  39 + box-sizing: border-box;
  40 + font-size: 30rpx;
  41 + padding: 0;
  42 + font-weight: bold;
  43 + }
  44 +
  45 + .getvcode {
  46 + font-size: 26rpx;
  47 + height: 80rpx;
  48 + color: #6299ff;
  49 + line-height: 80rpx;
  50 + // background: #eee;
  51 + min-width: 188rpx;
  52 + text-align: center;
  53 + border-radius: 8rpx;
  54 + position: absolute;
  55 + top: 50%;
  56 + transform: translateY(-50%);
  57 + right: 0;
  58 + z-index: 11;
  59 +
  60 + &.forhidden {
  61 + // background: #eee;
  62 + // color: #cccccc;
  63 + }
  64 + }
  65 + }
  66 +
  67 + .submit {
  68 + margin-top: 60rpx;
  69 + width: 100%;
  70 + position: relative;
  71 + background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
  72 + border-radius: 46px;
  73 + .text {
  74 + color: #ffffff;
  75 + }
  76 + }
  77 + .circleStyleBottom {
  78 + position: absolute;
  79 + width: 145rpx;
  80 + height: 300rpx;
  81 + right: -31rpx;
  82 + top: 804rpx;
  83 + //#ifndef MP
  84 + top: 804rpx;
  85 + //#endif
  86 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  87 + background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);
  88 + opacity: 0.1;
  89 + transform: rotate(180deg);
  90 + }
  91 + .account-style {
  92 + flex-direction: row;
  93 + margin-top: 20rpx;
  94 + justify-content: space-between;
  95 + .content {
  96 + color: #999999;
  97 + font-size: 13px;
  98 + }
  99 + }
  100 +}
  1 +.find-password-page {
  2 + min-height: 100vh;
  3 + background-color: #fff;
  4 +}
  5 +.top {
  6 + width: 750rpx;
  7 + height: 100rpx;
  8 + border: 0.1px solid #f7f9ff;
  9 + justify-content: space-between;
  10 + flex-direction: row;
  11 + align-items: center;
  12 +
  13 + .item {
  14 + width: 375rpx;
  15 + height: 100rpx;
  16 + border: 0.1px solid #f7f9ff;
  17 + text-align: center;
  18 + line-height: 90rpx;
  19 + }
  20 +}
  21 +
  22 +.f__login {
  23 + padding: 0 30rpx;
  24 +
  25 + .loginPhone {
  26 + .form-row {
  27 + position: relative;
  28 + border-bottom: 1px solid #e5e5e5;
  29 + .input {
  30 + font-size: 34rpx;
  31 + line-height: 102rpx;
  32 + height: 94rpx;
  33 + width: 100%;
  34 + box-sizing: border-box;
  35 + font-size: 30rpx;
  36 + font-weight: bold;
  37 + }
  38 +
  39 + .getvcode {
  40 + font-size: 26rpx;
  41 + height: 80rpx;
  42 + color: #6299ff;
  43 + line-height: 80rpx;
  44 + min-width: 188rpx;
  45 + text-align: center;
  46 + border-radius: 8rpx;
  47 + position: absolute;
  48 + top: 50%;
  49 + transform: translateY(-50%);
  50 + right: 0;
  51 + z-index: 11;
  52 + &.forhidden {
  53 + }
  54 + }
  55 + }
  56 +
  57 + .submit {
  58 + margin-top: 60rpx;
  59 + width: 100%;
  60 + background: #377dff;
  61 + border-radius: 48px;
  62 + }
  63 + }
  64 +}
  1 +.login-page {
  2 + min-height: 100vh;
  3 + background-color: #fff;
  4 + .login-main {
  5 + flex-direction: column;
  6 + .content {
  7 + height: 250rpx;
  8 + margin-top: 90rpx;
  9 + margin-left: -107rpx;
  10 + .hello {
  11 + font-size: 30px;
  12 + color: #3a4759;
  13 + }
  14 + .hello-welcome {
  15 + position: relative;
  16 + font-size: 30px;
  17 + color: #3a4759;
  18 + }
  19 + }
  20 + }
  21 + .circleStyle {
  22 + position: absolute;
  23 + width: 145rpx;
  24 + height: 300rpx;
  25 + left: -31rpx;
  26 + top: 10rpx;
  27 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  28 + background-color: #f0f2f5;
  29 + opacity: 0.5;
  30 + }
  31 +}
  32 +
  33 +.f__login {
  34 + padding: 8rpx 32rpx;
  35 + border-radius: 18rpx 18rpx 0 0;
  36 + z-index: 99;
  37 + position: relative;
  38 +}
  39 +
  40 +.loginPhone {
  41 + .form-row {
  42 + position: relative;
  43 +
  44 + .input {
  45 + font-size: 34rpx;
  46 + line-height: 102rpx;
  47 + height: 114rpx;
  48 + width: 100%;
  49 + box-sizing: border-box;
  50 + font-size: 30rpx;
  51 + padding: 0;
  52 + font-weight: bold;
  53 + }
  54 + }
  55 +
  56 + .submit {
  57 + margin-top: 60rpx;
  58 + background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
  59 + width: 100%;
  60 + border-radius: 46px;
  61 + .text {
  62 + color: #ffffff;
  63 + }
  64 + }
  65 + .row-item {
  66 + flex-direction: row;
  67 + margin-top: 20rpx;
  68 + justify-content: space-between;
  69 + .row-phone {
  70 + color: #999999;
  71 + font-size: 13px;
  72 + }
  73 + .row-reset {
  74 + color: #999999;
  75 + font-size: 13px;
  76 + position: relative;
  77 + }
  78 + }
  79 + .link-login {
  80 + justify-content: center;
  81 + flex-direction: column;
  82 + margin-top: 220rpx;
  83 + .link-text {
  84 + color: #999999;
  85 + font-size: 13px;
  86 + }
  87 + .link-image {
  88 + .image {
  89 + width: 75rpx;
  90 + height: 75rpx;
  91 + }
  92 + }
  93 + }
  94 + .circleStyleBottom {
  95 + position: absolute;
  96 + width: 145rpx;
  97 + height: 300rpx;
  98 + right: -31rpx;
  99 + top: 404rpx;
  100 + //#ifndef MP
  101 + top: 504rpx;
  102 + //#endif
  103 + border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
  104 + background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);
  105 + opacity: 0.1;
  106 + transform: rotate(180deg);
  107 + }
  108 +}
  1 +.personal {
  2 + background-color: #ffffff;
  3 +}
  4 +.headBox {
  5 + background: linear-gradient(90deg, #8c9ef2 0%, #5f6ee6 100%);
  6 + border-top: 0.01px solid #f5f5f5;
  7 + height: 250rpx;
  8 +
  9 + .avatar {
  10 + width: 50px;
  11 + height: 50px;
  12 + border-radius: 25px;
  13 + background-color: #ccc;
  14 + justify-content: center;
  15 + }
  16 + .click-login {
  17 + color: black;
  18 + font-weight: bold;
  19 + }
  20 +
  21 + .nickName {
  22 + .btn {
  23 + font-size: 22rpx;
  24 + font-weight: normal;
  25 + color: #666;
  26 + background: #fff;
  27 + border-radius: 5rpx;
  28 + height: 45rpx;
  29 + line-height: 45rpx;
  30 + padding: 0 10rpx;
  31 + position: relative;
  32 +
  33 + .itemButton {
  34 + border-radius: 0;
  35 + text-align: left;
  36 + opacity: 0;
  37 + width: 100%;
  38 + height: 100%;
  39 + position: absolute;
  40 + left: 0;
  41 + top: 0;
  42 + }
  43 + }
  44 +
  45 + .name {
  46 + color: #fff;
  47 + font-weight: bold;
  48 + font-size: 32rpx;
  49 + }
  50 +
  51 + .placardVip {
  52 + background: #2a2e44;
  53 + color: #f4d6a1;
  54 + font-size: 22rpx;
  55 + padding: 4rpx 10rpx;
  56 + text-align: center;
  57 + border-radius: 4rpx;
  58 + }
  59 + }
  60 +
  61 + .detail {
  62 + color: #fff;
  63 + font-size: 24rpx;
  64 + padding-top: 6rpx;
  65 + margin-top: 15rpx;
  66 + text-align: center;
  67 + border-radius: 22px;
  68 + background-color: #ffffff;
  69 + width: 150rpx;
  70 + height: 50rpx;
  71 + .text {
  72 + color: #3388ff;
  73 + font-size: 12px;
  74 + }
  75 + }
  76 +}
  77 +.my-nav {
  78 + overflow-x: hidden;
  79 + position: relative;
  80 + top: -25rpx;
  81 + z-index: 54;
  82 + background: #ffffff;
  83 + border-radius: 17px 17px 0px 0px;
  84 + height: 835rpx;
  85 + width: 750rpx;
  86 + flex-direction: column;
  87 + justify-content: space-between;
  88 + .nav-main {
  89 + margin-top: 100rpx;
  90 + display: flex;
  91 + flex-direction: column;
  92 + justify-content: space-between;
  93 + height: 147rpx;
  94 + }
  95 + .nav-link {
  96 + flex-direction: row;
  97 + justify-content: space-between;
  98 + align-content: space-between;
  99 + .nav-image {
  100 + width: 125rpx;
  101 + .image {
  102 + width: 35rpx;
  103 + height: 35rpx;
  104 + }
  105 + }
  106 + .nav-center {
  107 + position: relative;
  108 + left: -58rpx;
  109 + width: 420rpx;
  110 + .text {
  111 + color: #333333;
  112 + font-size: 15px;
  113 + }
  114 + }
  115 + .nav-right {
  116 + position: relative;
  117 + right: -112rpx;
  118 + width: 100rpx;
  119 + .image {
  120 + width: 13rpx;
  121 + height: 17rpx;
  122 + }
  123 + }
  124 + }
  125 +}
  126 +
  127 +.cell-group {
  128 + .cell-item {
  129 + border-bottom: 2rpx solid #eee;
  130 + background-color: #fff;
  131 + border-radius: 30rpx;
  132 + padding: 20rpx 24rpx;
  133 +
  134 + .title {
  135 + color: #333;
  136 + font-size: 28rpx;
  137 + padding: 0 10rpx;
  138 + font-weight: bold;
  139 + margin: 0;
  140 + }
  141 +
  142 + .more {
  143 + font-size: 24rpx;
  144 + color: #999;
  145 + }
  146 + }
  147 +}
  148 +
  149 +.submit {
  150 + margin-top: 160rpx;
  151 + color: #fff;
  152 + width: 650rpx;
  153 + border: none;
  154 +}
  155 +
  156 +.loginPhone {
  157 + // width: 750rpx;
  158 + // padding: 0rpx 10rpx;
  159 +
  160 + .form-row {
  161 + position: relative;
  162 + background: #f7f9ff;
  163 + border-radius: 48px;
  164 + width: 532rpx;
  165 + height: 80rpx;
  166 + .input {
  167 + font-size: 34rpx;
  168 + line-height: 102rpx;
  169 + height: 94rpx;
  170 + box-sizing: border-box;
  171 + font-size: 30rpx;
  172 + padding: 0;
  173 + font-weight: bold;
  174 + }
  175 +
  176 + .getvcode {
  177 + font-size: 26rpx;
  178 + height: 50rpx;
  179 + color: #333;
  180 + line-height: 52rpx;
  181 + // background: #eee;
  182 + min-width: 188rpx;
  183 + text-align: center;
  184 + border-radius: 8rpx;
  185 + position: absolute;
  186 + top: 50%;
  187 + transform: translateY(-50%);
  188 + right: 17rpx;
  189 + z-index: 11;
  190 +
  191 + &.forhidden {
  192 + // background: #eee;
  193 + // color: #cccccc;
  194 + }
  195 + }
  196 + }
  197 + .row-top {
  198 + margin-top: 20rpx;
  199 + }
  200 + .item-bind {
  201 + margin-top: 20rpx;
  202 + background: #f7f9ff;
  203 + border-radius: 48px;
  204 + width: 532rpx;
  205 + height: 80rpx;
  206 + }
  207 + .item-phone {
  208 + flex-direction: row;
  209 + margin-top: 20rpx;
  210 + .phone-hide {
  211 + visibility: hidden;
  212 + }
  213 + .bind-phone-text {
  214 + color: #0079fe;
  215 + font-size: 14px;
  216 + }
  217 + }
  218 +}
  219 +.bottom-content {
  220 + .content {
  221 + flex-direction: row;
  222 + margin-top: 288rpx;
  223 + margin-left: -538rpx;
  224 + .cancel {
  225 + width: 230rpx;
  226 + }
  227 + .confrim {
  228 + width: 230rpx;
  229 + margin-left: 65rpx;
  230 + }
  231 + }
  232 +}
  233 +.logout-main {
  234 + flex-direction: column;
  235 + height: 300rpx;
  236 + margin: 30rpx 40rpx;
  237 + background: #f5f5f5;
  238 + border-radius: 20rpx;
  239 + .main {
  240 + width: 669rpx;
  241 + height: 100rpx;
  242 + border-bottom: 1rpx solid #d6d6d6;
  243 + text-align: center;
  244 + line-height: 86rpx;
  245 + }
  246 +}
  1 +.set-page {
  2 + padding: 0rpx 30rpx;
  3 + .submit {
  4 + margin-top: 60rpx;
  5 + color: #fff;
  6 + width: 100%;
  7 + border: none;
  8 + border-radius: 40rpx;
  9 + }
  10 +}
  11 +.set-main {
  12 + border-radius: 20px;
  13 + margin-top: 37rpx;
  14 + padding-left: 15rpx;
  15 + justify-content: space-between;
  16 + width: 690rpx;
  17 + height: 200rpx;
  18 + background-color: #ffffff;
  19 + .main-image {
  20 + .image {
  21 + border-radius: 50px;
  22 + width: 130rpx;
  23 + height: 130rpx;
  24 + }
  25 + }
  26 + .main-right-image {
  27 + margin-right: 40rpx;
  28 + .image {
  29 + width: 13rpx;
  30 + height: 17rpx;
  31 + }
  32 + }
  33 +}
  34 +.basic-text {
  35 + .text {
  36 + color: #8f9ca2;
  37 + font-size: 14px;
  38 + }
  39 +}
  40 +.basic-main {
  41 + background-color: #ffffff;
  42 + border-radius: 20px;
  43 + margin-top: 20rpx;
  44 + padding-left: 15rpx;
  45 +}
  46 +.basic-bottom {
  47 + width: 500rpx;
  48 + margin-left: 86rpx;
  49 +}
@@ -2,20 +2,20 @@ @@ -2,20 +2,20 @@
2 <view class="notify-detail-page"> 2 <view class="notify-detail-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view>  
6 - <view class="u-flex" style="margin-top: 10rpx;justify-content: center;">  
7 - <text style="color: #2E384D;font-size: 18px;">{{ notifyList.receiverName }}</text> 5 + <view class="notify-column">
  6 + <view class="u-flex column">
  7 + <text class="text">{{ notifyList.receiverName }}</text>
8 </view> 8 </view>
9 - <view style="border-radius: 20px;;margin-top: 20rpx;width: 696rpx;height: 1000rpx;background-color: #FFFFFF;"> 9 + <view class="column-list">
10 <u-list height="140rpx"> 10 <u-list height="140rpx">
11 <u-list-item> 11 <u-list-item>
12 <u-cell :value="`${notifyList.createTime}`" :title="`${notifyList.receiverName}`"> 12 <u-cell :value="`${notifyList.createTime}`" :title="`${notifyList.receiverName}`">
13 - <u-avatar slot="icon" shape="circle" size="35" :src="1111"></u-avatar> 13 + <u-avatar slot="icon" shape="circle" size="35" :src="avatar"></u-avatar>
14 </u-cell> 14 </u-cell>
15 </u-list-item> 15 </u-list-item>
16 </u-list> 16 </u-list>
17 - <view class="">  
18 - <text style="color: #2E384D;font-size: 15px;">{{ notifyList.receiverName }}</text> 17 + <view class="bottom-text">
  18 + <text class="text">{{ notifyList.receiverName }}</text>
19 </view> 19 </view>
20 </view> 20 </view>
21 </view> 21 </view>
@@ -32,15 +32,17 @@ export default { @@ -32,15 +32,17 @@ export default {
32 }, 32 },
33 data() { 33 data() {
34 return { 34 return {
35 - notifyList: {} 35 + notifyList: {},
  36 + avatar: ''
36 }; 37 };
37 }, 38 },
38 onLoad(e) { 39 onLoad(e) {
39 // 隐藏原生的tabbar 40 // 隐藏原生的tabbar
40 uni.hideTabBar(); 41 uni.hideTabBar();
41 if (e.data !== null) { 42 if (e.data !== null) {
42 - let params = e.data;  
43 - this.loadData(params); 43 + let params = JSON.parse(e.data);
  44 + this.avatar = params.avatar;
  45 + this.loadData(params.id);
44 } 46 }
45 }, 47 },
46 methods: { 48 methods: {
@@ -53,7 +55,7 @@ export default { @@ -53,7 +55,7 @@ export default {
53 } 55 }
54 }) 56 })
55 .catch(e => { 57 .catch(e => {
56 - uni.$u.toast(e.data.message); 58 + uni.$u.toast(e.data?.message);
57 }); 59 });
58 } 60 }
59 } 61 }
@@ -61,10 +63,5 @@ export default { @@ -61,10 +63,5 @@ export default {
61 </script> 63 </script>
62 64
63 <style lang="scss" scoped> 65 <style lang="scss" scoped>
64 -.notify-detail-page {  
65 - min-height: 100vh;  
66 - background-color: #f8f9fa;  
67 - padding-top: 10rpx;  
68 - padding-left: 27rpx;  
69 -} 66 +@import './static/notifyDetail.scss';
70 </style> 67 </style>
  1 +.notify-detail-page {
  2 + min-height: 100vh;
  3 + background-color: #f8f9fa;
  4 + padding-top: 10rpx;
  5 + padding-left: 27rpx;
  6 +}
  7 +.notify-column {
  8 + .column {
  9 + margin-top: 10rpx;
  10 + justify-content: center;
  11 + .text {
  12 + color: #2e384d;
  13 + font-size: 18px;
  14 + }
  15 + }
  16 + .column-list {
  17 + border-radius: 20px;
  18 + margin-top: 20rpx;
  19 + width: 696rpx;
  20 + height: 1000rpx;
  21 + background-color: #ffffff;
  22 + .bottom-text {
  23 + .text {
  24 + color: #2e384d;
  25 + font-size: 15px;
  26 + }
  27 + }
  28 + }
  29 +}
  1 +.notify-page {
  2 + min-height: 100vh;
  3 + background-color: #f8f9fa;
  4 + padding-top: 10rpx;
  5 + padding-left: 27rpx;
  6 +}
  7 +/deep/.u-list-item {
  8 + background: #ffffff;
  9 + width: 695rpx;
  10 + border-radius: 20px;
  11 + margin-top: 20rpx;
  12 +}
  13 +.notify-main {
  14 + .main {
  15 + flex-direction: column;
  16 + margin-left: -22rpx;
  17 + .main-item {
  18 + justify-content: space-between;
  19 + flex-direction: row;
  20 + margin: 15rpx;
  21 + width: 700rpx;
  22 + height: 136rpx;
  23 + background: #ffffff;
  24 + border-radius: 20px;
  25 + .item {
  26 + justify-content: space-between;
  27 + flex-direction: row;
  28 + .item-avatar {
  29 + margin-left: 30rpx;
  30 + .avatar {
  31 + margin-left: 30rpx;
  32 + }
  33 + }
  34 + .item-content {
  35 + margin-left: 30rpx;
  36 + text-align: left;
  37 + justify-content: space-between;
  38 + flex-direction: column;
  39 + .text-top {
  40 + width: 400rpx;
  41 + color: #2e384d;
  42 + font-size: 15px;
  43 + }
  44 + .text-bottom {
  45 + width: 400rpx;
  46 + color: #999999;
  47 + font-size: 13px;
  48 + }
  49 + }
  50 + }
  51 + .item-right {
  52 + .text {
  53 + margin-right: 30rpx;
  54 + color: #999999;
  55 + font-size: 13px;
  56 + }
  57 + }
  58 + }
  59 + }
  60 +}
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <view class="notify-page"> 2 <view class="notify-page">
3 <!-- 公共组件-每个页面必须引入 --> 3 <!-- 公共组件-每个页面必须引入 -->
4 <public-module></public-module> 4 <public-module></public-module>
5 - <view style=""> 5 + <view>
6 <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1"> 6 <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
7 <u-form-item 7 <u-form-item
8 label="类型" 8 label="类型"
@@ -20,25 +20,19 @@ @@ -20,25 +20,19 @@
20 </u--form> 20 </u--form>
21 <u-action-sheet :show="showType" :actions="actions" title="请选择类型" @close="showType = false" @select="typeSelect"></u-action-sheet> 21 <u-action-sheet :show="showType" :actions="actions" title="请选择类型" @close="showType = false" @select="typeSelect"></u-action-sheet>
22 </view> 22 </view>
23 - <view> 23 + <view class="notify-main">
24 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"> 24 <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
25 - <view class="u-flex" style="flex-direction: column;margin-left: -22rpx;">  
26 - <view  
27 - @click="clickNotifyDetail(item.id)"  
28 - class="u-flex"  
29 - v-for="(item, index) in list"  
30 - :key="index"  
31 - style="justify-content: space-between;flex-direction: row;margin: 15rpx;width: 700rpx;height:136rpx;background: #FFFFFF;border-radius: 20px;"  
32 - >  
33 - <view class="u-flex" style="justify-content: space-between;flex-direction: row;">  
34 - <view style="margin-left: 30rpx;"><u-avatar style="margin-left: 30rpx;" shape="circle" size="40" :src="item.avatar"></u-avatar></view>  
35 - <view class="u-flex" style="margin-left: 30rpx;text-align: left;justify-content: space-between;flex-direction: column;">  
36 - <text style="width:400rpx;color:#2E384D;font-size: 15px;">{{ item.title }}</text>  
37 - <text style="width:400rpx;color:#999999;font-size: 13px;">{{ item.createTime }}</text> 25 + <view class="u-flex main">
  26 + <view @click="clickNotifyDetail(item)" class="u-flex main-item" v-for="(item, index) in list" :key="index">
  27 + <view class="u-flex item">
  28 + <view class="item-avatar"><u-avatar class="avatar" shape="circle" size="40" :src="item.avatar"></u-avatar></view>
  29 + <view class="u-flex item-content">
  30 + <text class="text-top">{{ item.title }}</text>
  31 + <text class="text-bottom">{{ item.createTime }}</text>
38 </view> 32 </view>
39 </view> 33 </view>
40 - <view class="">  
41 - <text style="margin-right: 30rpx;color:#999999;font-size: 13px;">{{ item.type == 'OTHER' ? '其他' : item.type == 'MEETING' ? '会议' : '公告' }}</text> 34 + <view class="item-right">
  35 + <text class="text">{{ item.type == 'OTHER' ? '其他' : item.type == 'MEETING' ? '会议' : '公告' }}</text>
42 </view> 36 </view>
43 </view> 37 </view>
44 </view> 38 </view>
@@ -149,25 +143,16 @@ export default { @@ -149,25 +143,16 @@ export default {
149 }, 143 },
150 clickNotifyDetail(e) { 144 clickNotifyDetail(e) {
151 let obj = e; 145 let obj = e;
152 - uni.navigateTo({  
153 - url: './notifyDetail?data=' + obj  
154 - }); 146 + setTimeout(() => {
  147 + uni.navigateTo({
  148 + url: './notifyDetail?data=' + JSON.stringify(obj)
  149 + });
  150 + }, 500);
155 } 151 }
156 } 152 }
157 }; 153 };
158 </script> 154 </script>
159 155
160 <style lang="scss" scoped> 156 <style lang="scss" scoped>
161 -.notify-page {  
162 - min-height: 100vh;  
163 - background-color: #f8f9fa;  
164 - padding-top: 10rpx;  
165 - padding-left: 27rpx;  
166 -}  
167 -/deep/.u-list-item {  
168 - background: #ffffff;  
169 - width: 695rpx;  
170 - border-radius: 20px;  
171 - margin-top: 20rpx;  
172 -} 157 +@import './static/systemNotify.scss';
173 </style> 158 </style>
@@ -19,7 +19,7 @@ const GlobalOption = { @@ -19,7 +19,7 @@ const GlobalOption = {
19 }, 19 },
20 empty: { 20 empty: {
21 use: true, // 是否显示空布局 21 use: true, // 是否显示空布局
22 - icon: "https://www.mescroll.com/img/mescroll-empty.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png ) 22 + icon: "../../../../../static/empty-data.png" // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
23 } 23 }
24 }, 24 },
25 // 国际化配置 25 // 国际化配置