Web_TracerMethodology/pages/situationsCenter/situationsCenter.vue

<template>
  <view class="situationsCenter-page">
    <view class="calender-remind" @click="toMessagePage">
      <image
        :src="`/static/message-${messageType ? 'unread' : 'read'}.png`"
      ></image>
    </view>
    <view class="situation-list">
      <view class="search-box">
        <view
          class="search-model"
          @click="openSearchBar"
          v-show="isSearchBoxShow"
        >
          <image class="search-pic" src="/static/search.png"></image>
        </view>
        <view class="search-bar" v-show="isSearchBarShow">
          <view class="search-item">
            <image class="search-pic" src="/static/search.png"></image>
            <image
              class="text-clear"
              @click="valueEmpty"
              src="/static/text-clear.png"
            ></image>
            <input
              class="searh-input"
              v-model="inputValue"
              @confirm="searchByKeywords($event)"
              placeholder="搜索项目"
              placeholder-style="font-weight: 400,color: #A1A7B3"
            />
          </view>
          <text class="cancel-text" @click="closeSearchBar">取消</text>
        </view>
      </view>
      <scroll-view
        class="scroll-box"
        scroll-y="true"
        @scrolltolower="toLower"
        lower-threshold="184"
      >
        <view class="content" :style="{height: situationList.length === 0 ? '100%' : 'auto'}">
          <view
            class="situation"
            v-for="(item, index) in situationList"
            :key="item.id"
            @click="gotoDetail(item.situationID)"
          >
            <image
              class="situation-topic"
              :src="`/static/${
                item.topic ? 'situation-case' : 'situation-system'
              }.png`"
            ></image>
            <view class="title">
              <text class="title-name">{{ item.name }}</text>
            </view>
            <view class="check-group">
              <text class="group-text">
                {{
                  nowPermission == 2
                    ? "剩余" + item.toDistributeCount + "个待分配"
                    : item.checkGroupName
                }}</text
              >
            </view>
            <view class="row">
              <image
                class="situation-check"
                src="/static/situation-check.png"
              ></image>
              <text class="text">{{ item.checkStatus }}</text>
            </view>
            <view class="row">
              <image
                class="situation-time"
                src="/static/situation-time.png"
              ></image>
              <text class="text">{{ item.nextCheckTime }}</text>
            </view>
          </view>
					<tm-no-data v-if="situationList.length === 0" 
						:textArr="['还没有情境', '快点击右下方按钮新建一个吧']" />
        </view>
      </scroll-view>
    </view>
    <view v-if="nowPermission == 1" class="situaions-add" @click="gotoCreate">
      <image class="add-pic" src="/static/situation-add.png"></image>
    </view>
    <tm-tabbar :permission="nowPermission" />
  </view>
</template>
/**
 * 情境中心
 */
<script>
import websocket from "../../utils/ws.js"; //引入websocket
export default {
  data() {
    return {
      page: 1, //页数
      inputValue: "",
      nowPermission: "",
      isSearchBarShow: false, //搜索栏是否可见
      isSearchBoxShow: true, //搜索图标是否可见
      situationList: [], //情境卡片列表
      totalCount: "", //返回数据的总条数
      refTimer: null,
      isInitWs: null,
      messageType: null,
      num: 1,
      timer: null,
      // ws接口参数
      initParams: {}
    };
  },
  created: function () {
    this.nowPermission = uni.getStorageSync("nowPermission");
    this.init(true);
    this.refTimer = setInterval(() => {
      this.isInitWs = websocket.ws ? false : true;
      const {hiId, user, permission} = this.initParams;
      this.isInitWs && this.initWebsocket(hiId, user, permission);
    }, 3 * 60 * 1000);
    // this.messStatus();
  },
  beforeDestroy() {
    // 关闭ws连接
    websocket.close();
    clearInterval(this.refTimer);
    clearTimeout(this.timer);
  },
  // watch:{
  // 	  "$route":{
  // 		  handler(route){
  // 			  this.messStatus();
  // 		  }
  // 	  }
  // },
  methods: {
    openSearchBar() {
      this.isSearchBarShow = true;
      this.isSearchBoxShow = false;
    },
    closeSearchBar() {
      this.isSearchBarShow = false;
      this.isSearchBoxShow = true;
    },
    valueEmpty() {
      this.inputValue = "";
    },
    gotoCreate() {
      uni.navigateTo({
        url: "/pages/creatingSituations/creatingSituations",
      });
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: `/pages/situationDetail/situationDetail?situationId=${id}`,
      });
    },
    getSituationList(data, callback) {
      this.$store
        .dispatch({
          type: "situationsCenter/commActions",
          payload: {
            data,
            key: "situationList",
          },
        })
        .then((data) => {
          if (data) callback(data);
        });
    },
    searchByKeywords(event) {
      let data = {
        pageNum: 1,
        pageSize: 10,
        keyword: event.target.value,
      };
      this.getSituationList(data, (data) => {
        this.situationList = [];
        this.createSituationList(data.list);
      });
    },
    createSituationList(list = []) {
      list.map((item, index) => {
        this.situationList.push({
          name: item.name,
          checkStatus: item.checkStatus,
          nextCheckTime: item.nextCheckTime,
          checkGroupName: item.checkGroupName,
          topic: item.topic == 0 ? true : false,
          situationID: item.id,
          toDistributeCount: item.toDistributeCount,
        });
      });
    },
    toLower() {
      uni.showToast({
        title: "加载中....",
        icon: "loading",
        duration: 2000,
      });
      let count = this.situationList.length;
      if (this.totalCount != count) {
        this.page++;
        let data = {
          pageNum: this.page,
          pageSize: 10,
        };
        this.getSituationList(data, (data) => {
          this.createSituationList(data.list);
          let hiId = uni.getStorageSync("hiId");
          let user = uni.getStorageSync("id");
          let permission = uni.getStorageSync("nowPermission");
          this.initParams = {
            hiId,
            user,
            permission
          };
          this.isInitWs && this.initWebsocket(hiId, user, permission);
        });
      } else {
        uni.showToast({
          title: "没有更多数据了",
          icon: "none",
          duration: 1000,
        });
      }
    },
    toMessagePage() {
      // this.messageType = false;
      uni.navigateTo({
        url: `/pages/messages/messages`,
      });
    },
    init(isInitWs) {
      this.isInitWs = isInitWs;
      this.initSituationList();
    },
    initWebsocket(hiId, user, permission) {
      websocket.url = `ws://192.168.1.45:8088/imed/pfm/websocket/${hiId}/${user}/${permission}`;
      websocket.createWebSocket(this.resolverWsData.bind(this));
    },
    // 解析websocket返回数据
    resolverWsData(type) {
      let types = JSON.parse(type);
      switch (types.type) {
        case "TO_READ":
          this.messageType = true;
          break;
        default:
          this.messageType = false;
          break;
      }
    },
    initSituationList() {
      let data = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getSituationList(data, (data) => {
        this.totalCount = data.totalCount;
        this.createSituationList(data.list);
        let hiId = uni.getStorageSync("hiId");
        let user = uni.getStorageSync("id");
        let permission = uni.getStorageSync("nowPermission");
        this.initParams = {
          hiId,
          user,
          permission
        };
        this.isInitWs && this.initWebsocket(hiId, user, permission);
      });
    },
    // messStatus(){
    // 	let num = 1;
    // 	let timer = setInterval(()=>{
    // 	  this.$store.dispatch({
    // 		  type: "calendar/commActions",
    // 		  payload: {
    // 			key: "messagesList",
    // 			data: {
    // 			  pageNum: num,
    // 			  pageSize: 100,
    // 			},
    // 		  },
    // 		}).then((res)=>{
    // 			if(res && res.list.length == 0){
    // 				clearInterval(timer)
    // 			}else if(res && res.list.length != 0){
    // 				res.list.map((item)=>{
    // 					if(!item.readStatus){
    // 						this.messageType = true;
    // 						return;
    // 					}
    // 				})
    // 			}
    // 		})
    // 	  num++;
    // 	},200)
    // }
  },
};
</script>

<style lang="less">
.situationsCenter-page {
  height: 100%;
  .calender-remind {
    width: 62.5rpx;
    height: 62.5rpx;
    position: fixed;
    right: 25rpx;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    z-index: 2;
    image {
      margin-left: 17.5rpx;
      margin-top: 16.87rpx;
      width: 27.5rpx;
      height: 28.75rpx;
    }
  }
  .situation-list {
    position: relative;
    height: 100%;
    .search-box {
      position: fixed;
      left: 25rpx;
      top: 0rpx;
      z-index: 2;
      .search-model {
        height: 62.5rpx;
        width: 62.5rpx;
        background-color: #ffffff;
        text-align: center;
        border-radius: 50%;
        box-shadow: 0px 10px 10px 0px rgba(217, 221, 228, 0.5);
        border: 1px solid #e6eaf2;
        opacity: 0.85;
        .search-pic {
          width: 27.5rpx;
          height: 27.5rpx;
          margin-top: 17.5rpx;
        }
      }
      .search-bar {
        background-color: #ffffff;
        width: 700rpx;
        height: 62.5rpx;
        top: 31.25rpx;
        position: absolute;
        z-index: 2;
        .search-item {
          background-color: #ffffff;
          width: 593.75rpx;
          height: 62.5rpx;
          float: left;
          border-radius: 6.25rpx;
          border: 1.25rpx solid #f0f2f7;
          .search-pic {
            width: 21.87rpx;
            height: 21.87rpx;
            margin-left: 12.5rpx;
            margin-top: 20.62rpx;
            float: left;
          }
          .searh-input {
            background-color: #ffffff;
            width: 525rpx;
            height: 55rpx;
            font-size: 22.5rpx;
            float: right;
            margin-top: 3.75rpx;
            margin-left: 3.12rpx;
          }
          .text-clear {
            width: 21.87rpx;
            height: 21.87rpx;
            float: right;
            margin-top: 20.62rpx;
            margin-right: 6.25rpx;
          }
        }
        .cancel-text {
          font-size: 22.5rpx;
          line-height: 62.5rpx;
          color: #a1a7b3;
          margin-right: 31.25rpx;
          float: right;
        }
      }
    }

    .scroll-box {
      width: 100%;
      height: calc(100% - 87.5rpx);
      .content {
        display: flex;
        flex-flow: row wrap;
        padding-bottom: 25rpx;
        .situation {
          height: 187.5rpx;
          width: 337.5rpx;
          background: #ffffff;
          box-shadow: 0px 6px 20px 0px rgba(0, 13, 51, 0.1);
          border-radius: 8px;
          margin-left: 25rpx;
          margin-top: 25rpx;

          .situation-topic {
            width: 62.5rpx;
            height: 25rpx;
            float: right;
          }
          .title {
            height: 22.5rpx;
            margin-left: 20rpx;
            margin-top: 25rpx;
            display: flex;
            align-items: center;
            .title-name {
              font-size: 22.5rpx;
              font-family: SourceHanSansCN-Bold, SourceHanSansCN;
              font-weight: bold;
              color: #292c33;
            }
          }
          .check-group {
            margin-left: 20rpx;
            margin-top: 15rpx;
            margin-bottom: 25rpx;
            height: 17.5rpx;
            display: flex;
            align-items: center;
            .group-text {
              font-size: 17.5rpx;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;
              color: #666e80;
            }
          }
          .row {
            margin-left: 20rpx;
            margin-bottom: 17.5rpx;
            display: flex;
            align-items: center;
            height: 20rpx;
            .situation-check {
              width: 20rpx;
              height: 20rpx;
            }
            .situation-time {
              width: 20rpx;
              height: 20rpx;
            }
            .text {
              font-size: 20rpx;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;
              color: #292c33;
              margin-left: 11.25rpx;
            }
          }
        }
      }
    }
  }
  .situaions-add {
    position: fixed;
    right: 25rpx;
    bottom: 130rpx;
    .add-pic {
      width: 75rpx;
      height: 75rpx;
    }
  }
}
</style>