suzhou-jichuang-lanhai
/
RudongPC
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新会议内容

Browse Source
main
李劲龙 4 months ago
parent 4541e54f9c
commit f67216c1df
18 changed files with 2274 additions and 463 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/icon/ztc.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

39
src/views/Map/Map_Dikong/index.vue
Unescape View File

@ -8,13 +8,13 @@
@click="JSONclick" />
<el-amap-ellipse :center="circleCenter" :radius="radius" :visible="true" :editable="false" :draggable="false"
@click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
@click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red" />
<el-amap-ellipse :center="circleCenterTow" :radius="radius" :visible="true" :editable="false" :draggable="false"
@click="ellipseclick" :zIndex="8000":fillOpacity="0" strokeStyle="dashed" strokeColor="red"/>
@click="ellipseclick" :zIndex="8000" :fillOpacity="0" strokeStyle="dashed" strokeColor="red" />
<!-- 点 -->
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="marker.id"
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="index"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 2 || radio == 1">
<div class="markerStyles">
<!-- <div v-if="marker.name" class="marker-Text">{{ marker.name }}</div> -->
@ -119,6 +119,8 @@
<div>
<ZhanshiTubiao showType="地空协同" @markersradio="markersradio"></ZhanshiTubiao>
</div>
<!-- 经纬度输入 -->
<jingweidushuru ref="jingweidushuru" @addjingweidu="addjingweidu"></jingweidushuru>
<leftrightEcahts></leftrightEcahts>
<righttEcahts></righttEcahts>
<MapWrenjidialog ref="MapWrenjidialog"></MapWrenjidialog>
@ -139,6 +141,7 @@ import roadpoint2 from "@/assets/mapjson/Chaangshazhen/road-point2.geojson"
// 人员分布图标
import ZhanshiTubiao from "@/views/components/ZhanshiTubiao/index.vue"
import jingweidushuru from "@/views/components/jingweidushuru/index.vue"
import MapWrenjidialog from "@/views/components/MapWrenjidialog/index.vue"
import MapWrenjiLishidialog from "@/views/components/MapWrenjiLishidialog/index.vue"
@ -148,7 +151,7 @@ import righttEcahts from "@/views/Map/Map_Dikong/righttEcahts/index.vue"
export default {
name: "map-view",
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapWrenjidialog, MapWrenjiLishidialog },
components: { ZhanshiTubiao, leftrightEcahts, righttEcahts, MapWrenjidialog, MapWrenjiLishidialog,jingweidushuru },
data() {
return {
zoom: 11.8,
@ -237,6 +240,7 @@ export default {
getMap() {
// bmap vue component
console.log('$refs: ', this.$refs.map.$$getInstance())
},
init(map) {
this.map = map;
@ -249,9 +253,34 @@ export default {
click() {
alert('click map')
},
addjingweidu(lnglat){
console.log(lnglat);
if(this.markers.some(item => item.position[0] == lnglat.lng)){
this.$message({
message: '请勿重复添加',
type: 'warning'
});
return
}
let obj = {
position: [lnglat.lng, lnglat.lat],
id: 1,
name: "飞机",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/weurneji.png")
}
this.markers.push(obj)
},
// 面图层样式
JSONclick: (e) => {
JSONclick(e) {
console.log('click event: ', e);
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('div',{ style: 'color: #000000' }, `经纬度:${e.lnglat.KL},${e.lnglat.kT}`),
])
});
this.$refs.jingweidushuru.open(e.lnglat.KL,e.lnglat.kT)
},
JSONclick2: (e) => {
console.log('click event2: ', e);

130
src/views/Map/Map_ZhongDahuodong/index.vue
Unescape View File

@ -83,7 +83,7 @@
</div>
</div>
</div>
<!-- person-maincheliangxinxi -->
<!-- person-maincheliangxinxi -->
<div class="person-popup" v-if="markername == '车辆'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
@ -124,7 +124,7 @@
</div>
</div>
<!-- person-maincheliangxinxiTow -->
<!-- person-maincheliangxinxiTow -->
<div class="person-popup " v-if="markername == '人员'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
@ -163,6 +163,69 @@
</div>
</div>
<!-- <div class="person-popup" v-if="markername == '视频监控'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main">
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">设备编号：</div>
</div>
<div class="position">{{ "131654656" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">负责人员：</div>
</div>
<div class="position">{{ "王二" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">当前位置：</div>
</div>
<div class="position">{{ "长沙镇108号" }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">设备类型：</div>
</div>
<div class="position">监控</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">所属围栏：</div>
</div>
<div class="position">{{ 1231 }}</div>
</div>
<div class="person-info">
<div class="info-left">
<div class="dot"></div>
<div class="name">当前位置：</div>
</div>
<div class="position">{{ 79898 }}</div>
</div>
</div>
</div> -->
<div class="person-popup" v-if="markername == '视频监控'">
<div class="person-title">
<div class="title">{{ markername }}信息</div>
<img src="@/assets/images/dialogbg/close.png" class="mask" @click="markersClosePopup" alt="" />
</div>
<div class="person-main person-mainTow">
<video width="100%" controls height="80%">
<source src="@/assets/images/MP4/jiankong.mp4" type="video/mp4">
<!-- <source src="your-video-file.ogg" type="video/ogg"> -->
您的浏览器不支持 video 标签。
</video>
</div>
</div>
</el-amap-info-window>
<el-amap-info-window v-if="personInfoTow.visible" anchor="bottom-center" :offset="[0, 0]"
@ -200,7 +263,7 @@
</div>
<!-- 图层展示 -->
<div>
<ZhanshiTubiao showType="重大活动保障" @markersradio="markersradio"></ZhanshiTubiao>
<ZhanshiTubiao showType="重大活动保障" @markersactionMap="markersactionMap"></ZhanshiTubiao>
</div>
<leftrightEcahts></leftrightEcahts>
@ -263,10 +326,29 @@ export default {
visible: true,
draggable: false
},
markername: "设备",
markername: "视频监控",
// 车辆辆
markers: [
{
],
personInfo: {
position: [
121.2799592,
32.432396
],
info: {},
visible: true,
name: "视频监控",
imgSrc: require("@/assets/images/icon/jiankong.png"),
content: '<i class=\"el-icon-user-solid waidi\"></i>'
},
personInfoTow: {
position: [],
info: {},
visible: false,
},
markersactionMapList: ['车辆','视频监控'],
marksersTow: [{
position: [121.183697866903292, 32.460227941215508],
id: 1,
name: "车辆",
@ -350,18 +432,20 @@ export default {
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
},
],
personInfo: {
position: [],
info: {},
visible: false,
{
position: [121.2799592, 32.432396],
id: 3,
name: "视频监控",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/jiankong.png")
},
personInfoTow: {
position: [],
info: {},
visible: false,
}
{
position: [121.357418763222937, 32.41185412919089988],
id: 4,
name: "视频监控",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/jiankong.png")
},]
// 选项
@ -369,6 +453,8 @@ export default {
},
mounted() {
// this.marksersTow = JSON.parse(JSON.stringify(this.markers))
this.markersactionMap(this.markersactionMapList)
},
unmounted() {
},
@ -431,7 +517,11 @@ export default {
},
// 切换人员
markersradio(type) {
markersactionMap(type) {
this.markersactionMapList = type
this.markers = this.marksersTow.filter(item => this.markersactionMapList.includes(item.name))
console.log(this.markers);
console.log(type);
}
@ -506,4 +596,10 @@ export default {
}
}
.person-mainTow {
height: 100%;
padding-top: 0px;
padding-bottom: 0;
overflow: hidden;
}
</style>

133
src/views/Map/Map_Zhongdianrenyuan/index.vue
Unescape View File

@ -6,40 +6,53 @@
: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="roadline1" :polygon-options="polygonOptions" :draggable="draggable"
@click="JSONclick2" />
<el-amap-geojson :geo="roadline2" :polygon-options="polygonOptions" :draggable="draggable"
@click="JSONclick3" /> -->
<!-- <el-amap-geojson :geo="roadpoint" :polygon-options="polygonOptions" :draggable="draggable" @click="JSONclick" />
<el-amap-geojson :geo="roadpoint2" :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) }" v-if="radio == 2 || radio == 1">
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="actionMap.includes(2)">
<div class="markerStyles">
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="greenyellow" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed" :strokeWeight="4"/>
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist"
strokeColor="greenyellow" :zIndex="500" :strokeDasharray="[10, 10]" strokeStyle="dashed"
:strokeWeight="4" />
</div>
</el-amap-marker>
<!-- <el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + 5"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="radio == 3 || radio == 1">
<!-- 外来人员 -->
<el-amap-marker v-for="(marker, index) in markers2" :title="marker.name" :key="marker.id + '5'"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="actionMap.includes(3)">
<div class="markerStyles">
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist"
strokeColor="red" :zIndex="500" :strokeDasharray="[10, 10]" strokeStyle="dashed" :strokeWeight="4" />
</div>
</el-amap-marker>
<!-- 本地人口 -->
<el-amap-marker v-for="(marker, index) in markers3" :title="marker.name" :key="marker.id + '6'"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="actionMap.includes(1)">
<div class="markerStyles">
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist"
strokeColor="#ffffff" :zIndex="500" :strokeDasharray="[10, 10]" strokeStyle="dashed" :strokeWeight="4" />
</div>
</el-amap-marker>
<!-- 车辆信息 -->
<el-amap-marker v-for="(marker, index) in markers4" :title="marker.name" :key="marker.id + '7'"
:position="marker.position" @click="(e) => { clickArrayMarker(marker, e) }" v-if="actionMap.includes(4)">
<div class="markerStyles">
<div v-if="marker.name" class="marker-Text">{{ marker.name }}</div>
<img :src="marker.imgSrc" alt="">
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist" strokeColor="red" :zIndex="500"
:strokeDasharray="[10,10]" strokeStyle="dashed"
:strokeWeight="4"
/>
<el-amap-polyline :editable="false" :visible="true" :draggable="false" :path="marker.pathlist"
strokeColor="#ffffff" :zIndex="500" :strokeDasharray="[10, 10]" strokeStyle="dashed" :strokeWeight="4" />
</div>
</el-amap-marker> -->
</el-amap-marker>
</el-amap>
</div>
<!-- 图层展示 -->
<div>
<ZhanshiTubiao showType="重点人员" @markersradio="markersradio"></ZhanshiTubiao>
<ZhanshiTubiao showType="重点人员" @markersactionMap="markersactionMap"></ZhanshiTubiao>
</div>
<leftrightEcahts></leftrightEcahts>
<righttEcahts></righttEcahts>
@ -102,7 +115,7 @@ export default {
name: "张三",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
pathlist: [[121.183697866903292, 32.460227941215508],[121.173697866903292, 32.430227941215508],]
pathlist: [[121.183697866903292, 32.460227941215508], [121.173697866903292, 32.430227941215508],]
},
{
position: [121.235712627230569, 32.447218823220901],
@ -110,16 +123,16 @@ export default {
name: "李四",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png"),
pathlist: [[121.235712627230569, 32.447218823220901],[ 121.245712627230569, 32.427218823220901 ],]
pathlist: [[121.235712627230569, 32.447218823220901], [121.245712627230569, 32.427218823220901],]
},
{
position: [121.318413448767714, 32.411908360092688],
position: [121.318413448767714, 32.4211908360092688],
id: 3,
name: "王五",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
,
pathlist: [[121.318413448767714, 32.411908360092688],[ 121.328413448767714, 32.421908360092688],]
pathlist: [[121.318413448767714, 32.4211908360092688], [121.328413448767714, 32.421908360092688],]
},
{
position: [121.359751265879749, 32.38683020264299],
@ -128,46 +141,84 @@ export default {
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren2.png")
,
pathlist: [[121.359751265879749, 32.38683020264299],[ 121.349751265879749, 32.36683020264299],]
pathlist: [[121.359751265879749, 32.38683020264299], [121.349751265879749, 32.36683020264299],]
},
],
markers2: [
{
position: [121.24012643512161, 32.392859294457729],
id: 1,
name: "外地人口",
name: "外张三",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.227349622803477, 32.389607014959076],[121.24012643512161, 32.392859294457729],]
pathlist: [[121.227349622803477, 32.389607014959076], [121.24012643512161, 32.392859294457729],]
},
{
position: [121.316090391982954, 32.406100718130809 ],
position: [121.316090391982954, 32.406100718130809],
id: 2,
name: "外地人口",
name: "外李四",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.252903247437729, 32.397970019384182],[ 121.316090391982954, 32.406100718130809 ],]
pathlist: [[121.252903247437729, 32.397970019384182], [121.316090391982954, 32.406100718130809],]
},
{
position: [121.295647492277155, 32.404939189738435],
position: [121.295647492277155, 32.3904939189738435],
id: 3,
name: "外地人口",
name: "外王五",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png"),
pathlist: [[121.295647492277155, 32.404939189738435],[ 121.316090391982954, 32.426100718130809 ],]
pathlist: [[121.295647492277155, 32.3904939189738435], [121.316090391982954, 32.426100718130809],]
},
{
position: [121.3418763222937, 32.418412919089988],
id: 4,
name: "外地人口",
name: "外赵六",
content: '<i class="el-icon-user-solid waidi"></i>',
imgSrc: require("@/assets/images/icon/zhongdianren.png")
,
pathlist: [[121.3418763222937, 32.418412919089988],[ 121.326090391982954, 32.406100718130809 ],]
pathlist: [[121.3418763222937, 32.418412919089988], [121.326090391982954, 32.406100718130809],]
},
],
markers3: [
{
position: [121.2209993697866903292, 32.460227941215508],
id: 1,
name: "本张三",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/renkouzonghui.png"),
pathlist: [[121.2309993697866, 32.460227941215508], [121.19396937866903292, 32.430227941215508],]
},
{
position: [121.255712627230569, 32.427218823220901],
id: 2,
name: "本李四",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/renkouzonghui.png"),
pathlist: [[121.255712627230569, 32.427218823220901], [121.245712627230569, 32.437218823220901],]
},
],
markers4: [
{
position: [121.23209993697866903292, 32.4360227941215508],
id: 1,
name: "重点车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png"),
pathlist: [[121.23209993697866903292, 32.4360227941215508], [121.19396937866903292, 32.430227941215508],]
},
{
position: [121.2355712627230569, 32.47327218823220901],
id: 2,
name: "重点车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/genduofuwu.png"),
pathlist: [[121.2355712627230569, 32.48327218823220901], [121.245712627230569, 32.437218823220901],]
},
],
// 选项
radio: 1
actionMap: [1]
}
@ -206,14 +257,20 @@ export default {
//mark点
clickArrayMarker(e) {
console.log(e);
if (e.name == '重点车辆') {
this.$refs.Mapdialog.open("121")
} else {
this.$refs.Mapdialog.open("person")
}
},
// 切换人员
markersradio(type) {
markersactionMap(type) {
console.log(type);
this.radio = type
this.actionMap = type
}
},

150
src/views/Zhongdahuodong/dituzhadian/index.vue
Unescape View File

@ -4,8 +4,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) }">
<el-amap-marker v-for="(marker, index) in markers" :title="marker.name" :key="index" :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="">
@ -70,8 +70,13 @@
<img src="@/assets/images/icon/A-cheliang.png" alt="">
<div>车辆</div>
</div>
<div class="zuoyou">
<img src="@/assets/images/icon/ztc.png" alt="">
<div>特殊车辆</div>
</div>
</div>
<div v-if="showCK">
<el-dialog :visible.sync="showCK" width="40%" title="地图扎点" @close="close" :close-on-click-modal="false"
:close-on-press-escape="false">
<div class="diandian">
@ -100,6 +105,12 @@
<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-item label="经度" prop="lng">
<el-input v-model="form.lng" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="纬度" prop="lat">
<el-input v-model="form.lat" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
</div>
<div v-if="radio == 2">
@ -111,13 +122,33 @@
<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-item label="车辆类型" prop="sfzha">
<el-select
v-model="form.sfzha"
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="经度" prop="lng">
<el-input v-model="form.lng" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="纬度" prop="lat">
<el-input v-model="form.lat" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
</div>
@ -127,14 +158,18 @@
</span>
</el-dialog>
</div>
<Mapdialogteshucheliang ref="Mapdialogteshucheliang"></Mapdialogteshucheliang>
</div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import Mapdialogteshucheliang from "@/views/components/Mapdialogteshucheliang/index.vue"
export default {
name: '',
components: {},
components: {Mapdialogteshucheliang},
data() {
return {
mytitle: "地图扎点",
@ -150,13 +185,23 @@ export default {
strokeColor: '#00C5EC',
fillColor: '#00AEFF'
},
options: [],
options: [{
id:1,
groupName:"普通车辆",
value:"普通车辆"
},{
id:2,
groupName:"特殊车辆",
value:"特殊车辆"
},],
form: {
},
showCK: false,
rules: {
lat: [{ required: true, message: '请输入', trigger: 'change' }],
lng: [{ required: true, message: '请输入', trigger: 'change' }],
sfzha:[{ required: true, message: '请选择', trigger: 'change' }]
},
personInfo: {
position: [],
@ -186,6 +231,20 @@ export default {
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/A-cheliang.png")
},
{
position: [121.2235712627230569, 32.4247218823220901],
id: 2,
name: "特殊车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/ztc.png")
},
{
position: [121.27218413448767714, 32.411908360092688],
id: 3,
name: "特殊车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/ztc.png")
},
{
position: [121.359751265879749, 32.39683020264299],
id: 4,
@ -199,7 +258,7 @@ export default {
created() { },
mounted() { },
methods: {
markersClosePopup(){
markersClosePopup() {
this.personInfo.visible = false
},
@ -217,13 +276,80 @@ export default {
click() {
alert('click map')
},
JSONclick() { },
JSONclick(e) {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('div', { style: 'color: #000000' }, `经纬度:${e.lnglat.KL},${e.lnglat.kT}`),
])
});
this.form.lng = e.lnglat.KL
this.form.lat = e.lnglat.kT
},
clickArrayMarker(e) {
this.personInfo.visible = true
this.personInfo.position = e.position
this.personInfo.info = {}
this.titleShow = e.name
if(e.name == "特殊车辆"){
this.$refs.Mapdialogteshucheliang.open("121")
}
},
save(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.markers.some(item => item.position[0] == this.form.lng)) {
this.$message({
message: '请勿重复添加',
type: 'warning'
});
return
}
let obj = {}
if (this.radio == 1) {
obj = {
position: [this.form.lng, this.form.lat],
id: 1,
name: "人员",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/A-jianguanrenyuan.png")
}
} else {
if(this.form.sfzha=='普通车辆'){
obj = {
position: [this.form.lng, this.form.lat],
id: 1,
name: "车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/A-cheliang.png")
}
}else{
obj = {
position: [this.form.lng, this.form.lat],
id: 1,
name: "特殊车辆",
content: '<i class="el-icon-user-solid bendiren"></i>',
imgSrc: require("@/assets/images/icon/ztc.png")
}
}
}
this.markers.push(obj)
this.close()
} else {
return false;
}
});
},
reset() {
this.form = {
}
},
close() {
this.form = {
@ -271,7 +397,7 @@ export default {
right: 10px;
cursor: pointer;
position: absolute;
width: 120px;
// width: 120px;
color: #000000;
background: #ffffff;
border-radius: 5px;

53
src/views/ZhongdianRen/Xinxiguanli/index.vue
Unescape View File

@ -106,9 +106,15 @@
<el-table-column
label="监管队员"
align="center"
prop="jgdy"
prop="jgdytow"
>
</el-table-column>
<el-table-column label="摄像头识别" align="center" prop="jgdy">
<template slot-scope="scope">
<el-switch v-model="scope.row.jgdy" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</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">
@ -139,7 +145,7 @@
<el-dialog
:visible.sync="showCK"
width="40%"
title="新增人员"
:title="mytitle"
@close="close"
:close-on-click-modal="false"
:close-on-press-escape="false"
@ -201,7 +207,22 @@
placeholder="请输入监管人员"
></el-input>
</el-form-item>
<el-form-item label="车牌号" size="mini" prop="chepaih">
<el-input
v-model="form.jgyr"
placeholder="请输入车牌号"
></el-input>
</el-form-item>
<el-form-item label="车辆型号" size="mini" prop="xinghao">
<el-input
v-model="form.jgyr"
placeholder="请输入车辆型号"
></el-input>
</el-form-item>
<el-form-item label="摄像头识别" size="mini" prop="shexiangtoushibie">
<el-radio v-model="form.shexiangtoushibie" label="1">开启</el-radio>
<el-radio v-model="form.shexiangtoushibie" label="2">关闭</el-radio>
</el-form-item>
<el-form-item label="社会关系" prop="shgx">
<el-input
@ -305,7 +326,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: true,
},{
xm:"张天",
@ -315,7 +338,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: true,
},{
xm:"张天",
@ -325,7 +350,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: true,
},{
xm:"张天",
@ -335,7 +362,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: true,
},{
xm:"张天",
@ -345,7 +374,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: false,
},{
xm:"张天",
@ -355,7 +386,9 @@ export default {
zz:"长沙镇和平路123号",
shgx:"家庭成员：张伟（父亲），李梅（母亲）",
jgyy:"重点监控对象，曾有违法行为",
jgdy:"李四",
jgdytow:"李四",
jgdy: false,
},
],
@ -409,7 +442,7 @@ export default {
this.$router.push("/ZhongdianRen/zhongdianxiangqing")
} else if (type == 1) {
// 编辑
this.mytitle = "编辑考勤规则";
this.mytitle = "编辑人员";
this.chakanxiangqing(rew);
}
},

258
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/cheliangguiji/index copy.vue
Unescape View File

@ -0,0 +1,258 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">查询</el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div>轨迹地图：</div>
<div id="gjMap">
<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-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, '线') }" :strokeWeight="4" />
<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, '线') }" :strokeWeight="4" />
</el-amap>
</div>
</div>
</el-row>
</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"
export default {
name: "tabThree",
props: {
id: {
type: Number,
default: null,
}
},
data() {
return {
activities: [],
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
polygonOptions: {
strokeColor: '#00C5EC',
fillColor: '#00AEFF'
},
zoom: 11.8,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
draggable: false,
visible: true,
changshazhen: changshazhen,
myxiuanlu: myxiuanlu,
roadline2: roadline2,
}
},
mounted() {
},
methods: {
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() { },
searchList() {
},
// 重置
resetTwo() {
},
// 获取备忘录列表
getList() {
this.loading = true;
jProjectFund(this.id).then(res => {
let arr = [];
res.data.forEach(element => {
let obj = {};
obj.size = 'large';
obj.icon = 'icon iconfont icon-jc-kong-yuan';
obj.fundAmount = element.fundAmount;
obj.appropriationTime = element.appropriationTime;
arr.push(obj);
});
this.activities = arr;
this.loading = false;
}).catch((err) => {
// console.log(err);
this.activities = [];
this.loading = false;
})
},
formatDate(dateString, id) {
const year = dateString.slice(0, 4);
const month = dateString.slice(4, 6);
const day = dateString.slice(6, 8);
if (id == 1) {
return `${year}年${month}月${day}日`;
} else {
return `${year}-${month}-${day}`;
}
}
},
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
#gjMap {
width: 900px;
height: 350px;
}
</style>

244
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/cheliangguiji/index.vue
Unescape View File

@ -0,0 +1,244 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">查询</el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div class="dituziti">轨迹地图：</div>
<div id="gjMap">
<el-amap
ref="map"
map-style="amap://styles/normal"
:center="center"
:zoom="zoom"
:zooms="zooms"
v-loading="mapLoading"
@init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
></el-amap>
</div>
</div>
</el-row>
</div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
export default {
name:"tabThree",
data() {
return {
activities: [],
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
zoom: 12,
zooms:[10,16],
center: [121.298563, 32.451807],
mapLoading:false,
map:null,
layers:{
layer:null,
},
}
},
mounted() {
},
methods:{
// 查询
searchList() {
console.log(this.queryTime);
},
// 重置
resetTwo() {
this.queryTime = {
fromTime:"",
toTime:""
}
},
getList() {
},
// 地图初始化
init(map){
// console.log(map);
this.map = map;
map.setMapStyle("amap://styles/normal");
this.layers.layer = new AMap.OverlayGroup();
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:changshazhen.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00C5EC',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var geojson2 = new AMap.Polygon({
path:changshazhen.features[1].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00C5EC',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var showLine = new AMap.Polyline({
path: line.features[0].geometry.coordinates,
strokeWeight: 6,
strokeColor: '#00C5EC',
strokeOpacity: 1,
// 开启箭头
// showDir: true,
})
this.layers.layer.addOverlay(geojson1);
this.layers.layer.addOverlay(geojson2);
this.layers.layer.addOverlay(showLine);
this.map.add(this.layers.layer);
map.setFitView();
})
},
},
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
.dituziti{
font-size: 16px;
}
#gjMap {
width: 700px;
height: 400px;
}
</style>

1
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/index.js
Unescape View File

@ -2,3 +2,4 @@ export { default as tabOne } from './tabOne'
export { default as tabTwo } from './tabTwo'
export { default as tabThree } from './tabThree'
export { default as tabFour } from './tabFour'
export { default as cheliangguiji } from './cheliangguiji'

244
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/cheliangguiji.vue
Unescape View File

@ -0,0 +1,244 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">查询</el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div class="dituziti">轨迹地图：</div>
<div id="gjMap">
<el-amap
ref="map"
map-style="amap://styles/normal"
:center="center"
:zoom="zoom"
:zooms="zooms"
v-loading="mapLoading"
@init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
></el-amap>
</div>
</div>
</el-row>
</div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
export default {
name:"tabThree",
data() {
return {
activities: [],
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
zoom: 12,
zooms:[10,16],
center: [121.298563, 32.451807],
mapLoading:false,
map:null,
layers:{
layer:null,
},
}
},
mounted() {
},
methods:{
// 查询
searchList() {
console.log(this.queryTime);
},
// 重置
resetTwo() {
this.queryTime = {
fromTime:"",
toTime:""
}
},
getList() {
},
// 地图初始化
init(map){
// console.log(map);
this.map = map;
map.setMapStyle("amap://styles/normal");
this.layers.layer = new AMap.OverlayGroup();
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:changshazhen.features[0].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00C5EC',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var geojson2 = new AMap.Polygon({
path:changshazhen.features[1].geometry.coordinates[0][0],
strokeColor: '#00C5EC',
fillColor: '#00C5EC',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var showLine = new AMap.Polyline({
path: line.features[0].geometry.coordinates,
strokeWeight: 6,
strokeColor: '#00C5EC',
strokeOpacity: 1,
// 开启箭头
// showDir: true,
})
this.layers.layer.addOverlay(geojson1);
this.layers.layer.addOverlay(geojson2);
this.layers.layer.addOverlay(showLine);
this.map.add(this.layers.layer);
map.setFitView();
})
},
},
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
.dituziti{
font-size: 16px;
}
#gjMap {
width: 700px;
height: 400px;
}
</style>

253
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/index.vue
Unescape View File

@ -1,244 +1,45 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
<div class="tabThreebox">
<el-tabs v-model="activeName" tabPosition="left" @tab-click="handleClick" style="color: #edeef0">
<el-tab-pane label="车辆轨迹" name="first" />
<el-tab-pane label="人员轨迹" name="second" />
</el-tabs>
<div class="bottom-box-component">
<tabThree v-if="activeName == 'first'"></tabThree>
<cheliangguiji v-if="activeName == 'second'"></cheliangguiji>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">查询</el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div class="dituziti">轨迹地图：</div>
<div id="gjMap">
<el-amap
ref="map"
map-style="amap://styles/normal"
:center="center"
:zoom="zoom"
:zooms="zooms"
v-loading="mapLoading"
@init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
></el-amap>
</div>
</div>
</el-row>
</div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
import tabThree from './tabThree.vue'
import cheliangguiji from './cheliangguiji.vue'
export default {
name:"tabThree",
name: '',
components: { tabThree, cheliangguiji },
data() {
return {
activities: [],
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
zoom: 12,
zooms:[10,16],
center: [121.298563, 32.451807],
mapLoading:false,
map:null,
layers:{
layer:null,
},
activeName: "first",
}
},
mounted() {
},
methods:{
// 查询
searchList() {
console.log(this.queryTime);
},
// 重置
resetTwo() {
this.queryTime = {
fromTime:"",
toTime:""
created() { },
mounted() { },
methods: {
handleClick(e) {
if (this.activeName == "first") {
} else if (this.activeName == "second") {
} else if (this.activeName == "third") {
} else if (this.activeName == "four") {
}
},
getList() {
},
// 地图初始化
init(map){
// console.log(map);
this.map = map;
map.setMapStyle("amap://styles/normal");
this.layers.layer = new AMap.OverlayGroup();
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:changshazhen.features[0].geometry.coordinates[0][0],
strokeColor: '#F44444',
fillColor: '#F44444',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var geojson2 = new AMap.Polygon({
path:changshazhen.features[1].geometry.coordinates[0][0],
strokeColor: '#F44444',
fillColor: '#F44444',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var showLine = new AMap.Polyline({
path: line.features[0].geometry.coordinates,
strokeWeight: 6,
strokeColor: '#F44444',
strokeOpacity: 1,
// 开启箭头
// showDir: true,
})
this.layers.layer.addOverlay(geojson1);
this.layers.layer.addOverlay(geojson2);
this.layers.layer.addOverlay(showLine);
this.map.add(this.layers.layer);
map.setFitView();
})
},
},
computed: {}
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
<style scoped lang='scss'>
.tabThreebox{
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
.dituziti{
font-size: 16px;
}
#gjMap {
width: 700px;
height: 400px;
// padding-left: 230px;
}
</style>

244
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/components/tabThree/tabThree.vue
Unescape View File

@ -0,0 +1,244 @@
<template>
<div class="three-box">
<el-row class="row-one">
<div class="search">
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-time-picker v-model="queryTime.fromTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="开始时间">
</el-time-picker>
</div>
<div class="symbol">~</div>
<div class="end-time">
<el-time-picker v-model="queryTime.toTime" align="right" :clearable="false" format="HH:mm:ss"
value-format="HH:mm:ss" placeholder="结束时间">
</el-time-picker>
</div>
</div>
</div>
</div>
</div>
<div class="searchBtn">
<el-button type="primary" size="mini" icon="el-icon-search" @click="searchList">查询</el-button>
<el-button size="mini" icon="el-icon-refresh-left" @click="resetTwo">重置</el-button>
</div>
</el-row>
<el-row style="margin-top: 20px;">
<div style="display: flex;">
<div class="dituziti">轨迹地图：</div>
<div id="gjMap">
<el-amap
ref="map"
map-style="amap://styles/normal"
:center="center"
:zoom="zoom"
:zooms="zooms"
v-loading="mapLoading"
@init="init"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }"
class="amap-demo"
></el-amap>
</div>
</div>
</el-row>
</div>
</template>
<script>
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import line from "@/assets/mapjson/Chaangshazhen/line.geojson"
export default {
name:"tabThree",
data() {
return {
activities: [],
loading: false,
queryTime: {
fromTime: "",
toTime: ""
},
zoom: 12,
zooms:[10,16],
center: [121.298563, 32.451807],
mapLoading:false,
map:null,
layers:{
layer:null,
},
}
},
mounted() {
},
methods:{
// 查询
searchList() {
console.log(this.queryTime);
},
// 重置
resetTwo() {
this.queryTime = {
fromTime:"",
toTime:""
}
},
getList() {
},
// 地图初始化
init(map){
// console.log(map);
this.map = map;
map.setMapStyle("amap://styles/normal");
this.layers.layer = new AMap.OverlayGroup();
this.$nextTick(() => {
var geojson1 = new AMap.Polygon({
path:changshazhen.features[0].geometry.coordinates[0][0],
strokeColor: '#F44444',
fillColor: '#F44444',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var geojson2 = new AMap.Polygon({
path:changshazhen.features[1].geometry.coordinates[0][0],
strokeColor: '#F44444',
fillColor: '#F44444',
fillOpacity: 0.2,
// fillOpacity: 0.3,
editable:false,
visible:true,
})
var showLine = new AMap.Polyline({
path: line.features[0].geometry.coordinates,
strokeWeight: 6,
strokeColor: '#F44444',
strokeOpacity: 1,
// 开启箭头
// showDir: true,
})
this.layers.layer.addOverlay(geojson1);
this.layers.layer.addOverlay(geojson2);
this.layers.layer.addOverlay(showLine);
this.map.add(this.layers.layer);
map.setFitView();
})
},
},
}
</script>
<style lang="scss" scoped>
.three-box {
padding: 10px 20px;
.row-one {
display: flex;
align-items: center;
}
.content {
display: flex;
align-items: center;
font-size: 16px;
font-weight: 500;
// line-height: 20px;
margin-right: 40px;
.time-query {
height: 30px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
// background-color: transparent;
width: 150px;
.el-input__inner {
// background-color: transparent;
// border: none;
width: 100%;
height: 30px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
// .el-input__inner::placeholder {
// /* 在这里添加你想要修改的 placeholder 样式 */
// font-size: 14px;
// font-family: "Source Han Sans CN-Regular";
// font-weight: 400;
// color: #d3eef2;
// -webkit-background-clip: text;
// -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
// }
}
}
.symbol {
width: 14px;
// height: 6px;
line-height: 15px;
margin: 0 5px;
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("../../../../../../assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("../../../../../../assets/images/resetbg.png");
margin: 0 20px;
}
}
}
.dituziti{
font-size: 16px;
}
#gjMap {
width: 700px;
height: 400px;
}
</style>

5
src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue
Unescape View File

@ -49,12 +49,14 @@
<el-tab-pane label="详细信息" name="first" />
<el-tab-pane label="人脸库" name="second" />
<el-tab-pane label="轨迹回放" name="third" />
<!-- <el-tab-pane label="车辆轨迹" name="cheliangguiji" /> -->
<el-tab-pane label="边界预警" name="four" />
</el-tabs>
<div class="bottom-box-component">
<tab-one v-if="activeName == 'first'"></tab-one>
<tab-two v-if="activeName == 'second'"></tab-two>
<tab-three v-if="activeName == 'third'"></tab-three>
<!-- <cheliangguiji v-if="activeName == 'cheliangguiji'"></cheliangguiji> -->
<tab-four v-if="activeName == 'four'"></tab-four>
</div>
</el-row>
@ -62,7 +64,7 @@
</template>
<script>
import { tabOne, tabTwo, tabThree, tabFour, tabFive, } from "./components"
import { tabOne, tabTwo, tabThree, tabFour, tabFive,cheliangguiji } from "./components"
export default {
name: '',
components: {
@ -71,6 +73,7 @@ export default {
tabThree,
tabFour,
tabFive,
cheliangguiji
},
data() {
return {

1
src/views/components/Eldialog/index.vue
Unescape View File

@ -29,7 +29,6 @@
:width="width"
:style="heightStyle"
append-to-body
>
<template slot="title">
<div class="closeClick">

2
src/views/components/Mapdialog/index.vue
Unescape View File

@ -185,7 +185,7 @@ export default {
} else {
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.title = "重点人员行程轨迹";
this.title = "重点车辆行程轨迹";
this.person = false;
}
this.$refs.dialog.open("1");

543
src/views/components/Mapdialogteshucheliang/index.vue
Unescape View File

@ -0,0 +1,543 @@
<template>
<dia-log ref="dialog" width="45%" :title="title" :type="1">
<div class="personage-track">
<div class="track-title">
<div class="titlebg"></div>
<span class="name">特殊车辆</span>
<span>苏E1254</span>
</div>
<div class="track-content">
<div class="oneList">
<div class="item" :class="person ? 'item-left' : 'car-item'" v-if="person">
<div class="ball"></div>
<div class="content">
<!-- {{ person ? "人员编号：" : "车辆编号："}} -->
联系方式：
<!-- <span>{{ person ? personItem.userId : "201128881111100" }}</span> -->
<span>13611111111</span>
</div>
</div>
<!-- <div class="item">
<div class="ball"></div>
<div class="content">
住址:
<span>临海村</span>
</div>
</div> -->
</div>
<div class="twoList">
<div class="item">
<div class="ball"></div>
<div class="content">
时间范围：
<div class="time-query">
<div class="interval-select">
<div class="star-time">
<el-date-picker v-model="queryTime.fromTime" type="datetime" align="right"
:clearable="false" format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间">
</el-date-picker>
</div>
<div class="symbol"></div>
<div class="end-time">
<el-date-picker v-model="queryTime.toTime" type="datetime" align="right"
:clearable="false" format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间">
</el-date-picker>
<img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
</div>
</div>
</div>
<div class="btns reset" @click="reset">
<img src="@/assets/images/reset.png" alt="" />
<span>重置</span>
</div>
<div class="btns" @click="query">
<img src="@/assets/images/inquire.png" alt="" />
<span>查询</span>
</div>
</div>
</div>
</div>
<div class="threeList">
<div class="item">
<div class="item-top">
<div class="ball"></div>
<div class="contentTitle">轨迹地图：</div>
</div>
<div class="contentMap">
<!-- <div id="personageTrackMap">
</div> -->
<el-amap element-loading-background="rgba(16, 49, 92, 0.8)" ref="personMap"
map-style="amap://styles/d02b66b0a7f190d5a1556a3f59c86518" :center="center" :zoom="zoom"
:zooms="zooms" @init="init" view-mode="3D"
:extra-options="{ vectorMapForeign: 'style_zh_cn' }" class="amap-person">
<el-amap-polyline :editable="false" :visible="true" :draggable="false"
:path="roadline1.features[0].geometry.coordinates[0]" :zIndex="500"
strokeColor="red" isOutline lineCap="round" :strokeWeight="4" />
<el-amap-geojson :geo="changshazhen" :polygon-options="polygonOptions"
:draggable="true" />
</el-amap>
<!-- <img src="@/assets/images/minMap.png" alt="" /> -->
</div>
</div>
</div>
<div class="guijitu">
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="guijitu-item">
<div class="yuan"></div>
<div class="xian"></div>
<img src="@/assets/images/jiankong.jpg" alt="">
<div class="shijian">2024-09-13 09:30:00</div>
</div>
<div class="jiantou">
<i class="el-icon-caret-right"></i>
</div>
</div>
</div>
</div>
</dia-log>
</template>
<script>
import diaLog from "@/views/components/Eldialog/index.vue";
import changshazhen from "@/assets/mapjson/Chaangshazhen/changshazhen.geojson"
import roadline1 from "@/assets/mapjson/Chaangshazhen/myxiuanlu.geojson"
export default {
components: { diaLog },
data() {
return {
title: "人员行程轨迹",
person: false,
personItem: null,
queryTime: {
fromTime: "",
toTime: "",
},
zoom: 11,
zooms: [3, 20],
center: [121.298563, 32.451807],
map: null,
polygonOptions: {
strokeColor: '#00C5EC', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
fillColor: 'rgba(64,175,255,0.4)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
},
polygonOptionsTwo: {
strokeColor: '#ffffff', // 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
fillColor: 'rgba(64,175,255,1)' // 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
},
changshazhen: changshazhen,
roadline1: roadline1,
track: null,
layers: {
layer: null,
}
};
},
methods: {
init(map) {
this.map = map;
map.setMapStyle("amap://styles/d02b66b0a7f190d5a1556a3f59c86518");
this.layers.layer = new AMap.OverlayGroup();
},
open(person, item) {
// console.log(person)
// console.log(item);
if (person == "person") {
this.title = "重点人员行程轨迹";
this.person = true;
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.query();
} else {
this.queryTime.fromTime = this.getCurrentTime();
this.queryTime.toTime = this.getCurrentTime(1);
this.title = "特殊车辆行程轨迹";
this.person = false;
}
this.$refs.dialog.open("1");
// this.$nextTick(()=>{
// this.initMap();
// })
},
Close() {
this.$refs.dialog.Close();
},
// 时间重置
reset() {
// Object.keys(this.queryTime).forEach(key => { this.queryTime[key] = '' })
// if (this.map.getAllOverlays('polyline')) {
// this.map.remove(this.map.getAllOverlays('polyline'));
// }
const mapInstance = this.$refs.personMap.$$getInstance();
// 调用 setFitView 方法居中和缩放地图以适应 GeoJSON 数据
mapInstance.setFitView();
},
// 查询
query() {
},
// 获取当前时间
getCurrentTime(id) {
// 获取当前时间
const now = new Date();
// 获取年月日时分秒
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1，并且格式化为两位数
const day = String(now.getDate()).padStart(2, '0'); // 格式化为两位数
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
// 格式化为字符串
const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const formattedTime = `${year}-${month}-${day} 00:00:00`;
if (id == 1) {
return formattedDateTime;
} else {
return formattedTime;
}
},
},
};
</script>
<style lang="scss" scoped>
.personage-track {
.track-title {
display: flex;
align-items: center;
position: relative;
.titlebg {
position: absolute;
left: -15px;
top: -18px;
width: 50px;
height: 50px;
background-image: url("~@/assets/images/personnel.png");
background-position: center;
background-size: 100% 100%;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
line-height: 14px;
}
.name {
margin: 0 15px 0 30px;
}
}
.track-content {
margin-top: 15px;
padding-left: 20px;
display: grid;
grid-column: 1fr;
grid-row-gap: 15px;
.oneList {
display: flex;
.item {
display: flex;
align-items: center;
.ball {
width: 4px;
height: 4px;
background: #daebff;
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
border-radius: 20px 20px 20px 20px;
margin-right: 15px;
}
.content {
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #cccccc;
line-height: 20px;
span {
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
line-height: 20px;
}
}
}
.item-left {
margin-right: 150px;
}
.car-item {
margin-right: 80px;
}
}
.twoList {
.item {
display: flex;
align-items: center;
.ball {
width: 4px;
height: 4px;
background: #daebff;
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
border-radius: 20px 20px 20px 20px;
margin-right: 15px;
}
.content {
display: flex;
align-items: center;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #cccccc;
line-height: 20px;
.time-query {
background-image: url("~@/assets/images/timebg.png");
width: 440px;
height: 35px;
background-size: 100% 100%;
.interval-select {
display: flex;
align-items: center;
::v-deep .el-input__prefix {
display: none;
}
.star-time,
.end-time {
position: relative;
.data_icon {
position: absolute;
right: 5px;
top: 8px;
width: 20px;
}
::v-deep .el-date-editor {
background-color: transparent;
width: 210px;
.el-input__inner {
background-color: transparent;
border: none;
width: 100%;
height: 35px;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
padding-left: 15px;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(211, 238, 242, 0.2);
}
}
}
.symbol {
width: 14px;
height: 6px;
background-image: url("~@/assets/images/routeTime.png");
background-size: 100% 100%;
}
}
}
.btns {
width: 92px;
height: 35px;
background-image: url("~@/assets/images/inquirebg.png");
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
}
span {
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #ffffff;
line-height: 20px;
}
}
.reset {
background-image: url("~@/assets/images/resetbg.png");
margin: 0 20px;
}
}
}
}
.threeList {
.item {
display: flex;
flex-direction: column;
.item-top {
display: flex;
align-items: center;
.ball {
width: 4px;
height: 4px;
background: #daebff;
box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
0px 0px 5px 0px rgba(229, 241, 255, 0.25);
border-radius: 20px 20px 20px 20px;
margin-right: 15px;
}
.contentTitle {
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #cccccc;
line-height: 20px;
}
}
.contentMap {
padding: 15px 74px 0 14px;
width: 100%;
height: 350px;
#personageTrackMap {
width: 100%;
height: 100%;
background-color: #fff;
}
.amap-person {
width: 100%;
height: 100%;
}
// img {
// width: 100%;
// height: 100%;
// }
}
}
}
}
}
.guijitu {
width: 90%;
overflow: auto;
display: flex;
color: #fff;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
position: relative;
.jiantou {
margin-top: 3px;
margin-left: -20px;
color: #ffffff;
.el-icon-caret-right {
font-size: 26px;
}
}
.guijitu-item {
display: flex;
/* 使用 Flexbox 布局 */
flex-direction: column;
/* 垂直排列 */
align-items: center;
/* 水平居中对齐 */
justify-content: center;
/* 垂直居中对齐 */
/* 设置高度以便居中 */
padding: 10px;
position: relative;
.yuan {
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
margin-bottom: 10px;
}
.xian {
position: absolute;
top: 16px;
width: 100%;
height: 1px;
background-color: #fff;
}
}
}
</style>

74
src/views/components/ZhanshiTubiao/index.vue
Unescape View File

@ -14,58 +14,75 @@
<div class="ismytitle">
图层展示
</div>
<!-- <div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap == 1 ? 'action-map' : ''">
<div class="list" @click="changeMap(1)">
<div class="leftbg" :class="actionMap.includes(1) ? 'action-map' : ''">
<img src="@/assets/images/icon/renkouzonghui.png" alt="" />
</div>
<div class="rightbg" v-show="actionMap == 1">
<span>重点人员总汇</span>
<div class="rightbg">
<span>本地人口分布</span>
</div>
</div>
<div class="list" @click="changeMap(3)">
<div class="leftbg" :class="actionMap.includes(3) ? 'action-map' : ''">
<img src="@/assets/images/icon/zhongdianren.png" alt="" />
</div>
<div class="rightbg">
<span>外来人口分布</span>
</div>
</div>
</div> -->
<div class="list" @click="changeMap(2)">
<div class="leftbg action-map" >
<div class="leftbg" :class="actionMap.includes(2) ? 'action-map' : ''">
<img src="@/assets/images/icon/zhongdianren2.png" alt="" />
</div>
<div class="rightbg" >
<div class="rightbg">
<span>重点人员</span>
</div>
</div>
<!-- <div class="list" @click="changeMap(3)">
<div class="leftbg" :class="actionMap == 3 ? 'action-map' : ''">
<img src="@/assets/images/icon/zhongdianren.png" alt="" />
<div class="list" @click="changeMap(4)">
<div class="leftbg" :class="actionMap.includes(4) ? 'action-map' : ''">
<img src="@/assets/images/icon/genduofuwu.png" alt="" />
</div>
<div class="rightbg">
<span>重点车辆</span>
</div>
<div class="rightbg" v-show="actionMap == 3">
<span>外地重点人员</span>
</div>
</div> -->
</div>
<!-- -->
<div v-show="showType == '重大活动保障'" class="zhongdahuodong">
<div class="ismytitle">
图例
</div>
<div class="list" >
<div class="leftbg" :class="'action-map'">
<div class="list" @click="changeMap('车辆')">
<div class="leftbg" :class="actionMap.includes('车辆') ? 'action-map' : ''">
<img src="@/assets/images/icon/dainbingshebei.png" alt="" />
</div>
<div class="rightbg">
<span>单兵设备</span>
<span> 车辆</span>
</div>
</div>
<div class="list" >
<div class="leftbg" :class="'action-map'">
<div class="list" @click="changeMap('人员')">
<div class="leftbg" :class="actionMap.includes('人员') ? 'action-map' : ''">
<img src="@/assets/images/icon/A-jianguanrenyuan.png" alt="" />
</div>
<div class="rightbg">
<span>人员</span>
</div>
</div>
<div class="list" >
<div class="leftbg" :class="'action-map'">
<div class="list" @click="changeMap('设备')">
<div class="leftbg" :class="actionMap.includes('设备') ? 'action-map' : ''">
<img src="@/assets/images/icon/genduofuwu.png" alt="" />
</div>
<div class="rightbg">
<span>车辆</span>
<span>单兵设备</span>
</div>
</div>
<div class="list" @click="changeMap('视频监控')">
<div class="leftbg" :class="actionMap.includes('视频监控') ? 'action-map' : ''">
<img src="@/assets/images/icon/jiankong.png" alt="" />
</div>
<div class="rightbg">
<span>视频监控</span>
</div>
</div>
</div>
@ -74,7 +91,7 @@
<div class="ismytitle">
图例
</div>
<div class="list" >
<div class="list">
<div class="leftbg" :class="'action-map'">
<img src="@/assets/images/icon/weurneji.png" alt="" />
</div>
@ -82,7 +99,7 @@
<span>无人机</span>
</div>
</div>
<div class="list" >
<div class="list">
<div class="leftbg" :class="'action-map'">
<img src="@/assets/images/icon/xuncha.png" alt="" />
</div>
@ -90,6 +107,7 @@
<span>巡查事件</span>
</div>
</div>
</div>
</div>
@ -108,7 +126,7 @@ export default {
lawCar: false, // 执法车辆
surveillanceVideo: false, // 监控视频
input: "", // 输入框的值
actionMap: 1, // 默认选中执法人员地图
actionMap: [1,'车辆','视频监控'], // 默认选中执法人员地图
bgPingList: {
jianguanrenyaun: true
}
@ -126,8 +144,12 @@ export default {
methods: {
changeMap(id) {
this.actionMap = id;
this.$emit("markersradio", id);
if (this.actionMap.includes(id)) {
this.actionMap = this.actionMap.filter(item => item != id)
} else {
this.actionMap.push(id);
}
this.$emit("markersactionMap", this.actionMap);
},

111
src/views/components/jingweidushuru/index.vue
Unescape View File

@ -0,0 +1,111 @@
<template>
<div class="jingweidushuru">
<div class="twoList">
<div class="star-time">
<el-input v-model="lnglat.lng" placeholder="请输入经度">
<template slot="append">—</template>
</el-input>
</div>
<div class="end-time">
<el-input v-model="lnglat.lat" placeholder="请输入纬度">
<template slot="append" >
<div @click="queding">确定</div>
</template>
</el-input>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {
lnglat:{
lng:"",
lat:"",
}
}
},
created() { },
mounted() { },
methods: {
open(lng,lat){
this.lnglat.lng = lng
this.lnglat.lat = lat
},
queding(){
if(this.lnglat.lng && this.lnglat.lat){
this.$emit("addjingweidu",this.lnglat)
}
}
},
computed: {}
}
</script>
<style scoped lang='scss'>
.jingweidushuru {
width: 450px;
height: 40px;
position: absolute;
bottom: 35px;
left: 35%;
background-image: url("~@/assets/images/timebg.png");
background-size: 100% 100%;
::v-deep .twoList {
display: flex;
align-items: center;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #cccccc;
.el-input__inner {
background-color: transparent;
border: none;
width: 100%;
height: 40px;
font-size: 14px;
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
padding-left: 15px;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
font-size: 14px;
font-family: "Source Han Sans CN-Regular";
font-weight: 400;
color: #d3eef2;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(211, 238, 242, 1);
}
.el-input-group__append {
background-color: transparent;
border: none;
color: #ffffff;
}
.end-time {
.el-input-group__append {
background-color: transparent;
border: none;
color: #ffffff;
cursor: pointer;
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save