| | |
| | | <!-- 状态栏占位 --> |
| | | <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"> |
| | | <view class="barText">信息查看</view> |
| | | </view> |
| | | </view> |
| | | <!-- 页面内容 --> |
| | | <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> |
| | | <text>通用信息详情</text> |
| | | <view style="display: flex;flex-direction: column;margin-bottom: 55px;"> |
| | | <view class="examineList"> |
| | | <view class="listContent" v-if="InfoList.length > 0"> |
| | | <view v-for="(item, index) in InfoList" :key="index" class="itemContent"> |
| | | <view class="content"> |
| | | <text>[{{item.colorContent}}]</text> |
| | | <text>{{item.title}},{{item.content}}</text> |
| | | <view class="btnGroup" style="float: right;"> |
| | | <u-button |
| | | size="mini" |
| | | style="background-color:rgb(255, 223, 37);color: white;width: 100px;margin: 3px 8px;" |
| | | @click="toDetail(item)" |
| | | > |
| | | 信息详情 |
| | | </u-button> |
| | | <u-button |
| | | size="mini" |
| | | style="background-color:rgb(17, 204, 33);color: white;width: 100px;" |
| | | @click="toResponsivity(item)" |
| | | > |
| | | 查看叫应率 |
| | | </u-button> |
| | | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </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 {getExamine} from '../../../api/examine.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-蓝色预警 |
| | | reviewStatus: null//1:未审核,2:已审核,3:审核已驳回 |
| | | } |
| | | }, |
| | | 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: [], |
| | | } |
| | | |
| | | }, |
| | | onLoad() { |
| | | //获取手机状态栏高度 |
| | | this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
| | | uni.hideTabBar(); |
| | | }, |
| | | onShow() { |
| | | this.getInfoList(); |
| | | }, |
| | | methods: { |
| | | goBack() { |
| | |
| | | url:'/pages/tabBar/firstPage/firstPage' |
| | | }); |
| | | }, |
| | | getInfoList() { |
| | | 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; |
| | | // getExamine(this.data).then(res => { |
| | | // if(res.code == 100) { |
| | | this.InfoList = [ |
| | | { |
| | | attachment: null, |
| | | disasterType: 1, |
| | | gmtReviewSubmit: "2023-07-21 14:36:16", |
| | | id: 111, |
| | | infoSubmitter: "1-1", |
| | | infoSubmitterReal: "省级工作人员", |
| | | publishingUnit: "自治区自然灾害综合检测预警中心", |
| | | reviewStatus: 1, |
| | | title: "【20230721】预警信息标题", |
| | | warningLevel: 1, |
| | | } |
| | | ]; |
| | | if(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; |
| | | }); |
| | | } |
| | | // } |
| | | // }) |
| | | }, |
| | | handleButtonClick(button) { |
| | | this.selectedSaleAnalysis = button.label; |
| | | this.getInfoList(); |
| | | }, |
| | | toDetail(item) { |
| | | console.log("item",item) |
| | | uni.navigateTo({ |
| | | url: `/pages/tabBar/notice/detail?data=` + encodeURIComponent(JSON.stringify(item)) |
| | | }) |
| | | }, |
| | | toResponsivity(item) { |
| | | //县 |
| | | uni.navigateTo({ |
| | | url: `/pages/tabBar/responsivity/countyResponsivity?data=` + encodeURIComponent(JSON.stringify(item)) |
| | | }) |
| | | //市 |
| | | //村 |
| | | }, |
| | | //下拉刷新 |
| | | onPullDownRefresh() { |
| | | console.log('refresh'); |
| | | setTimeout(() => { |
| | | uni.stopPullDownRefresh(); |
| | | this.getInfoList(); |
| | | }, 1000); |
| | | }, |
| | | clickSwitch(e) { |
| | | this.getInfoList(); |
| | | } |
| | | } |
| | | } |
| | | |
| | | </script> |
| | | |
| | | <style> |
| | | <style lang="scss" scoped> |
| | | .box { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | 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; |
| | | 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; |
| | | } |
| | | .listContent{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin: 0 12px; |
| | | background: #fff; |
| | | border-radius: 5px; |
| | | box-shadow: 0 3px 12px rgba(0,0,0,0.05); |
| | | } |
| | | .itemContent{ |
| | | font-size: 16px; |
| | | color: #333; |
| | | margin-top: 15px; |
| | | padding: 0 12px 10px; |
| | | border-bottom: 1px solid #ebebeb; |
| | | |
| | | } |
| | | .content{ |
| | | text-overflow: ellipsis; |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | } |
| | | .buttonCo{ |
| | | margin-top: 5px; |
| | | margin-bottom: 10px; |
| | | } |
| | | .examineList{ |
| | | margin-top: 12px; |
| | | height: calc(100vh - 266px); |
| | | overflow: hidden; |
| | | overflow-y: scroll; |
| | | } |
| | | .btnGroup{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: flex-end; |
| | | } |
| | | </style> |