From 22f0e04d34f19aac857e25627343dff9a2542057 Mon Sep 17 00:00:00 2001 From: zhouwenxuan <1175765986@qq.com> Date: 星期二, 25 七月 2023 15:12:42 +0800 Subject: [PATCH] 新增页面 --- pages/tabBar/responsivity/cityResponsivity.vue | 159 +++++++ pages/tabBar/information/information.vue | 6 pages/tabBar/firstPage/firstPage.vue | 30 pages/tabBar/notice/notice.vue | 7 pages/tabBar/responsivity/showMeasures.vue | 238 ++++++++++ pages/tabBar/weather/weather.vue | 14 pages.json | 48 ++ pages/tabBar/responsivity/countyResponsivity.vue | 161 +++++++ pages/tabBar/examine/examine.vue | 154 ++++-- pages/tabBar/count/count.vue | 13 pages/tabBar/current/current.vue | 324 +++++++++++++ pages/tabBar/notice/detail.vue | 2 pages/tabBar/responsivity/villageResponsivity.vue | 159 +++++++ 13 files changed, 1,211 insertions(+), 104 deletions(-) diff --git a/pages.json b/pages.json index a5e30f8..a011a0f 100644 --- a/pages.json +++ b/pages.json @@ -42,6 +42,42 @@ } }, { + "path" : "pages/tabBar/responsivity/countyResponsivity", + "style" : + { + "navigationStyle": "custom", + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "app-plus": { + "scrollIndicator": "none" + } + } + }, + { + "path" : "pages/tabBar/responsivity/cityResponsivity", + "style" : + { + "navigationStyle": "custom", + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "app-plus": { + "scrollIndicator": "none" + } + } + }, + { + "path" : "pages/tabBar/responsivity/villageResponsivity", + "style" : + { + "navigationStyle": "custom", + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "app-plus": { + "scrollIndicator": "none" + } + } + }, + { "path" : "pages/tabBar/notice/measures", "style" : { @@ -54,6 +90,18 @@ } }, { + "path" : "pages/tabBar/responsivity/showMeasures", + "style" : + { + "navigationStyle": "custom", + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "app-plus": { + "scrollIndicator": "none" + } + } + }, + { "path" : "pages/tabBar/firstPage/firstPage", "style" : { diff --git a/pages/tabBar/count/count.vue b/pages/tabBar/count/count.vue index c7a50a8..7e57a8b 100644 --- a/pages/tabBar/count/count.vue +++ b/pages/tabBar/count/count.vue @@ -65,12 +65,13 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 45px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + 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{ text-align: center; diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue index 37cd53f..e0f559d 100644 --- a/pages/tabBar/current/current.vue +++ b/pages/tabBar/current/current.vue @@ -5,35 +5,125 @@ <!-- 状态栏占位 --> <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() { @@ -42,12 +132,69 @@ 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; @@ -63,23 +210,158 @@ 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> \ No newline at end of file diff --git a/pages/tabBar/examine/examine.vue b/pages/tabBar/examine/examine.vue index ee1d7d4..c23c6e1 100644 --- a/pages/tabBar/examine/examine.vue +++ b/pages/tabBar/examine/examine.vue @@ -13,36 +13,39 @@ </view> </view> <!-- 页面内容 --> - <view class="contentList"> + <view class="controlBar"> <view class="buttonGroup"> - <view style="display: flex;"> - <view class="buttonAll 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 class="buttonItem all" + :class="{ 'active': selectedSaleAnalysis === 'all'}" + @click="handleButtonClick({label: 'all',name: '全部'})"> + 全部 </view> - <view class="switchBtn"> - <text style="margin-right: 7px;">仅紧临</text> - <u-switch v-model="checked" size="20" @change="clickSwitch"></u-switch> + <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="examineList"> - <view class="listHead"> - <u-checkbox-group style="margin-left: 15px;"> - <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox>只显示待审核 + <view class="listHead"> + <view class="switchBtn"> + <u-checkbox-group> + <u-checkbox v-model="isReadOnly" :checked="isReadOnly" @change="chooseRead"></u-checkbox> </u-checkbox-group> + <text>只显示待审核</text> </view> + <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"> <view class="listContent" v-if="examineList.length > 0"> <view v-for="(item, index) in examineList" :key="index" class="itemContent"> <view class="content" @click="toDetail(item)"> @@ -64,11 +67,7 @@ </view> </view> <view v-else> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - margin-top="50%"> - </u-empty> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> </view> </view> </view> @@ -186,7 +185,7 @@ </script> -<style> +<style lang="scss" scoped> .box { display: flex; flex-direction: column; @@ -202,12 +201,13 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 45px; + 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{ text-align: center; @@ -219,7 +219,7 @@ .statusBar{ background-color:lightgrey; } -.contentList{ +/* .contentList{ display: flex; flex-direction: column; } @@ -241,56 +241,104 @@ 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: space-between; + } } .buttonItem{ - margin-left:5px; + width: calc(20% - 4px); color: white; display: flex; flex-direction: row; justify-content: center; align-items: center; - width: 47px; 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; } -.all { - background-color: rgb(17,204,33); -} .red { - background-color: 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: rgb(2, 167, 240); + background-color: #409EFF; + &.active{ + background: linear-gradient(#3a8ee6,#44a9ff); + } } .switchBtn{ display: flex; align-items: center; } -.listHead{ - display: flex; - align-items: center; - background-color:lightgrey; - height: 35px; -} +// .listHead{ +// display: flex; +// align-items: center; +// background-color:lightgrey; +// height: 35px; +// } .listContent{ display: flex; flex-direction: column; - padding: 10px 10px; + margin: 0 12px; + background: #fff; + border-radius: 5px; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); } .itemContent{ font-size: 16px; - color: gray; - margin-top: 10px; - border-bottom: 1px solid lightgrey; + color: #333; + margin-top: 15px; + padding: 0 12px 15px; + border-bottom: 1px solid #ebebeb; } .content{ @@ -302,4 +350,10 @@ margin-top: 5px; margin-bottom: 10px; } +.examineList{ + margin-top: 12px; + height: calc(100vh - 266px); + overflow: hidden; + overflow-y: scroll; +} </style> \ No newline at end of file diff --git a/pages/tabBar/firstPage/firstPage.vue b/pages/tabBar/firstPage/firstPage.vue index 010e28c..4087820 100644 --- a/pages/tabBar/firstPage/firstPage.vue +++ b/pages/tabBar/firstPage/firstPage.vue @@ -9,7 +9,7 @@ <view class="barText">首页</view> </view> </view> - <view style="display: flex;flex-direction: column;padding: 10px 15px;"> + <view class="list"> <view class="first" @click="goExamine"> 预警审核 </view> @@ -84,15 +84,14 @@ <style> .navBarBox .navBar { - background-color:lightgrey; - height: 45px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - font-size: 16px; - /* text-align: center; */ - font-weight: 600; + 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); + } .fix{ position: sticky; @@ -105,6 +104,12 @@ .statusBar{ background-color:lightgrey; } +.list{ + display: flex; + flex-direction: column; + padding: 10px 15px; + +} .first{ width: 100%; height: 110px; @@ -117,4 +122,9 @@ font-size: 18px; margin-top: 40px; } +.barText{ + text-align: center; + font-size: 16px; + font-weight: 600; +} </style> \ No newline at end of file diff --git a/pages/tabBar/information/information.vue b/pages/tabBar/information/information.vue index 3fcffd5..89f5e68 100644 --- a/pages/tabBar/information/information.vue +++ b/pages/tabBar/information/information.vue @@ -41,11 +41,7 @@ </view> </view> <view v-else> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - margin-top="50%"> - </u-empty> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> </view> </view> </view> diff --git a/pages/tabBar/notice/detail.vue b/pages/tabBar/notice/detail.vue index b08bcb3..e7fdced 100644 --- a/pages/tabBar/notice/detail.vue +++ b/pages/tabBar/notice/detail.vue @@ -32,7 +32,7 @@ <view class="attache" v-if="isAllImg == 'no'"> <view v-for="(item, index) in detailData.attachments" :key="index" > <view style="display: flex;margin-top: 10px;" v-if="item.suffix == 'jpg'|| item.suffix =='jpeg' || item.suffix =='png'"> - <image @click="previewSqs(item)" :src="item.attachment" style="width: 100rpx; height: 100rpx;margin-left: 5rpx;border: 3px solid #ccc;margin-right: 3px;"></image> + <image @click="previewSqs(item,index)" :src="item.attachment" style="width: 100rpx; height: 100rpx;margin-left: 5rpx;border: 3px solid #ccc;margin-right: 3px;"></image> </view> <view style="display: flex;margin-top: 10px;" @click="openFile(item)" v-else> <u-icon name="attach" color="#2979ff" size="20"></u-icon> {{item.attachementName}} diff --git a/pages/tabBar/notice/notice.vue b/pages/tabBar/notice/notice.vue index 865b7bf..926f19c 100644 --- a/pages/tabBar/notice/notice.vue +++ b/pages/tabBar/notice/notice.vue @@ -82,11 +82,7 @@ </view> </view> <view v-else> - <u-empty - mode="data" - icon="http://cdn.uviewui.com/uview/empty/data.png" - margin-top="50%"> - </u-empty> + <u-empty margin-top="40%" text="数据为空" mode="data"></u-empty> </view> </view> </view> @@ -166,6 +162,7 @@ }, methods: { getNoticeList() { + this.noSpeak = 0; this.data.searchParams.readStatus = this.isReadOnly ? 0 : null; 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; diff --git a/pages/tabBar/responsivity/cityResponsivity.vue b/pages/tabBar/responsivity/cityResponsivity.vue new file mode 100644 index 0000000..919e07d --- /dev/null +++ b/pages/tabBar/responsivity/cityResponsivity.vue @@ -0,0 +1,159 @@ +<template> + <view class="box"> + <!-- 自定义导航栏 --> + <view class="navBarBox fix"> + <!-- 状态栏占位 --> + <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> + </view> + </view> + <view class="responseCard"> + <table class="table"> + <thead class="head"> + <tr> + <th></th> + <th>叫应情况</th> + <th>乡镇叫应率</th> + <th>详情</th> + </tr> + </thead> + <tbody class="tableBody"> + <tr v-for="(item, index) in tableData" :key="index" > + <td align="center" width="90px">{{ item.unit }}</td> + <td align="center">{{ item.response }}</td> + <td align="center">{{ item.responsivity }}</td> + <td> + <u-button + size="mini" + type="text" + style="color: sandybrown" + @click="toVillage(item)" + >叫应详情 + </u-button></td> + </tr> + </tbody> + </table> + </view> + </view> +</template> + +<script> + export default { + data() { + return { + page: 'pages/tabBar/count/count', + statusBarHeight: '', + tableData: [ + { + unit:'伊犁州', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州', + response: '1', + responsivity: '88.9%' + } + ] + } + + }, + onLoad() { + //获取手机状态栏高度 + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + uni.hideTabBar(); + }, + methods: { + goBack() { + console.log("1111") + uni.navigateTo({ + url:'/pages/tabBar/responsivity/countyResponsivity' + }); + }, + toVillage(item) { + uni.navigateTo({ + url: `/pages/tabBar/responsivity/villageResponsivity?data=` + encodeURIComponent(JSON.stringify(item)) + }) + } + } + } + +</script> + +<style lang='scss' scoped> +.box { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} +.fix{ + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + 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); +} +.barText{ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.statusBar{ + background-color:lightgrey; +} +.responseCard{ + display: flex; + flex-direction: column; + background: #fff; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + margin: 12px 12px 20px; + border-radius: 5px; + padding: 30px 12px; +} +.table{ + .head{ + color: white; + line-height: 35px; + background-color: rgb(66, 157, 218); + } + .tableBody{ + color: black; + background-color: rgb(207, 223, 241); + line-height: 35px; + } + tr:nth-child(odd+1) { + background-color: rgb(207, 223, 241); /* 设置奇数行颜色 */ + } + tr:nth-child(even) { + background-color: rgb(233, 239, 248); /* 设置偶数行颜色 */ + } +} +</style> \ No newline at end of file diff --git a/pages/tabBar/responsivity/countyResponsivity.vue b/pages/tabBar/responsivity/countyResponsivity.vue new file mode 100644 index 0000000..75d12f8 --- /dev/null +++ b/pages/tabBar/responsivity/countyResponsivity.vue @@ -0,0 +1,161 @@ +<template> + <view class="box"> + <!-- 自定义导航栏 --> + <view class="navBarBox fix"> + <!-- 状态栏占位 --> + <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> + </view> + </view> + <view class="responseCard"> + <table class="table"> + <thead class="head"> + <tr> + <th></th> + <th>叫应情况</th> + <th>县市叫应率</th> + <th>详情</th> + </tr> + </thead> + <tbody class="tableBody"> + <tr v-for="(item, index) in tableData" :key="index" > + <td align="center" width="90px">{{ item.unit }}</td> + <td align="center">{{ item.response }}</td> + <td align="center">{{ item.responsivity }}</td> + <td> + <u-button + size="mini" + type="text" + style="color: sandybrown" + @click="toCity(item)" + >叫应详情 + </u-button> + </td> + </tr> + </tbody> + </table> + </view> + </view> +</template> + +<script> + export default { + data() { + return { + page: 'pages/tabBar/count/count', + statusBarHeight: '', + tableData: [ + { + unit:'伊犁州', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州1', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州2', + response: '1', + responsivity: '88.9%' + }, + { + unit:'伊犁州3', + response: '1', + responsivity: '88.9%' + } + ] + } + + }, + onLoad() { + //获取手机状态栏高度 + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + uni.hideTabBar(); + }, + methods: { + goBack() { + console.log("1111") + uni.switchTab({ + url:'/pages/tabBar/current/current' + }); + }, + toCity(item) { + console.log("item",item) + uni.navigateTo({ + url: `/pages/tabBar/responsivity/cityResponsivity?data=` + encodeURIComponent(JSON.stringify(item)) + }) + } + } + } + +</script> + +<style lang='scss' scoped> +.box { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} +.fix{ + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + 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); +} +.barText{ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.statusBar{ + background-color:lightgrey; +} +.responseCard{ + display: flex; + flex-direction: column; + background: #fff; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + margin: 12px 12px 20px; + border-radius: 5px; + padding: 30px 12px; +} +.table{ + .head{ + color: white; + line-height: 35px; + background-color: rgb(66, 157, 218); + } + .tableBody{ + color: black; + background-color: rgb(207, 223, 241); + line-height: 35px; + } + tr:nth-child(odd+1) { + background-color: rgb(207, 223, 241); /* 设置奇数行颜色 */ + } + tr:nth-child(even) { + background-color: rgb(233, 239, 248); /* 设置偶数行颜色 */ + } +} +</style> \ No newline at end of file diff --git a/pages/tabBar/responsivity/showMeasures.vue b/pages/tabBar/responsivity/showMeasures.vue new file mode 100644 index 0000000..27dae5b --- /dev/null +++ b/pages/tabBar/responsivity/showMeasures.vue @@ -0,0 +1,238 @@ +<template> + <view> + <!-- 自定义导航栏 --> + <view class="navBarBox fix"> + <!-- 状态栏占位 --> + <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view> + <!-- 真正的导航栏内容 --> + <view class="navBar"> + <u-icon name="arrow-left" color="black" size="17" @click="goBack" /> + <view class="barText">响应措施反馈</view> + </view> + </view> + <view class="measureCard"> + <view class="head"> + <u-form :model="form" ref="uForm" label-width="100px"> + <u-form-item label="信息标题 :" ></u-form-item> + <u-form-item label="发布单位 :"></u-form-item> + <u-form-item label="发布时间 :"></u-form-item> + <u-form-item label="反馈时间 :"></u-form-item> + </u-form> + </view> + <view class="first"> + <text style="font-size: 16px;margin-bottom: 20px;font-weight: 600;">基础措施</text> + <view v-for="(item, index) in measureList" :key="index" style="margin-left: 18px;margin-bottom:10px; font-size:16px;"> + <text style="margin-top: 15px;">{{item.name}}</text> + </view> + </view> + <view class="second"> + <text style="font-size: 16px;margin-bottom: 20px;font-weight: 600;">补充措施</text> + <u--textarea style="margin-top: -5px;" v-model="measures" disabled="true" placeholder="请输入内容" ></u--textarea> + </view> + <view class="third"> + <view v-for="(item, index) in images" :key="index"> + <u-image @click="previewSqs(item,index)" style="margin: 5px; 5px" width="230rpx" height="230rpx" :src="item.url"></u-image> + </view> + </view> + </view> + </view> +</template> + +<script> + export default { + components:{ + + }, + data() { + return { + statusBarHeight: [], + fileList1: [], + nameList: [], + checkboxValue1: '', + measures: "111", + type: 'textarea', + border: true, + height: 100, + autoHeight: true, + measureList: [ + { + name: '苹果', + }, + { + name: '香蕉', + }, + { + name: '橙子', + } + ], + images: [ + { + url: 'https://img2.baidu.com/it/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800' + }, + + ] + } + }, + onLoad() { + //获取手机状态栏高度 + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + uni.hideTabBar(); + }, + methods: { + goBack() { + uni.navigateBack({ + url:'/pages/tabBar/responsivity/villageResponsivity' + }); + }, + + checkboxChange(n) { + console.log('change', n); + }, + // 删除图片 + deletePic(event) { + this[`fileList${event.name}`].splice(event.index, 1) + this.nameList.splice(event.index,1) + console.log("name",this.nameList) + }, + // 新增图片 + async afterRead(event) { + // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式 + let lists = [].concat(event.file) + let fileListLen = this[`fileList${event.name}`].length + console.log("list",lists) + lists.map((item) => { + this.nameList.push({name: item.name}); + this[`fileList${event.name}`].push({ + ...item, + status: 'uploading', + message: '上传中' + }) + }) + console.log("nameList",this.nameList) + for (let i = 0; i < lists.length; i++) { + const result = await this.uploadFilePromise(lists[i].url) + let item = this[`fileList${event.name}`][fileListLen] + this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { + status: 'success', + message: '', + url: result + })) + fileListLen++ + } + }, + uploadFilePromise(url) { + return new Promise((resolve, reject) => { + let a = uni.uploadFile({ + url: 'http://www.example.com', // 仅为示例,非真实的接口地址 + filePath: url, + name: 'file', + formData: { + user: 'test' + }, + success: (res) => { + setTimeout(() => { + resolve(res.data.data) + }, 1000) + } + }); + }) + }, + //预览图片 + previewSqs(item,index) { + let imgs = []; + for (let i = 0; i < this.images.length; i++) { + imgs.push(this.images[i].url) + } + console.log("预览",imgs) + uni.previewImage({ + urls: imgs, + current: index, + indicator: 'number', + loop: true + }) + }, + } + } + +</script> + +<style lang='scss' scoped> +.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); +} +.barText{ + /* margin-left: 20px; */ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} + +.measureCard{ + display: flex; + flex-direction: column; + background: #fff; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + margin: 12px 12px 20px; + border-radius: 5px; + padding: 30px 12px; +} +.fix{ + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + z-index: 1; +} +.statusBar{ + background-color:lightgrey; +} +.first{ + display: flex; + flex-direction: column; +} +.second{ + display: flex; + flex-direction: column; + margin-top: 50px; +} +.third{ + display: flex; + flex-wrap: wrap; + margin-top: 30px; + margin-bottom: 50px; +} +/deep/ .u-upload__button{ + background-color: white; +} +.pic{ + display: flex; + flex-direction: column; + background-color: rgb(242,242,242); + margin-top: 5px; + font-size: 14px; +} + +.measures{ + margin-top: 50px 12px 0; + padding: 0 12px; + + .measureBtn{ + border-radius: 5px; + box-shadow: 0 3px 12px rgba(33,239,102,0.4); + } +} +.head{ + margin-top: -20px; + margin-bottom: 20px; + line-height: 15px; +} +</style> \ No newline at end of file diff --git a/pages/tabBar/responsivity/villageResponsivity.vue b/pages/tabBar/responsivity/villageResponsivity.vue new file mode 100644 index 0000000..0ee4a02 --- /dev/null +++ b/pages/tabBar/responsivity/villageResponsivity.vue @@ -0,0 +1,159 @@ +<template> + <view class="box"> + <!-- 自定义导航栏 --> + <view class="navBarBox fix"> + <!-- 状态栏占位 --> + <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> + </view> + </view> + <view class="responseCard"> + <table class="table"> + <thead class="head"> + <tr> + <th></th> + <th>叫应情况</th> + <th>叫应时间</th> + <th>反馈</th> + </tr> + </thead> + <tbody class="tableBody"> + <tr v-for="(item, index) in tableData" :key="index" > + <td align="center" width="90px">{{ item.unit }}</td> + <td align="center">{{ item.response }}</td> + <td align="center" width="90px">{{ item.responseTime }}</td> + <td><u-button + size="mini" + style="color:blue" + type="text" + @click="review(item)" + >查看 + </u-button> + </td> + </tr> + </tbody> + </table> + </view> + </view> +</template> + +<script> + export default { + data() { + return { + page: 'pages/tabBar/count/count', + statusBarHeight: '', + tableData: [ + { + unit:'萨依布依街道', + response: '1', + responseTime: '6.19 13:00' + }, + { + unit:'伊犁州', + response: '1', + responseTime: '6.19 13:00' + }, + { + unit:'伊犁州', + response: '1', + responseTime: '6.19 13:00' + }, + { + unit:'伊犁州', + response: '1', + responseTime: '6.19 13:00' + } + ] + } + + }, + onLoad() { + //获取手机状态栏高度 + this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; + uni.hideTabBar(); + }, + methods: { + goBack() { + console.log("1111") + uni.switchTab({ + url:'/pages/tabBar/current/current' + }); + }, + review(item){ + uni.navigateTo({ + url:'/pages/tabBar/responsivity/showMeasures' + }); + } + } + } + +</script> + +<style lang='scss' scoped> +.box { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} +.fix{ + position: sticky; + top: 0; + left: 0; + right: 0; + width: 100%; + 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); +} +.barText{ + text-align: center; + width: 85%; + font-size: 16px; + /* text-align: center; */ + font-weight: 600; +} +.statusBar{ + background-color:lightgrey; +} +.responseCard{ + display: flex; + flex-direction: column; + background: #fff; + box-shadow: 0 3px 12px rgba(0,0,0,0.05); + margin: 12px 12px 20px; + border-radius: 5px; + padding: 30px 12px; +} +.table{ + .head{ + color: white; + line-height: 35px; + background-color: rgb(66, 157, 218); + } + .tableBody{ + color: black; + background-color: rgb(207, 223, 241); + line-height: 35px; + } + tr:nth-child(odd+1) { + background-color: rgb(207, 223, 241); /* 设置奇数行颜色 */ + } + tr:nth-child(even) { + background-color: rgb(233, 239, 248); /* 设置偶数行颜色 */ + } +} +</style> \ No newline at end of file diff --git a/pages/tabBar/weather/weather.vue b/pages/tabBar/weather/weather.vue index 9e2b3f6..0ad52a8 100644 --- a/pages/tabBar/weather/weather.vue +++ b/pages/tabBar/weather/weather.vue @@ -66,12 +66,14 @@ z-index: 1; } .navBarBox .navBar { - background-color:lightgrey; - height: 45px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; + 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{ text-align: center; -- Gitblit v1.9.2