大屏接口

dhy
吕天方 1 year ago
parent 89bbd0f01b
commit a073dcd676

@ -0,0 +1,28 @@
import request from "@/utils/request"
// 重点区域
export function regionalsettings(params){
return request({
url:'/jn/regionalsettings/list',
method:'get',
params
})
}
// 重点路段
export function roadsetting(params){
return request({
url:'/jn/roadsetting/list',
method:'get',
params
})
}
// 围栏
export function fence(params){
return request({
url:'/jn/fence/list',
method:'get',
params
})
}

@ -4,13 +4,13 @@
* @Author: JC9527
* @Date: 2023-08-15 11:09:57
* @LastEditors: JC9527
* @LastEditTime: 2023-08-18 18:42:16
* @LastEditTime: 2023-12-11 17:00:41
-->
<template>
<div class="right-box">
<div class="item" :style="relativeHeight">
<title-box title="区域网格"></title-box>
<map-right :rightArray="griddingArray" :height="getHeight"></map-right>
<map-right :rightArray="quyuArray" :height="getHeight"></map-right>
</div>
<div class="item" :style="relativeHeight">
<title-box title="重点区域"></title-box>
@ -18,11 +18,11 @@
</div>
<div class="item" :style="relativeHeight">
<title-box title="考勤围栏"></title-box>
<map-right :rightArray="griddingArray" :height="getHeight"></map-right>
<map-right :rightArray="weilanArray" :height="getHeight"></map-right>
</div>
<div class="item" :style="relativeHeight">
<title-box title="重点路段"></title-box>
<map-right :rightArray="griddingArray" :height="getHeight"></map-right>
<map-right :rightArray="luduanArray" :height="getHeight"></map-right>
</div>
</div>
</template>
@ -64,27 +64,27 @@ export default {
],
areaArray:[
{
area:'网格1',
name:'网格1',
event:60,
resolved:40,
unsolved:20
},{
area:'网格2',
name:'网格2',
event:60,
resolved:40,
unsolved:20
},{
area:'网格3',
name:'网格3',
event:60,
resolved:40,
unsolved:20
},{
area:'网格1',
name:'网格1',
event:60,
resolved:40,
unsolved:20
},{
area:'网格2',
name:'网格2',
event:60,
resolved:40,
unsolved:20
@ -94,8 +94,41 @@ export default {
relativeHeight:{
height:'',
},
quyuArray:[],
weilanArray:[],
luduanArray:[],
}
},
props:['quyuData', 'weilanData', 'luduanData'],
watch:{
quyuData:{
handler(newQuyu){
// console.log(newQuyu,'');
if(newQuyu) {
this.quyuArray = newQuyu
}
},
immediate:true,
},
weilanData:{
handler(newWeilan){
// console.log(newWeilan,'');
if(newWeilan) {
this.weilanArray = newWeilan
}
},
immediate:true,
},
luduanData:{
handler(newLuduan){
// console.log(newLuduan,'');
if(newLuduan) {
this.luduanArray = newLuduan
}
},
immediate:true,
},
},
methods:{
getDomHeight(){
this.$nextTick(()=>{

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-14 14:40:02
* @LastEditors: JC9527
* @LastEditTime: 2023-08-18 20:37:07
* @LastEditTime: 2023-12-11 15:46:02
-->
<template>
<div class="pc-container">
@ -110,7 +110,7 @@ div {
.pc-container {
overflow: hidden;
height: 100%;
background: url("../../assets/images/zhifa/main-background.jpg") no-repeat
background: url("~@/assets/images/zhifa/main-background.jpg") no-repeat
center;
background-size: cover;
position: relative;
@ -119,7 +119,7 @@ div {
left: 0px;
top: 0px;
width: 510px;
height: 95%;
height: 98%;
z-index: 550;
box-sizing: border-box;
}
@ -171,7 +171,7 @@ div {
right: 0px;
top: 0px;
width: 510px;
height: 95%;
height: 98%;
z-index: 550;
box-sizing: border-box;
}

@ -93,7 +93,7 @@
</div>
<transition name="right-animationMap">
<div class="map-right" v-if="rightAnimationData">
<map-right></map-right>
<map-right :quyuData="quyuData" :weilanData="weilanData" :luduanData="luduanData"></map-right>
</div>
</transition>
@ -133,30 +133,6 @@
<crew-assign ref="crewAssign"></crew-assign>
<video-wall ref="videoWall"></video-wall>
<shop ref="shop" width="50%" title="商铺详情查看" />
<person-popup
v-if="personPopup"
v-on:personClose="personClose"
v-on:getRoute="presoninfo"
:point="mypoint"
></person-popup>
<event-popup
v-if="eventPopup"
v-on:eventClose="eventClose"
v-on:zhipai="personzhipai"
:point="mypoint"
></event-popup>
<car-popup
v-if="carPopup"
v-on:carClose="carClose"
v-on:carinfo="carinfo"
:point="mypoint"
></car-popup>
<monitoring-popup
v-if="monitoringPopup"
v-on:monitoringClose="monitoringClose"
v-on:monitoringInfo="monitoringInfo"
:point="mypoint"
></monitoring-popup>
</div>
</template>
<script>
@ -181,8 +157,9 @@ import detachment2 from "@/utils/mapJson/detachment2.json";
import detachment3 from "@/utils/mapJson/detachment3.json";
import detachment4 from "@/utils/mapJson/detachment4.json";
import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
// import zhongdianluduan from "@/utils/mapJson/zhongdianluduan.json";
// import zhongdianquyu from "@/utils/mapJson/zhongdianquyu.json";
import mapLeft from "../components/mapLeftContent.vue";
import mapRight from "../components/mapRightContent.vue";
@ -192,16 +169,12 @@ import personageTrack from "../../components/personagetrack/index.vue";
import crewAssign from "../../components/crewAssign/index.vue";
import videoWall from "../../components/videoWall/index.vue";
import shop from "../../components/shop/index.vue";
import personPopup from "../../components/personPopup/index.vue";
import eventPopup from "../../components/eventPopup/index.vue";
import carPopup from "../../components/carPopup/index.vue";
import monitoringPopup from "../../components/monitoringPopup/index.vue";
import jiangningwangge from "@/utils/data/江宁开发区网格.json";
import weilan from "@/utils/data/围栏1.json";
import axios from "axios";
import { regionalsettings, roadsetting, fence } from "@/api/bigScreenApi"
export default {
name: "myMap",
@ -212,10 +185,6 @@ export default {
crewAssign,
videoWall,
shop,
personPopup,
eventPopup,
carPopup,
monitoringPopup,
},
data() {
return {
@ -246,14 +215,17 @@ export default {
mapLayer5: null,
input: "", //
actionMap: 1, //
action: 1, // ///
personPopup: false,
eventPopup: false,
carPopup: false,
monitoringPopup: false,
action: 1, // ////沿
mypoint: {},
leftAnimationData: true,
rightAnimationData: true,
electronicMap: null, //
satelliteMap: null, //
satelliteNoteMap:null, //
wanggeData: null, //
quyuData: null, //
weilanData: null, //
luduanData: null, //
};
},
methods: {
@ -304,15 +276,28 @@ export default {
// }
// )
// .addTo(this.globalMap);
L.tileLayer
//
this.electronicMap = L.tileLayer
.chinaProvider("GaoDe.Normal.Map", {
maxZoom: 18,
minZoom: 5,
color: { r: 10, g: 38, b: 74 }, //
})
.addTo(this.globalMap);
//
this.satelliteMap = L.tileLayer
.chinaProvider("GaoDe.Satellite.Map", {
maxZoom: 18,
minZoom: 5,
color: { r: 10, g: 38, b: 74 }, //
})
//
this.satelliteNoteMap = L.tileLayer
.chinaProvider("GaoDe.Satellite.Annotion", {
maxZoom: 18,
minZoom: 5,
color: { r: 10, g: 38, b: 74 }, //
})
this.globalMap.addLayer(this.electronicMap)
// L.tileLayer
// .chinaProvider("GaoDe.Satellite.Annotion", {
// maxZoom: 18,
@ -345,11 +330,11 @@ export default {
this.globalMap.getPane("mapLayer6").style.pointerEvents = "none";
this.globalMap.createPane("mapLayer7");
this.globalMap.getPane("mapLayer7").style.zIndex = 502;
this.globalMap.getPane("mapLayer7").style.zIndex = 503;
this.globalMap.getPane("mapLayer7").style.pointerEvents = "none";
this.globalMap.createPane("mapEvent1");
this.globalMap.getPane("mapEvent1").style.zIndex = 503;
this.globalMap.getPane("mapEvent1").style.zIndex = 504;
this.globalMap.getPane("mapEvent1").style.pointerEvents = "none";
this.mapEvent.mapEvent1 = L.featureGroup().addTo(this.globalMap);
@ -377,20 +362,21 @@ export default {
// this.addLayer3();
// this.addLayer4();
// this.addLayer5();
this.addLayer6();
this.addLayer7();
this.addLayer6(); //
this.addLayer7(); //
this.addLayer8();
this.addLayer8(); // and
// 118.797442,32.087219
// 118.797442,32.087219
L.marker(L.latLng(31.96840071263104, 118.79808425903322), {
icon: L.icon({
iconUrl: require("../../../assets/images/3.png"),
iconSize: [38, 38],
iconSize: [38, 43],
iconAnchor: [22, 38],
}),
}).addTo(this.globalMap);
},
// and
addLayer8() {
// geojson
let geojson = L.geoJSON(jiangningwangge, {
@ -422,8 +408,37 @@ export default {
});
// .addTo(this.mapLayers.mapLayer8);
// geojson
let geojson2 = L.geoJSON(weilan, {
//
fence({ pageNum: 1, pageSize: 100 }).then(res=>{
// console.log(res,'');
this.weilanData = res.rows;
res.rows.forEach(element=>{
let shapeStr = JSON.parse(element.shapeStr);
//
if(shapeStr.features[0].geometry.type == "Point") {
let geojson2 = L.circle([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
radius: shapeStr.features[0].properties.radius,
color: "#62E1FA",
weight: 1,
fillColor: "#62E1FA",
fillOpacity: 0.3,
pane: "mapLayer2"
}).addTo(this.mapLayers.mapLayer8);
let myIcon = L.divIcon({
className: "land-name5",
html: element.name,
iconSize: [150, 24],
iconAnchor: [75, 12],
});
// ;
L.marker([shapeStr.features[0].geometry.coordinates[1], shapeStr.features[0].geometry.coordinates[0]], {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer8);
} else if(shapeStr.features[0].geometry.type == "Polygon") {
//
let geojson2 = L.geoJSON(shapeStr.features[0], {
pane: "mapLayer2",
style: function (feature) {
return {
@ -439,7 +454,7 @@ export default {
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "land-name5",
html: text,
html: element.name,
iconSize: [150, 24],
iconAnchor: [75, 12],
});
@ -450,6 +465,9 @@ export default {
}).addTo(this.mapLayers.mapLayer8);
},
}).addTo(this.mapLayers.mapLayer8);
}
})
})
},
addLayer1() {
this.mapLayers.mapLayer1.clearLayers();
@ -763,12 +781,7 @@ export default {
});
},
markerClick(marker, index) {
// document.getElementsByName('monitoring').addEventListener("click",function(){//ElementsById()elementaddEventListener()
// console.log("");
// })
// console.log(marker);
marker.on("click", (e) => {
// console.log(e);
this.$nextTick(() => {
document
.querySelector("#monitoring" + index)
@ -811,43 +824,8 @@ export default {
});
}
});
// this.mypoint = e.containerPoint;
// if(this.actionMap == 1) {
// // this.personPopup = true;
// } else if(this.actionMap == 2) {
// // this.eventPopup = true;
// } else if(this.actionMap == 3) {
// // this.carPopup = true
// } else if(this.actionMap == 4){
// // this.monitoringPopup = true;
// }
});
},
personClose() {
this.personPopup = false;
},
eventClose() {
this.eventPopup = false;
},
carClose() {
this.carPopup = false;
},
monitoringClose() {
this.monitoringPopup = false;
},
// personzhipai(){
// this.$refs.crewAssign.open();
// },
// presoninfo(){
// this.$refs.personageTrack.open('person');
// },
// carinfo(){
// this.$refs.personageTrack.open('car');
// },
// monitoringInfo(){
// this.$refs.videoWall.open();
// },
addLayer2() {
this.mapLayers.mapLayer2.clearLayers();
let geojson = L.geoJSON(
@ -942,10 +920,16 @@ export default {
// json
this.mapLayer5 = geojson.getBounds();
},
//
addLayer6() {
this.mapLayers.mapLayer5.clearLayers();
// this.mapLayers.mapLayer5.clearLayers();
regionalsettings({ pageNum: 1, pageSize: 100 }).then(res=>{
// console.log(res,'');
this.quyuData = res.rows;
res.rows.forEach(element => {
let shapeStr = JSON.parse(element.shapeStr)
let geojson = L.geoJSON(
zhongdianquyu,
shapeStr.features[0],
{
pane: "mapLayer6",
style: function (feature) {
@ -959,33 +943,38 @@ export default {
},
{ className: "jack-s6" }
).addTo(this.mapLayers.mapLayer6);
// json
let bounds = geojson.getBounds();
let latlng = bounds.getCenter();
let myIcon1 = L.divIcon({
className: "region-name1",
html: "重点区域",
html: element.name,
iconSize: [120, 68],
});
L.marker(latlng, {
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
pane: "mapLayer4",
icon: myIcon1,
}).addTo(this.mapLayers.mapLayer6);
});
})
// this.mapLayer5 = geojson.getBounds()
},
//
addLayer7() {
this.mapLayers.mapLayer7.clearLayers();
// this.mapLayers.mapLayer7.clearLayers();
roadsetting({ pageNum: 1, pageSize: 100 }).then(res=>{
// console.log(res,'');
this.luduanData = res.rows;
res.rows.forEach(element=>{
let shapeStr = JSON.parse(element.shapeStr)
let geojson = L.geoJSON(
zhongdianluduan,
shapeStr.features[0],
{
pane: "mapLayer7",
style: function (feature) {
return {
color: "#00C5EC",
weight: 0,
fillColor: "rgba(70,255,119,0.38)",
fillOpacity: 1,
color: "#46FF77",
// weight: 0,
// fillColor: "rgba(70,255,119,0.38)",
// fillOpacity: 1,
};
},
},
@ -993,21 +982,32 @@ export default {
).addTo(this.mapLayers.mapLayer7);
// json
// this.mapLayer5 = geojson.getBounds()
let bounds = geojson.getBounds();
let latlng = bounds.getCenter();
// let bounds = geojson.getBounds();
// let latlng = bounds.getCenter();
let myIcon1 = L.divIcon({
className: "region-name2",
html: "重点路段",
html: element.name,
iconSize: [120, 68],
});
L.marker(latlng, {
L.marker({lng:shapeStr.features[1].geometry.coordinates[0],lat:shapeStr.features[1].geometry.coordinates[1]}, {
pane: "mapLayer4",
icon: myIcon1,
}).addTo(this.mapLayers.mapLayer7);
})
})
},
actionBtn(id) {
this.action = id;
if(id == 1) {
this.globalMap.removeLayer(this.satelliteMap);
this.globalMap.removeLayer(this.satelliteNoteMap);
this.globalMap.addLayer(this.electronicMap);
} else {
this.globalMap.removeLayer(this.electronicMap);
this.globalMap.addLayer(this.satelliteMap);
this.globalMap.addLayer(this.satelliteNoteMap);
}
// console.log(id)
// this.$emit('actionBtn',id);
// if(id == 1){
@ -1027,41 +1027,37 @@ export default {
//
changeMap(id) {
this.actionMap = id;
this.personPopup = false;
this.eventPopup = false;
this.carPopup = false;
this.monitoringPopup = false;
this.addMark();
switch (id) {
case 1:
this.addMark("执法人员");
break;
case 2:
this.addMark("普通事件");
break;
case 3:
this.addMark("执法车辆");
break;
case 4:
this.addMark("监控视频");
break;
case 5:
this.addMark("沿街商铺分布");
break;
default:
return;
}
// switch (id) {
// case 1:
// this.addMark("");
// break;
// case 2:
// this.addMark("");
// break;
// case 3:
// this.addMark("");
// break;
// case 4:
// this.addMark("");
// break;
// case 5:
// this.addMark("沿");
// break;
// default:
// return;
// }
},
leftAnimation() {
setTimeout(() => {
this.leftAnimationData = !this.leftAnimationData;
}, 800);
}, 200);
this.$emit("leftAnimationAction");
},
rightAnimation() {
setTimeout(() => {
this.rightAnimationData = !this.rightAnimationData;
}, 1000);
}, 200);
this.$emit("rightAnimationAction");
},
},

@ -4,10 +4,10 @@
* @Author: JC9527
* @Date: 2023-08-17 09:04:40
* @LastEditors: JC9527
* @LastEditTime: 2023-08-18 20:45:06
* @LastEditTime: 2023-12-11 13:23:15
-->
<template>
<dia-log ref="dialog2" width="475px" title="人员指派">
<dia-log ref="dialog2" width="30%" title="人员指派">
<div class="crew-assign">
<div class="item">
<div class="ball"></div>
@ -203,20 +203,29 @@ export default {
::v-deep .el-select {
background-color: transparent;
width: 350px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up {
display: flex;
align-items: center;
justify-content: center;
}
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: "";
background: url(../../../assets/images/pull-down.png) center center
background: url("~@/assets/images/pull-down.png") center center
no-repeat;
background-size: 100% 100%;
position: absolute;
// position: absolute;
width: 100%;
height: 22px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
transform: rotate(180deg);
}
.el-input__suffix .el-input__suffix-inner .el-select__caret {
width: 22px;

@ -153,6 +153,7 @@ export default {
.real-time-location,.route-track {
display: flex;
align-items: center;
cursor: pointer;
img {
width: 18px;
margin-right: 5px;

@ -8,9 +8,9 @@
</div>
<div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
<div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
<div>
<div class="main-name">
<img src="@/assets/images/location1.png" alt="">
{{ item.area }}
<span>{{ item.name }}</span>
</div>
<div>{{ item.event }}</div>
<div>{{ item.resolved }}</div>
@ -68,9 +68,12 @@ export default {
padding: 8px 0 0 17px;
.header-title {
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
// display: flex;
// align-items: center;
// justify-content: space-between;
display: grid;
grid-template-columns: repeat(4, 1fr);
// grid-template-rows: 1fr;
background: rgba(7,127,255,0.1608);
border-radius: 0px 0px 0px 0px;
opacity: 1;
@ -81,8 +84,12 @@ export default {
font-family: 'Source Han Sans CN-Bold';
font-weight: bold;
color: #D3EEF2;
line-height: 21px;
line-height: 33px;
min-width: 60px;
text-align: center;
&:nth-of-type(1) {
text-align: left;
}
}
}
.lists-main {
@ -91,31 +98,39 @@ export default {
}
.main {
padding: 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
// display: flex;
// justify-content: space-between;
// align-items: center;
display: grid;
grid-template-columns: repeat(4, 25%);
background: rgba(216,216,216,0.05);
height: 33px;
div {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #D3EEF2;
line-height: 21px;
min-width: 60px;
&:nth-child(1) {
line-height: 33px;
text-align: center;
// min-width: 60px;
}
.main-name {
display: flex;
align-items: center;
span {
display: inline-block;
text-align: left;
flex: 1;
font-size: 14px;
font-family: 'Source Han Sans CN-Regular';
font-weight: 400;
color: #52B1FF;
line-height: 21px;
line-height: 33px;
overflow: hidden;
white-space: nowrap; /* 防止文本换行 */
text-overflow: ellipsis; /* 显示省略号 */
}
img {
width: 18px;
margin-right: 8px;

@ -1,5 +1,5 @@
<template>
<dia-log ref="dialog" width="675px" :title="title" :type="1">
<dia-log ref="dialog" width="45%" :title="title" :type="1">
<div class="personage-track">
<div class="track-title">
<div class="titlebg"></div>
@ -37,7 +37,7 @@
<div class="interval-select">
<div class="star-time">
<el-date-picker
v-model="startTime"
v-model="queryTime.startTime"
type="datetime"
align="right"
:clearable="false"
@ -50,7 +50,7 @@
<div class="symbol"></div>
<div class="end-time">
<el-date-picker
v-model="endTime"
v-model="queryTime.endTime"
type="datetime"
align="right"
:clearable="false"
@ -67,11 +67,11 @@
</div>
</div>
</div>
<div class="btns reset">
<div class="btns reset" @click="reset">
<img src="@/assets/images/reset.png" alt="" />
<span>重置</span>
</div>
<div class="btns">
<div class="btns" @click="query">
<img src="@/assets/images/inquire.png" alt="" />
<span>查询</span>
</div>
@ -85,10 +85,10 @@
<div class="contentTitle">轨迹地图</div>
</div>
<div class="contentMap">
<!-- <div id="personageTrackMap">
<div id="personageTrackMap">
</div> -->
<img src="@/assets/images/minMap.png" alt="" />
</div>
<!-- <img src="@/assets/images/minMap.png" alt="" /> -->
</div>
</div>
</div>
@ -98,17 +98,26 @@
</template>
<script>
import diaLog from "../../components/dialog/index.vue";
import jiangninggeo from "@/utils/mapJson/jiangningjingkaiqugeo.json";
import L from "leaflet";
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
import "@/utils/lib/leaflet-tilelayer-colorizr.js";
export default {
components: { diaLog },
data() {
return {
startTime: "",
title: "人员行程轨迹",
person: false,
queryTime: {
startTime: "",
endTime: "",
},
heightStyle: {
height: "500px",
},
globalMap: null,
track: null,
mapLayer1: null,
};
},
methods: {
@ -122,10 +131,81 @@ export default {
this.person = false;
}
this.$refs.dialog.open("1");
this.$nextTick(()=>{
this.initMap();
})
},
Close() {
this.$refs.dialog.Close();
},
//
initMap() {
this.globalMap = L.map("personageTrackMap", {
center: [31.953175, 118.839514], // []
zoom: 18, //
zoomControl: false,
attributionControl: false, // leaflet
doubleClickZoom: false, //
scrollWheelZoom: true, //
dragging: true,
renderer: L.svg(),
});
L.tileLayer
.chinaProvider("GaoDe.Normal.Map", {
maxZoom: 18,
minZoom: 5,
color: { r: 10, g: 38, b: 74 }, //
})
.addTo(this.globalMap);
// this.globalMap.createPane("mapLayer1");
// this.globalMap.getPane("mapLayer1").style.zIndex = 501;
// this.globalMap.getPane("mapLayer1").style.pointerEvents = "none";
this.addLayer1();
},
addLayer1() {
let geojson = L.geoJSON(
jiangninggeo,
{
style: function (feature) {
return {
color: "#00C5EC",
weight: 1,
fillColor: "rgba(64,175,255,0.4)",
fillOpacity: 1,
};
},
},
{ className: "jack-s" }
).addTo(this.globalMap);
// this.addMark()
// json
this.mapLayer1 = geojson.getBounds();
// json
this.globalMap.fitBounds(this.mapLayer1);
},
//
reset(){
Object.keys(this.queryTime).forEach(key=>{this.queryTime[key]=''})
if(this.track) {
this.globalMap.removeLayer(this.track);
}
this.globalMap.fitBounds(this.mapLayer1)
},
//
query(){
if(!this.queryTime.startTime) {
this.$modal.msgError( "请选择查询的起始时间");
} else if(!this.queryTime.endTime) {
this.$modal.msgError( "请选择查询的截止时间");
} else {
if(this.track) {
this.globalMap.removeLayer(this.track);
}
this.track
}
},
},
};
</script>
@ -251,6 +331,7 @@ export default {
font-family: "Source Han Sans CN-Medium";
font-weight: 500;
color: #e9f4ff;
padding-left: 15px;
}
.el-input__inner::placeholder {
/* 在这里添加你想要修改的 placeholder 样式 */
@ -279,6 +360,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 24px;
margin-right: 5px;
@ -326,15 +408,15 @@ export default {
padding: 15px 74px 0 14px;
width: 100%;
height: 400px;
// #personageTrackMap {
// width: 100%;
// height: 100%;
// background-color: #fff;
// }
img {
#personageTrackMap {
width: 100%;
height: 100%;
background-color: #fff;
}
// img {
// width: 100%;
// height: 100%;
// }
}
}
}

@ -48,6 +48,7 @@
<img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
</div>
</div>
<div class="btns">
<div class="btn-reset">
<div class="icon-reset"></div>
<span class="text">重置</span>
@ -57,6 +58,7 @@
<span class="text">查询</span>
</div>
</div>
</div>
<div>
<div class="tb-header">
<span>执法人员</span>
@ -144,6 +146,7 @@ export default {
.search-gr {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
.itemtwo {
@ -171,7 +174,7 @@ export default {
}
}
.right {
background-image: url("../../../../assets/images/timebg.png");
background-image: url("~@/assets/images/timebg.png");
// width: 120px;
// height: 35px;
background-size: 100% 100%;
@ -181,7 +184,7 @@ export default {
}
::v-deep .el-date-editor {
background-color: transparent;
width: 120px;
width: 200px;
.el-input__inner {
background-color: transparent;
border: none;
@ -199,19 +202,18 @@ export default {
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);
line-height: 20px;
}
}
::v-deep .el-select {
background-color: transparent;
width: 120px;
width: 200px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: "";
background: url("../../../../assets/images/pull-bottom.png") center
background: url("~@/assets/images/pull-bottom.png") center
center no-repeat;
background-size: 100% 100%;
position: absolute;
@ -243,8 +245,7 @@ export default {
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);
line-height: 20px;
}
}
.data_icon {
@ -262,7 +263,7 @@ export default {
border: 1px solid rgba(181, 207, 255, 0.5);
.el-input__inner {
background-color: transparent;
width: 120px;
width: 200px;
height: 30px;
color: #fff;
border: none;
@ -288,6 +289,10 @@ export default {
}
}
}
.btns {
display: flex;
margin-top: 15px;
}
.btn-reset {
display: flex;
align-items: center;
@ -298,7 +303,7 @@ export default {
.icon-reset {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-reset.png");
background-image: url("~@/assets/images/icon-reset.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -321,7 +326,7 @@ export default {
.icon-search {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-search.png");
background-image: url("~@/assets/images/icon-search.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}

@ -48,6 +48,7 @@
<img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
</div>
</div>
<div class="btns">
<div class="btn-reset">
<div class="icon-reset"></div>
<span class="text">重置</span>
@ -57,6 +58,7 @@
<span class="text">查询</span>
</div>
</div>
</div>
<div>
<div class="tb-header">
<span>整改工单编号</span>
@ -142,6 +144,7 @@ export default {
.search-gr {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
.itemtwo {
@ -169,7 +172,7 @@ export default {
}
}
.right {
background-image: url("../../../../assets/images/timebg.png");
background-image: url("~@/assets/images/timebg.png");
// width: 120px;
// height: 35px;
background-size: 100% 100%;
@ -179,7 +182,7 @@ export default {
}
::v-deep .el-date-editor {
background-color: transparent;
width: 120px;
width: 200px;
.el-input__inner {
background-color: transparent;
border: none;
@ -197,19 +200,18 @@ export default {
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);
line-height: 20px;
}
}
::v-deep .el-select {
background-color: transparent;
width: 120px;
width: 200px;
.el-input
.el-input__suffix
.el-input__suffix-inner
.el-icon-arrow-up::before {
content: "";
background: url("../../../../assets/images/pull-bottom.png") center
background: url("~@/assets/images/pull-bottom.png") center
center no-repeat;
background-size: 100% 100%;
position: absolute;
@ -241,8 +243,7 @@ export default {
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);
line-height: 20px;
}
}
.data_icon {
@ -260,7 +261,7 @@ export default {
border: 1px solid rgba(181, 207, 255, 0.5);
.el-input__inner {
background-color: transparent;
width: 120px;
width: 200px;
height: 30px;
color: #fff;
border: none;
@ -286,6 +287,10 @@ export default {
}
}
}
.btns {
display: flex;
margin-top: 15px;
}
.btn-reset {
display: flex;
align-items: center;

@ -122,6 +122,7 @@ export default {
.search-gr {
display: flex;
flex-wrap: wrap;
margin: 10px 0;
.itemtwo {
@ -149,7 +150,7 @@ export default {
}
}
.right {
background-image: url("../../../../assets/images/timebg.png");
background-image: url("~@/assets/images/timebg.png");
// width: 120px;
// height: 35px;
background-size: 100% 100%;
@ -159,7 +160,7 @@ export default {
}
::v-deep .el-date-editor {
background-color: transparent;
width: 120px;
width: 200px;
.el-input__inner {
background-color: transparent;
border: none;
@ -177,13 +178,12 @@ export default {
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);
line-height: 20px;
}
}
::v-deep .el-select {
background-color: transparent;
width: 120px;
width: 200px;
.el-input
.el-input__suffix
.el-input__suffix-inner
@ -221,8 +221,7 @@ export default {
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);
line-height: 20px;
}
}
.data_icon {
@ -240,7 +239,7 @@ export default {
border: 1px solid rgba(181, 207, 255, 0.5);
.el-input__inner {
background-color: transparent;
width: 120px;
width: 200px;
height: 30px;
color: #fff;
border: none;
@ -276,7 +275,7 @@ export default {
.icon-reset {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-reset.png");
background-image: url("~@/assets/images/icon-reset.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
@ -299,7 +298,7 @@ export default {
.icon-search {
width: 24px;
height: 24px;
background-image: url("../../../../assets/images/icon-search.png");
background-image: url("~@/assets/images/icon-search.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}

@ -1,11 +1,3 @@
<!--
* @Descripttion:
* @version:
* @Author: JC9527
* @Date: 2023-08-17 10:41:06
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 19:08:16
-->
<template>
<dia-log ref="dialog5" :width="width" :title="title">
<div class="tab-list">
@ -34,7 +26,7 @@ export default {
props: {
width: {
type: String,
default: "565px",
default: "45%",
},
title: {
type: String,
@ -59,10 +51,10 @@ export default {
this.currentIndex = index;
},
open() {
this.$refs.dialog5.open("5");
this.$refs.dialog5.open("1");
},
Close() {
this.$refs.dialog3.Close();
this.$refs.dialog5.Close();
},
},
};
@ -71,19 +63,6 @@ export default {
::v-deep .el-dialog__body {
padding: 30px !important;
}
.video-main {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-column-gap: 10px;
grid-row-gap: 15px;
.main-item {
// width: 248px;
height: 100px;
width: 100%;
background-image: url("../../../assets/images/videoImg.png");
background-size: 100% 100%;
}
}
.tab-list {
display: flex;
align-items: center;

@ -4,10 +4,10 @@
* @Author: JC9527
* @Date: 2023-08-17 10:41:06
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 19:08:16
* @LastEditTime: 2023-12-11 13:44:59
-->
<template>
<dia-log ref="dialog3" width="565px" title="视频墙">
<dia-log ref="dialog3" width="37%" title="视频墙">
<div class="video-main">
<div class="main-item" v-for="(item,index) in 9" :key="index"></div>
</div>

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-17 16:59:51
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 21:28:32
* @LastEditTime: 2023-12-11 13:43:05
-->
<template>
<popup-title :type="3" v-on:personClose="carClose" title="车辆信息" :style="pointLocation">
@ -19,7 +19,7 @@
</popup-title>
</template>
<script>
import popupTitle from "../popupTitle/index.vue"
import popupTitle from "@/views/components/popupTitle/index.vue"
export default {
components:{popupTitle},
data() {

@ -28,7 +28,7 @@
</popup-title>
</template>
<script>
import popupTitle from "../popupTitle/index.vue"
import popupTitle from "@/views/components/popupTitle/index.vue"
export default {
components:{popupTitle},
data() {

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-17 17:14:00
* @LastEditors: JC9527
* @LastEditTime: 2023-08-17 21:28:08
* @LastEditTime: 2023-12-11 13:43:25
-->
<template>
<popup-title :type="4" v-on:personClose="monitoringClose" title="监控视频" :style="pointLocation">
@ -20,7 +20,7 @@
</popup-title>
</template>
<script>
import popupTitle from "../popupTitle/index.vue"
import popupTitle from "@/views/components/popupTitle/index.vue"
export default {
components:{popupTitle},
data() {

@ -4,7 +4,7 @@
* @Author: JC9527
* @Date: 2023-08-17 15:43:51
* @LastEditors: JC9527
* @LastEditTime: 2023-08-18 20:50:21
* @LastEditTime: 2023-12-11 13:41:09
-->
<template>
<div class="person-popup" :style="pointLocation">
@ -75,7 +75,7 @@ export default {
top: 20px;
width: 242px;
height: 244px;
background-image: url("../../../assets/images/popup/bg1.png");
background-image: url("~@/assets/images/popup/bg1.png");
background-size: 100% 100%;
z-index: 600;
.popup-title {
@ -133,7 +133,7 @@ export default {
grid-row-gap: 6px;
margin-top: 15px;
div {
background-image: url('../../../assets/images/popup/icon1btn.png');
background-image: url('~@/assets/images/popup/icon1btn.png');
width: 100%;
height: 30px;
background-size: 100% 100%;
Loading…
Cancel
Save