新增页面

zhouwenxuan

2023-07-25 22f0e04d34f19aac857e25627343dff9a2542057

新增页面

 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" :
            {

 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;

 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>

 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>

 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>

 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>

 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}}

 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;

 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>

 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>

 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>

 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>

 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;