简柏林 / 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 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 62 const homePath = '/pages/index/index';
63 63 //白色表达值
... ...
... ... @@ -97,7 +97,7 @@ export default {
97 97 },
98 98 {
99 99 name: '告警',
100   - url: 'pages/alert/alert',
  100 + url: 'pages/alarm/alarm',
101 101 icon: '../../../static/alert-un.png',
102 102 iconFill: '../../../static/alert-yes.png',
103 103 badge: 0
... ... @@ -141,7 +141,7 @@ export default {
141 141 },
142 142 onTabbar(index) {
143 143 if (index !== 5) {
144   - this.loadData();
  144 + // this.loadData();
145 145 }
146 146 if (this.path !== this.list[index].url) {
147 147 uni.switchTab({
... ...
... ... @@ -5,6 +5,7 @@ let baseUrl = "";
5 5 if (process.env.NODE_ENV === 'development') {
6 6 // 开发环境
7 7 baseUrl = 'http://47.99.141.212:8080/api'
  8 + // baseUrl = 'http://192.168.10.103:8080/api'
8 9 // baseUrl = 'http://192.168.1.228/fan_php/public/index.php'
9 10 } else if (process.env.NODE_ENV === 'production') {
10 11 // 生产环境
... ...
... ... @@ -21,13 +21,13 @@
21 21 }
22 22 },
23 23 {
24   - "path": "pages/alert/alert",
  24 + "path": "pages/alarm/alarm",
25 25 "style": {
26 26 "navigationBarTitleText": "告警"
27 27 }
28 28 },
29 29 {
30   - "path": "pages/alert/alertDetail",
  30 + "path": "pages/alarm/alarmDetail",
31 31 "style": {
32 32 "navigationBarTitleText": "告警详情"
33 33 }
... ... @@ -93,7 +93,7 @@
93 93 "navigationBarTitleText": "组织筛选"
94 94 }
95 95 }, {
96   - "path": "pages/index/orgStatus/orgStatus",
  96 + "path": "pages/index/configuration/configuration",
97 97 "style": {
98 98 "navigationBarTitleText": "查看组态"
99 99 }
... ... @@ -107,14 +107,14 @@
107 107
108 108 },
109 109 {
110   - "path": "pages/index/orgStatus/statusDetail",
  110 + "path": "pages/index/configuration/configurationDetail",
111 111 "style": {
112 112 "navigationBarTitleText": "组态详情"
113 113 }
114 114
115 115 },
116 116 {
117   - "path": "pages/alert/org/org",
  117 + "path": "pages/alarm/org/org",
118 118 "style": {
119 119 "navigationBarTitleText": "组织筛选"
120 120 }
... ... @@ -148,7 +148,7 @@
148 148 "text": "设备"
149 149 },
150 150 {
151   - "pagePath": "pages/alert/alert",
  151 + "pagePath": "pages/alarm/alarm",
152 152 "iconPath": "static/basics.png",
153 153 "selectedIconPath": "static/basics.png",
154 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 1 <template>
2   - <view class="alert-detail-page">
  2 + <view class="alarm-detail-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 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 15 list.severity == 'CRITICAL'
19 16 ? '危险'
... ... @@ -27,21 +24,21 @@
27 24 }}
28 25 </text>
29 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 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 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 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 43 list.status == 'CLEARED_UNACK'
47 44 ? '清除未确认'
... ... @@ -56,8 +53,8 @@
56 53 </view>
57 54 </view>
58 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 58 <u--form :label-style="{ 'font-size': '0rpx' }" style="padding-left: 26rpx;" labelPosition="left" :model="formModel" ref="form1">
62 59 <u-form-item label="." prop="result" ref="item3">
63 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 63 </view>
67 64 <!-- #endif -->
68 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 68 <view><u--textarea border="none" height="96" placeholder="请输入处理结果" v-model="formModel.result" count></u--textarea></view>
72 69 </view>
73 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 74 <f-tabbar></f-tabbar>
76 75 </view>
77 76 </template>
... ... @@ -100,18 +99,24 @@ export default {
100 99 },
101 100 methods: {
102 101 handleSubmit() {
103   - // console.log(this.formModel);
104 102 uni.$u.http
105 103 .post(`/alarm/${this.list.id}/ack`)
106 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 121 .catch(e => {
117 122 uni.$u.toast(e.data?.message);
... ... @@ -122,7 +127,5 @@ export default {
122 127 </script>
123 128
124 129 <style lang="scss" scoped>
125   -.alert-detail-page {
126   - padding: 30rpx;
127   -}
  130 +@import './static/alarmDetail.scss';
128 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 4 <public-module></public-module>
5 5 <view class="org-sty">
6 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 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 12 </view>
  13 + <view class="org-item"><image class="image" src="../../../static/right-arrow.png"></image></view>
18 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 15 <view class="camera-container">
31 16 <view class="container-item">
32 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 21 </view>
37 22 </view>
38 23 </view>
... ... @@ -127,45 +112,5 @@ export default {
127 112 </script>
128 113
129 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 116 </style>
... ...
pages/index/configuration/configuration.vue renamed from pages/index/orgStatus/orgStatus.vue
1 1 <template>
2 2 <view class="status-page">
3 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 6 </view>
7 7 </f-navbar>
8 8 <!-- 公共组件-每个页面必须引入 -->
9 9 <public-module></public-module>
10 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 15 </view>
16 16 </view>
17 17 </view>
... ... @@ -32,15 +32,15 @@ export default {
32 32 return {
33 33 list: [
34 34 {
35   - id:1,
  35 + id: 1,
36 36 name: '智慧办公室1',
37 37 icon: '../../../static/test.png'
38 38 },
39 39 {
40   - id:2,
  40 + id: 2,
41 41 name: '智慧办公室2',
42 42 icon: '../../../static/test.png'
43   - },
  43 + }
44 44 ]
45 45 };
46 46 },
... ... @@ -52,34 +52,15 @@ export default {
52 52 leftClick() {
53 53 return false;
54 54 },
55   - openStatusDetail(e){
56   - console.log(e);
  55 + openStatusDetail(e) {
57 56 uni.navigateTo({
58   - url:'statusDetail'
59   - })
  57 + url: 'configurationDetail'
  58 + });
60 59 }
61 60 }
62 61 };
63 62 </script>
64 63
65 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 66 </style>
... ...
pages/index/configuration/configurationDetail.vue renamed from pages/index/orgStatus/statusDetail.vue
... ... @@ -5,96 +5,91 @@
5 5 <view>
6 6 <!-- 基础统计 -->
7 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 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 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 18 <text>{{ deviceData.onLine }}</text>
19 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 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 24 <text>{{ deviceData.unLine }}</text>
25 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 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 30 <text>{{ deviceData.noActive }}</text>
31 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 33 </view>
34 34 </view>
35 35 </view>
36 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 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 44 <text>{{ alertData.noHandle }}</text>
45 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 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 50 <text>{{ alertData.doneHandle }}</text>
51 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 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 56 <text>{{ alertData.errorReport }}</text>
57 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 59 </view>
60 60 </view>
61 61 </view>
62 62 </view>
63 63 </view>
  64 + <!-- 基础统计 -->
  65 + <!-- 四宫格 -->
64 66 <view class="grid-container">
65 67 <view class="grid-item">
66 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 71 </view>
72 72 </view>
73 73 <view @click="openCamera" class="grid-item">
74 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 77 </view>
80 78 </view>
81 79 <view class="grid-item">
82 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 83 </view>
88 84 </view>
89 85 <view @click="openOrgStatus" class="grid-item">
90 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 89 </view>
96 90 </view>
97 91 </view>
  92 + <!-- 四宫格 -->
98 93 </view>
99 94 <f-tabbar></f-tabbar>
100 95 </view>
... ... @@ -128,20 +123,16 @@ export default {
128 123 },
129 124 methods: {
130 125 getDeviceTotalData() {
131   - let httpData = {
132   - page: 1,
133   - pageSize: 10
134   - };
135 126 uni.$u.http
136   - .get('/yt/homepage/left/top', { params: httpData, custom: { load: false } })
  127 + .get('/yt/homepage/app')
137 128 .then(res => {
138 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 138 .catch(e => {
... ... @@ -155,7 +146,23 @@ export default {
155 146 },
156 147 openOrgStatus() {
157 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 170 </script>
164 171
165 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 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 4 <public-module></public-module>
5 5 <view class="f__login">
6 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 9 <view class="circleStyle"></view>
10 10 </view>
11 11 <view class="form-row">
... ... @@ -15,13 +15,13 @@
15 15 <view class="form-row">
16 16 <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
17 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 19 </view>
20 20 <button class="submit" size="default" @click="onSubmit">
21   - <text style="color:#FFFFFF">登录</text>
  21 + <text class="text">登录</text>
22 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 25 </view>
26 26 <view class="circleStyleBottom"></view>
27 27 </view>
... ... @@ -139,85 +139,5 @@
139 139 </script>
140 140
141 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 143 </style>
... ...
1 1 <template>
2 2 <view class="find-password-page">
3 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 5 <view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
6 6 <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
7 7 </view>
... ... @@ -15,7 +15,7 @@
15 15 <view class="form-row">
16 16 <input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码"
17 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 19 </view>
20 20 <button class="submit" size="default" @click="onNextSubmit">
21 21 <text style="color:#fff">下一步</text>
... ... @@ -132,66 +132,5 @@
132 132 </script>
133 133
134 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 136 </style>
... ...
... ... @@ -2,10 +2,10 @@
2 2 <view class="login-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 9 <view class="circleStyle"></view>
10 10 </view>
11 11 </view>
... ... @@ -29,16 +29,15 @@
29 29 </template>
30 30 </u-input>
31 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 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 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 41 <view class="circleStyleBottom"></view>
43 42 </view>
44 43 </view>
... ... @@ -169,63 +168,5 @@ export default {
169 168 </script>
170 169
171 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 172 </style>
... ...
... ... @@ -10,25 +10,21 @@
10 10 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar || '/static/logo.png'"></image></view>
11 11 <view @click="openPersonalInfo" class="u-flex-1">
12 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 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 19 </view>
18 20 </block>
19 21 <block v-else>
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 24 </view>
23 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 28 </view>
33 29 </block>
34 30 <view><u-icon name="arrow-right" color="black" size="13"></u-icon></view>
... ... @@ -40,9 +36,13 @@
40 36 <block v-if="userInfo.isToken">
41 37 <view @click="openPersonalInfo" class="u-m-r-20"><image class="avatar" mode="aspectFill" :src="userInfo.avatar"></image></view>
42 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 46 </view>
47 47 </block>
48 48 <block v-else>
... ... @@ -58,41 +58,30 @@
58 58 </view>
59 59 <!-- #endif -->
60 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 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 72 </view>
84 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 77 </view>
87 78 <f-tabbar></f-tabbar>
88 79 <!-- 绑定账号 -->
89 80 <view>
90 81 <u-modal :showConfirmButton="false" :show="show" :title="title">
91 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 85 <u--input
97 86 class="input"
98 87 shape="circle"
... ... @@ -105,13 +94,13 @@
105 94 @change="passwordChange"
106 95 ></u--input>
107 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 100 </view>
112 101 </view>
113 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 104 <u--input
116 105 shape="circle"
117 106 class="input"
... ... @@ -121,7 +110,7 @@
121 110 placeholder-style="font-weight:normal;color:#bbbbbb;"
122 111 ></u--input>
123 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 114 <u--input
126 115 shape="circle"
127 116 class="input"
... ... @@ -132,15 +121,15 @@
132 121 ></u--input>
133 122 <view style="color:#377DFF" class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view>
134 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 127 </view>
139 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 133 </view>
145 134 </view>
146 135 </u-modal>
... ... @@ -148,17 +137,14 @@
148 137 <!-- 退出登录 -->
149 138 <view>
150 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 144 </view>
160 145 </u-popup>
161 146 </view>
  147 + <!-- 退出登录 -->
162 148 </view>
163 149 </template>
164 150
... ... @@ -334,134 +320,5 @@ export default {
334 320 </script>
335 321
336 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 324 </style>
... ...
... ... @@ -2,15 +2,12 @@
2 2 <view class="set-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 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 11 <u--form labelPosition="left" :model="myInfoModel" :rules="rules" ref="myInfoFormRef">
15 12 <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.realName" borderBottom ref="item1">
16 13 <u--input placeholder="请输入真实姓名" v-model="myInfoModel.userInfo.realName" border="none"></u--input>
... ... @@ -49,7 +46,7 @@
49 46 </u-form-item>
50 47 </u--form>
51 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 50 <!-- #ifdef MP -->
54 51 <view class="u-m-t-40"><text style="visibility: hidden;">#</text></view>
55 52 <!-- #endif -->
... ... @@ -207,15 +204,5 @@ export default {
207 204 </script>
208 205
209 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 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 2 <view class="notify-detail-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 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 8 </view>
9   - <view style="border-radius: 20px;;margin-top: 20rpx;width: 696rpx;height: 1000rpx;background-color: #FFFFFF;">
  9 + <view class="column-list">
10 10 <u-list height="140rpx">
11 11 <u-list-item>
12 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 14 </u-cell>
15 15 </u-list-item>
16 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 19 </view>
20 20 </view>
21 21 </view>
... ... @@ -32,15 +32,17 @@ export default {
32 32 },
33 33 data() {
34 34 return {
35   - notifyList: {}
  35 + notifyList: {},
  36 + avatar: ''
36 37 };
37 38 },
38 39 onLoad(e) {
39 40 // 隐藏原生的tabbar
40 41 uni.hideTabBar();
41 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 48 methods: {
... ... @@ -53,7 +55,7 @@ export default {
53 55 }
54 56 })
55 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 63 </script>
62 64
63 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 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 2 <view class="notify-page">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 4 <public-module></public-module>
5   - <view style="">
  5 + <view>
6 6 <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
7 7 <u-form-item
8 8 label="类型"
... ... @@ -20,25 +20,19 @@
20 20 </u--form>
21 21 <u-action-sheet :show="showType" :actions="actions" title="请选择类型" @close="showType = false" @select="typeSelect"></u-action-sheet>
22 22 </view>
23   - <view>
  23 + <view class="notify-main">
24 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 32 </view>
39 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 36 </view>
43 37 </view>
44 38 </view>
... ... @@ -149,25 +143,16 @@ export default {
149 143 },
150 144 clickNotifyDetail(e) {
151 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 154 </script>
159 155
160 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 158 </style>
... ...
... ... @@ -19,7 +19,7 @@ const GlobalOption = {
19 19 },
20 20 empty: {
21 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 // 国际化配置
... ...