+websocket推送接收

liuyg

2022-03-28 a569f67c51e405796c85086ae8ed79f1dee0b250

+websocket推送接收

 pages/grabOrders/grabOrdersMain/business.vue

@@ -1,349 +1,324 @@
<template>
  <view class="container">
    <view class="head">
      <u-navbar
        :is-fixed="false"
        :border-bottom="false"
        :is-back="true"
        back-icon-name="arrow-leftward"
        back-icon-color="#fff"
        back-icon-size="35"
        :background="{ background: '#103289' }"
        title="我参与"
        title-color="#fff"
      ></u-navbar>
      <view class="head-bg"></view>
      <!-- 我的订阅 start -->
      <view class="card sub">
        <view class="title"></view>
        <view class="list">
          <u-grid :col="3" :border="false">
            <u-grid-item
              bg-color="transparent"
              :class="{ uGridSelected: itemSelectFlag && index == 3 }"
              v-for="(item, index) in dataOne"
              :key="index"
            >
              <navigator
                hover-class="none"
                class="nav-item"
                @click="goOnePage(item.url, index)"
              >
                <image
                  :src="item.img"
                  mode="widthFix"
                  class="nav-item-img"
                ></image>
                <u-badge :count="item.cout" :offset="[20, 20]"></u-badge>
                <view class="nav-item-name">{{ item.title }}</view>
              </navigator>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <!-- 我的订阅 end -->
    <view class="container">
        <view class="head">
            <u-navbar :is-fixed="false" :border-bottom="false" :is-back="true" back-icon-name="arrow-leftward"
                back-icon-color="#fff" back-icon-size="35" :background="{ background: '#103289' }" title="我参与"
                title-color="#fff"></u-navbar>
            <view class="head-bg"></view>
            <!-- 我的订阅 start -->
            <view class="card sub">
                <view class="title"></view>
                <view class="list">
                    <u-grid :col="3" :border="false">
                        <u-grid-item bg-color="transparent" :class="{ uGridSelected: itemSelectFlag && index == 3 }"
                            v-for="(item, index) in dataOne" :key="index">
                            <navigator hover-class="none" class="nav-item" @click="goOnePage(item.url, index)">
                                <image :src="item.img" mode="widthFix" class="nav-item-img"></image>
                                <u-badge :count="item.cout" :offset="[20, 20]"></u-badge>
                                <view class="nav-item-name">{{ item.title }}</view>
                            </navigator>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>
            <!-- 我的订阅 end -->

      <view class="card wrap" v-if="bashow">
        <view class="title">保安管理</view>
        <view class="list">
          <u-grid :col="4" :border="false">
            <u-grid-item
              bg-color="transparent"
              v-for="(item, index) in dataTwo"
              :key="index"
            >
              <navigator
                hover-class="none"
                url=""
                class="nav-item"
                @click="goTwoPage(item.url, index)"
              >
                <image
                  :src="item.img"
                  mode="widthFix"
                  class="nav-item-img"
                ></image>
                <view class="nav-item-name">{{ item.title }}</view>
              </navigator>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <!-- 底部导航条 -->
    <!-- <u-tabbar :list="tabbar" :mid-button="false"></u-tabbar> -->
  </view>
            <view class="card wrap" v-if="bashow">
                <view class="title">保安管理</view>
                <view class="list">
                    <u-grid :col="4" :border="false">
                        <u-grid-item bg-color="transparent" v-for="(item, index) in dataTwo" :key="index">
                            <navigator hover-class="none" url="" class="nav-item" @click="goTwoPage(item.url, index)">
                                <image :src="item.img" mode="widthFix" class="nav-item-img"></image>
                                <view class="nav-item-name">{{ item.title }}</view>
                            </navigator>
                        </u-grid-item>
                    </u-grid>
                </view>
            </view>
        </view>
        <u-toast ref="uToast" />
        <!-- 底部导航条 -->
        <!-- <u-tabbar :list="tabbar" :mid-button="false"></u-tabbar> -->
    </view>
</template>

<script>
export default {
  data() {
    return {
      tabbar: this.$store.state.tabbar,
      bashow: false,
      itemSelectFlag: false,
      dataOne: [
        {
          title: "治安防范巡查",
          img: "/static/workbench/task2.png",
          url: "../grabOrdersZAXC/grabOrders?detailData=0",
          cout: 0,
        },
        {
          title: "治安防范宣传",
          img: "/static/workbench/task1.png",
          url: "../grabOrdersZAYWXC/grabOrders?detailData=0",
          cout: 0,
        },
        {
          title: "治安防范培训",
          img: "/static/workbench/task3.png",
          url: "../grabOrdersZAFFPX/grabOrders?detailData=0",
          cout: 0,
        },
        {
          title: "保安管理",
          img: "/static/workbench/task4.png",
          url: "",
          cout: 0,
        },
        // {
        //   title: "人员统计",
        //   img: "/static/workbench/task10.png",
        //   url: "../personnelCount/personnelCount",
        //   cout: 0,
        // },
      ],
      dataTwo: [
        {
          title: "电子证件",
          img: "/static/workbench/task9.png",
          url: "",
        },
        {
          title: "模拟考试",
          img: "/static/workbench/task5.png",
          url: "/pages/exam/startexam",
        }
      ],
    };
  },
  onShow() {
    this.getNum();
  },
  onLoad() {
    // if (this.$store.state.billFlag == true) {
    //   this.dataTwo.push({
    //     title: "模拟考试",
    //     img: "/static/workbench/task5.png",
    //     url: "/pages/exam/startexam",
    //   });
    // }
  },
  onBackPress(e) {
    console.log("监听返回按钮事件2", e);
    uni.switchTab({
      url: "/pages/home/home",
    });
    // 此处一定姚要return为true，否则页面不会返回到指定路径
    return true;
  },
  mounted() {
    // if (this.$store.state.UserData.stype != "1") {
    //     this.$refs.uToast.show({
    //         title: '功能暂未开放',
    //         type: 'warning',
    //     });
    // }
  },
  methods: {
    //获取资讯信息
    getNum() {
      var that = this;
      uni.request({
        url: this.$store.state.piAPI + "/taskqd/selectNum",
        method: "GET",
        data: {
          serid: that.$store.state.UserData.user_id,
          jurisdiction: that.$store.state.UserData.jurisdiction,
          workjurisdiction: that.$store.state.UserData.workjurisdiction,
        },
        success: (res) => {
          var data = res.data.data;
          this.dataOne[0].cout = Number(data.xcha);
          this.dataOne[1].cout = Number(data.xchuan);
          this.dataOne[2].cout = Number(data.px);
        },
      });
    },
    //页面跳转
    goOnePage(url, index) {
      if (index == "3") {
        this.bashow = !this.bashow;
    export default {
        data() {
            return {
                tabbar: this.$store.state.tabbar,
                bashow: false,
                itemSelectFlag: false,
                dataOne: [{
                        title: "治安防范巡查",
                        img: "/static/workbench/task2.png",
                        url: "../grabOrdersZAXC/grabOrders?detailData=0",
                        cout: 0,
                    },
                    {
                        title: "治安防范宣传",
                        img: "/static/workbench/task1.png",
                        url: "../grabOrdersZAYWXC/grabOrders?detailData=0",
                        cout: 0,
                    },
                    {
                        title: "治安防范培训",
                        img: "/static/workbench/task3.png",
                        url: "../grabOrdersZAFFPX/grabOrders?detailData=0",
                        cout: 0,
                    },
                    {
                        title: "保安管理",
                        img: "/static/workbench/task4.png",
                        url: "",
                        cout: 0,
                    },
                    // {
                    //   title: "人员统计",
                    //   img: "/static/workbench/task10.png",
                    //   url: "../personnelCount/personnelCount",
                    //   cout: 0,
                    // },
                ],
                dataTwo: [{
                        title: "电子证件",
                        img: "/static/workbench/task9.png",
                        url: "",
                    },
                    {
                        title: "模拟考试",
                        img: "/static/workbench/task5.png",
                        url: "/pages/exam/startexam",
                    }
                ],
            };
        },
        onShow() {
            this.getNum();
        },
        onLoad() {
            // if (this.$store.state.billFlag == true) {
            //   this.dataTwo.push({
            //     title: "模拟考试",
            //     img: "/static/workbench/task5.png",
            //     url: "/pages/exam/startexam",
            //   });
            // }
        },
        onBackPress(e) {
            console.log("监听返回按钮事件2", e);
            uni.switchTab({
                url: "/pages/home/home",
            });
            // 此处一定姚要return为true，否则页面不会返回到指定路径
            return true;
        },
        computed: {
            changeTaksState() {
                return this.$store.state.changeTaksState;
            }
        },
        watch: {
            changeTaksState() {
                this.getNum();
            }
        },
        mounted() {
            // if (this.$store.state.UserData.stype != "1") {
            //     this.$refs.uToast.show({
            //         title: '功能暂未开放',
            //         type: 'warning',
            //     });
            // }
        },
        methods: {
            //获取资讯信息
            getNum() {
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + "/taskqd/selectNum",
                    method: "GET",
                    data: {
                        serid: that.$store.state.UserData.user_id,
                        jurisdiction: that.$store.state.UserData.jurisdiction,
                        workjurisdiction: that.$store.state.UserData.workjurisdiction,
                    },
                    success: (res) => {
                        var data = res.data.data;
                        this.dataOne[0].cout = Number(data.xcha);
                        this.dataOne[1].cout = Number(data.xchuan);
                        this.dataOne[2].cout = Number(data.px);
                    },
                });
            },
            //页面跳转
            goOnePage(url, index) {
                if (index == "3") {
                    this.bashow = !this.bashow;

        this.itemSelectFlag = !this.itemSelectFlag;
      }
      uni.navigateTo({
        url: url,
      });
    },
    //获取用户信息
    getUser() {
      var that = this;
      uni.request({
        url: that.$store.state.BaopiAPI + "/blade-user/detail",
        method: "GET",
        data: {
          cardid: that.$store.state.UserData.cardid,
          isDeleted: 0,
          status: 1,
        },
        success: (res) => {
          if (res.statusCode == "200") {
            var urls =
              "http://223.82.109.183:2080/securityInfo.html?securityNumber=" +
              res.data.data.securitynumber;
            uni.navigateTo({
              url: "../../voting/information?url=" + urls,
            });
          } else {
            this.$refs.uToast.show({
              title: "暂无证件信息",
              type: "warning",
            });
          }
        },
      });
    },
    goTwoPage(url, index) {
      if (index == "1") {
        uni.navigateTo({
          url,
        });
        return;
      } else {
        this.getUser();
      }
    },
  },
};
                    this.itemSelectFlag = !this.itemSelectFlag;
                }
                uni.navigateTo({
                    url: url,
                });
            },
            //获取用户信息
            getUser() {
                var that = this;
                uni.request({
                    url: that.$store.state.BaopiAPI + "/blade-user/detail",
                    method: "GET",
                    data: {
                        cardid: that.$store.state.UserData.cardid,
                        isDeleted: 0,
                        status: 1,
                    },
                    success: (res) => {
                        if (res.statusCode == "200") {
                            var urls =
                                "http://223.82.109.183:2080/securityInfo.html?securityNumber=" +
                                res.data.data.securitynumber;
                            uni.navigateTo({
                                url: "../../voting/information?url=" + urls,
                            });
                        } else {
                            this.$refs.uToast.show({
                                title: "暂无证件信息",
                                type: "warning",
                            });
                        }
                    },
                });
            },
            goTwoPage(url, index) {
                if (index == "1") {
                    uni.navigateTo({
                        url,
                    });
                    return;
                } else {
                    this.getUser();
                }
            },
        },
    };
</script>

<style lang="scss">
.container {
  background-color: #f7f7f7;
  min-height: 100vh;
  overflow: hidden;
}
    .container {
        background-color: #f7f7f7;
        min-height: 100vh;
        overflow: hidden;
    }

.head {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
}
    .head {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }

.head-bg {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
  width: 750rpx;
  height: 270rpx;
  background: #103289;
}
    .head-bg {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
        width: 750rpx;
        height: 270rpx;
        background: #103289;
    }

.card {
  margin: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  margin-top: 36rpx;
}
    .card {
        margin: 30rpx;
        background: #ffffff;
        border-radius: 20rpx;
        margin-top: 36rpx;
    }

.sub {
  .title {
    padding-top: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .sub {
        .title {
            padding-top: 36rpx;
            display: flex;
            justify-content: center;
            align-items: center;

    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
            font-size: 30rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #000000;

    &::before {
      content: "";
      display: block;
      width: 135rpx;
      height: 1rpx;
      background: #e4e7ed;
      margin: 0 17rpx;
    }
            &::before {
                content: "";
                display: block;
                width: 135rpx;
                height: 1rpx;
                background: #e4e7ed;
                margin: 0 17rpx;
            }

    // &::after {
    //     content: '';
    //     display: block;
    //     width: 135rpx;
    //     height: 1rpx;
    //     background: #e4e7ed;
    //     margin: 0 17rpx;
    // }
  }
}
            // &::after {
            //     content: '';
            //     display: block;
            //     width: 135rpx;
            //     height: 1rpx;
            //     background: #e4e7ed;
            //     margin: 0 17rpx;
            // }
        }
    }

.list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 30rpx;
    .list {
        display: flex;
        flex-wrap: wrap;
        padding: 0 0 30rpx;

  .nav-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 30rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #131313;
    line-height: 48rpx;
        .nav-item {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            font-size: 30rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #131313;
            line-height: 48rpx;

    &-img {
      width: 64rpx;
      height: 64rpx;
      margin-bottom: 20rpx;
    }
            &-img {
                width: 64rpx;
                height: 64rpx;
                margin-bottom: 20rpx;
            }

    &-name {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #585b61;
      opacity: 0.77;
    }
  }
}
            &-name {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 400;
                color: #585b61;
                opacity: 0.77;
            }
        }
    }

.wrap {
  .title {
    padding: 36rpx 16rpx;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #000000;
    .wrap {
        .title {
            padding: 36rpx 16rpx;
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #000000;

    &::before {
      content: "";
      display: block;
      width: 5rpx;
      height: 36rpx;
      margin-right: 10rpx;
      background: #103289;
    }
  }
}
            &::before {
                content: "";
                display: block;
                width: 5rpx;
                height: 36rpx;
                margin-right: 10rpx;
                background: #103289;
            }
        }
    }
</style>

 pages/grabOrders/grabOrdersZAFFPX/grabOrders.vue

@@ -83,7 +83,7 @@
        },
        watch: {
            current() {
                console.log(this.current)
                // console.log(this.current)
                // if (this.current == 0) {
                //     console.log(1)
                // this.getGrabOrders(0);            
@@ -93,6 +93,9 @@
            change() {
                this.getGrabOrders(this.current);
            },
            changeTaksState() {
                this.getGrabOrders(this.current);
            }

        },
        mounted() {
@@ -106,6 +109,9 @@
            change() {
                return this.$store.state.gotuGrabOrders;
            },
            changeTaksState() {
                return this.$store.state.changeTaksState;
            }
        },
        onLoad: function(options) {
            // debugger

 pages/grabOrders/grabOrdersZAXC/grabOrders.vue

@@ -93,7 +93,9 @@
            change() {
                this.getGrabOrders(this.current);
            },

            changeTaksState() {
                this.getGrabOrders(this.current);
            }
        },
        mounted() {
            // this.getGrabOrders(this.current);
@@ -106,6 +108,9 @@
            change() {
                return this.$store.state.gotuGrabOrders;
            },
            changeTaksState() {
                return this.$store.state.changeTaksState;
            }
        },
        onLoad: function(options) {
            // debugger

 pages/grabOrders/grabOrdersZAYWXC/grabOrders.vue

@@ -95,6 +95,9 @@
            change() {
                this.getGrabOrders(this.current);
            },
            changeTaksState() {
                this.getGrabOrders(this.current);
            }

        },
        mounted() {
@@ -108,6 +111,9 @@
            change() {
                return this.$store.state.gotuGrabOrders;
            },
            changeTaksState() {
                return this.$store.state.changeTaksState;
            }
        },
        onLoad: function(options) {
            // debugger

 store/apiConfig.js

@@ -1,4 +1,4 @@
let i = 1; //1是服务器
let i = 3; //1是服务器
if (i == 1) {
    var api = 'http://223.82.109.183:2082/api/';
    var wsapi = 'ws://223.82.109.183:2082/wss/websocket';

 store/mutations.js

@@ -44,7 +44,10 @@
        state.Audio[data.method](data.key);
    },
    ...websocket.mutations,
    ...positions.mutations
    ...positions.mutations,
    changeTaksMsg(state, data) {
        state.changeTaksState = !state.changeTaksState;
    }
}

export default mutations

 store/state.js

@@ -66,7 +66,8 @@
        uni: uni
    }), //语音控制
    ...websocket.state,
    ...positions.state
    ...positions.state,
    changeTaksState: true,
}

export default state

 store/websocket.js

@@ -82,7 +82,7 @@
            } else {
                type = types111[0];
            }
            console.log()
            // console.log()
            if (type === "start") {
                let types = uni.getSystemInfoSync().platform;
                let
@@ -140,20 +140,27 @@
                    },
                });
            } else if (type === "change") {
                let routes = getCurrentPages(); //获取当前页面栈
                let curRoute = routes[routes.length - 1].route; //获取当前页面的路由
                // let routes = getCurrentPages(); //获取当前页面栈
                // let curRoute = routes[routes.length - 1].route; //获取当前页面的路由
                let d = {
                    serid: uni.getStorageSync("ids") || $store.state.puserID,
                    type: 0,
                    tasktype: route == "grabOrdersZAXC" ? 0 : (route == "grabOrdersZAYWXC" ? 1 : 2)
                };
            } else if (type == "taks") {
                // 角色辖区
                // $store.state.Jurisdiction;
                $store.commit("changeTaksMsg"); //任务状态更新
                //语音提醒
                $store.commit("controlAudio", {
                    key: 'keke',
                    method: '$pause'
                })
            }
        },
        //本地建造数据传递
        setMyvalue(state, value) {
            state.socketValue = value;


        },
        setsocketStateMY(state, value) {
            state.socketStateMY = value;