|
|
<!--
|
|
|
* @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>
|
