应急管理需求
This commit is contained in:
parent
799ede7d1a
commit
4923425898
@ -3,9 +3,9 @@
|
||||
<view class="tki-tree-mask" :class="{'show':showTree}" @tap="_cancel"></view>
|
||||
<view class="tki-tree-cnt" :class="{'show':showTree}">
|
||||
<view class="tki-tree-bar">
|
||||
<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">取消</view>
|
||||
<view class="tki-tree-bar-cancel" :style="{'color':cancelColor}" hover-class="hover-c" @tap="_cancel">{{ cancelText }}</view>
|
||||
<view class="tki-tree-bar-title" :style="{'color':titleColor}">{{title}}</view>
|
||||
<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">确定</view>
|
||||
<view class="tki-tree-bar-confirm" :style="{'color':confirmColor}" hover-class="hover-c" @tap="_confirm">{{ confirmText }}</view>
|
||||
</view>
|
||||
<view class="tki-tree-view">
|
||||
<scroll-view class="tki-tree-view-sc" :scroll-y="true">
|
||||
@ -78,6 +78,14 @@
|
||||
type: String,
|
||||
default: '' // #07bb07
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
cancelColor: { // 取消按钮颜色
|
||||
type: String,
|
||||
default: '' // #757575
|
||||
|
||||
2
main.js
2
main.js
@ -37,6 +37,7 @@ Vue.prototype.COMPANY = "agjt" // 鞍钢集团环境
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 开发环境
|
||||
console.log('开发环境')
|
||||
// Vue.prototype.url_config = 'http://121.37.106.37:9809/' // 121测试环境
|
||||
// Vue.prototype.url_config = 'http://47.93.215.234:9809/' // 鞍钢正式地址（弃用）
|
||||
// Vue.prototype.url_config = 'http://42.180.188.17:9809/' // 鞍钢正式地址
|
||||
// Vue.prototype.url_config = 'http://42.180.188.17:11211/' // 鞍钢测试地址
|
||||
@ -46,6 +47,7 @@ if (process.env.NODE_ENV === 'development') {
|
||||
// Vue.prototype.url_config = 'http://192.168.34.221:9111/' //郭圣雄本地
|
||||
// Vue.prototype.url_config = 'http://182.90.224.237:51234/' //郭圣雄本地
|
||||
Vue.prototype.url_config = 'http://192.168.34.155:19111/' //彭洁本地
|
||||
// Vue.prototype.url_config = 'http://183.249.224.118:9000/'// 嘉兴项目
|
||||
// Vue.prototype.work_url = 'http://47.93.215.234:19997' // 工作流线上地址（弃用）
|
||||
// Vue.prototype.work_url = 'http://42.180.188.17:19997' // 工作流线上地址
|
||||
// Vue.prototype.work_url = 'http://42.180.188.17:19097' // 工作流测试地址
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
"name" : "智慧安全", //中建四局
|
||||
"appid" : "__UNI__4AA4101",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.3",
|
||||
"versionCode" : 103,
|
||||
"versionName" : "1.3.6",
|
||||
"versionCode" : 136,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
|
||||
21
pages.json
21
pages.json
@ -2778,6 +2778,27 @@
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/projectEnd/exerciseInfo/index",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/projectEnd/exerciseInfo/details",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path" : "pages/projectEnd/exerciseInfo/map",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText" : ""
|
||||
}
|
||||
}
|
||||
],
|
||||
// "subPackages":[{
|
||||
|
||||
272
pages/projectEnd/exerciseInfo/details.vue
Normal file
272
pages/projectEnd/exerciseInfo/details.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="deetailPage">
|
||||
<view class="fixedheader">
|
||||
<headers :showBack="true">
|
||||
<view class="headerName"> 应急信息 </view>
|
||||
</headers>
|
||||
</view>
|
||||
|
||||
<view class="content record" :style="{ paddingTop: mobileTopHeight + 50 + 'px' }">
|
||||
<view class="type flex2">
|
||||
<view class="textColor">预案名称</view>
|
||||
<view class="textRight">{{ scenariosName }}</view>
|
||||
</view>
|
||||
<view class="type flex2">
|
||||
<view class="textColor">应急联系机构</view>
|
||||
<view class="textRight">{{ basicInfo.groupName }}</view>
|
||||
</view>
|
||||
<view class="type flex2">
|
||||
<view class="textColor">联系人</view>
|
||||
|
||||
<view class="textRight">{{ basicInfo.workerName }}</view>
|
||||
</view>
|
||||
<view class="type flex2">
|
||||
<view class="textColor">联系方式</view>
|
||||
<view class="textRight">{{ basicInfo.workerPhone }}</view>
|
||||
</view>
|
||||
<view class="type flex2">
|
||||
<view class="textColor">地址</view>
|
||||
<view class="textRight" style="margin-right: 28px">{{ basicInfo.address }}</view>
|
||||
<image @click="handleJumpMap(basicInfo.address)" class="location_ic" src="@/static/icon/location.svg"></image>
|
||||
</view>
|
||||
<view class="type flex2">
|
||||
<view class="textColor">是否签订合作协议</view>
|
||||
<view class="textRight">{{ basicInfo.isContract == 1 ? '是' : '否' }}</view>
|
||||
</view>
|
||||
<view style="margin-top: 10px">
|
||||
<!-- <view class="textColor" style="width: 110px;">视频/音频附件</view> -->
|
||||
<view
|
||||
v-if="fileUrl.length > 0"
|
||||
v-for="(item, index) in fileUrl"
|
||||
:key="index"
|
||||
style="width: 95%; display: flex; align-items: center; margin-bottom: 8px"
|
||||
@click="handlePreview(item)"
|
||||
>
|
||||
<image class="file_ic" src="/static/images.png"></image>
|
||||
<view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
|
||||
<view style="line-height: 28px">{{ item.name }}</view>
|
||||
<view>{{ $formatDates(item.uid) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-action-sheet :list="list" @click="selectClick" title="请选择" v-model="show"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uActionSheet from '@/components/u-action-sheet/u-action-sheet.vue'
|
||||
export default {
|
||||
components: {
|
||||
uActionSheet
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
{
|
||||
text: '预览'
|
||||
},
|
||||
{
|
||||
text: '下载'
|
||||
}
|
||||
],
|
||||
show: false,
|
||||
mobileTopHeight: 0,
|
||||
checkedTab: 1,
|
||||
imgFileList: [],
|
||||
fileUrl: [],
|
||||
basicInfo: {},
|
||||
issueInfoList: [],
|
||||
userInfo: {},
|
||||
id: '',
|
||||
fileData: {},
|
||||
scenariosName: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.id = option.id
|
||||
this.scenariosName = option.scenariosName
|
||||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||||
},
|
||||
onShow() {
|
||||
this.getBasicInfo()
|
||||
},
|
||||
mounted() {
|
||||
var that = this
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
|
||||
uni.setStorageSync('systemInfo', res)
|
||||
}
|
||||
})
|
||||
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
||||
},
|
||||
methods: {
|
||||
//获取基本信息
|
||||
getBasicInfo() {
|
||||
let that = this
|
||||
this.sendRequest({
|
||||
url: 'xmgl/urgentEventInfo/queryById',
|
||||
method: 'post',
|
||||
data: {
|
||||
id: that.id
|
||||
},
|
||||
success: res => {
|
||||
that.basicInfo = res.result
|
||||
if (res.result.fileUrl) {
|
||||
that.fileUrl = JSON.parse(res.result.fileUrl)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePreview(item) {
|
||||
this.show = true
|
||||
this.fileData = item
|
||||
},
|
||||
selectClick(data) {
|
||||
if (data === 1) {
|
||||
this.downloadFile()
|
||||
} else {
|
||||
this.previewFile()
|
||||
}
|
||||
},
|
||||
downloadFile() {
|
||||
let url = this.url_config + 'image/' + this.fileData.url
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
})
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: function (res) {
|
||||
var filePath = res.tempFilePath
|
||||
uni.saveImageToPhotosAlbum({
|
||||
// 然后调用这个方法
|
||||
filePath: filePath,
|
||||
success: res => {
|
||||
uni.hideLoading() //关闭提示
|
||||
uni.showToast({
|
||||
title: '保存成功'
|
||||
})
|
||||
},
|
||||
fail: e => {
|
||||
console.log(e)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
previewFile() {
|
||||
let url = this.url_config + 'image/' + this.fileData.url
|
||||
if (this.fileData.iconType == 'image') {
|
||||
uni.previewImage({
|
||||
urls: [url]
|
||||
})
|
||||
} else {
|
||||
// uni.showLoading({
|
||||
// title: '打开文档中...'
|
||||
// })
|
||||
uni.downloadFile({
|
||||
url: url,
|
||||
success: function (res) {
|
||||
var filePath = res.tempFilePath
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
success: function (res) {
|
||||
console.log('打开文档成功')
|
||||
// uni.hideLoading() //关闭提示
|
||||
// uni.showToast({
|
||||
// title: '打开文档成功'
|
||||
// })
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
// //#ifdef H5
|
||||
// uni.showToast({
|
||||
// title: '暂不支持预览！',
|
||||
// icon: "none",
|
||||
// duration: 2000
|
||||
// });
|
||||
// return;
|
||||
// //#endif
|
||||
},
|
||||
handleJumpMap(addr) {
|
||||
uni.navigateTo({
|
||||
url: `./map?latitude=&longitude=&addr=${addr}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fixedheader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
.headerName {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
|
||||
.flex3 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.deetailPage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 16rpx;
|
||||
}
|
||||
|
||||
.type {
|
||||
font-size: 30rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid rgba(194, 194, 194, 0.2);
|
||||
}
|
||||
.record {
|
||||
/* background-color: rgba(234, 234, 234, 0.4); */
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.textRight {
|
||||
margin-left: 20px;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.textColor {
|
||||
color: gray;
|
||||
width: 68px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.location_ic {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
position: absolute;
|
||||
right: 30rpx;
|
||||
}
|
||||
.file_ic {
|
||||
width: 78rpx;
|
||||
height: 78rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
</style>
|
||||
452
pages/projectEnd/exerciseInfo/index.vue
Normal file
452
pages/projectEnd/exerciseInfo/index.vue
Normal file
@ -0,0 +1,452 @@
|
||||
<template>
|
||||
<view class="listPage" :class="{ popupShow: popupShow }">
|
||||
<view class="fixedheader">
|
||||
<headers :showBack="true" :themeType="true">
|
||||
<view class="headerName"> 应急信息 </view>
|
||||
</headers>
|
||||
<view class="searchBox">
|
||||
<form>
|
||||
<view class="uni-form-item">
|
||||
<view class="screen" @click="$refs.typeTree._show()">筛选</view>
|
||||
<view class="screen" style="margin-top: 3px; margin-left: 5px">
|
||||
<image src="/static/screenIcon.png" style="width: 15px; height: 15px"> </image>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content" :style="{ paddingTop: mobileTopHeight + 100 + 'px' }">
|
||||
<view class="item" v-if="listData.length > 0" v-for="(item, index) in listData" :key="index" @click="goDetails(item)">
|
||||
<view class="item_title">
|
||||
{{ item.scenariosName }}
|
||||
</view>
|
||||
<view class="item_content">预案类型：{{ item.typeName }}</view>
|
||||
<view class="item_content mt">编制时间: {{ item.createTime }}</view>
|
||||
<view class="item_content mt">组织名称: {{ item.groupName }}</view>
|
||||
</view>
|
||||
<view class="noData" v-if="listData.length == 0">
|
||||
<image class="noDataImg" src="../../../static/noData.png"></image>
|
||||
<view>暂无数据</view>
|
||||
</view>
|
||||
<tki-tree
|
||||
style="z-index: 9999"
|
||||
cancelText="清空"
|
||||
ref="typeTree"
|
||||
@cancel="resettingBtn()"
|
||||
@confirm="val => searchItem(val)"
|
||||
idKey="id"
|
||||
:range="typeList"
|
||||
rangeKey="name"
|
||||
confirmColor="#4e8af7"
|
||||
:selectParent="true"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobileTopHeight: 0,
|
||||
popupShow: false,
|
||||
listData: [],
|
||||
condition: {
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
search: '', //搜索字段
|
||||
typeId: ''
|
||||
},
|
||||
checkItem: undefined,
|
||||
teach: true,
|
||||
typeList: [],
|
||||
userInfo: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
||||
this.getSelectData()
|
||||
},
|
||||
mounted() {
|
||||
var that = this
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
|
||||
uni.setStorageSync('systemInfo', res)
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
console.log('this.mobileTopHeight', this.mobileTopHeight)
|
||||
},
|
||||
onShow() {
|
||||
this.listData = []
|
||||
this.condition.pageNo = 1
|
||||
this.condition.pageSize = 10
|
||||
this.getListData()
|
||||
},
|
||||
//上拉触底时间
|
||||
onReachBottom() {
|
||||
if (this.teach) {
|
||||
this.condition.pageNo = this.condition.pageNo + 1
|
||||
// this.condition.pageNo = this.condition.pageNo;
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//重置
|
||||
resettingBtn() {
|
||||
this.listData = []
|
||||
this.condition.pageNo = 1
|
||||
this.condition.pageSize = 10
|
||||
this.getListData()
|
||||
},
|
||||
//点击筛选项
|
||||
searchItem(item, index) {
|
||||
let that = this
|
||||
that.condition.typeId = (item && item[0].id) || ''
|
||||
this.sendRequest({
|
||||
url: 'xmgl/urgentEventInfo/page',
|
||||
method: 'post',
|
||||
data: that.condition,
|
||||
success: res => {
|
||||
that.listData = []
|
||||
that.listNum = res.result.total
|
||||
let arr = JSON.parse(JSON.stringify(that.listData))
|
||||
if (res.result.records.length > 0) {
|
||||
let newArr = arr.concat(res.result.records)
|
||||
if (res.result.records.length < 10) {
|
||||
that.teach = false
|
||||
} else {
|
||||
that.teach = true
|
||||
}
|
||||
that.listData = newArr
|
||||
} else {
|
||||
that.teach = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取筛选数据
|
||||
getSelectData() {
|
||||
this.sendRequest({
|
||||
url: 'xmgl/urgentEventType/tree',
|
||||
method: 'post',
|
||||
data: {
|
||||
pageNo: -1,
|
||||
sn: JSON.parse(uni.getStorageSync('userInfo')).headquartersSn
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 200) {
|
||||
this.typeList = res.result.records
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取列表数据
|
||||
getListData() {
|
||||
let that = this
|
||||
this.sendRequest({
|
||||
url: 'xmgl/urgentEventInfo/page',
|
||||
method: 'post',
|
||||
data: that.condition,
|
||||
success: res => {
|
||||
that.listNum = res.result.total
|
||||
let arr = JSON.parse(JSON.stringify(that.listData))
|
||||
if (res.result.records.length > 0) {
|
||||
let newArr = arr.concat(res.result.records)
|
||||
if (res.result.records.length < 10) {
|
||||
that.teach = false
|
||||
} else {
|
||||
that.teach = true
|
||||
}
|
||||
that.listData = newArr
|
||||
} else {
|
||||
that.teach = false
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
goDetails(obj) {
|
||||
uni.navigateTo({
|
||||
url: './details?id=' + obj.id + '&scenariosName=' + obj.scenariosName
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fixedheader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
.headerName {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #ccc;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.screenDialog {
|
||||
position: absolute;
|
||||
// top: 11%;
|
||||
height: 95%;
|
||||
/* background: pink; */
|
||||
background: white;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
margin-left: -4%;
|
||||
background-color: white;
|
||||
/* 设置为半透明的灰色 */
|
||||
z-index: 9;
|
||||
/* 设置一个较大的 z-index 值，保证遮罩层在最上层 */
|
||||
|
||||
.closeIcon {
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
color: gray;
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.screenTitle {
|
||||
text-align: center;
|
||||
margin-top: 4%;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-popup__wrapper-box {
|
||||
height: 70vh;
|
||||
overflow: scroll;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.screenContent {
|
||||
width: 100vw;
|
||||
height: 70%;
|
||||
// width: 90%;
|
||||
// margin: -65% 0%;
|
||||
overflow: scroll;
|
||||
// position: relative;
|
||||
// margin-top: 180%;
|
||||
border-radius: 20px 20px 0 0;
|
||||
// margin-left: -4%;
|
||||
background-color: white;
|
||||
// padding-left: 10%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.titleItem {
|
||||
font-size: 14px;
|
||||
|
||||
.regionText {
|
||||
display: inline-block;
|
||||
margin-left: 16%;
|
||||
width: 190px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenItem {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.screenI {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: gray;
|
||||
margin: 5% 0;
|
||||
}
|
||||
|
||||
.screenText {
|
||||
width: 90px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
background: #f7f8fa;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
margin: 5% 5% 5% 0%;
|
||||
}
|
||||
|
||||
.active {
|
||||
width: 90px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
background: #edf2fe;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
margin: 5% 5% 5% 0%;
|
||||
border: 1px solid #5181f6;
|
||||
}
|
||||
|
||||
.screenTextClose {
|
||||
width: 90px;
|
||||
font-size: 12px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #000;
|
||||
margin: 5% 5% 5% 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.footerBtn {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
margin-top: 2%;
|
||||
margin-left: 6%;
|
||||
margin-right: 6%;
|
||||
.btn {
|
||||
width: 100%;
|
||||
background: #5181f6;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.uni-form-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 32rpx;
|
||||
font-size: 14px;
|
||||
/* .search-icon{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50rpx;
|
||||
transform: translateY(-50%);
|
||||
} */
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
border-radius: 20px;
|
||||
margin: 10px 10px;
|
||||
background-color: #f7f8fa;
|
||||
height: 35px;
|
||||
line-height: 30px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.screen {
|
||||
line-height: 50px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.picker {
|
||||
margin-bottom: 15px;
|
||||
margin-left: 100px;
|
||||
width: 164px;
|
||||
border: 1px solid #ccc;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0px 30rpx 0;
|
||||
box-sizing: border-box;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.item {
|
||||
// height: 160px;
|
||||
width: 100%;
|
||||
padding: 12px 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-size: 32rpx;
|
||||
font-family: PingFangSC-Medium;
|
||||
}
|
||||
.item_title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.item_content {
|
||||
width: 100%;
|
||||
font-size: 28rpx;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
font-family: PingFangSC-Regular;
|
||||
line-height: 28px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #999;
|
||||
// &.mt {
|
||||
// margin-top: 16rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
.noData {
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
margin-top: 120px;
|
||||
color: #bed0fb;
|
||||
}
|
||||
|
||||
.noDataImg {
|
||||
width: 125px;
|
||||
height: 98px;
|
||||
}
|
||||
|
||||
::v-deep .tki-tree-cnt {
|
||||
z-index: 99999;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
::v-deep .tki-tree-bar {
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
::v-deep .placeholder {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.popupShow {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
}
|
||||
</style>
|
||||
345
pages/projectEnd/exerciseInfo/map.vue
Normal file
345
pages/projectEnd/exerciseInfo/map.vue
Normal file
@ -0,0 +1,345 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="fixedheader">
|
||||
<headers :showBack="true">
|
||||
<view class="headerName"> 当前位置 </view>
|
||||
</headers>
|
||||
</view>
|
||||
<view class="content" :style="{ paddingTop: mobileTopHeight + fixedHeaderHeight + 'px' }" v-show="showMap">
|
||||
<view class="search-box">
|
||||
<input class="search-input" v-model="searchVal" placeholder="请输入地点" />
|
||||
<button class="search-btn" size="mini" type="primary" @click="searchArea">搜索</button>
|
||||
</view>
|
||||
<map
|
||||
id="map"
|
||||
:style="{
|
||||
width: mapConfig.width + 'px',
|
||||
height: mapConfig.height + 'px',
|
||||
margin: 0
|
||||
}"
|
||||
:show-scale="true"
|
||||
:scale="mapConfig.scale"
|
||||
:latitude="mapConfig.latitude"
|
||||
:longitude="mapConfig.longitude"
|
||||
:markers="mapConfig.markers"
|
||||
:circles="mapConfig.circles"
|
||||
></map>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let mapSearch = weex.requireModule('mapSearch')
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobileTopHeight: 0,
|
||||
fixedHeaderHeight: 0,
|
||||
mapConfig: {
|
||||
width: 0,
|
||||
height: 0,
|
||||
scale: 14,
|
||||
latitude: undefined,
|
||||
longitude: undefined,
|
||||
markers: [], // 定位配置
|
||||
circles: [], // 显示圆配置
|
||||
address: ''
|
||||
},
|
||||
showMap: false,
|
||||
coordType: 'gcj02',
|
||||
map: null,
|
||||
standOptions: [30, 50, 100, 200, 300],
|
||||
searchVal: ''
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let that = this
|
||||
uni.getSystemInfo({
|
||||
success(res) {
|
||||
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0
|
||||
uni.setStorageSync('systemInfo', res)
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
let info = uni.getWindowInfo()
|
||||
this.mapConfig.width = info.windowWidth
|
||||
this.fixedHeaderHeight = await this.getHeight('.fixedheader')
|
||||
console.info(this.fixedHeaderHeight, '--------')
|
||||
this.mapConfig.height = info.windowHeight - this.mobileTopHeight - this.fixedHeaderHeight - 2 - 50
|
||||
// this.mapConfig.height = 450;
|
||||
console.log('this.mobileTopHeight', this.mobileTopHeight, this.mapConfig.height)
|
||||
this.init()
|
||||
},
|
||||
onLoad(option) {
|
||||
this.mapConfig.latitude = option.latitude
|
||||
this.mapConfig.longitude = option.longitude
|
||||
this.mapConfig.address = option.addr
|
||||
|
||||
// console.info(info, 'info.windowHeight')
|
||||
this.showMap = false
|
||||
uni.showLoading({
|
||||
title: '加载地图资源中'
|
||||
})
|
||||
// this.openMonitor()
|
||||
},
|
||||
methods: {
|
||||
async getHeight(name) {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
return new Promise(resolve => {
|
||||
query
|
||||
.select(name)
|
||||
.boundingClientRect(data => {
|
||||
resolve(data.height)
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
},
|
||||
init() {
|
||||
let that = this
|
||||
if (this.mapConfig.address) {
|
||||
mapSearch.poiKeywordsSearch(
|
||||
{
|
||||
point: {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude
|
||||
},
|
||||
key: this.mapConfig.address
|
||||
},
|
||||
res => {
|
||||
console.info('搜索:', res)
|
||||
if (res.poiList.length) {
|
||||
const { latitude, longitude } = res.poiList[0].location
|
||||
that.mapConfig.latitude = latitude
|
||||
that.mapConfig.longitude = longitude
|
||||
that.initMap()
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this.initMap()
|
||||
}
|
||||
},
|
||||
initMap() {
|
||||
console.info(this.mapConfig, 'initMap')
|
||||
if (this.mapConfig.latitude && this.mapConfig.longitude) {
|
||||
this.map = uni.createMapContext('map', this)
|
||||
// this.registerEvent()
|
||||
this.mapSetLocation()
|
||||
// this.drawCircle()
|
||||
this.showMap = true
|
||||
uni.hideLoading()
|
||||
} else {
|
||||
// this.mapGetLocation()
|
||||
}
|
||||
},
|
||||
mapGetLocation() {
|
||||
let that = this
|
||||
uni.getLocation({
|
||||
type: that.coordType,
|
||||
geocode: true,
|
||||
isHighAccuracy: 'true',
|
||||
accuracy: 'best', // 精度值为20m
|
||||
success: function (res) {
|
||||
console.log('当前位置的经度：' + res.longitude)
|
||||
console.log('当前位置的纬度：' + res.latitude)
|
||||
console.log(res, 'res..')
|
||||
that.mapConfig.latitude = res.latitude
|
||||
that.mapConfig.longitude = res.longitude
|
||||
const { country, province, city, district, street, streetNum, poiName } = res.address
|
||||
that.mapConfig.address = country + province + city + district + street + streetNum + poiName
|
||||
that.map = uni.createMapContext('map', that)
|
||||
// that.registerEvent()
|
||||
that.mapSetLocation()
|
||||
// that.drawCircle()
|
||||
that.showMap = true
|
||||
uni.hideLoading()
|
||||
},
|
||||
fail: function (msg) {
|
||||
console.log('获取位置失败', msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 注册点击事件
|
||||
registerEvent() {
|
||||
let that = this
|
||||
this.map.$getAppMap().onclick = function (point) {
|
||||
console.info(point, 'point')
|
||||
that.mapConfig.longitude = point.longitude
|
||||
that.mapConfig.latitude = point.latitude
|
||||
that.mapSetLocation()
|
||||
that.drawCircle()
|
||||
that.getAddress()
|
||||
}
|
||||
},
|
||||
// 设置定位
|
||||
mapSetLocation() {
|
||||
this.mapConfig.markers = [
|
||||
{
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude,
|
||||
iconPath: '../../static/map/end.png'
|
||||
}
|
||||
]
|
||||
},
|
||||
//画圆
|
||||
drawCircle() {
|
||||
this.mapConfig.circles = [
|
||||
// 显示圆配置
|
||||
{
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude,
|
||||
color: '#3C71F2',
|
||||
// 填充颜色
|
||||
fillColor: '#5181F670',
|
||||
fillOpacity: 0.56,
|
||||
// 边
|
||||
strokeWidth: 1,
|
||||
level: 'aboveroads'
|
||||
}
|
||||
]
|
||||
this.mapConfig.scale = this.standArea >= 200 ? 16 : this.standArea >= 100 ? 17 : 18
|
||||
},
|
||||
// handleTapMap(e) {
|
||||
// console.info('点击', e)
|
||||
// let that = this;
|
||||
// const res = that.map.getCenterLocation({
|
||||
// success: (res) => {
|
||||
// console.info('当前定位', res)
|
||||
// that.mapConfig.latitude = res.latitude;
|
||||
// that.mapConfig.longitude = res.longitude;
|
||||
// that.mapSetLocation()
|
||||
// that.drawCircle()
|
||||
// }
|
||||
// })
|
||||
// },
|
||||
// 切换范围
|
||||
handleChangeStandArea(e) {
|
||||
this.standArea = this.standOptions[e.detail.value]
|
||||
this.drawCircle()
|
||||
},
|
||||
// 搜索详细位置
|
||||
searchArea() {
|
||||
let that = this
|
||||
if (!this.searchVal) return
|
||||
mapSearch.poiKeywordsSearch(
|
||||
{
|
||||
point: {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude
|
||||
},
|
||||
key: this.searchVal
|
||||
},
|
||||
res => {
|
||||
console.info('搜索:', res)
|
||||
if (res.poiList.length) {
|
||||
const { latitude, longitude } = res.poiList[0].location
|
||||
that.mapConfig.latitude = latitude
|
||||
that.mapConfig.longitude = longitude
|
||||
that.mapSetLocation()
|
||||
// that.drawCircle()
|
||||
that.getAddress()
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
// 保存位置
|
||||
saveLocation() {
|
||||
uni.$emit('locationSuccessEvent', {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude,
|
||||
address: this.mapConfig.address
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 10)
|
||||
},
|
||||
// 地址逆解析，根据经纬度获取详细位置
|
||||
getAddress() {
|
||||
mapSearch.reverseGeocode(
|
||||
{
|
||||
point: {
|
||||
latitude: this.mapConfig.latitude,
|
||||
longitude: this.mapConfig.longitude
|
||||
}
|
||||
},
|
||||
res => {
|
||||
console.info('成功回调', res, this.mapConfig)
|
||||
this.mapConfig.address = res.address || '未知位置'
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.fixedheader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
.headerName {
|
||||
z-index: 1;
|
||||
}
|
||||
/deep/ .headerBox {
|
||||
background-color: #5181f6;
|
||||
color: white;
|
||||
.uni-icons {
|
||||
color: white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.search-box {
|
||||
height: 50px;
|
||||
background-color: rgba(16, 16, 16, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.picker {
|
||||
width: 140rpx;
|
||||
height: 62rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 22rpx;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(51, 51, 51, 0.48);
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
padding: 0 16rpx;
|
||||
margin: 0 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 400rpx;
|
||||
height: 62rpx;
|
||||
line-height: 40rpx;
|
||||
border-radius: 22rpx;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(51, 51, 51, 0.48);
|
||||
font-size: 28rpx;
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
.search-btn {
|
||||
margin: 0 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.save-btn {
|
||||
width: 50%;
|
||||
z-index: 999;
|
||||
border-radius: 0;
|
||||
}
|
||||
uni-button:after {
|
||||
border-radius: 0;
|
||||
}
|
||||
.btn-group {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
// height: 50px;
|
||||
}
|
||||
</style>
|
||||
@ -753,6 +753,11 @@
|
||||
url: '../../projectEnd/emergencyDisposal/index'
|
||||
})
|
||||
break
|
||||
case 'exerciseInfo':
|
||||
uni.navigateTo({
|
||||
url: '../../projectEnd/exerciseInfo/index'
|
||||
})
|
||||
break
|
||||
case 'contractors':
|
||||
uni.navigateTo({
|
||||
url: '../../contractors/index'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user