<template>
<div class="auditMap">
<div>
<div class="head_boxtwo" v-show="this.$route.query.isTitle != 0">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/indexPage'}">首页</el-breadcrumb-item>
<el-breadcrumb-item>待办事件</el-breadcrumb-item>
</el-breadcrumb>
<div class="myBox">
<div class="headLeft"><h4>待办事件</h4></div>
<div class="headRight">
<el-row>
<el-button class="addButton" type="text" @click="rejectMsg" v-if="rejectShow">驳回</el-button>
<el-button class="addButton a" type="primary" @click="handleBtnChange($event)">{{appro}}</el-button>
</el-row>
</div>
</div>
<div class="myMsg">
<div class="msgLift">
<el-col :span="9">
<div class="mymsgTOP"> <span class="myColor">创建人：</span><span>{{myName}}</span></div>
<div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
</el-col>
<el-col :span="9">
<div class="mymsgTOP"> <span class="myColor">修改人：</span><span>{{hisName}}</span></div>
<div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
</el-col>
<el-col :span="6" v-if="!rejectShow">
<div><span class="myColor">驳回原因：</span><span>{{rejectReason}}</span></div>
</el-col>
</div>
<div class="msgRight">
<div>状态</div>
<div class="msgRight_top">{{stateNow}}</div>
</div>
</div>
</div>
<div class="head_boxtwo" v-show="this.$route.query.isTitle == 0">
<el-breadcrumb separator="/">
<el-breadcrumb-item >内容管理</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/serviceDirectoryPage'}">网点服务地图</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
<div class="headLeft"><h4>详情</h4></div>
<div class="myMsg">
<div class="msgLift">
<el-col :span="9">
<div class="mymsgTOP"> <span class="myColor">创建人：</span><span>{{myName}}</span></div>
<div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
</el-col>
<el-col :span="9">
<div class="mymsgTOP"> <span class="myColor">修改人：</span><span>{{hisName}}</span></div>
<div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
</el-col>
<el-col :span="6" v-if="!rejectShow">
<div><span class="myColor">驳回原因：</span><span>{{rejectReason}}</span></div>
</el-col>
</div>
</div>
</div>
<div class="content_boxtwo">
<div class="form_box h778px">
<div class="myWord">信息</div>
<div class="myOnly">
<div class="myonlyFirst">
<div><span class="myColor">网点名称：</span><span>{{activity}}</span></div>
</div>
<div class="myonlyThird" v-show="this.$route.query.isTitle != 0"><span class="myColor">类别：</span><span>{{category}}</span></div>
</div>
<div class="line"></div>
<div class="myWord">
<div class="mymap">
<div class="map_content_left">
<div class="scrool">
<div>
<el-table :data="hotSpotList" stripe style="width: 300px; height:calc(100% - 50px)"
@dblclick="toggleSelection(props.row,feature)">
<el-table-column prop="name" label="热点名称"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-button-group>
<el-button title="定位" size="mini" type="text" @click="setMapCenterByFeature(scope.row)">定位</el-button>
</el-button-group>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
<div class="map_content_right">
<div id="map"></div>
<div id="popup" class="ol-popup portlet box">
<div class="portlet-title">
<div class="caption">
<i class="icon icon-info-20"></i>
<span class="caption-subject" v-show="hotSpot.type == POINT_TYPE">热点</span>
<span class="caption-subject" v-show="hotSpot.type == POLYGON_TYPE">热区</span>
</div>
<div class="actions">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
</div>
</div>
<div id="popup-content">
<el-row>
<el-form ref="form" :model="form" label-width="90px">
<el-col :span="24">
<el-form-item label="热点名称" v-show="hotSpot.type == POINT_TYPE" prop="name">
<el-input placeholder="请输入热点名称" size="mini" v-model="hotSpot.name" class="hotSpotNum"></el-input>
</el-form-item>
<el-form-item label="热区名称" v-show="hotSpot.type == POLYGON_TYPE" prop="name">
<el-input placeholder="请输入热区名称" size="mini" v-model="hotSpot.name" class="hotSpotNum"></el-input>
</el-form-item>
</el-col>
<el-col :span="24" >
<el-form-item label="热区说明" v-show="hotSpot.type == POLYGON_TYPE">
<el-input size="mini" type="textarea" :rows="2" placeholder="请输入对该热区的描述" v-model="hotSpot.note"></el-input>
</el-form-item>
<el-form-item label="上传图标" v-show="hotSpot.type == POINT_TYPE" >
<el-upload class="avatar-uploader" name="headMap" style="height: 70px" action="" :show-file-list="false"
:http-request="addPointImage"
accept="image/gif, image/jpeg, image/png">
<img v-if="hotSpot.imageUrl" :src="hotSpot.imageUrl" class="avatar" style="width: 70px;height: 70px">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-col>
</el-form>
</el-row>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {ColorChange} from '../../js/front/colorChange';
import {createMap} from '../../js/front/map';
import {startDataClass} from '../../js/front/getData';
import {startDraw} from '../../js/front/drawFeature';
import {FeatureStyle} from '../../js/front/FeatureStyle'
import {ChangeBaseLayer} from '../../js/front/ChangeBaseLayer';
import {Measure} from '../../js/tools/Measure';
let mapControl;
let maoObj;
let drawFeatureObj;
let editFeatureStyle;
let changeBaseLayer;
let measure;
export default {
data() {
return {
appro: "",
status: "",
rejectReason: '',
rejectShow: true,
myName: '',
hisName: '',
craetionTime: '',
modifiTime: '',
stateNow: '',
blank: '',
category: '',
process: '',
activity: '',
hotSpot: {
id: null,
type: "",// 1 ,2点还是面
bankBranchId: null,
name: "",
note: "",
coordinate: "",
width: "",
height: "",
rotationAngle: "",
imageUrl: "" //图标地址
},
tempImageLayer: null,
POINT_TYPE: 'Point',
POLYGON_TYPE: 'Polygon',
hotSpotList: [],
form: {
id: null,
name: "",
imageUrl: '',
width: '',
height: '',
bankQrCode: '',
},
}
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d;
}
},
computed: {},
mounted() {
this.init();
},
components: {},
methods: {
init() {
let vm = this;
this.auditEdit();
let colorChange = ColorChange();
maoObj = createMap();
mapControl = startDataClass(maoObj, this);
drawFeatureObj = startDraw(maoObj, this);
changeBaseLayer = new ChangeBaseLayer(vm, maoObj);
measure = new Measure(vm, maoObj);
editFeatureStyle = new FeatureStyle(this, maoObj);
editFeatureStyle.setToken(vm.backToken);
drawFeatureObj.setCilckCallBack(function (type, fe, event) {
editFeatureStyle.popupWindow(type, event, fe)
});
},
//上传图标
addPointImage(file) {
let vm = this;
vm.createReader(file.file);
vm.handleUpload(file.file).then(function (response) {
vm.hotSpot.imageUrl = response.data.url;
vm.changeImageStyle();
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
},
//获取feature数据信息
getFeatureList(isResh) {
let vm = this;
editFeatureStyle.getFeaturePageByLayerId(this.$route.query.id, {}, function (data) {
vm.hotSpotList = data;
if (!isResh) {
let layerData = {};
layerData.id = vm.form.id;
layerData.featureList = data
vm.addLayerOnView(layerData);
}
});
},
//绘制
drawFeature(type) {
let vm = this;
vm.clearn();
vm.hotSpot.type = type;
drawFeatureObj.addInteraction(type, function () {
editFeatureStyle.closePopupWindow();
});
},
changeImageStyle() {
//调用修改属性值方法
editFeatureStyle.setFeatureStyle();
},
rejectMsg() {
this.$prompt('', '驳回', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: '请输入驳回原因',
showInput: true
}).then(({value}) => {
let _this = this;
if(!value || value ==" "){
_this.$message({
type: 'error',
message: "驳回理由不能为空！"
});
}else{
let param = {
id: _this.$route.query.id,
rejectReason: value,
status: _this.status,
};
_this.$https({
method: 'put',
url: 'bankBranchInfo/reject',
authType: this.backToken
}, _this.$qs.stringify(param)).then((res) => {
if (res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
console.log(error)
}
)
}
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
handleBtnChange (ev) {
let btnName = ev.currentTarget.innerText;
switch (btnName) {
case '通过(上线)':
this.passMsg();
break;
case '通过(下线)':
this.passMsg();
break;
case '重新编辑':
this.$router.push({
path: '/hotSpotManage',
query:{pId: this.$route.query.id}
});
break;
case '再次申请下线':
this.handleLine();
break;
default:
break;
}
},
passMsg() {
let _this = this;
let param = {
id: _this.$route.query.id,
status: _this.status,
};
_this.$https({
method: 'put',
url: 'bankBranchInfo/approved',
authType: this.backToken
}, _this.$qs.stringify(param)).then((res) => {
if (res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
console.log(error)
}
)
},
handleLine() {
let _this = this;
this.$confirm('是否再次申请下线当前网点服务地图?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'put',
url: 'bankBranchInfo/applyOffline?id='+ _this.$route.query.id,
authType: this.backToken
}).then((res) => {
_this.onSearch();
if(res.data.status == 201){
this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
}
}, (error) => {
this.$message({
type: 'fail',
message: res.data.message
});
}
)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消此操作'
});
});
},
auditEdit() {
this.category = this.$route.query.typeName;
let _this = this;
let param = {id: _this.$route.query.id};
_this.$https({
method: 'get',
url: 'bankBranchInfo/getById',
authType: this.backToken
}, param).then((res) => {
if (res.status == 200) {
_this.form = res.data;
if (_this.form.imageUrl) {
_this.changeMapBaseLayerMap(_this.form);
}
_this.getFeatureList(false); //先根据id 去获取基本信息 然后再根据id 获取热点列表
}
if (res.data.isShow == 2) {
_this.appro = "通过(上线)";
_this.stateNow = "审批上线";
} else if (res.data.isShow == 3) {
_this.appro = "通过(下线)";
_this.stateNow = "审批下线";
}else if(res.data.isShow == 1) {
_this.appro = "重新编辑";
_this.stateNow ="上线被驳回";
_this.rejectShow = false;
}else if(res.data.isShow == 6) {
_this.appro = "再次申请下线";
_this.stateNow ="下线被驳回";
_this.rejectShow = false;
}
_this.status = res.data.isShow;
_this.activity = res.data.name;
_this.blank = res.data.name;
_this.craetionTime = res.data.createTime;
_this.modifiTime = res.data.updateTime;
_this.myName = res.data.creatorName;
_this.hisName = res.data.modifierName;
_this.process = res.data.headImage;
_this.rejectReason = res.data.rejectReason
if (res.data.imageUrl) {
_this.changeMapBaseLayerMap(_this.form);
}
}, (error) => {
console.log(error)
}
)
},
changeMapBaseLayerMap(data) {
let extent = [0, 0, Number(this.form.width) / 1000, Number(this.form.height) / 1000,];
if (data.imageUrl) {
data.url = data.imageUrl;
this.flag = false;
}
this.tempImageLayer = changeBaseLayer.setImageLayer(extent, data.url, this.tempImageLayer);
maoObj.setCenterAndZoom([Number(this.form.width) / 2000, Number(this.form.height) / 2000], 9);
},
createReader(file) {
let vm = this;
var reader = new FileReader;
reader.onload = function (evt) {
var image = new Image();
image.onload = function () {
var width = this.width;
var height = this.height;
vm.form.width = width;
vm.form.height = height;
};
image.src = evt.target.result;
};
reader.readAsDataURL(file);
},
getParm() {
let subject = {};
subject = JSON.parse(JSON.stringify(this.hotSpot));
subject.coordinate = editFeatureStyle.getWkt();
subject.bankBranchId = this.form.id;
return subject;
},
cancel() {
// 清除数据
let vm = this;
let modifyFe = editFeatureStyle.getFeature();
if (modifyFe && modifyFe.getId() && modifyFe.get('data')) {
//属于修改的部分
let data = modifyFe.get('data');
editFeatureStyle.deleteFeatureFromLayer(data.id, data.layerId, function () {
drawFeatureObj.cleanModifyOrDraw();//删除之后清空绘制的地图 这个方法不需要提示
editFeatureStyle.closePopupWindow();
//从图层中移除数据
changeBaseLayer.removeFeatureFromLayer(data.layerId, data.id);
vm.$refs.controlPanel.refreshLayerData(data.layerId);
})
} else {
//自定义编辑部分
drawFeatureObj.cleanAllFeature(function () {
//关闭弹出框
editFeatureStyle.closePopupWindow();
});
}
}
,
setMapCenterByFeature(featureItem) {
changeBaseLayer.getFeatureById(this.$route.query.id, featureItem.id);
},
//热点底图
addLayerOnView(data) {
let vm = this;
changeBaseLayer.changeLayerVisable(data, true, function (event, feature, layerName) {
editFeatureStyle.popupModifyFeature(event, feature);//沿用开始I编辑的和后面做区分
});
},
},
}
</script>
<style lang="less">
@import '../../style/common';
.auditMap {
width: 100%;
height: calc(100% - 0px);
overflow-x: hidden;
overflow-y: scroll;
.head_boxtwo {
padding: 20px 30px 20px 20px!important;
h6 {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
padding: 5px 0px 13px;
}
h4 {
font-size: 20px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.myBox {
width: 100%;
display: flex;
justify-content: space-between;
.headLeft {
width: 10%;
}
.headRight {
.el-button--text {
color: rgba(0, 0, 0, 0.6);
border: 1px solid #dcdfe6;
}
.addButton {
width: 47px;
height: 26px;
padding: 0;
text-align: center;
line-height: 26px;
font-size: 23px;
}
.addButton.a {
width: 85px;
}
.el-button {
text-align: center;
font-size: 12px;
line-height: 20px;
}
.el-button span {
font-size: 12px;
}
}
}
.myMsg {
width: 100%;
margin-top: 18px;
display: flex;
justify-content: space-between;
.msgLift {
width: 80%;
display: flex;
justify-content: space-between;
.myColor {
display: inline-block;
color: black;
width: 70px;
text-align: right;
}
.mymsgTOP {
margin-bottom: 10px;
span.myColor {
width: 63px;
}
}
}
.msgRight {
text-align: right;
div {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
div.msgRight_top {
margin-top: 5px;
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
}
}
}
.content_boxtwo {
width: 100%;
height: 100%;
background: #F0F2F5;
/*padding: 24px 24px 0;*/
border: 1px solid transparent;
.form_box {
margin-bottom: 0px;
background: #fff;
.myWord {
font-weight: 600;
font-size: 18px;
.mymap{
height: 500px;
width: 100%;
.map_content_left {
display: inline-block;
float: left;
width: 300px;
height: calc(100% - 20px);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: #fff;
.scrool {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
}
.map_content_right {
position: relative;
display: inline-block;
width: calc(100% - 300px);
height: calc(100% - 20px);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
background: url("../../../static/images/map-background.jpg");
#map{
width: 100%;
height: 100%;
background: url("../../../static/images/map-background.jpg") repeat;
.ol-overlaycontainer-stopevent .ol-overlay-container.ol-selectable{
#popup { /*窗体*/
width: 374px;
/*height: 240px;*/
background: #fff;
border-radius: 4px;
.portlet-title{
height: 40px;
line-height: 40px;
padding-left: 10px;
background-color: #409EFF;
border-bottom: 1px solid #E9E9E9;
}
#popup-content {
.el-row{
.el-form {
.el-col-24{
padding: 0px 20px 10px;
}
.el-col-24:nth-child(1){
padding-top: 10px;
}
.el-form-item {
margin-bottom: 10px;
width: 100%;
.el-form-item__content{
width: calc(100% - 90px);
.avatar-uploader .el-upload {
width: 70px;
height: 70px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
.el-icon-plus.avatar-uploader-icon {
line-height: 5;
}
}
}
}
.el-input__inner {
height: 32px;
}
.el-upload--picture-card {
width: 468px;
height: 270px;
line-height: 270px;
}
}
.dialog-footer {
text-align: center;
.el-button {
padding: 6px 13px;
}
}
}
/*.el-input-number--mini {*/
/*width: 105px;*/
/*}*/
/*.el-input-number--mini .el-input-number__decrease, .el-input-number--mini .el-input-number__increase {*/
/*height: 30px;*/
/*}*/
/*.el-row .el-form .el-col .el-form-item .el-form-item__content{*/
/*width: 70%;*/
/*}*/
}
}
}
}
.btn_group {
position: absolute;
bottom: 10px;
right: 20px;
.avatar-uploader {
display: inline-block
}
}
}
}
}
.myOnly {
width: 80%;
display: flex;
justify-content: space-between;
margin-top: 10px;
.myColor {
color: black;
}
.myonlyFirst {
.myfirstOne {
margin-top: 20px;
display: flex;
align-items: center;
.myImg {
width: 100px;
height: 100px;
}
}
}
.myonlySecond {
.myfirstOneoo {
margin-top: 15px;
}
.myColortwo {
display: inline-block;
width: 80px;
height: 16px;
}
}
.myonlyThird {
.myonlyThirdone {
margin-top: 20px;
.myColoro {
color: #0000cc;
}
}
}
}
.line {
width: 100%;
height: 1.5px;
background: #eeeeee;
margin-top: 10px;
}
}
}
}
</style>