From 707fe99b35c8e090f839d247bea1ad3db06334e8 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期三, 27 三月 2024 15:06:15 +0800 Subject: [PATCH] 更改地址 --- pages/tabBar/current/current.vue | 400 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 378 insertions(+), 22 deletions(-) diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue index 37cd53f..b5f4e8f 100644 --- a/pages/tabBar/current/current.vue +++ b/pages/tabBar/current/current.vue @@ -5,49 +5,252 @@ <!-- 状态栏占位 --> <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> <!-- 真正的导航栏内容 --> - <view style="display: flex; flex-direction: column;"> - <view class="navBar"> - <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" /> - <view class="barText">信息</view> + <view class="navBar"> + <u-icon style=" margin-left: 13px;" name="arrow-left" color="black" size="17" @click="goBack" v-if="role!='工作人员'" /> + <view class="barText">信息查看</view> + <view > + <u-button type="text" @click="loginOut" style="color: #1890ff;margin-right: 5px;width: 65px;">退出</u-button> </view> </view> </view> - <text>通用信息详情</text> + <div v-if="loading" style='display: flex;justify-content: center;position: absolute;width:100%;top: 40%;left: 0'> + <u-loading-icon></u-loading-icon> + </div> + <!-- 页面内容 --> + <view class="controlBar"> + <view class="buttonGroup"> + <view class="buttonItem all" + :class="{ 'active': selectedSaleAnalysis === 'all'}" + @click="handleButtonClick({label: 'all',name: '全部'})"> + 全部 + </view> + <view v-for="(button, index) in buttons" :key="index" class="buttonItem" + :class="{ 'active': selectedSaleAnalysis === button.label, + 'all': button.label === 'all', + 'red': button.label === 'red', + 'orange':button.label === 'orange', + 'yellow':button.label === 'yellow', + 'blue': button.label === 'blue'}" + @click="handleButtonClick(button)"> + {{ button.name }} + </view> + </view> + <view class="listHead"> + + <view class="switchBtn"> + <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch> + <text>仅紧临</text> + </view> + </view> + </view> + <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> + <view class="examineList"> + <scroll-view :scroll-top="scrollTop" scroll-y="true" class="listContent" @scrolltoupper="upper" v-if="InfoList.length > 0" + @scrolltolower="lower" @scroll="scroll" lower-threshold="50"> + <view v-for="(item, index) in InfoList" :key="index" class="itemContent" @click="toDetail(item)"> + <view class="content"> + <text class="tit">[{{item.colorContent}}]{{item.title}}</text><br> + <text class="cont">{{item.content}}</text> + <view class="btnGroup"> + <text style="font-size: 14px;">发送 {{item.responseSum}} 人,叫应 {{item.responseNum}} 人</text> + <u-button + size="medium" + style="background-color:rgb(17, 204, 33);color: white;width: 100px;margin: 0;font-size: 13px;height: 30px;" + @click.native.stop="toResponsivity(item)" + > + 叫应率 {{item.responsesRate}} + </u-button> + </view> + </view> + </view> + </scroll-view> + <view v-else> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> + </view> + </view> + </view> <tabBar :currentPagePath="page"></tabBar> </view> </template> <script> import tabBar from '../tabBarIndex.vue' + import { getPublished, getResponseDetail } from '../../../api/notice.js' + import tebBar from '../tabBarIndex.vue' export default { components:{ tabBar }, data() { return { + data: { + pageIndex: 1, + pageSize: 10, + searchParams: { + emergType: null,//1-紧急;2-常规 + warningLevel: null,//1-红色预警;2-橙色预警;3-黄色预警;4-蓝色预警 + } + }, + total: 0, + scrollTop: 0, + loading: false, page: 'pages/tabBar/current/current', - statusBarHeight: '' + checked: false, + isReadOnly: false, + statusBarHeight: 0, + buttons: [ + { + label: 'red', + name: '红' + }, + { + label: 'orange', + name: '橙' + }, + { + label: 'yellow', + name: '黄' + }, + { + label: 'blue', + name: '蓝' + }, + ], + selectedSaleAnalysis: 'all', + InfoList: [], + unitType: null, + role:'', } - }, onLoad() { + this.unitType = uni.getStorageSync('unittype') + 1; + console.log("11",this.unitType) //获取手机状态栏高度 this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; uni.hideTabBar(); }, + onShow() { + this.role = uni.getStorageSync('roleName'); + this.data.pageIndex = 1 + this.getInfoList(); + }, methods: { + loginOut() { + uni.clearStorageSync(); + uni.clearStorage(); + uni.navigateTo({ + url: '/pages/index/index' + }) + }, goBack() { - console.log("1111") uni.switchTab({ url:'/pages/tabBar/firstPage/firstPage' }); }, + getInfoList() { + this.loading = true + this.data.searchParams.emergType = this.checked ? 1 : null; + this.data.searchParams.warningLevel = this.selectedSaleAnalysis == 'all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4; + getPublished(this.data).then(res => { + if(res.code == 100) { + let list = res.data?res.data: []; + if (res.pageIndex != 1) { + this.InfoList = this.InfoList.concat(list) + } else { + this.InfoList = list; + } + this.total = res.total + if(this.InfoList && this.InfoList.length > 0) { + this.InfoList.forEach((item, index) => { + this.InfoList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警'; + this.InfoList[index].warningLevel = item.warningLevel; + }); + } + }else{ + uni.$u.toast(res.msg) + } + this.loading = false + }) + }, + handleButtonClick(button) { + this.data.pageIndex = 1 + this.selectedSaleAnalysis = button.label; + this.getInfoList(); + }, + toDetail(item) { + item.responsesRate = item.responsesRate.replace(/%/g, '%25'); + uni.setStorageSync('fdetailData', item); + uni.setStorageSync('backFlag','current'); + uni.navigateTo({ + url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item)) + }) + }, + toResponsivity(item) { + const param = { + pageIndex: 1, + pageSize: 100, + searchParams: { + warnInfoId: item.id + } + } + getResponseDetail(param).then(res => { + if(res.code == 100){ + console.log("res",res) + let data = res.data.appPageResponseByIdRespDTOS; + res.data.appPageResponseByIdRespDTOS.forEach((item,index) => { + if(item.forwardRate){ + data[index].forwardRate = item.forwardRate.replace(/%/g, '%25'); + } + + }) + uni.navigateTo({ + url: `/pages/tabBar/responsivity/countyResponsivity?data=` + encodeURIComponent(JSON.stringify(res.data)) + }) + }else{ + uni.$u.toast(res.msg) + } + }) + }, + //下拉刷新 + onPullDownRefresh() { + console.log('refresh'); + setTimeout(() => { + uni.stopPullDownRefresh(); + this.getInfoList(); + }, 2000); + }, + clickSwitch(e) { + this.data.pageIndex = 1 + this.getInfoList(); + }, + + upper: function(e) { + // console.log(e) + }, + lower: function(e) { + if (this.data.pageIndex * this.data.pageSize >= this.total){ + // uni.$u.toast('已加载全部数据') + return + } + //并且让页码+1,调用获取数据的方法获取第二页数据 + this.data.pageIndex++ + //此处调用自己获取数据列表的方法 + this.getInfoList() + }, + scroll: function(e) { + // console.log(e) + }, + goBack() { + uni.switchTab({ + url:'/pages/tabBar/firstPage/firstPage' + }); + }, } } </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -63,23 +266,176 @@ z-index: 1; } .navBarBox .navBar { - background-color:#fff; - height: 50px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - box-shadow: 0 3px 12px rgba(0,0,0,0.05); + background-color:#fff; + height: 50px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .barText{ - /* margin-left: 20px; */ - text-align: center; - width: 85%; - font-size: 16px; - /* text-align: center; */ - font-weight: 600; + margin-left: 55px; + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; } .statusBar{ background-color:lightgrey; } +/* .contentList{ + display: flex; + flex-direction: column; +} +.buttonGroup{ + margin: 18px 12px; + display: flex; + align-items: center; + justify-content: space-between; +} +.buttonAll{ + margin-left:5px; + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 35px; + height: 30px; + border-radius: 5px; + font-size: 12px; + font-weight: 700; +} */ +.controlBar{ + margin: 12px 12px 0; + padding: 12px; + height: 90px; + box-sizing: border-box; + display: flex; + flex-direction: column; + justify-content: space-between; + width: calc(100% - 24px); + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + + .buttonGroup{ + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 12px; + } + + .listHead{ + display: flex; + align-items: center; + justify-content: flex-end; + } +} +.buttonItem{ + width: calc(20% - 4px); + color: white; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 30px; + border-radius: 5px; + &.active{ + border: 1px solid rgba(0,0,0,.4); + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + } +} +.all { + background-color: rgb(17,204,33); + &.active{ + background-image: linear-gradient(#22992d,#12da23); + } +} +.active { + border: 1.5px solid #8d8d8d; +} +.red { + background-color: #ff5555; + &.active{ + background:linear-gradient(#dc2f2f, #ff5b5b); + } +} +.orange { + background-color: rgb(251, 158, 13); + &.active{ + background: linear-gradient(#e28e0c,#ffa90e); + } +} +.yellow { + background-color: rgb(255, 223, 37); + &.active{ + background: linear-gradient(#e6c921,#ffef28); + } +} +.blue { + background-color: #409EFF; + &.active{ + background: linear-gradient(#3a8ee6,#44a9ff); + } +} +.switchBtn{ + display: flex; + align-items: center; +} +.examineList{ + margin-top: 12px; + height: calc(100vh - 246px); + overflow: hidden; + overflow-y: scroll; +} +.listContent{ + display: flex; + flex-direction: column; + width: calc(100% - 24px); + margin: 0 12px; + // margin-bottom: 30px; + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + height: 100%; +} +.itemContent{ + color: #333; + font-size: 16px; + margin-top: 15px; + padding: 0 12px 10px; + border-bottom: 1px solid #ebebeb; +} +.content{ + .tit{ + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + .cont{ + width: 100%; + font-size: 14px; + color: #666; + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin-bottom: 6px; + } + .btnGroup{ + width: 100%; + display: flex; + justify-content: space-between; + } +} +.buttonCo{ + margin-top: 5px; + margin-bottom: 10px; +} + + </style> \ No newline at end of file -- Gitblit v1.9.2