JiangNingUmale-h5/subcontract/work/event/index.vue

<!--
 * @Author: 张涛
 * @Date: 2023-11-07 14:02:17
 * @LastEditors: 张涛
 * @LastEditTime: 2023-11-10 13:15:58
 * @FilePath: \JiangNingUmale-App\subcontract\work\event\index.vue
-->
<template>
  <view class="page">
	  <!--   -->
	<web-view :src="urlParams" id="myWebView" @message="addMessage" @load="myonload"></web-view>  
    <!-- <u-navbar
      title="事件管理"
      back-icon-color="#FFFFFF"
      title-color="#FFFFFF"
      leftText="返回"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="view-segmented" ref="viewSegmented">
      <uni-segmented-control
        :current="current"
        :values="items"
        @clickItem="onClickItem"
        styleType="button"
        activeColor="#007aff"
        bgColor="#FFFFFF"
        fontColor="#34373B"
        tabHeight="88rpx"
        tabFontsize="32rpx"
        tabBoxShadow="1rpx 1rpx 10rpx rgba(0,0,0,0.2)"
        tabBorderRadius="16rpx"
        class="segmented-controls"
      ></uni-segmented-control>
    </view>

    <view class="main-content">
      <view class="view-one" v-show="current === 0">
        <view class="query-group">
          <uni-datetime-picker
            v-model="dateRange"
            type="daterange"
            @maskClick="maskClick"
            rangeSeparator="至"
            :isDaterangeIcon="false"
          />
          <button class="btn-query">查询</button>
        </view>
        <view class="view-list">
          <view class="list-item">
            <view class="item-header"> 疑难事件 </view>
            <view class="item-content">
              <view>
                <text class="title">事件编号：</text>
                <text class="content">2023073024251</text>
              </view>
              <view>
                <text class="title">事件标题：</text>
                <text class="content">下水道结冰堵塞</text>
              </view>
              <view>
                <text class="title">事件类型：</text>
                <text class="content">城市安全类</text> </view
              ><view>
                <text class="title">事件地址：</text>
                <text class="content">XXXXXXXXXXXXXXXXXXXX</text>
              </view>
              <view>
                <text class="title">发生时间：</text>
                <text class="content">2023-07-30</text>
              </view>
              <view>
                <text class="title">所属网格：</text>
                <text class="content">网格1</text>
              </view>
            </view>
          </view>
          <view class="list-item" v-for="(item, index) in 10" :key="index">
            <view class="item-header" v-show="false"></view>
            <view class="item-content">
              <view>
                <text class="title">事件编号：</text>
                <text class="content">2023073024251</text>
              </view>
              <view>
                <text class="title">事件标题：</text>
                <text class="content">下水道结冰堵塞</text>
              </view>
              <view>
                <text class="title">事件类型：</text>
                <text class="content">城市安全类</text> </view
              ><view>
                <text class="title">事件地址：</text>
                <text class="content">XXXXXXXXXXXXXXXXXXXX</text>
              </view>
              <view>
                <text class="title">发生时间：</text>
                <text class="content">2023-07-30</text>
              </view>
              <view>
                <text class="title">所属网格：</text>
                <text class="content">网格2</text>
              </view>
            </view>
          </view>
        </view>
        <view class="footer">
          <button class="btn-add" @click="goPath">事件上报</button>
        </view>
      </view>
      <view v-show="current === 1">
        <view class="page-map">
          <map
            style="width: 100%; height: 100vh"
            :latitude="latitude"
            :longitude="longitude"
            :markers="markers"
            min-scale="3"
            max-scale="20"
            :enable-zoom="true"
            @markertap="markerTap"
          >
          </map>
        </view>
      </view>
    </view>

    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-box" :class="{ 'popup-height': 'center' }">
        <view class="popup-header">
          <text>事件详情</text>
          <view @click="closePopup">
            <uni-icons type="closeempty" size="15"></uni-icons>
          </view>
        </view>
        <view class="popup-content">
          <view class="item-content">
            <view>
              <text class="title">事件编号：</text>
              <text class="content">2023073024251</text>
            </view>
            <view>
              <text class="title">事件标题：</text>
              <text class="content">下水道结冰堵塞</text>
            </view>
            <view>
              <text class="title">事件类型：</text>
              <text class="content">城市安全类</text> </view
            ><view>
              <text class="title">事件地址：</text>
              <text class="content">XXXXXXXXXXXXXXXXXXXX</text>
            </view>
            <view>
              <text class="title">发生时间：</text>
              <text class="content">2023-07-30</text>
            </view>
            <view>
              <text class="title">所属网格：</text>
              <text class="content">网格1</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <button @click="handleEvent">去处理</button>
        </view>
      </view>
    </uni-popup> -->
  </view>
</template>

<script>
import { getCode } from "@/api/jn/login.js"
export default {
  data() {
    return {
      items: ["事件列表", "事件地图"],
      current: 0,
      //   dateRange: ["2021-02-1", "2021-3-28"],
      dateRange: [,],
      id: 0, // 使用 marker点击事件 需要填写id
      title: "map",
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: "/static/images/umale/point_red.png",
          width: 35,
          height: 40,
        },
        {
          id: 2,
          latitude: 39.90758216804254,
          longitude: 116.39754694003919,
          iconPath: "/static/images/umale/point_blue.png",
          width: 35,
          height: 40,
        },
      ],
	  urlParams: "",
    };
  },
  watch: {
    dateRange(newval) {
      console.log("范围选:", this.dateRange);
    },
  },
  mounted() {
	// uni.onNativeEvent('messageFromWebview', this.toHome());
	// var myWebView = document.getElementById('myWebView');
	// myWebView.onload = ()=>{
	// 	myWebView.contentWindow.postMessage('onload','*');
	// }
	// window.addEventListener('message', (event)=>{
	// 	uni.reLaunch({url:'/pages/index'})
	// 	console.log("event",event);
	// 	if(event.data.data.arg.action == "to-home") {
	// 		// console.log("进入判断");
	// 		uni.reLaunch({url:'/pages/index'})
	// 	}
	// });
  },
  onLoad(){
	let token = uni.getStorageSync("token")
	console.log(token,'传入的token');
	if (token) {
		getCode({"accesstoken":token}).then(res=>{
			console.log(res,'获取code的');
			this.urlParams = `https://t-kd-process-app.jsszkd.com/pages/oauth2/login?code=${res.data.code}&clientId=221224176384&redirect=/pages/events/eventsManage`
		})
	}
  },
  methods: {
    markerTap(e) {
      console.log("Marker clicked:", e.detail.markerId);
      this.$refs.popup.open();
    },
    onClickItem(e) {
      if (this.current != e.currentIndex) {
        this.current = e.currentIndex;
      }

      if (e.currentIndex == 1) {
        // console.log(this.$refs.viewSegmented.style);
        this.$refs.viewSegmented.$el.style.backgroundColor = "transparent";
      } else {
        this.$refs.viewSegmented.$el.style.backgroundColor = "#f6f7f8";
      }
    },
    goPath() {
      this.$tab.navigateTo("/subcontract/work/event/add");
    },
    maskClick(e) {
      console.log("maskClick事件:", e);
    },
    closePopup() {
      this.$refs.popup.close();
    },
    handleEvent() {
      this.$tab.navigateTo("/subcontract/work/event/deal");
    },
	addMessage(event){
		console.log("收到事件-------->");
		console.log(event,"监听到的事件");
		console.log(JSON.stringify(event),"监听到的事件");
		if(event.detail.data[0].action == 'to-home') {
			console.log("进入判断了");
			this.$tab.switchTab("/pages/index");
		}
	},
	myonload(){
		console.log("网页加载完成");
	},
  },
};
</script>

<style lang="scss" scoped>
.view-segmented {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f7f8;
  position: fixed;
  top: calc(var(--status-bar-height) + 44px);
  z-index: 1;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  .segmented-controls {
    width: 688rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;

    /deep/.segmented-control--button {
      /deep/.segmented-control__item--button {
        /deep/.segmented-control__text {
          color: #34373b;
        }
      }
    }
  }
}
.view-one {
  padding-top: 280rpx;
  padding-bottom: 240rpx;
}
.query-group {
  position: fixed;
  top: calc(var(--status-bar-height) + 220rpx);
  z-index: 2;
  display: flex;
  padding: 30rpx 29rpx;
  background-color: #f6f7f8;
  width: 100%;
  align-items: center;

  /deep/.uni-date-x--border {
    border: none;
  }

  /deep/.uni-date-x {
    background-color: transparent;
  }

  /deep/.uni-date__x-input {
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
    border-radius: 16rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
  }

  /deep/.range-separator {
    margin: 0 17rpx;
  }

  .btn-query {
    margin-left: 16rpx;
    background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
    border-radius: 16rpx;
    color: #ffffff;
    font-size: 36rpx;
    font-family: PingFang SC;
    // height: 60rpx;
  }
}
.view-list {
  // margin-top: calc(var(--status-bar-height) + 120px);

  .list-item {
    margin: 15rpx 20rpx;
    .item-header {
      padding: 16rpx 26rpx;
      font-size: 32rpx;
      font-family: PingFang SC;
      color: #dd5317;

      background: linear-gradient(
        180deg,
        #ffddc6 0%,
        rgba(255, 221, 202, 0) 100%
      );
      border-radius: 16rpx 16rpx 0rpx 0rpx;
    }
    .item-content {
      padding: 11rpx 29rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
      border-radius: 16rpx;
      & > view {
        display: flex;
        align-items: center;
        padding: 10rpx 0;

        font-size: 28rpx;
        font-family: PingFang SC;
        letter-spacing: 2rpx;

        & .title {
          color: #9da2ab;
        }
        & .content {
          color: #2e2f31;
        }
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  z-index: 1;
  width: 100%;
  //   height: 188rpx;
  background: #ffffff;
  border: 1px solid #dce3ec;
  padding: 18rpx 28rpx 60rpx 28rpx;
  .btn-add {
    font-size: 36rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    height: 88rpx;
    background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
    border-radius: 16rpx;
    color: #ffffff;
  }
}

/deep/ .uni-popup__wrapper {
  border-radius: 16rpx;
}
.popup-box {
  width: 668rpx;

  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 35rpx;
    border-bottom: 1rpx solid #e2e2e2;

    & > text {
      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #1a1a1a;
    }
  }

  .popup-content {
    .item-content {
      padding: 11rpx 29rpx;
      background: #ffffff;
      box-shadow: 0rpx 0rpx 20rpx rgba(57, 118, 241, 0.06);
      border-radius: 16rpx;
      & > view {
        display: flex;
        align-items: center;
        padding: 10rpx 0;

        font-size: 28rpx;
        font-family: PingFang SC;
        letter-spacing: 2rpx;

        & .title {
          color: #9da2ab;
        }
        & .content {
          color: #2e2f31;
        }
      }
    }
  }

  .popup-footer {
    padding: 0 24rpx 24rpx 24rpx;
    & > button {
      background: linear-gradient(90deg, #3976f1 0%, #3ca0f6 100%);
      border-radius: 16rpx;

      font-size: 36rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      color: #ffffff;
    }
  }
}
</style>