|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" style="padding-top:15px;height:calc(100vh - 50px);" v-loading="loading"
|
|
|
+ element-loading-text="拼命加载中"
|
|
|
+ element-loading-spinner="el-icon-loading"
|
|
|
+ element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6" class="jsleft">
|
|
|
+ <div class="jsltop mb12">
|
|
|
+ <div class="flexc jslta">
|
|
|
+ <img src="../../../assets/images/search/icon_aijs_jgy_ss@2x.png" alt="" class="secimg">
|
|
|
+ <el-input
|
|
|
+ v-model="searchtxt"
|
|
|
+ placeholder="请输入外貌特征"
|
|
|
+ clearable
|
|
|
+ class="no-border"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="searchtxt"
|
|
|
+ placeholder="请输入车牌号或车辆特征"
|
|
|
+ clearable
|
|
|
+ class="no-border"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ /> -->
|
|
|
+ <el-button style="background: #00B278;font-weight: bold;font-size: 14px;" type="success" size="small">检索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="jsltb flex">
|
|
|
+ <img src="../../../assets/images/profile.jpg" class="headimg flex0"/>
|
|
|
+ <div class="flex1">
|
|
|
+ <div class="jstlist flext">
|
|
|
+ <div class="tit flexc flex0"><p>检索日期</p>：</div>
|
|
|
+ <p class="txt">今日(2025-06-12)</p>
|
|
|
+ </div>
|
|
|
+ <div class="jstlist flext">
|
|
|
+ <div class="tit flexc flex0"><p>检索时段</p>：</div>
|
|
|
+ <p class="txt">09:27 至 11:54</p>
|
|
|
+ </div>
|
|
|
+ <div class="jstlist flext">
|
|
|
+ <div class="tit flexc flex0"><p>检索类型</p>：</div>
|
|
|
+ <p class="txt">图片检索</p>
|
|
|
+ </div>
|
|
|
+ <div class="jstlist flext">
|
|
|
+ <div class="tit flexc flex0"><p>目标类型</p>：</div>
|
|
|
+ <p class="txt">人员寻找</p>
|
|
|
+ </div>
|
|
|
+ <div class="jstlist flext">
|
|
|
+ <div class="tit flexc flex0"><p>相似度</p>：</div>
|
|
|
+ <p class="txt">≥87%</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="jslfot">
|
|
|
+ <div class="flexc flex0 mb10">
|
|
|
+ <div class="line"></div>
|
|
|
+ <!-- 机动车轨迹 -->
|
|
|
+ <div class="f16 co3 flex1 fw">人员轨迹</div>
|
|
|
+ <div @click='reverse=!reverse'>
|
|
|
+ <img src="../../../assets/images/search/sorta.png" v-if="reverse" class="sortimg flex0"/>
|
|
|
+ <img src="../../../assets/images/search/sortb.png" v-else class="sortimg flex0"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 有数据 轨迹-->
|
|
|
+ <trackBox :list="list" :reverse="reverse"></trackBox>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="18" class="jsright">
|
|
|
+ <div class="jsbox flex1">
|
|
|
+ <div id="container" style="width:100%;height: 100%;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="jsswbox flex0">
|
|
|
+ <el-carousel indicator-position="outside" height="140px" :autoplay="false" arrow="always">
|
|
|
+ <el-carousel-item v-for="item in 2" :key="item">
|
|
|
+ <div class="flexc swiper">
|
|
|
+ <div class="imgs act">
|
|
|
+ <img src="../../../assets/images/pic_gjgl_lt.png"/>
|
|
|
+ <div class="tit over">园区鸟瞰</div>
|
|
|
+ </div>
|
|
|
+ <div class="zhantit">到底啦</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ //引入缺德地图
|
|
|
+ import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
+ window._AMapSecurityConfig = {
|
|
|
+ securityJsCode: 'b06df55c66884ce2c9a3f3281c2c5ca9' //填写你的安全密钥
|
|
|
+ }
|
|
|
+ import trackBox from "@/components/jiansuo"
|
|
|
+ export default{
|
|
|
+ components:{
|
|
|
+ trackBox
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return{
|
|
|
+ loading:false,
|
|
|
+ searchtxt:'',
|
|
|
+ reverse:true,
|
|
|
+ list:[{tit:1},{tit:1},{tit:1}],
|
|
|
+ //标记点的位置信息
|
|
|
+ mapData: [
|
|
|
+ {
|
|
|
+ longitude: '117.211860',
|
|
|
+ latitude: '31.839696',
|
|
|
+ type:1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ longitude: '117.210150',
|
|
|
+ latitude: '31.839850',
|
|
|
+ type:2
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ initMap() {
|
|
|
+ AMapLoader.reset()
|
|
|
+ AMapLoader.load({
|
|
|
+ key: "fba818d626f91cf5a13cd61943a7667e", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
+ version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
|
|
+ plugins: ['AMap.AutoComplete', 'AMap.Marker', 'AMap.PlaceSearch', 'AMap.Geolocation',"AMap.Driving","AMap.Walking"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
|
|
+ }).then((AMap) => {
|
|
|
+ console.log(AMap)
|
|
|
+ this.map = new AMap.Map("container", { //设置地图容器id
|
|
|
+ // mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
|
|
|
+ viewMode: "3D", //是否为3D地图模式
|
|
|
+ zoom: 18, //初始化地图级别
|
|
|
+ center: [117.211954, 31.839676], //初始化地图中心点位置
|
|
|
+ // center: [116.310791, 40.003419], //初始化地图中心点位置
|
|
|
+ pitch: 40, // 地图俯仰角度，有效范围 0 度- 83 度
|
|
|
+ terrain: true, // 开启地形图
|
|
|
+
|
|
|
+ buildingAnimation: true,//楼块出现是否带动画
|
|
|
+ });
|
|
|
+ // this.getCenter()
|
|
|
+ this.markPoints()
|
|
|
+ this.latitude()
|
|
|
+ this.getpoints()
|
|
|
+ }).catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 途径点
|
|
|
+ getpoints(){
|
|
|
+ var that=this;
|
|
|
+ var driving = new AMap.Driving({
|
|
|
+ map:that.map,
|
|
|
+ // policy: 0, //驾车路线规划策略，0是速度优先的策略
|
|
|
+ });
|
|
|
+ // var driving = new AMap.Walking({
|
|
|
+ // map:that.map,
|
|
|
+ // // policy: 0, //驾车路线规划策略，0是速度优先的策略
|
|
|
+ // });
|
|
|
+ // 地址
|
|
|
+ // var points = [
|
|
|
+ // { keyword: "合肥市蜀山区时代数码港", city: "合肥" }, //起始点
|
|
|
+ // { keyword: "合肥市蜀山区大溪地", city: "合肥" }, //设置途经点参数，最多支持传入16个途经点
|
|
|
+ // { keyword: "合肥市蜀山区十里庙地铁站b口", city: "合肥" }, //终点
|
|
|
+ // ];
|
|
|
+ // driving.search(points, function (status, result) {
|
|
|
+ // console.log(status)
|
|
|
+ // //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
|
|
|
+ // //查询成功时，result 即为对应的驾车导航信息
|
|
|
+ // });
|
|
|
+ // 经纬度
|
|
|
+ var startLngLat = [117.211954, 31.839676]; //起始点坐标
|
|
|
+ var endLngLat = [117.211182,31.841098]; //终点坐标
|
|
|
+ var opts = {
|
|
|
+ waypoints: [[117.208859,31.840713]], //途经点参数，最多支持传入16个途经点
|
|
|
+ };
|
|
|
+ driving.search(startLngLat, endLngLat, opts, function (status, result) {
|
|
|
+ //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
|
|
|
+ //查询成功时，result 即为对应的驾车导航信息
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //遍历显示标记点
|
|
|
+ markPoints() {
|
|
|
+ const icona = new AMap.Icon({
|
|
|
+ image: require('@/assets/images/search/gjicoa.png'), // 确保路径正确，根据实际情况调整
|
|
|
+ // size: new AMap.Size(58, 105), // 图标大小
|
|
|
+ // imageSize: new AMap.Size(58, 105) // 图标实际大小，如果图片本身大小与此不符，可以调整此属性以适应图片大小
|
|
|
+ });
|
|
|
+ const iconb = new AMap.Icon({
|
|
|
+ image: require('@/assets/images/search/gjicob.png'), // 确保路径正确，根据实际情况调整
|
|
|
+ });
|
|
|
+ const iconc = new AMap.Icon({
|
|
|
+ image: require('@/assets/images/search/gjicoc.png'), // 确保路径正确，根据实际情况调整
|
|
|
+ });
|
|
|
+ this.mapData.forEach(item => {
|
|
|
+ // 创建一个 Marker 实例：
|
|
|
+ const marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(item.longitude, item.latitude), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
|
|
|
+ icon: item.type == 1 ? icona : item.type == 2 ? iconb : item.type == 3 ? iconc : icona,
|
|
|
+ offset: new AMap.Pixel(-25, -10),
|
|
|
+ });
|
|
|
+ // 将创建的点标记添加到已有的地图实例：
|
|
|
+ this.map.add(marker);
|
|
|
+
|
|
|
+ //给标记点添加事件
|
|
|
+ marker.on('click', (e) => {
|
|
|
+ this.setInfoWindows(e, item)
|
|
|
+ })
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //点击获取经纬度
|
|
|
+ latitude() {
|
|
|
+ this.map.on('click', function (ev) {
|
|
|
+ // console.log(ev)
|
|
|
+ // 触发事件的对象
|
|
|
+ let target = ev.target;
|
|
|
+ // 触发事件的地理坐标，AMap.LngLat 类型
|
|
|
+ let lnglat = ev.lnglat;
|
|
|
+ // 触发事件的像素坐标，AMap.Pixel 类型
|
|
|
+ let pixel = ev.pixel;
|
|
|
+ // 触发事件类型
|
|
|
+ let type = ev.type;
|
|
|
+ console.log(target, lnglat, pixel, type)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep {
|
|
|
+ .el-input__inner {
|
|
|
+ border: none !important;font-size: 14px;padding: 0;padding-right: 5px;
|
|
|
+ }
|
|
|
+ .el-carousel__arrow{color: #a8a8a8;background: transparent;font-size: 16px;font-weight: bold;}
|
|
|
+ .el-carousel__arrow--right{right: 5px;}
|
|
|
+ .el-carousel__arrow--left{left:5px}
|
|
|
+ .el-icon-arrow-left:before{font-weight: bold;}
|
|
|
+ .el-icon-arrow-right:before{font-weight: bold;}
|
|
|
+}
|
|
|
+p{margin: 0;padding: 0;}
|
|
|
+.mb12{margin-bottom: 12px;}
|
|
|
+.flex{display: flex;}
|
|
|
+.flext{display: flex;align-items: flex-start;}
|
|
|
+.flexc{display: flex;align-items: center;}
|
|
|
+.flex0{flex: 0 0 auto;}
|
|
|
+.flex1{flex: 1;}
|
|
|
+.f16{font-size: 16px;}
|
|
|
+.co3{color: #333333;}
|
|
|
+.fw{font-weight: bold;}
|
|
|
+.el-row{height: 100%;}
|
|
|
+.over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
|
|
|
+.jsleft{padding-right:12px;height: 100%;display: flex;flex-direction: column;
|
|
|
+ .jsltop{background: #FFFFFF;border-radius: 10px;padding:0 14px;flex: 0 0 auto;
|
|
|
+ .jslta{padding: 10px 0;border-bottom: 1px solid #E6E6E6;}
|
|
|
+ .jsltb{padding: 14px 0;
|
|
|
+ .headimg{width: 80px;height: 114px;margin-right: 10px;}
|
|
|
+ .jstlist{margin-bottom: 5px;
|
|
|
+ .tit{font-size: 14px;color: #AAAAAA;
|
|
|
+ p{text-align: justify;width:58px;display: block;text-align-last: justify;}
|
|
|
+ }
|
|
|
+ .txt{font-size: 14px;color: #3D455B;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .secimg{width: 18px;height: 18px;margin-right: 12px;}
|
|
|
+
|
|
|
+ }
|
|
|
+ .jslfot{background: #FFFFFF;border-radius: 10px;padding:14px 15px 15px 0;flex: 1;display: flex;flex-direction: column;overflow: hidden;min-height: 260px;
|
|
|
+ .line{width: 6px;height: 20px;background-color: #03BF8A;margin-right: 10px;}
|
|
|
+ .sortimg{width: 14px;height: 15px;}
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+.jsright{height: 100%;display: flex;flex-direction: column;overflow: hidden;
|
|
|
+ .jsbox{background: #FFFFFF;border-radius: 10px;}
|
|
|
+ .jsswbox{background: #FFFFFF;margin-top: 10px;
|
|
|
+border-radius: 10px;height: 140px;padding: 14px 0px;box-sizing: border-box;}
|
|
|
+ .swiper{padding: 0 44px;}
|
|
|
+ .imgs{position: relative;width: 20%;height: 120px;border-radius: 8px;overflow: hidden;
|
|
|
+ &.act{border: 2px solid #00B278;}
|
|
|
+ img{width: 100%;height: 100%;}
|
|
|
+ .tit{background: rgba(0, 0, 0, 0.5);font-size: 14px;color: #FFFFFF;text-align: center;height: 28px;line-height: 28px;position: absolute;right: 0;left: 0;bottom: 0;
|
|
|
+border-radius:0 0 8px 8px;}
|
|
|
+ }
|
|
|
+ .zhantit{font-weight: 500;font-size: 12px;color: #AAAAAA;width: 12px;margin-left: 16px;}
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
zouling
