zhangqun
2 years ago
parent
5bc7d13eef
commit
ec4e01ee5e
15 changed files with 624 additions and 12 deletions
@ -0,0 +1,583 @@ |
||||
<template> |
||||
<view class="map" :style="getHeight()"> |
||||
<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> --> |
||||
<!-- 轮播图 --> |
||||
<map |
||||
style="width: 100%; height: 100%" |
||||
:latitude="latitude" |
||||
:longitude="longitude" |
||||
:markers="covers" |
||||
:polyline="polyline" |
||||
> |
||||
</map> |
||||
<cover-view class="location" @click="onLocation" :style="getTop()"> |
||||
<cover-image src="../../static/map/3746.png" alt="" srcset="" /> |
||||
</cover-view> |
||||
<view class="dialog dialog-one" v-if="pageType == 1"> |
||||
<view class="status">超期</view> |
||||
<view class="top"> |
||||
<image src="../../static/home/pend.png" mode="" class="mimg"></image> |
||||
<view class="font"> |
||||
<view class="tit" |
||||
>金水路金水路金水路金水路金水路金水路金水路金水路金水路金水路</view |
||||
> |
||||
<view class="desc"> |
||||
<view style="margin-right: 12px">排查</view> |
||||
<view>超期2天</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="btn-box"> |
||||
<view @click="handleCheck(1)" class="btn btn1"> 智能排查 </view> |
||||
<view @click="handleCheck(2)" class="btn btn2"> 人工排查 </view> |
||||
</view> |
||||
</view> |
||||
<view class="dialog dialog-two" v-if="pageType == 2"> |
||||
<view class="two-f1">根据当前定位信息，您要排查的是这条路吗？</view> |
||||
<view class="two-f2">山东</view> |
||||
<view class="btn-box"> |
||||
<view @click="onJump(3)" class="btn btn3"> 更换 </view> |
||||
<view @click="handleCheck(1)" class="btn btn4"> 智能排查 </view> |
||||
<view @click="handleCheck(2)" class="btn btn5"> 人工排查 </view> |
||||
</view> |
||||
</view> |
||||
<view class="dialog dialog-three" v-if="pageType == 3"> |
||||
<view class="search"> |
||||
<view class="searchL"> |
||||
<img src="../../static/map/978.png" alt="" /> |
||||
<input |
||||
class="sinput" |
||||
placeholder-style="color: #BFBFBF;" |
||||
placeholder="搜索路段或路口" |
||||
/> |
||||
</view> |
||||
<view @click="onJump(4)" class="addbtn"> 新增 </view> |
||||
</view> |
||||
<view class="list-box"> |
||||
<view |
||||
class="list-item" |
||||
v-for="(item, index) in data" |
||||
:key="index" |
||||
@click="onList(item, index)" |
||||
:style="idx == index ? 'background: #E5EFFF' : ''" |
||||
> |
||||
<img src="../../static/map/3567.png" alt="" v-if="idx == index" /> |
||||
<img src="../../static/map/3568.png" alt="" v-else /> |
||||
<view class="tit"> |
||||
智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查智能排查 |
||||
</view> |
||||
<view class="jl">200m内</view> |
||||
</view> |
||||
<view></view> |
||||
</view> |
||||
</view> |
||||
<view class="dialog dialog-four" v-if="pageType == 4"> |
||||
<view class="form-item"> |
||||
<view class="form-label">对象</view> |
||||
<view class="form-sw"> |
||||
<view :style="ftype == 1 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = 1">路段</view> |
||||
<view :style="ftype == 2 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = 2">路口</view> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="form-label">道路名称</view> |
||||
<view class="form-tent"> |
||||
<input |
||||
class="linput" |
||||
placeholder-style="color: #BFBFBF;" |
||||
placeholder="请输入" |
||||
/> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="form-label">起始路口</view> |
||||
<view class="form-tent"> |
||||
<input |
||||
class="linput" |
||||
placeholder-style="color: #BFBFBF;" |
||||
placeholder="请输入" |
||||
/> |
||||
</view> |
||||
</view> |
||||
<view class="form-item"> |
||||
<view class="form-label">终止路口</view> |
||||
<view class="form-tent"> |
||||
<input |
||||
class="linput" |
||||
placeholder-style="color: #BFBFBF;" |
||||
placeholder="请输入" |
||||
/> |
||||
</view> |
||||
</view> |
||||
<view class="btn-box" style="margin-top: 18px"> |
||||
<view @click="onJump(3)" class="btn btn6"> 取消 </view> |
||||
<view @click="handleSubmit" class="btn btn7"> 确定 </view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import view from "../component/view/view.vue"; |
||||
export default { |
||||
components: { view }, |
||||
data() { |
||||
return { |
||||
latitude: 39.909, |
||||
longitude: 116.39742, |
||||
covers: [], |
||||
title: "下拉刷新 + 加载更多", |
||||
data: [ |
||||
{ |
||||
//window.PCRWList || |
||||
id: 12121212, |
||||
title: "G228火炬路与S503岙东路", |
||||
roadCode: 123, |
||||
roadName: "G228火炬路与S503岙东路", |
||||
imgurl: "/static/car.png", |
||||
createTime: "超期2天", //2024-10-05 |
||||
deptName: "支队级", |
||||
sessionId: 12121212, |
||||
paicha: "排查", |
||||
isTime: 0, |
||||
}, |
||||
{ |
||||
//window.PCRWList || |
||||
id: 37020017407, |
||||
title: "金水路与合川路事故多发点段", |
||||
roadCode: 123, |
||||
roadName: "金水路与合川路", |
||||
imgurl: "/static/car.png", |
||||
createTime: "剩余2天", |
||||
deptName: "支队级", |
||||
sessionId: 37020017407, |
||||
paicha: "排查", |
||||
isTime: 1, |
||||
}, |
||||
{ |
||||
id: 37020017404, |
||||
title: "金水路与合川路事故多发点段", |
||||
roadCode: 123, |
||||
roadName: "金水路与合川路", |
||||
imgurl: "/static/car.png", |
||||
createTime: "超期2天", |
||||
deptName: "支队级", |
||||
sessionId: 37020017404, |
||||
paicha: "排查", |
||||
isTime: 1, |
||||
}, |
||||
], |
||||
idx: -1, |
||||
loadMoreText: "加载中...", |
||||
showLoadMore: false, |
||||
max: 0, |
||||
polyline: [], |
||||
pageType: 1, |
||||
ftype: 1 |
||||
}; |
||||
}, |
||||
onLoad() { |
||||
let v = false; |
||||
if (v) { |
||||
this.pageType = 1; |
||||
} else { |
||||
this.pageType = 2; |
||||
this.onLocation("init"); |
||||
} |
||||
this.initData(); |
||||
}, |
||||
|
||||
onUnload() { |
||||
// this.max = 0, |
||||
// this.data = [], |
||||
// this.loadMoreText = "加载更多", |
||||
// this.showLoadMore = false; |
||||
}, |
||||
onReachBottom() { |
||||
// console.log("onReachBottom"); |
||||
// if (this.max > 40) { |
||||
// this.loadMoreText = "没有更多数据了!" |
||||
// return; |
||||
// } |
||||
// this.showLoadMore = true; |
||||
// setTimeout(() => { |
||||
// this.setListData(); |
||||
// }, 300); |
||||
}, |
||||
onPullDownRefresh() { |
||||
console.log("onPullDownRefresh"); |
||||
this.initData(); |
||||
}, |
||||
methods: { |
||||
goToKnowledge() { |
||||
uni.navigateTo({ |
||||
url: "/pages/home/knowledge", |
||||
}); |
||||
}, |
||||
initData() { |
||||
// setTimeout(() => { |
||||
// this.max = 0; |
||||
// this.data = []; |
||||
// let data = []; |
||||
// this.max += 20; |
||||
// for (var i = this.max - 19; i < this.max + 1; i++) { |
||||
// data.push(i) |
||||
// } |
||||
// this.data = this.data.concat(data); |
||||
// uni.stopPullDownRefresh(); |
||||
// }, 300); |
||||
}, |
||||
setListData() { |
||||
// let data = []; |
||||
// this.max += 10; |
||||
// for (var i = this.max - 9; i < this.max + 1; i++) { |
||||
// data.push(i) |
||||
// } |
||||
// this.data = this.data.concat(data); |
||||
}, |
||||
handleCheck(v) { |
||||
uni.navigateTo({ |
||||
// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}` |
||||
url: v == 1 ? '/pages/home/knowledge' : '/pages/home/detail' |
||||
}) |
||||
}, |
||||
handleSubmit() {}, |
||||
onList(e, i) { |
||||
this.pageType = 2 |
||||
this.idx = i; |
||||
}, |
||||
onLocation(e) { |
||||
uni.getLocation({ |
||||
type: "gcj02", // 使用国测局坐标系 |
||||
success: (res) => { |
||||
console.log("经度: " + res.longitude); |
||||
console.log("纬度: " + res.latitude); |
||||
this.latitude = res.latitude; |
||||
this.longitude = res.longitude; |
||||
this.covers = [ |
||||
{ |
||||
latitude: res.latitude, |
||||
longitude: res.longitude, |
||||
width: 32, |
||||
height: 36, |
||||
iconPath: "../../../static/map/3567.png", |
||||
}, |
||||
]; |
||||
if (e) { |
||||
} |
||||
}, |
||||
fail: function (err) { |
||||
console.log("获取位置信息失败: " + err.errMsg); |
||||
}, |
||||
}); |
||||
}, |
||||
onJump(v) { |
||||
this.pageType = v; |
||||
}, |
||||
getTop() { |
||||
if (this.pageType == 1) { |
||||
return "top: calc(50vh + 80px)"; |
||||
} |
||||
if (this.pageType == 2) { |
||||
return "top: calc(50vh + 90px)"; |
||||
} |
||||
if (this.pageType == 3) { |
||||
return "top: calc(50vh - 50px)"; |
||||
} |
||||
if (this.pageType == 4) { |
||||
return "top: calc(50vh - 80px)"; |
||||
} |
||||
}, |
||||
getHeight() { |
||||
if (this.pageType == 1) { |
||||
return "height: 64vh"; |
||||
} |
||||
if (this.pageType == 2) { |
||||
return "height: 70vh"; |
||||
} |
||||
if (this.pageType == 3) { |
||||
return "height: 50vh"; |
||||
} |
||||
if (this.pageType == 4) { |
||||
return "height: 45vh"; |
||||
} |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
.map { |
||||
width: 100%; |
||||
height: 64vh; |
||||
position: relative; |
||||
.location { |
||||
position: absolute; |
||||
width: 56px; |
||||
height: 56px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
right: 10px; |
||||
top: calc(50vh + 80px); |
||||
background: #fff; |
||||
border-radius: 16px; |
||||
cover-image { |
||||
width: 32px; |
||||
height: 32px; |
||||
} |
||||
} |
||||
|
||||
.dialog { |
||||
width: 96%; |
||||
position: fixed; |
||||
left: 2%; |
||||
bottom: 0; |
||||
background: #fff; |
||||
border-radius: 4px; |
||||
box-sizing: border-box; |
||||
z-index: 9999; |
||||
.status { |
||||
position: absolute; |
||||
top: -6px; |
||||
right: 0; |
||||
width: 50px; |
||||
height: 28px; |
||||
line-height: 28px; |
||||
background: #cc2936; |
||||
color: #fff; |
||||
text-align: center; |
||||
&::after { |
||||
content: ""; |
||||
position: absolute; |
||||
left: -11px; |
||||
top: 0; |
||||
width: 0; |
||||
height: 0; |
||||
border-left: 11px solid transparent; |
||||
border-right: 12px solid transparent; |
||||
border-top: 26px solid #cc2936; |
||||
} |
||||
} |
||||
.font { |
||||
width: 65%; |
||||
} |
||||
.mimg { |
||||
width: 120px; |
||||
height: 90px; |
||||
} |
||||
.top { |
||||
padding: 14px; |
||||
display: flex; |
||||
.tit { |
||||
width: 92%; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
font-size: 18px; |
||||
color: #363f4d; |
||||
font-weight: bold; |
||||
margin: 14px; |
||||
} |
||||
.desc { |
||||
color: #666666; |
||||
display: flex; |
||||
margin-left: 14px; |
||||
} |
||||
} |
||||
.btn-box { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
padding: 14px; |
||||
border-top: 1px solid #d3e0f2; |
||||
.btn { |
||||
color: white; |
||||
cursor: pointer; |
||||
position: relative; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
text-align: center; |
||||
font-size: 18px; |
||||
} |
||||
.btn1 { |
||||
width: 50%; |
||||
background: url(../../static/map/elright.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.btn2 { |
||||
width: 50%; |
||||
background: url(../../static/map/elleft.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.btn3 { |
||||
width: 33%; |
||||
background: url(../../static/map/l.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
color: #363f4d; |
||||
} |
||||
.btn4 { |
||||
width: 33%; |
||||
background: url(../../static/map/c.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.btn5 { |
||||
width: 33%; |
||||
background: url(../../static/map/r.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
.btn6 { |
||||
width: 33%; |
||||
background: url(../../static/map/ll.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
|
||||
color: #363f4d; |
||||
} |
||||
.btn7 { |
||||
width: 67%; |
||||
background: url(../../static/map/rr.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
} |
||||
} |
||||
} |
||||
.dialog-one { |
||||
height: 200px; |
||||
} |
||||
.dialog-two { |
||||
height: 200px; |
||||
.two-f1 { |
||||
text-align: center; |
||||
margin: 28px 0; |
||||
} |
||||
.two-f2 { |
||||
text-align: center; |
||||
margin-bottom: 28px; |
||||
} |
||||
} |
||||
.dialog-three { |
||||
width: 100%; |
||||
height: 340px; |
||||
left: 0; |
||||
padding: 0 23px; |
||||
box-sizing: border-box; |
||||
box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16); |
||||
border-radius: 4px 4px 0px 0px; |
||||
.search { |
||||
margin: 23px 0; |
||||
height: 48px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.searchL { |
||||
width: 74%; |
||||
height: 100%; |
||||
border: 1px solid #d9d9d9; |
||||
display: flex; |
||||
img { |
||||
width: 24px; |
||||
height: 24px; |
||||
margin: 12px; |
||||
} |
||||
input { |
||||
width: 80%; |
||||
height: 100%; |
||||
} |
||||
} |
||||
.addbtn { |
||||
width: 23%; |
||||
height: 100%; |
||||
color: #fff; |
||||
background: #2663bf; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
} |
||||
.list-box { |
||||
width: 100%; |
||||
height: 244px; |
||||
overflow: auto; |
||||
.list-item { |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
display: flex; |
||||
img { |
||||
width: 22px; |
||||
height: 24px; |
||||
margin: 12px; |
||||
} |
||||
.tit { |
||||
width: 70%; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
} |
||||
.jl { |
||||
width: 20%; |
||||
text-align: right; |
||||
color: #666666; |
||||
padding-right: 4px; |
||||
box-sizing: border-box; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.dialog-four { |
||||
width: 100%; |
||||
height: 372px; |
||||
left: 0; |
||||
padding: 0 23px; |
||||
box-sizing: border-box; |
||||
box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16); |
||||
border-radius: 4px 4px 0px 0px; |
||||
.form-item { |
||||
width: 100%; |
||||
height: 45px; |
||||
line-height: 45px; |
||||
margin-top: 24px; |
||||
display: flex; |
||||
.form-label { |
||||
width: 24%; |
||||
font-size: 16px; |
||||
color: #5e6f8a; |
||||
text-align: right; |
||||
margin-right: 10px; |
||||
} |
||||
.form-sw { |
||||
display: flex; |
||||
view { |
||||
width: 60px; |
||||
height: 100%; |
||||
border-radius: 4px 4px 4px 4px; |
||||
background: #f0f3f7; |
||||
margin-right: 12px; |
||||
color: #363f4d; |
||||
font-size: 16px; |
||||
text-align: center; |
||||
} |
||||
} |
||||
.form-tent { |
||||
width: 76%; |
||||
height: 100%; |
||||
border-radius: 4px 4px 4px 4px; |
||||
border: 1px solid #d9d9d9; |
||||
padding-left: 12px; |
||||
input { |
||||
width: 100%; |
||||
height: 100%; |
||||
|
||||
font-size: 16px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 958 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in new issue