You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1105 lines
28 KiB
1105 lines
28 KiB
<template> |
|
<view class="map" :style="getHeight()"> |
|
<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> --> |
|
<!-- 轮播图 --> |
|
<map id="maps" style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" |
|
:polyline="polyline" @mousedown="onMapTap"> |
|
</map> |
|
<cover-view class="location" @click="getLocationInfo" :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" v-if="deadlineType == 1">超期</view> |
|
<view class="status" v-if="deadlineType == 2">临期</view> |
|
<!-- <view class="status" v-if="pageType1Result.deadlineType == 3">正常</view> --> |
|
<view class="top"> |
|
<!-- <image src="/static/logo.png" mode="" style="width: 120px; height: 90px" class="mimg"></image> --> |
|
<view class="font"> |
|
<view class="tit">{{ pageType1Result.name }}</view> |
|
<view class="desc"> |
|
<view style="margin-right: 12px">{{ enumname }}</view> |
|
<view>{{ deadlineStatus }}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="btn-box"> |
|
<view @click="handleCheck(1)" class="btn btn1" v-show="type!='view'"> 向导模式 </view> |
|
<view @click="handleCheck2" class="btn btn2" v-show="type!='view'"> 自主模式 </view> |
|
<view @click="handleCheck(2)" class="btn btn8" v-show="type=='view'"> 查看排查详情 </view> |
|
</view> |
|
</view> |
|
<view class="dialog dialog-two" v-if="pageType == 2"> |
|
<view class="two-f1">根据当前定位信息，您要排查的是这条路吗？</view> |
|
<view class="two-f2">{{ rname }}</view> |
|
<view class="btn-box"> |
|
<view @click="onJump(3)" class="btn btn3" v-show="type!='view'"> 更换 </view> |
|
<view @click="handleCheck(1)" class="btn btn4" v-show="type!='view'"> 向导模式 </view> |
|
<view @click="handleCheck2" class="btn btn5" v-show="type!='view'"> 自主模式 </view> |
|
<view @click="handleCheck(2)" class="btn btn8" v-show="type=='view'"> 查看排查详情 </view> |
|
</view> |
|
</view> |
|
<view class="dialog dialog-three" v-if="pageType == 3"> |
|
<view class="search"> |
|
<view class="searchL"> |
|
<image src="/static/map/search.png" alt="" /> |
|
<input v-model="search" class="sinput" placeholder-style="color: #BFBFBF;" placeholder="搜索路段或路口" |
|
type="text" confirm-type="search" @confirm="confirm" /> |
|
</view> |
|
<view @click="onJump(4)" class="addbtn"> 新增 </view> |
|
</view> |
|
<scroll-view :scroll-top="0" scroll-y="true" class="list-box"> |
|
<view class="list-item" v-for="(item, index) in data" :key="index" @click="onList(item, index)" |
|
:style="idx == index ? 'background: #E5EFFF' : ''"> |
|
<image src="/static/task/3811.png" alt="" v-if="item.type == 1" /> |
|
<image src="/static/task/3806.png" alt="" v-else /> |
|
<view class="tit"> |
|
{{ item.name }} |
|
</view> |
|
<view class="jl">{{ item.distance }}m内</view> |
|
</view> |
|
<view></view> |
|
</scroll-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" v-model="name1" placeholder-style="color: #BFBFBF;" placeholder="请输入" /> |
|
</view> |
|
</view> |
|
<view class="form-item" v-if="ftype == 1"> |
|
<view class="form-label">起始路口</view> |
|
<view class="form-tent"> |
|
<input class="linput" v-model="name2" placeholder-style="color: #BFBFBF;" placeholder="请输入" /> |
|
</view> |
|
</view> |
|
<view class="form-item" v-if="ftype == 1"> |
|
<view class="form-label">终止路口</view> |
|
<view class="form-tent"> |
|
<input class="linput" v-model="name3" placeholder-style="color: #BFBFBF;" placeholder="请输入" /> |
|
</view> |
|
</view> |
|
<view class="form-item" v-if="ftype == 2"> |
|
<view class="form-label">路口名称</view> |
|
<view class="form-tent"> |
|
<input class="linput" v-model="name4" placeholder-style="color: #BFBFBF;" placeholder="请输入" /> |
|
</view> |
|
</view> |
|
<view class="btn-box" :style="ftype == 1 ? 'margin-top: 18px' : 'margin-top: 80px'"> |
|
<view @click="onJump(3)" class="btn btn6"> 取消 </view> |
|
<view @click="handleSubmit" class="btn btn7"> 确定 </view> |
|
</view> |
|
</view> |
|
|
|
<cover-view class="umodal" v-show="show"> |
|
<cover-view class="umodal-box"> |
|
<cover-view class="umodal-content"> 新增成功</cover-view> |
|
<cover-view class="umodal-line1"></cover-view> |
|
<cover-view class="umodal-btnbox"> |
|
<cover-view class="umodal-btn" @click="handleCheck2"> |
|
自主模式 |
|
</cover-view> |
|
<cover-view class="umodal-line2"></cover-view> |
|
<cover-view class="umodal-btn" @click="handleCheck(1)"> |
|
向导模式 |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
<cover-view class="umodal" v-show="show2"> |
|
<cover-view class="umodal-box" style="height: 280rpx;"> |
|
<cover-view class="umodal-content" |
|
style="padding: 12px 0 0 22px;box-sizing: border-box; height: 180rpx;"> |
|
<cover-view style="height: 40rpx; margin-top: 2px;">您将进入自主模式，向导模式数据将自动转入</cover-view> |
|
<cover-view style="height: 40rpx;">自主模式结果，但无法再次转回向导模式。</cover-view> |
|
<cover-view style="height: 40rpx;">是否继续，请确认？</cover-view> |
|
|
|
</cover-view> |
|
<cover-view class="umodal-line1"></cover-view> |
|
<cover-view class="umodal-btnbox"> |
|
<cover-view class="umodal-btn" style="color: #606266;" @click="show2 = false"> |
|
取消 |
|
</cover-view> |
|
<cover-view class="umodal-line2"></cover-view> |
|
|
|
<cover-view class="umodal-btn" @click="handleCheck(2, true)"> |
|
确认 |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</cover-view> |
|
</view> |
|
</template> |
|
<script> |
|
import TopTitle from "../../components/top-title.vue"; |
|
import { |
|
wgs84LL2gcjLL2 |
|
} from "./c.js"; |
|
export default { |
|
components: { |
|
TopTitle |
|
}, |
|
data() { |
|
return { |
|
pageHeight: 300, |
|
latitude: 39.909, |
|
longitude: 116.39742, |
|
covers: [], |
|
title: "下拉刷新 + 加载更多", |
|
data: [], |
|
idx: -1, |
|
loadMoreText: "加载中...", |
|
showLoadMore: false, |
|
max: 0, |
|
polyline: [], |
|
pageType: 1, |
|
ftype: "1", |
|
faddress: "", |
|
fcoordinate: "", |
|
businessId: "", |
|
operator: "", |
|
deptId: "", |
|
sectionCode: "", |
|
roadName: "", |
|
pointType: "", |
|
pageType1Result: { |
|
deadlineType: 3, |
|
}, |
|
deadlineType: null, |
|
rname: "", |
|
search: "", |
|
name1: "", |
|
name2: "", |
|
name3: "", |
|
name4: "", |
|
show: false, |
|
type: 'edit', |
|
show2: false, |
|
pcType: 0, |
|
pcTypes: 0, |
|
name: "", |
|
sectionName: '', |
|
sectionCode: '', |
|
enumname: "", |
|
deadlineStatus: "", |
|
sectionType: '' |
|
}; |
|
}, |
|
onLoad(options) { |
|
console.log(options); |
|
// this.businessId = "RX202310210238"; |
|
this.businessId = options.businessId; |
|
this.operator = options.operator; |
|
this.deptId = options.deptId; |
|
this.pcType = options.pcType; |
|
this.sectionCode = options.sectionCode |
|
this.name = options.taskName |
|
this.sectionName = options.sectionName |
|
this.type = options.type; |
|
this.enumname = options.enumname |
|
this.deadlineStatus = options.deadlineStatus |
|
this.sectionType = options.sectionType |
|
this.pageType = 1; |
|
this.deadlineType = options.deadlineType |
|
this.initData(); |
|
this.getSystemInfo() |
|
this.pageHeight = uni.getSystemInfoSync().windowHeight; |
|
}, |
|
onShow() { |
|
if (this.pcTypes == 2) { |
|
this.pcTypes = 0 |
|
this.backPage() |
|
} |
|
}, |
|
onReady() { |
|
// wx请求获取位置权限 |
|
this.getAuthorize() |
|
.then(() => { |
|
// 同意后获取 |
|
// this.getLocationInfo(); |
|
}) |
|
.catch(() => { |
|
// 不同意给出弹框，再次确认 |
|
// this.getLocationInfo(); |
|
}); |
|
}, |
|
|
|
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"); |
|
}, |
|
mounted() { |
|
let that = this; |
|
var maps = uni.createMapContext("maps", this).$getAppMap(); |
|
maps.onclick = function(point) { |
|
console.log(point, "point"); |
|
if (that.pageType == 4) { |
|
that.longitude = point.longitude; |
|
that.latitude = point.latitude; |
|
that.covers = [{ |
|
id: "markers1", |
|
latitude: that.latitude, |
|
longitude: that.longitude, |
|
iconPath: "/static/icon/fill_position.svg", |
|
width: 24, //宽 |
|
height: 28, //高 |
|
}, ]; |
|
} |
|
|
|
// that.covers = []; |
|
// that.covers = [{ |
|
// id: 2, //点击时候是第二次作为标记点定义。id为2，不能重复 |
|
// latitude: point.latitude, |
|
// longitude: point.longitude, |
|
// iconPath: img, |
|
// fontSize: 80, |
|
// title: "所选位置" |
|
// }] |
|
// let pages = getCurrentPages() |
|
// let prevPage = pages[pages.length - 2] |
|
// let currentLocat = that.longitude + ',' + that.latitude |
|
// prevPage.$vm.getMapValue(currentLocat) |
|
// setTimeout(res=>{ |
|
// uni.navigateBack({ |
|
// delta: 1 // 返回的页面数 |
|
// }) |
|
// },1000) |
|
}; |
|
}, |
|
methods: { |
|
getSystemInfo() { |
|
// #ifdef APP-PLUS |
|
// 在 App 端执行的代码 |
|
// 获取系统信息 |
|
uni.getSystemInfo({ |
|
success: function(res) { |
|
// 判断运行环境是否为 App |
|
// if (res.platform === 'android' || res.platform === 'ios') { |
|
// 在 App 端执行获取定位信息的逻辑 |
|
uni.getLocation({ |
|
success: function(locationRes) { |
|
console.log('已获取定位信息', locationRes); |
|
// 在这里处理定位成功的逻辑 |
|
}, |
|
fail: function(error) { |
|
console.error('获取定位信息失败', error); |
|
if (error.errMsg.indexOf('auth deny') !== -1) { |
|
// 用户拒绝授权定位权限，可以引导用户打开权限设置页面 |
|
uni.showModal({ |
|
title: '提示', |
|
content: '请授权使用您的定位服务', |
|
confirmText: '去授权', |
|
success: function(modalRes) { |
|
if (modalRes.confirm) { |
|
uni.openSetting({ |
|
success: (settingRes) => { |
|
console.log( |
|
'openSetting success', |
|
settingRes |
|
.authSetting |
|
); |
|
// 在这里可以处理打开设置页面后的逻辑 |
|
}, |
|
fail: (settingError) => { |
|
console.log( |
|
'openSetting fail', |
|
settingError |
|
); |
|
// 打开设置页面失败的处理逻辑 |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
} |
|
} |
|
}); |
|
// } else { |
|
// console.log('当前不在 App 环境中'); |
|
// // 在非 App 环境中的处理逻辑 |
|
// } |
|
} |
|
}); |
|
// #endif |
|
}, |
|
initData() { |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/highDanger/getDangerRoad", { |
|
businessId: this.businessId, |
|
ifCross: this.sectionType |
|
}, |
|
"GET" |
|
) |
|
.then((res) => { |
|
console.log(res); |
|
if (res.code === 200) { |
|
if (res.result) { |
|
this.pageType1Result = res.result; |
|
this.sectionCode = res.result.sectionCode; |
|
this.roadName = res.result.name; |
|
this.pointType = res.result.pointType; |
|
this.longitude = res.result.coordinateList[0].longitude; //118.787575; |
|
this.latitude = res.result.coordinateList[0].latitude; //32.05024; |
|
this.covers = [{ |
|
id: "markers1", |
|
latitude: this.latitude, |
|
longitude: this.longitude, |
|
iconPath: "/static/icon/fill_position.svg", |
|
width: 24, //宽 |
|
height: 28, //高 |
|
}, ]; |
|
this.polyline = [{ |
|
name: "xian1", |
|
arrowLine: true, |
|
color: "#CC2936", |
|
width: 8, |
|
id: 1, |
|
points: res.result.coordinateList, |
|
}, ]; |
|
} else { |
|
this.pageType = 2; |
|
this.getLocationInfo(); |
|
} |
|
} else { |
|
this.$.toast(res.message); |
|
} |
|
}); |
|
}, |
|
initDat2() { |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/highDanger/getNearRoadInfo", { |
|
x: this.longitude, |
|
y: this.latitude, |
|
}, |
|
"POST" |
|
) |
|
.then((res) => { |
|
console.log(res); |
|
if (res.code === 200) { |
|
this.data = res.result; |
|
this.sectionCode = this.data[0].sectionCode; |
|
this.roadName = this.data[0].name; |
|
this.pointType = this.data[0].type; |
|
this.rname = this.data[0].name; |
|
this.polyline = [{ |
|
name: "xian1", |
|
arrowLine: true, |
|
color: "#CC2936", |
|
width: 8, |
|
id: 1, |
|
points: this.data[0].position, |
|
}, ]; |
|
} else { |
|
this.$.toast(res.message); |
|
} |
|
}); |
|
}, |
|
// 返回 |
|
backPage() { |
|
uni.navigateBack({ |
|
delta: 1, // 默认值是1，表示返回的页面层数 |
|
}); |
|
}, |
|
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, t) { |
|
this.show = false; |
|
if (v == 1) { |
|
// let json = { |
|
// name: "023县道", |
|
// operator: "admin1", |
|
// deptId: "3702000000", |
|
// sectionCode: "37020017609", |
|
// businessId: "000001", |
|
// pointType: '1' |
|
// }; |
|
|
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/highDanger/HighDangerSaveStatus", { |
|
businessId: this.businessId, |
|
pcType: "1", |
|
}, |
|
"GET" |
|
) |
|
.then((res) => { |
|
console.log(res); |
|
if (res.code === 200) { |
|
this.pcType = 1 |
|
this.$.open( |
|
"/pages/index/detail?taskId=" + |
|
this.businessId + |
|
"&id=" + |
|
this.sectionCode + |
|
"§ionId=" + |
|
this.sectionCode + |
|
"&roadName=" + |
|
this.roadName + |
|
"&userId=" + |
|
this.operator + |
|
"&deptId=" + |
|
this.deptId + |
|
"§ionType=" + |
|
this.sectionType |
|
); |
|
} else { |
|
this.$.toast(res.message); |
|
} |
|
}); |
|
} |
|
if (v == 2) { |
|
if (t) { |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/highDanger/HighDangerSaveStatus", { |
|
businessId: this.businessId, |
|
pcType: "2", |
|
}, |
|
"GET" |
|
) |
|
.then((res) => { |
|
console.log(res); |
|
if (res.code === 200) { |
|
this.pcTypes = 2 |
|
this.pcType = 2 |
|
this.show2 = false; |
|
// this.$.open("/pages/investigation/task" + "?id=" + this.businessId); |
|
this.$.open("/pages/investigation/task" + "?id=" + this.businessId + |
|
'§ionId=' + this.sectionCode + |
|
'&operator=' + this.operator + '&deptId=' + this.handleDept + |
|
'&taskName=' + this.name + |
|
'&pcType' + this.pcType + '§ionName=' + this.sectionName + |
|
'§ionCode=' + this.sectionCode + '§ionType=' + this.sectionType); |
|
} else { |
|
this.$.toast(res.message); |
|
} |
|
}); |
|
} else { |
|
|
|
this.show2 = false; |
|
this.$.open("/pages/investigation/task" + "?id=" + this.businessId); |
|
} |
|
} |
|
|
|
// this.$.open(url + "?id=" + 'RX202310210236'); |
|
}, |
|
handleCheck2() { |
|
|
|
if (this.pcType == 1) { |
|
this.show2 = true |
|
} else if (this.pcType == 2) { |
|
this.handleCheck(2, true) |
|
} else { |
|
this.handleCheck(2, true) |
|
} |
|
}, |
|
handleSubmit() { |
|
let address = ""; |
|
if (this.ftype == 1) { |
|
address = `${this.name1}（${this.name2}-${this.name3}）`; |
|
} else { |
|
address = `${this.name1}（${this.name4}）`; |
|
} |
|
this.$request |
|
.globalRequest( |
|
"/hiddenDanger/highDanger/saveSectionOrCrossing", { |
|
businessId: this.businessId, |
|
address, |
|
coordinate: this.longitude + "," + this.latitude, |
|
addType: this.ftype, |
|
}, |
|
"POST" |
|
) |
|
.then((res) => { |
|
console.log(res); |
|
if (res.code === 200) { |
|
this.show = true; |
|
this.sectionCode = res.sectionCode; |
|
this.roadName = address; |
|
this.pointType = this.ftype; |
|
// this.data = res.result; |
|
// console.log(this.data[0][Object.keys(this.data[0])]) |
|
// this.rname = Object.keys(this.data[0])[0] |
|
// this.polyline = [ |
|
// { |
|
// name: "xian1", |
|
// arrowLine: true, |
|
// color: "#CC2936", |
|
// width: 8, |
|
// id: 1, |
|
// points: this.data[0][Object.keys(this.data[0])].position, |
|
// }, |
|
// ]; |
|
} else { |
|
this.$.toast(res.message); |
|
} |
|
}); |
|
}, |
|
onList(e, i) { |
|
console.log(e); |
|
this.pageType = 2; |
|
this.idx = i; |
|
this.sectionCode = e.sectionCode; |
|
this.roadName = e.name; |
|
this.pointType = e.type; |
|
if (e && e.name && e.position) { |
|
this.rname = e.name; |
|
this.longitude = e.position[0].longitude; |
|
this.latitude = e.position[0].latitude; |
|
this.covers = [{ |
|
id: "markers1", |
|
latitude: e.position[0].latitude, |
|
longitude: e.position[0].longitude, |
|
iconPath: "/static/icon/fill_position.svg", |
|
width: 24, //宽 |
|
height: 28, //高 |
|
}, ]; |
|
this.polyline = [{ |
|
name: "xian1", |
|
arrowLine: true, |
|
color: "#CC2936", |
|
width: 8, |
|
id: 1, |
|
points: e.position, |
|
}, ]; |
|
} |
|
}, |
|
// 初次位置授权 |
|
|
|
getAuthorize() { |
|
return new Promise((resolve, reject) => { |
|
uni.authorize({ |
|
scope: "scope.userLocation", |
|
success: () => { |
|
resolve(); // 允许授权 |
|
}, |
|
fail: () => { |
|
reject(); // 拒绝授权 |
|
}, |
|
}); |
|
}); |
|
}, |
|
// 确认授权后，获取用户位置 |
|
getLocationInfo() { |
|
console.log("getLocationInfo"); |
|
uni.getLocation({ |
|
type: "wgs84", |
|
success: (res) => { |
|
console.log(res); |
|
const coord = wgs84LL2gcjLL2(res.longitude, res.latitude); |
|
console.log(coord); |
|
this.longitude = coord[0]; //118.787575; |
|
this.latitude = coord[1]; //32.05024; |
|
// this.longitude = 120.38771; |
|
// this.latitude = 36.110146; |
|
this.covers = [{ |
|
id: "markers1", |
|
latitude: this.latitude, |
|
longitude: this.longitude, |
|
iconPath: "/static/icon/fill_position.svg", |
|
width: 24, //宽 |
|
height: 28, //高 |
|
}, ]; |
|
this.initDat2(); |
|
}, |
|
}); |
|
}, |
|
// 彻底拒绝位置获取 |
|
rejectGetLocation() { |
|
uni.showToast({ |
|
title: "你拒绝了授权，无法获得周边信息", |
|
icon: "none", |
|
duration: 2000, |
|
}); |
|
}, |
|
confirm() { |
|
this.getList(); |
|
}, |
|
getList() { |
|
const data = { |
|
x: this.longitude, |
|
y: this.latitude, |
|
search: this.search, |
|
}; |
|
console.log(data) |
|
if (!this.search) delete data.search; |
|
this.$request |
|
.globalRequest("/hiddenDanger/highDanger/getNearRoadInfo", data, "POST") |
|
.then((res) => { |
|
console.log(res); |
|
this.data = res.result; |
|
}); |
|
}, |
|
onJump(v) { |
|
this.pageType = v; |
|
}, |
|
getTop() { |
|
if (this.pageType == 1) { |
|
return `top: calc(${this.pageHeight}px - 280px)`; |
|
} |
|
if (this.pageType == 2) { |
|
return `top: calc(${this.pageHeight}px - 280px)`; |
|
} |
|
if (this.pageType == 3) { |
|
return `top: calc(${this.pageHeight}px - 410px)`; |
|
} |
|
if (this.pageType == 4) { |
|
return `top: calc(${this.pageHeight}px - 440px)`; |
|
} |
|
}, |
|
getHeight() { |
|
if (this.pageType == 1) { |
|
return `height: ${this.pageHeight - 230}px`; |
|
} |
|
if (this.pageType == 2) { |
|
return `height: ${this.pageHeight - 210}px`; |
|
} |
|
if (this.pageType == 3) { |
|
return `height: ${this.pageHeight - 350}px`; |
|
} |
|
if (this.pageType == 4) { |
|
return `height: ${this.pageHeight - 388}px`; |
|
} |
|
}, |
|
onMapTap(r) { |
|
if (this.pageType == 4) { |
|
this.covers = [{ |
|
id: "markers2", |
|
latitude: this.latitude, |
|
longitude: this.longitude, |
|
iconPath: "/static/icon/fill_position.svg", |
|
width: 24, //宽 |
|
height: 28, //高 |
|
}, ]; |
|
} |
|
console.log(r); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.map { |
|
width: 100%; |
|
height: 64vh; |
|
position: relative; |
|
|
|
.location { |
|
position: absolute; |
|
width: 48px; |
|
height: 48px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
right: 10px; |
|
top: calc(50vh + 70px); |
|
background: #fff; |
|
border-radius: 16px; |
|
z-index: 99998; |
|
|
|
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: 99999; |
|
|
|
.status { |
|
position: absolute; |
|
top: 0px; |
|
right: 0; |
|
width: 50px; |
|
height: 28px; |
|
line-height: 28px; |
|
font-size: 22rpx; |
|
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: 96%; |
|
} |
|
|
|
.mimg { |
|
width: 120px; |
|
height: 90px; |
|
} |
|
|
|
.top { |
|
padding: 14px; |
|
display: flex; |
|
|
|
.tit { |
|
width: 92%; |
|
height: 100rpx; |
|
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: 8px 14px 8px 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; |
|
} |
|
|
|
.btn8 { |
|
width: 100%; |
|
/* background: url(../../static/map/rr.png); |
|
background-size: 100% 100%; |
|
background-repeat: no-repeat; */ |
|
background-color: rgb(53, 103, 193); |
|
border-radius: 9px; |
|
} |
|
} |
|
} |
|
|
|
.dialog-one { |
|
height: 410rpx; |
|
} |
|
|
|
.dialog-two { |
|
height: 410rpx; |
|
|
|
.two-f1 { |
|
text-align: center; |
|
margin: 56rpx 0; |
|
|
|
font-size: 28rpx; |
|
color: #777777; |
|
} |
|
|
|
.two-f2 { |
|
text-align: center; |
|
height: 96rpx; |
|
margin-bottom: 16rpx; |
|
|
|
font-size: 36rpx; |
|
color: #333333; |
|
} |
|
} |
|
|
|
.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; |
|
|
|
image { |
|
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; |
|
|
|
image { |
|
width: 22px; |
|
height: 24px; |
|
margin: 12px; |
|
} |
|
|
|
.tit { |
|
width: 62%; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.jl { |
|
width: 30%; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.umodal { |
|
position: absolute; |
|
width: 100%; |
|
height: 100vh; |
|
top: 0; |
|
left: 0; |
|
z-index: 99999; |
|
background: rgba(0, 0, 0, 0.16); |
|
|
|
.umodal-box { |
|
width: 90%; |
|
height: 240rpx; |
|
position: absolute; |
|
background: #fff; |
|
border-radius: 12rpx; |
|
top: 600rpx; |
|
left: 5%; |
|
|
|
.umodal-content { |
|
width: 100%; |
|
height: 140rpx; |
|
|
|
font-size: 14px; |
|
color: #606266; |
|
line-height: 140rpx; |
|
padding-left: 12px; |
|
} |
|
|
|
.umodal-line1 { |
|
width: 100%; |
|
height: 1px; |
|
background: #eaebec; |
|
} |
|
|
|
.umodal-line2 { |
|
width: 1px; |
|
height: 100%; |
|
background: #eaebec; |
|
} |
|
|
|
.umodal-btnbox { |
|
display: flex; |
|
width: 100%; |
|
height: 100rpx; |
|
justify-content: center; |
|
|
|
.umodal-btn { |
|
width: 50%; |
|
height: 100%; |
|
|
|
line-height: 90rpx; |
|
text-align: center; |
|
font-size: 16px; |
|
color: rgb(41, 121, 255); |
|
box-sizing: border-box; |
|
} |
|
} |
|
} |
|
} |
|
</style> |