parent
c778a9fb88
commit
8b1f5c3388
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
@ -1,24 +1,356 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
地图扎点
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
|
||||
@init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
||||
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
||||
@click="JSONclick" />
|
||||
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
||||
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||
<div class="markerStyles">
|
||||
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
|
||||
<img :src="marker.imgSrc" alt="">
|
||||
</div>
|
||||
</el-amap-marker>
|
||||
|
||||
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
|
||||
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
||||
<div class="infowindow-box" v-if="titleShow == '人员'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item">
|
||||
<div class="isisbox">
|
||||
<div>姓名:</div><span>张三</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>部门:</div><span>xxx</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>联系方式:</div><span>13611111111</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>当前位置:</div><span>xxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infowindow-box" v-if="titleShow == '车辆'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||
<div class="isisbox">
|
||||
<div>驾驶员姓名:</div><span>张三</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>联系方式:</div><span>xxx</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>车辆类型:</div><span>13611111111</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>车牌号:</div><span>xxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-amap-info-window>
|
||||
</el-amap>
|
||||
<div class="dituzhadian" @click="loogshowCK">
|
||||
<div>地图扎点</div>
|
||||
<img src="@/assets/images/zhadian.png" alt="">
|
||||
</div>
|
||||
<div class="toptuli">
|
||||
<div>
|
||||
图例
|
||||
</div>
|
||||
<div class="zuoyou">
|
||||
<img src="@/assets/images/icon/A-jianguanrenyuan.png" alt="">
|
||||
<div>人员</div>
|
||||
</div>
|
||||
<div class="zuoyou">
|
||||
<img src="@/assets/images/icon/A-cheliang.png" alt="">
|
||||
<div>车辆</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="showCK" width="40%" title="地图扎点" @close="close" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div class="diandian">
|
||||
<el-radio v-model="radio" label="1">人员扎点</el-radio>
|
||||
<el-radio v-model="radio" label="2">车辆扎点</el-radio>
|
||||
</div>
|
||||
<div v-if="radio == 1">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||
<el-form-item label="姓名" size="mini" prop="xm">
|
||||
<el-input v-model="form.xm" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门" prop="xb">
|
||||
<el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系方式" size="mini" prop="sfzh">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="职责描述" size="mini" prop="zz">
|
||||
<el-input v-model="form.zz" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="社会关系" prop="shgx">
|
||||
<el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div v-if="radio == 2">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||
<el-form-item label="驾驶员姓名" size="mini" prop="xm1">
|
||||
<el-input v-model="form.xm1" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联系方式" size="mini" prop="lxfs1">
|
||||
<el-input v-model="form.lxfs1" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="车辆类型" size="mini" prop="sfzha">
|
||||
<el-input v-model="form.sfzha" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="车牌号" size="mini" prop="zz1">
|
||||
<el-input v-model="form.zz1" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
|
||||
<el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
mytitle: "地图扎点",
|
||||
zoom: 11.8,
|
||||
zooms: [3, 20],
|
||||
center: [121.298563, 32.451807],
|
||||
map: null,
|
||||
draggable: false,
|
||||
visible: true,
|
||||
radio: "1",
|
||||
changshazhen: changshazhen,
|
||||
polygonOptions: {
|
||||
strokeColor: '#00C5EC',
|
||||
fillColor: '#00AEFF'
|
||||
},
|
||||
options: [],
|
||||
form: {
|
||||
|
||||
},
|
||||
showCK: false,
|
||||
rules: {
|
||||
|
||||
},
|
||||
personInfo: {
|
||||
position: [],
|
||||
info: {},
|
||||
visible: false,
|
||||
},
|
||||
titleShow: "人员",
|
||||
markers: [
|
||||
{
|
||||
position: [121.183697866903292, 32.460227941215508],
|
||||
id: 1,
|
||||
name: "人员",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||
},
|
||||
{
|
||||
position: [121.235712627230569, 32.447218823220901],
|
||||
id: 2,
|
||||
name: "车辆",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||
},
|
||||
{
|
||||
position: [121.318413448767714, 32.411908360092688],
|
||||
id: 3,
|
||||
name: "车辆",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||
},
|
||||
{
|
||||
position: [121.359751265879749, 32.39683020264299],
|
||||
id: 4,
|
||||
name: "人员",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
mounted () { },
|
||||
methods: { },
|
||||
created() { },
|
||||
mounted() { },
|
||||
methods: {
|
||||
markersClosePopup(){
|
||||
this.personInfo.visible = false
|
||||
|
||||
},
|
||||
getMap() {
|
||||
// bmap vue component
|
||||
console.log('$refs: ', this.$refs.map.$$getInstance())
|
||||
},
|
||||
init(map) {
|
||||
this.map = map;
|
||||
// o.setMapStyle('amap://styles/darkblue')
|
||||
console.log(this.map.getCenter())
|
||||
console.log(this.$refs.map.$$getInstance())
|
||||
},
|
||||
// 地图点击事件
|
||||
click() {
|
||||
alert('click map')
|
||||
},
|
||||
JSONclick() { },
|
||||
clickArrayMarker(e) {
|
||||
this.personInfo.visible = true
|
||||
this.personInfo.position = e.position
|
||||
this.personInfo.info = {}
|
||||
this.titleShow = e.name
|
||||
|
||||
},
|
||||
close() {
|
||||
this.form = {
|
||||
|
||||
}
|
||||
this.showCK = false;
|
||||
},
|
||||
loogshowCK() {
|
||||
this.showCK = true;
|
||||
|
||||
},
|
||||
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
.dituzhadian {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
color: #000000;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
font-family: 'Source Han Sans CN--Bold';
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toptuli {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
color: #000000;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
font-family: 'Source Han Sans CN--Bold';
|
||||
font-size: 16px;
|
||||
padding: 10px;
|
||||
|
||||
.zuoyou {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.diandian {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin-left: 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.infowindow-box {
|
||||
width: 300px;
|
||||
min-height: 100px;
|
||||
color: #000000;
|
||||
font-family: 'Source Han Sans CN--Bold';
|
||||
background: #fff;
|
||||
|
||||
.infowindow-box-title {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-item {
|
||||
padding: 20px;
|
||||
|
||||
.isisbox {
|
||||
margin: 10px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 70%;
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #4b4848;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-itemTow {
|
||||
.isisbox {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,490 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
全镇道路
|
||||
</div>
|
||||
<div class="container">
|
||||
<el-amap ref="map" :center="center" :zoom="zoom" :zooms="zooms" element-loading-background="rgba(11, 34, 72, 0.8)"
|
||||
@init="init" :extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-demo">
|
||||
|
||||
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions" :draggable="draggable"
|
||||
@click="JSONclick" />
|
||||
|
||||
<!-- <el-amap-geojson :geo="dian1" :draggable="draggable"
|
||||
@click="JSONclick" icon="@/assets/images/icon/jiankong.png" /> -->
|
||||
|
||||
<!-- <el-amap-geojson :geo="dian2" :draggable="draggable"
|
||||
@click="JSONclick" icon="@/assets/images/icon/jiankong.png"/> -->
|
||||
|
||||
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
|
||||
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||
<div class="markerStyles">
|
||||
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
|
||||
<img :src="marker.imgSrc" alt="">
|
||||
</div>
|
||||
</el-amap-marker>
|
||||
|
||||
<el-amap-marker v-for="(marker, index) in dian1.features" :key="index + 'dian1'"
|
||||
:position="marker.geometry.coordinates" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||
<div class="markerStyles">
|
||||
<div v-if="marker.name" class="marker-Text">{{ index }}</div>
|
||||
<img src="@/assets/images/icon/jiankong.png" alt="">
|
||||
</div>
|
||||
</el-amap-marker>
|
||||
|
||||
<el-amap-marker v-for="(marker, index) in dian2.features" :key="index + 'dian2'"
|
||||
:position="marker.geometry.coordinates" @click="(e) => { clickArrayMarker(marker, e) }">
|
||||
<div class="markerStyles">
|
||||
<div v-if="marker.name" class="marker-Text">{{ index }}</div>
|
||||
<img src="@/assets/images/icon/jiankong.png" alt="">
|
||||
</div>
|
||||
</el-amap-marker>
|
||||
|
||||
|
||||
|
||||
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
|
||||
:path="myxiuanlu.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="red" isOutline lineCap="round"
|
||||
@click="(e) => { polylineclick(e, '线') }" />
|
||||
|
||||
|
||||
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
|
||||
:path="roadline2.features[0].geometry.coordinates[0]" :zIndex="5000" strokeColor="green" isOutline
|
||||
lineCap="round" @click="(e) => { polylineclick(e, '线') }" />
|
||||
|
||||
<el-amap-info-window v-if="personInfo.visible" anchor="bottom-center" :offset="[30, 0]" :closeWhenClickMap="true"
|
||||
:position="personInfo.position" :visible.sync="personInfo.visible" :zIndex="900">
|
||||
<div class="infowindow-box" v-if="titleShow == '人员'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>人员信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item">
|
||||
<div class="isisbox">
|
||||
<div>姓名:</div><span>张三</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>部门:</div><span>xxx</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>联系方式:</div><span>13611111111</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>当前位置:</div><span>xxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infowindow-box" v-if="titleShow == '车辆'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>车辆信息:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||
<div class="isisbox">
|
||||
<div>驾驶员姓名:</div><span>张三</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>联系方式:</div><span>xxx</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>车辆类型:</div><span>13611111111</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>车牌号:</div><span>xxxxxx</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="infowindow-box" v-if="titleShow == 'Feature'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>监控详情:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||
<div class="isisbox">
|
||||
<div>编组:</div><span>1组</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>摄像头编号:</div><span>C1009</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>地址:</div><span>福港路-无名道路</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>监控视频:</div><span><img src="@/assets/images/jiankong.jpg" alt=""></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="infowindow-box infowindow-boxBig" v-if="titleShow == '线'">
|
||||
<div class="infowindow-box-title">
|
||||
<div>监控详情:</div><img src="@/assets/images/icon/cuohao.png" class="mask" @click="markersClosePopup" alt="" />
|
||||
</div>
|
||||
<div class="infowindow-box-item infowindow-box-itemTow">
|
||||
<div class="isisbox">
|
||||
<div>道路名称:</div><span>福港路</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>摄像头数量:</div><span>5</span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>绑定摄像头:</div><span><el-dropdown>
|
||||
<span class="el-dropdown-link">
|
||||
请选择摄像头<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>摄像头1</el-dropdown-item>
|
||||
<el-dropdown-item>摄像头2</el-dropdown-item>
|
||||
<el-dropdown-item>摄像头3</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown></span>
|
||||
</div>
|
||||
<div class="isisbox">
|
||||
<div>视频墙:</div>
|
||||
</div>
|
||||
<div class="shipinqiang">
|
||||
<div class="shipinqiang-box">
|
||||
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>地址:</div><span>福港路-无名道路</span>
|
||||
</div>
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>摄像头编号:</div><span>C109</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shipinqiang-box">
|
||||
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>地址:</div><span>福港路-无名道路</span>
|
||||
</div>
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>摄像头编号:</div><span>C109</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shipinqiang-box">
|
||||
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>地址:</div><span>福港路-无名道路</span>
|
||||
</div>
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>摄像头编号:</div><span>C109</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shipinqiang-box">
|
||||
<img src="@/assets/images/jiankong.jpg" alt="">
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>地址:</div><span>福港路-无名道路</span>
|
||||
</div>
|
||||
<div class="shipinqiang-box-item">
|
||||
<div>摄像头编号:</div><span>C109</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-amap-info-window>
|
||||
</el-amap>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
|
||||
import myxiuanlu from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
|
||||
import roadline2 from "@/assets/mapjson/Chaangshazhen/road-line2.geojson"
|
||||
|
||||
import dian1 from "@/assets/mapjson/Chaangshazhen/road-point.geojson"
|
||||
import dian2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
data() {
|
||||
return {
|
||||
mytitle: "地图扎点",
|
||||
zoom: 11.8,
|
||||
zooms: [3, 20],
|
||||
center: [121.298563, 32.451807],
|
||||
map: null,
|
||||
draggable: false,
|
||||
visible: true,
|
||||
radio: "1",
|
||||
changshazhen: changshazhen,
|
||||
myxiuanlu: myxiuanlu,
|
||||
roadline2: roadline2,
|
||||
dian1: dian1,
|
||||
dian2: dian2,
|
||||
|
||||
|
||||
|
||||
polygonOptions: {
|
||||
strokeColor: '#00C5EC',
|
||||
fillColor: '#00AEFF'
|
||||
},
|
||||
options: [],
|
||||
|
||||
showCK: false,
|
||||
rules: {
|
||||
|
||||
},
|
||||
personInfo: {
|
||||
position: [
|
||||
121.20458366631492, 32.46301560935721],
|
||||
info: {},
|
||||
visible: true,
|
||||
},
|
||||
titleShow: "Feature",
|
||||
markers: [
|
||||
{
|
||||
position: [121.183697866903292, 32.460227941215508],
|
||||
id: 1,
|
||||
name: "人员",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||
},
|
||||
{
|
||||
position: [121.235712627230569, 32.447218823220901],
|
||||
id: 2,
|
||||
name: "车辆",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||
},
|
||||
{
|
||||
position: [121.318413448767714, 32.411908360092688],
|
||||
id: 3,
|
||||
name: "车辆",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-cheliang.png")
|
||||
},
|
||||
{
|
||||
position: [121.359751265879749, 32.39683020264299],
|
||||
id: 4,
|
||||
name: "人员",
|
||||
content: '<i class="el-icon-user-solid bendiren"></i>',
|
||||
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
mounted () { },
|
||||
methods: { },
|
||||
created() { },
|
||||
mounted() { },
|
||||
methods: {
|
||||
markersClosePopup() {
|
||||
this.personInfo.visible = false
|
||||
|
||||
},
|
||||
getMap() {
|
||||
// bmap vue component
|
||||
console.log('$refs: ', this.$refs.map.$$getInstance())
|
||||
},
|
||||
init(map) {
|
||||
this.map = map;
|
||||
// o.setMapStyle('amap://styles/darkblue')
|
||||
console.log(this.map.getCenter())
|
||||
console.log(this.$refs.map.$$getInstance())
|
||||
},
|
||||
// 地图点击事件
|
||||
click() {
|
||||
alert('click map')
|
||||
},
|
||||
JSONclick() { },
|
||||
clickArrayMarker(e) {
|
||||
if (e.type) {
|
||||
console.log(e);
|
||||
this.personInfo.visible = true
|
||||
this.personInfo.position = e.geometry.coordinates
|
||||
this.personInfo.info = {}
|
||||
this.titleShow = e.type
|
||||
console.log(this.personInfo);
|
||||
|
||||
|
||||
} else {
|
||||
console.log(e);
|
||||
this.personInfo.visible = true
|
||||
this.personInfo.position = e.position
|
||||
this.personInfo.info = {}
|
||||
this.titleShow = e.name
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
polylineclick(e, type) {
|
||||
console.log("线路");
|
||||
this.personInfo.visible = true
|
||||
this.personInfo.position = [e.lnglat.lng, e.lnglat.lat]
|
||||
this.personInfo.info = {}
|
||||
this.titleShow = type
|
||||
|
||||
}
|
||||
,
|
||||
|
||||
|
||||
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.container {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.diandian {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
margin-left: 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.infowindow-box {
|
||||
width: 300px;
|
||||
min-height: 100px;
|
||||
color: #000000;
|
||||
font-family: 'Source Han Sans CN--Bold';
|
||||
background: #fff;
|
||||
|
||||
.infowindow-box-title {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-item {
|
||||
padding: 5px;
|
||||
|
||||
.isisbox {
|
||||
margin: 10px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 70%;
|
||||
|
||||
div {
|
||||
font-size: 14px;
|
||||
text-align: right;
|
||||
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: #4b4848;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-itemTow {
|
||||
.isisbox {
|
||||
display: grid;
|
||||
grid-template-columns: 30% 70%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-boxBig {
|
||||
min-width: 500px;
|
||||
min-height: 100px;
|
||||
overflow: hidden;
|
||||
|
||||
.infowindow-box-title {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-item {
|
||||
padding: 5px;
|
||||
|
||||
.isisbox {
|
||||
margin: 10px 0;
|
||||
display: grid;
|
||||
grid-template-columns: 25% 70%;
|
||||
|
||||
div {
|
||||
font-size: 16px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #4b4848;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infowindow-box-itemTow {
|
||||
.isisbox {
|
||||
display: grid;
|
||||
grid-template-columns: 20% 70%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.shipinqiang {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 46% 46%;
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
margin-left: 10px;
|
||||
|
||||
.shipinqiang-box {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.shipinqiang-box-item {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 35% 60%;
|
||||
div{
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,346 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
网上演练
|
||||
</div>
|
||||
</template>
|
||||
<div class="container">
|
||||
<div class="tabs">
|
||||
<div class="headerText">
|
||||
<div class="searchP">查询条件</div>
|
||||
</div>
|
||||
<div class="search-input">
|
||||
<div class="inputSonBox">
|
||||
<div class="texts1" style="width: 6%">演练名称:</div>
|
||||
<el-input size="mini" v-model="form1.name" placeholder="请输入"></el-input>
|
||||
<div class="texts1" style="width: 8%">编辑时间:</div>
|
||||
<el-input size="mini" v-model="form1.sfz" placeholder="请输入"></el-input>
|
||||
<div class="texts1" style="width: 8%">演练类型:</div>
|
||||
<el-input size="mini" v-model="form1.lxfs" placeholder="请输入"></el-input>
|
||||
<div class="searchBtn">
|
||||
<el-button type="primary" size="mini" icon="el-icon-search" @click="addlist">查询</el-button>
|
||||
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tabsBottom">
|
||||
<div class="foot-main">
|
||||
<div class="headerText">
|
||||
<div class="searchP searchA">预案管理列表</div>
|
||||
</div>
|
||||
<div class="exportBtn1">
|
||||
<div class="danchunxinzeng" @click="addRules">
|
||||
新增
|
||||
</div>
|
||||
<!-- <el-button icon="el-icon-edit-outline" size="mini" @click="exportList"
|
||||
>导出</el-button
|
||||
> -->
|
||||
</div>
|
||||
<section class="table-box">
|
||||
<div class="table-item">
|
||||
<el-table v-loading="loading" :data="tableData" border>
|
||||
<!-- <el-table-column type="selection" width="35" align="center" /> -->
|
||||
<el-table-column type="index" label="序号" width="55" align="center" />
|
||||
<el-table-column label="演练名称" align="center" prop="xm">
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column label="演练时间" align="center" prop="xb">
|
||||
</el-table-column>
|
||||
<el-table-column label="演练内容" align="center" prop="sfzh">
|
||||
</el-table-column>
|
||||
<el-table-column label="问题记录" align="center" prop="lxfs">
|
||||
</el-table-column>
|
||||
<el-table-column label="负责人" align="center" prop="zz">
|
||||
</el-table-column>
|
||||
<el-table-column label="联系方式" align="center" prop="shgx">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" align="center" prop="jgdy">
|
||||
<template slot-scope="scope">
|
||||
<div :style="scope.row.jgdy=='已完成'?'color: #3bfb01;':'color: #ff5e00;'">
|
||||
{{ scope.row.jgdy }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<button @click="toDetail(scope.row, 0)" class="sqbtn sqbtn1">
|
||||
查看
|
||||
</button>
|
||||
<button @click="toDetail(scope.row, 1)" class="sqbtn sqbtn2">
|
||||
编辑
|
||||
</button>
|
||||
<button @click="delTable(scope.row)" class="sqbtn sqbtn3">
|
||||
删除
|
||||
</button>
|
||||
<!-- <el-button size="mini" plain type="warning">编辑</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</section>
|
||||
<pagination :total="total" :page="form1.current" :limit="form1.size" @pagination="getPagination"
|
||||
:current-page.sync="form1.current"></pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog :visible.sync="showCK" width="40%" title="新增人员" @close="close" :close-on-click-modal="false"
|
||||
:close-on-press-escape="false">
|
||||
<div>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="mytitle == '查看人员'">
|
||||
<el-form-item label="演练名称" size="mini" prop="xm">
|
||||
<el-input v-model="form.xm" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="预案类型" prop="xb">
|
||||
<el-select v-model="form.xb" multiple placeholder="请选择" size="mini">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.groupName" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="演练时间" size="mini" prop="sfzh">
|
||||
<el-input v-model="form.sfzh" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" size="mini" prop="zz">
|
||||
<el-input v-model="form.zz" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="联系方式" size="mini" prop="lxfs">
|
||||
<el-input v-model="form.lxfs" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="演练过程" prop="shgx">
|
||||
<el-input type="textarea" resize="none" :rows="5" v-model="form.shgx" placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span slot="footer" class="dialog-footer" v-show="mytitle != '查看人员'">
|
||||
<el-button size="mini" icon="el-icon-refresh-left" @click="reset('form')">重置</el-button>
|
||||
<el-button size="mini" type="primary" icon="el-icon-document" @click="save('form')">保存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {},
|
||||
data () {
|
||||
data() {
|
||||
const startTimeAndendTime = (rule, value, callback) => {
|
||||
// const date1 = this.form.startTime;
|
||||
// const date2 = this.form.endTime;
|
||||
// const timeString = "01:07:53";
|
||||
const date1 = new Date(`2000-01-01 ${this.form.startTime}`);
|
||||
const date2 = new Date(`2000-01-01 ${this.form.endTime}`);
|
||||
if (this.form.startTime === "" || this.form.endTime === "") {
|
||||
callback(new Error("开始时间和结束时间都不能为空"));
|
||||
} else if (date1 > date2) {
|
||||
callback(new Error("结束时间不能小于开始时间"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
}
|
||||
mytitle: "新增人员",
|
||||
radio: 1,
|
||||
rules: {
|
||||
attendanceDescription: [
|
||||
{ required: true, message: "请输入考勤规则描述", trigger: "blur" },
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: "请输入考勤规则名称", trigger: "blur" },
|
||||
],
|
||||
status: [{ required: true, message: "请选择状态", trigger: "change" }],
|
||||
groupIdList: [
|
||||
{ required: true, message: "请选择考勤组", trigger: "blur" },
|
||||
],
|
||||
date: [
|
||||
{ required: true, validator: startTimeAndendTime, trigger: "blur" },
|
||||
],
|
||||
},
|
||||
form: {
|
||||
name: "",
|
||||
attendanceDescription: "", //考勤规则描述
|
||||
status: 1,
|
||||
groupIdList: [],
|
||||
groupNames: "",
|
||||
endTime: "", //打卡结束时间
|
||||
startTime: "", //打卡开始时间
|
||||
},
|
||||
showCK: false,
|
||||
loading: false,
|
||||
tableData: [
|
||||
{
|
||||
xm: "淌防疏散演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模拟突发火灾，组织人员疏数",
|
||||
lxfs: " 个别模层疏数指示标识缺失",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "已完成",
|
||||
|
||||
}, {
|
||||
xm: "交通管制演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模纵主要路段交通中断，调试交通管制方案",
|
||||
lxfs: " 信号灯同步控制存在问题",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "已完成",
|
||||
|
||||
}, {
|
||||
xm: "应急救援演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模拟地赛发生后的致授行动",
|
||||
lxfs: " 叙援物资储备不足",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "已完成",
|
||||
|
||||
}, {
|
||||
xm: "电力抢修演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模拟电网故障，清练抢修流程",
|
||||
lxfs: " 叙援物资储备不足",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "进行中",
|
||||
|
||||
}, {
|
||||
xm: "大型活动安全保障演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模拟大型活动期问的安全保障",
|
||||
lxfs: " 数援物资储备不足",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "进行中",
|
||||
|
||||
}, {
|
||||
xm: "电力抢修演练",
|
||||
xb: " 2024-09-15",
|
||||
sfzh: "模拟电网故障，演练抢修流程",
|
||||
lxfs: " 叙援物资储备不足",
|
||||
zz: "张伟",
|
||||
shgx: "13800138000",
|
||||
jgdy: "已完成",
|
||||
|
||||
},
|
||||
],
|
||||
options: [],
|
||||
total: 0,
|
||||
form1: {
|
||||
name: "",
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
//添加之后的数组渲染按钮数组
|
||||
tagList: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getList();
|
||||
this.remoteMethod();
|
||||
},
|
||||
methods: {
|
||||
// 查询
|
||||
addlist() {
|
||||
this.getList();
|
||||
},
|
||||
// 重置
|
||||
resetTwo() {
|
||||
this.form1 = { name: "", current: 1, size: 10 };
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.loading = false;
|
||||
|
||||
},
|
||||
// 保存
|
||||
save(refForm) {
|
||||
|
||||
},
|
||||
// 新增/修改规则重置
|
||||
reset(formRef) {
|
||||
if (this.mytitle == "新增人员") {
|
||||
this.$refs[formRef].resetFields();
|
||||
} else {
|
||||
this.chakanxiangqing(this.form);
|
||||
}
|
||||
},
|
||||
// 查看编辑
|
||||
async toDetail(rew, type) {
|
||||
if (type == 0) {
|
||||
// 查看
|
||||
this.mytitle = "查看人员";
|
||||
this.chakanxiangqing(rew);
|
||||
} else if (type == 1) {
|
||||
// 编辑
|
||||
this.mytitle = "编辑考勤规则";
|
||||
this.chakanxiangqing(rew);
|
||||
}
|
||||
},
|
||||
delTable(rew) {
|
||||
// 删除
|
||||
this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 回显
|
||||
async chakanxiangqing(rew) {
|
||||
|
||||
this.showCK = true;
|
||||
},
|
||||
remoteMethod() {
|
||||
|
||||
},
|
||||
// 关闭
|
||||
close() {
|
||||
this.$refs["form"].resetFields();
|
||||
this.showCK = false;
|
||||
},
|
||||
getPagination(res) {
|
||||
this.form1.current = res.pageNum;
|
||||
this.form1.size = res.pageSize;
|
||||
this.getList();
|
||||
},
|
||||
addAttendance() { },
|
||||
addRules() {
|
||||
this.mytitle = "新增人员";
|
||||
this.showCK = true;
|
||||
},
|
||||
|
||||
// 导出
|
||||
exportList() {
|
||||
this.$confirm("是否确认导出考勤点数据项?", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
this.exportLoading = true;
|
||||
this.download(
|
||||
"/jn/rule/export",
|
||||
{
|
||||
...this.form1,
|
||||
},
|
||||
"考勤规则" + new Date().getTime() + ".xlsx"
|
||||
);
|
||||
this.exportLoading = false;
|
||||
})
|
||||
.catch(() => { });
|
||||
},
|
||||
},
|
||||
created () { },
|
||||
mounted () { },
|
||||
methods: { },
|
||||
computed: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in new issue