diff --git a/public/pbImg/关闭.png b/public/pbImg/close.png similarity index 100% rename from public/pbImg/关闭.png rename to public/pbImg/close.png diff --git a/public/pbImg/气泡弹窗1.png b/public/pbImg/dialogback.png similarity index 100% rename from public/pbImg/气泡弹窗1.png rename to public/pbImg/dialogback.png diff --git a/src/api/factorResources/index.js b/src/api/factorResources/index.js index 2d72e41..bbd64ae 100644 --- a/src/api/factorResources/index.js +++ b/src/api/factorResources/index.js @@ -30,4 +30,12 @@ export function statistic(params) { method: 'get', params }) +} +// 车辆点位数据 +export function car_point(params) { + return request({ + url:'/SafeCompanyVehicleTrack/list', + method:'get', + params + }) } \ No newline at end of file diff --git a/src/assets/factor/factor03.png b/src/assets/factor/factor03.png new file mode 100644 index 0000000..78dfe1a Binary files /dev/null and b/src/assets/factor/factor03.png differ diff --git a/src/utils/request.js b/src/utils/request.js index bb66d55..91bbdcc 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -6,7 +6,7 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' const request = axios.create({ //baseURL: 'http://172.18.113.50:8080/zhapi', //baseURL: 'http://172.18.113.13:8080/zhapi', // 孙强 - //baseURL: 'http://172.18.113.8:8080/zhapi', // 刘建 + //baseURL: 'http://172.18.100.57:8080/zhapi', // 刘建 //baseURL: 'http://192.168.0.188:8888/zhapi', //baseURL: 'http://121.41.91.94:12002/zhapi', baseURL: `http://${window.location.host}/zhapi`, @@ -53,7 +53,7 @@ request.interceptors.response.use( case 401: if (vm.$route.name !== 'login') { - vm.$Message.warning({ + vm.$message.warning({ content: '身份认证信息已失效，请重新登录。', duration: 2, onClose: () => { @@ -65,14 +65,14 @@ request.interceptors.response.use( } break case 403: - vm.$Message.warning({ + vm.$message.warning({ content: response.data.msg, duration: 3 }) break case 500: // 如果是返回的文件 - vm.$Message.warning({ + vm.$message.warning({ content: response.data.msg, duration: 3 }) diff --git a/src/views/factor/components/factorMap.vue b/src/views/factor/components/factorMap.vue index 1b4b12c..355f024 100644 --- a/src/views/factor/components/factorMap.vue +++ b/src/views/factor/components/factorMap.vue @@ -9,18 +9,25 @@ import MapPoint from "../../../../public/zhenhaiPoint.json"; export default { name: "FactorMap", props: { + // 园区企业 company_list: { type: Array, default: () => [], }, + // 车辆监控 video_list: { type: Array, default: () => [], }, + // 危化品车辆 + car_list: { + type: Array, + default: () => [], + }, }, data() { return { - center_point: [121.604192, 29.977299], + center_point: [121.619992, 30.025703], }; }, mounted() { @@ -52,14 +59,14 @@ export default { ); var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位 map.addOverlay(marker); - marker.addEventListener("click",function() { - that.$emit('get_company_text',item) - }) + marker.addEventListener("click", function () { + that.$emit("get_company_text", item); + }); }); // 监控点位上图 that.video_list.forEach((item) => { - var video_ponit = new BMap.Point(item.longitude, item.latitude); - // 自定义图标; + var video_ponit = new BMap.Point(item.longitude, item.latitude); + // 自定义图标; var video_icon = {}; video_icon = new BMap.Icon( require("@/assets/factor/factor01.png"), @@ -70,19 +77,45 @@ export default { ); var video_marker = new BMap.Marker(video_ponit, { icon: video_icon }); // 创建点位 map.addOverlay(video_marker); + video_marker.addEventListener("click", function () { + // 视频监控详情弹窗点击打开 + that.$emit("get_video_text", item); }); + }); + // 危化品车辆点位上图 + that.car_list.forEach((item) => { + var car_point = new BMap.Point(item.longitude, item.latitude); + // 自定义图标; + var car_icon = {}; + car_icon = new BMap.Icon( + require("@/assets/factor/factor03.png"), + new BMap.Size(20, 40), + { + imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移 + } + ); + var car_marker = new BMap.Marker(car_point, { icon: car_icon }); // 创建点位 + map.addOverlay(car_marker); + car_marker.addEventListener("click",function() { + // 查看车辆轨迹 + // 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心 + that.$emit('get_car_text',item) + }) + }); }, 500); map.centerAndZoom( new BMap.Point(this.center_point[0], this.center_point[1]), - 13 + 14 ); // 创建点坐标 map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别 map.setMaxZoom(19); map.enableScrollWheelZoom(true); - showPoint(); - for (var i = 0, n = MapLine.features.length; i < n; i++) { - showBoundaryEx(MapLine.features[i]); - } + showPoint(); // 分区区名 + // for (var i = 0, n = MapLine.features.length; i < n; i++) { + // showBoundaryEx(MapLine.features[i]); + // } + // 只需要懈浦镇区域展示 + showBoundaryEx(MapLine.features[5]); // 传入懈浦镇边界数据，准备创造懈浦镇多边形 //////////////// 创造边界--多边形 ///////////////// function showBoundaryEx(city) { var paths = []; @@ -164,6 +197,39 @@ export default { } } }, + // 根据车辆点位重新创建地图 + cause_car_line_map(item) { + let BMap = window.BMap; + let map = new BMap.Map("container", { + style: { + styleJson, + }, + }); + //let that = this; // 不改指向后面很多函数无法执行 + //let label = new BMap.Label(); + setTimeout(() => { + var point = new BMap.Point(item.longitude, item.latitude) + // 自定义图标; + var myIcon = {}; + myIcon = new BMap.Icon( + require("@/assets/factor/factor03.png"), + new BMap.Size(20, 40), + { + imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移 + } + ); + var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位 + map.addOverlay(marker); + },500) + + map.centerAndZoom( + new BMap.Point(item.longitude, item.latitude), + 16 + ); // 创建点坐标 + map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别 + map.setMaxZoom(19); + map.enableScrollWheelZoom(true); + }, }, }; diff --git a/src/views/factor/index.vue b/src/views/factor/index.vue index c0e1671..27f87e6 100644 --- a/src/views/factor/index.vue +++ b/src/views/factor/index.vue @@ -9,7 +9,10 @@ ref="factorMap" :company_list="company_list" :video_list="video_list" + :car_list="car_list" @get_company_text="get_company_text" + @get_video_text="get_video_text" + @get_car_text="get_car_text" >
@@ -45,17 +48,20 @@
图层
- 全部 + {{ this.btn_video }} {{ this.btn_item }} + {{ + this.btn_car + }}
-
+
{{ text_company }}
@@ -110,6 +116,36 @@ {{ footer_text }}
+ +
+ +
+
+ {{ video.video_name }} +
+
+ +
+
+
+
+
隶属企业:
+
{{ video.company_name }}
+
+
+
监控:
+
{{ video.video_name }}
+
+
+
监控状态:
+
{{ video.video_status }}
+
+
+ +
+ {{ video_footer_text }} +
+
@@ -117,7 +153,12 @@