气象样式

zhouwenxuan

2023-07-21 19a1db82b32b559fb805408474ff7e439ec27d96

 pages/tabBar/notice/notice.vue

@@ -7,13 +7,20 @@
         <!-- 真正的导航栏内容 -->
         <view class="navBar" >
            <view class="barText">{{user.name}}收到的工作通知</view>
            <!-- <view class="barText">{{registerID}}</view> -->
            <!-- <view style="flex: 1;" @click="loginOut">退出</view> -->
         </view>
      </view>
      <!-- 页面内容 -->
      <view style="display: flex;flex-direction: column;">
      <scroll-view scroll-y  :style="{height: 900 + 'px'}">
      <view style="display: flex;flex-direction: column;margin-bottom: 10px;">
         <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,
                   'red': button.label === 'red',
@@ -25,7 +32,7 @@
               </view>
            </view>
            <view class="switchBtn">
               <text style="margin-right: 7px;">是否紧临</text>
               <text style="margin-right: 7px;">仅紧临</text>
               <u-switch v-model="checked" size="20" @change="clickSwitch"></u-switch>
            </view>
         </view>
@@ -38,11 +45,11 @@
            <view class="listContent" v-if="noticeList.length > 0" >
               <view v-for="(item, index) in noticeList" :key="index" class="itemContent" >
                  <view class="content" v-if="item.isRead" >
                        <text style="color:rgb(17, 204, 33);" @click="toDetail(item)">[已读]</text>
                        <text style="color:rgb(17, 204, 33);" @click="toDetail(item)">[已叫应]</text>
                        <text @click="toDetail(item)">[{{item.colorContent}}]</text>
                        <text @click="toDetail(item)">{{item.title}},{{item.content}}</text>
                        <view v-if="item.isRead" style="float: right; width: 80px;margin-top: 3px;">
                           <u-button @click="toDetail(item)"v-if="item.buttonContent == '已叫应'" size="mini" style="margin-bottom: 10px;background-color:rgb(17, 204, 33);color: white;">
                           <!-- <u-button @click="toDetail(item)"v-if="item.buttonContent == '已叫应'" size="mini" style="margin-bottom: 10px;background-color:rgb(17, 204, 33);color: white;">
                              {{item.buttonContent}}
                           </u-button>
                           <u-button v-else-if="item.buttonContent == '待叫应'" type="error" size="mini" style="margin-bottom: 10px;" @click="openDialog(item)">
@@ -50,16 +57,16 @@
                           </u-button>
                           <u-button @click="toDetail(item)" v-else type="error" size="mini" style="margin-bottom: 10px;">
                              {{item.buttonContent}}
                           </u-button>
                           </u-button> -->
                        </view>
                  </view>
                  <view class="contentNoRead" v-else>
                        <u-badge :is-dot="true" type="error" style="position: absolute;"></u-badge>
                        <text style="color: red;margin-left:10px;" @click="toDetail(item)">[未读]</text>
                        <text style="color: red;margin-left:10px;" @click="toDetail(item)">[未叫应]</text>
                        <text @click="toDetail(item)">[{{item.colorContent}}]</text>
                        <text @click="toDetail(item)">{{item.title}},{{item.content}}</text>
                        <view style="float: right; width: 80px;margin-top: 3px;">
                           <u-button @click="toDetail(item)" v-if="item.buttonContent == '已叫应'" size="mini" style="margin-bottom: 10px;background-color:rgb(17, 204, 33);color: white;">
                           <!-- <u-button @click="toDetail(item)" v-if="item.buttonContent == '已叫应'" size="mini" style="margin-bottom: 10px;background-color:rgb(17, 204, 33);color: white;">
                              {{item.buttonContent}}
                           </u-button>
                           <u-button  v-else-if="item.buttonContent == '未叫应'" type="error" size="mini" style="margin-bottom: 10px;" @click="openDialog(item)">
@@ -67,7 +74,7 @@
                           </u-button>
                           <u-button @click="toDetail(item)" v-else type="error" size="mini" style="margin-bottom: 10px;">
                              {{item.buttonContent}}
                           </u-button>
                           </u-button> -->
                        </view>
                  </view>
               </view>
@@ -81,6 +88,8 @@
            </view>
         </view>
      </view>
      </scroll-view>
      <view class="lastbottom">共<span style="font-weight: 600;"> {{noticeList.length}} </span>条 未叫应<span style="font-weight: 600;">{{noSpeak}}</span> 条</view>
      <dia ref="showDialog" @close="close"></dia>
      <tabBar :currentPagePath="page" :tabBarList="tabBarLists"></tabBar>
   </view>
@@ -97,18 +106,19 @@
      },
      data() {
         return {
            noSpeak: 0,
            tabBarLists: [],
            // 状态栏高度
            statusBarHeight: 0,
            checked: true,
            checked: false,
            isReadOnly: false,
            showDialog: false,
            data: {
               pageIndex: 1,
               pageSize: 1000,
               pageSize: 10000000,
               searchParams: {
                  emergType: 1,//1-紧急；2-常规
                  warningLevel: 1,//1-红色预警；2-橙色预警；3-黄色预警；4-蓝色预警
                  emergType: null,//1-紧急；2-常规
                  warningLevel: null,//1-红色预警；2-橙色预警；3-黄色预警；4-蓝色预警
                  readStatus: null//0-未读，1-已读
               }
            },
@@ -129,21 +139,22 @@
               name: '蓝'
            },
            ],
            selectedSaleAnalysis: 'red',
            selectedSaleAnalysis: 'all',
            noticeListCopy: [],
            noticeListCopyRead:[],
            noticeList: [],
            user: {
               name: ''
            },
            page: 'pages/tabBar/notice/notice'
            page: 'pages/tabBar/notice/notice',
            registerID: ''
         }
      },
      onShow () {
         this.tabBarLists = uni.getStorageSync('tabBarList');
         this.user.name = uni.getStorageSync('user').realName + uni.getStorageSync('user').name;
         // this.selectedSaleAnalysis = 'red',
         this.user.name = uni.getStorageSync('user').realName;
         this.getNoticeList();
         // this.registerID = uni.getStorageSync('registrationID');
         // this.page = this.$route.meta.pagePath;
      },
      onLoad() {
@@ -155,15 +166,18 @@
      methods: {
         getNoticeList() {
            this.data.searchParams.readStatus = this.isReadOnly ? 0 : null;
            this.data.searchParams.emergType = this.checked ? 1 : 2;
            this.data.searchParams.warningLevel = this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4;
            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;
            getNotice(this.data).then(res => {
               console.log("res",res);
               console.log("dddddr",res);
               if (res.code == 100) {
                  this.noticeList = res.data ? res.data : [];
                  this.noticeListCopy = this.noticeList;
                  if (this.noticeList.length > 0) {
                     this.noticeList.forEach((item, index) => {
                        if(item.readStatus == 0){
                           this.noSpeak++;
                        }
                        this.noticeList[index].isRead = item.readStatus == 1 ? true : false;
                        this.noticeList[index].colorContent = item.warningLevel == 1 ? '红色预警': item.warningLevel == 2 ? '橙色预警': item.warningLevel == 3 ? '黄色预警':'蓝色预警'; 
                        this.noticeList[index].buttonContent = item.responseStatus == 1 ? '待叫应': item.responseStatus == 2 ? '已叫应' : '超时未叫应';
@@ -187,6 +201,7 @@
         },
         toDetail(item) {
            console.log("item",item)
            //改为修改叫应状态
            if (item.readStatus === 0) {
               this.updateReadStatus(item);
            }
@@ -285,8 +300,24 @@
   height: 30px;
   border-radius: 5px;
}
.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;
}
.all {
   background-color: rgb(17,204,33);
}
.active {
   border: 1px solid gray;
   border: 1.5px solid #8d8d8d;
}
.red {
   background-color: red;
@@ -327,8 +358,21 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   margin-bottom: 10px;
}
.contentNoRead{
   font-size: 14px;
   margin-bottom: 10px;
}
.lastbottom{
   width: 100%;
   height: 100px;
   background-color: white;
   text-align: center;
   line-height: 50px;
   position: fixed;
   bottom: var(--window-bottom, 0);
   z-index: 99;
   font-size: 16px;
}
</style>