|
|
@@ -34,7 +34,7 @@ import {
|
|
|
selectQkEmergencyShelterAllList,
|
|
|
selectQkRescueSuppliesAllList,
|
|
|
selectQkRescueSuppliesByDeptId,
|
|
|
- selectQkEmergencyRescueTeamByDeptId
|
|
|
+ selectQkEmergencyRescueTeamByDeptId, getBuildTypeFourList
|
|
|
} from "@/api/system/aqyj";
|
|
|
|
|
|
export default {
|
|
|
@@ -89,6 +89,8 @@ export default {
|
|
|
rfhSj: null,
|
|
|
// 年份
|
|
|
year: null,
|
|
|
+
|
|
|
+ pageType: null,
|
|
|
//事件落点类型
|
|
|
markType: ['sxt'],
|
|
|
//事件详情页是否显示
|
|
|
@@ -105,7 +107,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.getSupermap(this.sqOptionsProps, this.jieDaoProps, this.sheQuProps, this.yxtSltProps, this.rfhSjProps, this.yearProps);
|
|
|
+ this.getSupermap(this.sqOptionsProps, this.jieDaoProps, this.sheQuProps, this.yxtSltProps, this.rfhSjProps, this.yearProps, this.pageType);
|
|
|
},
|
|
|
props: {
|
|
|
// 社区集合
|
|
|
@@ -120,15 +122,18 @@ export default {
|
|
|
rfhSjProps: null,
|
|
|
// 年份
|
|
|
yearProps: null,
|
|
|
+ //页面
|
|
|
+ pageType: null,
|
|
|
},
|
|
|
methods: {
|
|
|
- getSupermap: async function (sqOptions, jieDao, sheQu, yxtSlt, rfhSj, year) {
|
|
|
+ getSupermap: async function (sqOptions, jieDao, sheQu, yxtSlt, rfhSj, year, pageType) {
|
|
|
this.sqOptions = sqOptions;
|
|
|
this.jieDao = jieDao;
|
|
|
this.sheQu = sheQu;
|
|
|
this.yxtSlt = yxtSlt;
|
|
|
this.rfhSj = rfhSj;
|
|
|
this.year = year;
|
|
|
+ this.pageType = pageType;
|
|
|
this.mapId = "";
|
|
|
this.layers = [];
|
|
|
this.map_shequList = [];
|
|
|
@@ -160,41 +165,41 @@ export default {
|
|
|
this.map_qikaiYingXiangLunKuo = window.L.supermap.tiledMapLayer(this.workspace_qkyxtlk, {
|
|
|
noWrap: true
|
|
|
});
|
|
|
- this.initSlt();
|
|
|
+ this.initSlt(this.pageType);
|
|
|
});
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 矢量图
|
|
|
*/
|
|
|
- initSlt: async function () {
|
|
|
+ initSlt: async function (pageType) {
|
|
|
this.layers.push(this.map_jilinShiLiang);//吉林矢量
|
|
|
- this.initYxt();
|
|
|
+ this.initYxt(pageType);
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 影像图
|
|
|
*/
|
|
|
- initYxt: async function () {
|
|
|
+ initYxt: async function (pageType) {
|
|
|
if (this.yxtSlt == 'yxt') {//影像图
|
|
|
this.layers.push(this.map_qikaiYingXiang);//汽开影像
|
|
|
this.layers.push(this.map_qikaiYingXiangLunKuo);//汽开影像轮廓
|
|
|
}
|
|
|
- this.initZxd();
|
|
|
+ this.initZxd(pageType);
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 事件落点
|
|
|
*/
|
|
|
- initSjd: async function () {
|
|
|
- this.init(this.markType, this.map);
|
|
|
+ initSjd: async function (pageType) {
|
|
|
+ this.init(this.markType, this.map,pageType);
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
* 中心点、zoom
|
|
|
*/
|
|
|
- initZxd: async function () {
|
|
|
- this.initMap();
|
|
|
+ initZxd: async function (pageType) {
|
|
|
+ this.initMap(pageType);
|
|
|
},
|
|
|
/**
|
|
|
* 落点定位
|
|
|
@@ -205,7 +210,7 @@ export default {
|
|
|
/**
|
|
|
* 加载地图
|
|
|
*/
|
|
|
- initMap: async function () {
|
|
|
+ initMap: async function (pageType) {
|
|
|
let _that = this;
|
|
|
this.map && this.map.remove();
|
|
|
this.map = window.L.map('qksupermap', {
|
|
|
@@ -219,16 +224,18 @@ export default {
|
|
|
attributionControl: false,
|
|
|
logoControl: false,
|
|
|
});
|
|
|
- this.initSjd();
|
|
|
+ this.initSjd(pageType);
|
|
|
},
|
|
|
//事件落点相关方法
|
|
|
- init: function () {
|
|
|
- this.selectCameraList()
|
|
|
+ init: function (markType, map,pageType) {
|
|
|
+ if(pageType == "jtzl") {
|
|
|
+ this.selectCameraList()
|
|
|
+ } else if (pageType == "aqyj") {
|
|
|
+ this.getBuildTypeFourList()
|
|
|
+ }
|
|
|
},
|
|
|
addMarkers(options, type) {
|
|
|
let marker;
|
|
|
- let markers = [];
|
|
|
- let layerGroups = [];
|
|
|
let clusterGroup = L.markerClusterGroup({
|
|
|
//设置为true时显示聚类所占据的范围
|
|
|
showCoverageOnHover: false,
|
|
|
@@ -248,6 +255,8 @@ export default {
|
|
|
marker = this.addTeamMarker(options[i], type);
|
|
|
} else if (type == "fxwz") {
|
|
|
marker = this.addSuppliesMark(options[i], type);
|
|
|
+ } else if (type == "yjj") {
|
|
|
+ marker = this.addEmergencyMark(options[i], type);
|
|
|
}
|
|
|
clusterGroup.addLayer(marker);
|
|
|
this.myLayerGroup.push({type: type, myGroup: clusterGroup});
|
|
|
@@ -255,7 +264,6 @@ export default {
|
|
|
this.map.addLayer(clusterGroup);
|
|
|
},
|
|
|
addMarker(option, type) {
|
|
|
- let markers = [];
|
|
|
//定义图标
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: getIcon(option.buildType),
|
|
|
@@ -285,7 +293,6 @@ export default {
|
|
|
},
|
|
|
|
|
|
addShelterMarker(option, type) {
|
|
|
- let markers = [];
|
|
|
//定义图标
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: yjIconList[type],
|
|
|
@@ -301,13 +308,14 @@ export default {
|
|
|
//定义泡泡层
|
|
|
marker.on('mouseover', function () {
|
|
|
let html = "";
|
|
|
- html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
|
|
|
- html += "<p class='v-p-color'>点位具体位置：" + option.address + "</p>";
|
|
|
- html += "<p class='v-p-color'>视频点：" + option.videoSpot + "</p>";
|
|
|
- html += "<p class='v-p-color'>型号：" + option.cameraModel + "</p>";
|
|
|
- html += "<p class='v-p-color'>数量：" + option.number + "</p>";
|
|
|
- html += "<p class='v-p-color'>单位：" + option.unit + "</p>";
|
|
|
- html += "<p class='v-p-color'>备注：" + option.remark + "</p>";
|
|
|
+ html += "<p class='v-p-color'>避难场所名称：" + option.name + "</p>";
|
|
|
+ html += "<p class='v-p-color'>类型：" + option.type + "</p>";
|
|
|
+ html += "<p class='v-p-color'>地址：" + option.address + "</p>";
|
|
|
+ html += "<p class='v-p-color'>避难场所范围：" + option.range + "</p>";
|
|
|
+ html += "<p class='v-p-color'>避难场所现状描述：" + option.state + "</p>";
|
|
|
+ html += "<p class='v-p-color'>占地面积（m²）：" + option.area + "</p>";
|
|
|
+ html += "<p class='v-p-color'>可转移安置人数（万人)：" + option.transferPerson + "</p>";
|
|
|
+ html += "<p class='v-p-color'>建设内容：" + option.constructionContent + "</p>";
|
|
|
this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
});
|
|
|
// /**鼠标移开关闭popup**/
|
|
|
@@ -319,7 +327,6 @@ export default {
|
|
|
|
|
|
addTeamMarker(option, type) {
|
|
|
let that = this;
|
|
|
- let markers = [];
|
|
|
//定义图标
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: yjIconList[type],
|
|
|
@@ -341,7 +348,6 @@ export default {
|
|
|
},
|
|
|
addSuppliesMark(option, type) {
|
|
|
let that = this;
|
|
|
- let markers = [];
|
|
|
//定义图标
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: yjIconList[type],
|
|
|
@@ -361,6 +367,39 @@ export default {
|
|
|
});
|
|
|
return marker;
|
|
|
},
|
|
|
+
|
|
|
+ addEmergencyMark(option, type) {
|
|
|
+ //定义图标
|
|
|
+ let icon = new window.L.Icon({
|
|
|
+ iconUrl: yjIconList[type],
|
|
|
+ iconAnchor: [50, 50],
|
|
|
+ iconSize: [37, 64],
|
|
|
+ popupAnchor: [-33, -47],
|
|
|
+ shadowSize: [41, 41]
|
|
|
+ });
|
|
|
+ //定义落点
|
|
|
+ let marker = L.marker([option.latitude, option.longitude], {
|
|
|
+ icon: icon
|
|
|
+ });
|
|
|
+ //定义泡泡层
|
|
|
+ marker.on('mouseover', function () {
|
|
|
+ let html = "";
|
|
|
+ html += "<p class='v-p-color'>摄像头名称：" + option.cameraName + "</p>";
|
|
|
+ html += "<p class='v-p-color'>点位具体位置：" + option.address + "</p>";
|
|
|
+ html += "<p class='v-p-color'>视频点：" + option.videoSpot + "</p>";
|
|
|
+ html += "<p class='v-p-color'>型号：" + option.cameraModel + "</p>";
|
|
|
+ html += "<p class='v-p-color'>数量：" + option.number + "</p>";
|
|
|
+ html += "<p class='v-p-color'>单位：" + option.unit + "</p>";
|
|
|
+ html += "<p class='v-p-color'>备注：" + option.remark + "</p>";
|
|
|
+ this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
+ });
|
|
|
+ // /**鼠标移开关闭popup**/
|
|
|
+ marker.on('mouseout', function () {
|
|
|
+ this.closePopup();
|
|
|
+ });
|
|
|
+ return marker;
|
|
|
+ },
|
|
|
+
|
|
|
/**
|
|
|
* 清理地图标点
|
|
|
*/
|
|
|
@@ -394,6 +433,13 @@ export default {
|
|
|
that.addMarkers(response.data, "jyd");
|
|
|
})
|
|
|
},
|
|
|
+ //可视化查询应急局摄像头列表
|
|
|
+ getBuildTypeFourList() {
|
|
|
+ let that = this;
|
|
|
+ getBuildTypeFourList().then(response => {
|
|
|
+ that.addMarkers(response.data, "yjj");
|
|
|
+ })
|
|
|
+ },
|
|
|
selectQkEmergencyRescueTeamByDeptId(deptId) {
|
|
|
selectQkEmergencyRescueTeamByDeptId(deptId).then(res => {
|
|
|
this.teamData = res.data;
|
|
|
@@ -438,142 +484,168 @@ td {
|
|
|
/* height: 1080px !important; */
|
|
|
background: none;
|
|
|
}
|
|
|
+
|
|
|
.el-dialog {
|
|
|
- background: #014f9f;
|
|
|
+ background: #014f9f;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
.el-dialog__title {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .el-dialog__headerbtn .el-dialog__close {
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .el-table {
|
|
|
- background-color: #014f9f;
|
|
|
- color: #fff;
|
|
|
- border-bottom: 1px solid #335d81;
|
|
|
- }
|
|
|
- .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
|
|
|
- background-color: #032d58c9;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .el-table .cell{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .el-table tr {
|
|
|
- background-color: #04346f61;
|
|
|
- }
|
|
|
- .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
|
|
- background-color: #1c7fdb;
|
|
|
- }
|
|
|
- .el-table td.el-table__cell div{
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
|
|
|
- border-bottom: 1px solid #335d81;
|
|
|
- }
|
|
|
- .el-table::before, .el-table--group::after, .el-table--border::after {
|
|
|
- background-color: #335d81;
|
|
|
- }
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar{
|
|
|
- background: #294f76;
|
|
|
- }
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
- background-color: #34669c;
|
|
|
- }
|
|
|
- .el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
- background-color: #294f76;
|
|
|
- }
|
|
|
- /* popup */
|
|
|
-
|
|
|
- .leaflet-popup {
|
|
|
- position: absolute;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .leaflet-popup-content-wrapper {
|
|
|
- padding: 1px;
|
|
|
- text-align: left;
|
|
|
- border-radius: 12px;
|
|
|
- }
|
|
|
- .leaflet-popup-content {
|
|
|
- margin: 13px 19px;
|
|
|
- line-height: 1.4;
|
|
|
- width: 298px!important;
|
|
|
- }
|
|
|
- .leaflet-popup-content p {
|
|
|
- margin: 18px 0;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- .leaflet-popup-tip-container {
|
|
|
- width: 40px;
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- margin-left: -20px;
|
|
|
- overflow: hidden;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- .leaflet-popup-tip {
|
|
|
- width: 17px;
|
|
|
- height: 17px;
|
|
|
- padding: 1px;
|
|
|
-
|
|
|
- margin: -10px auto 0;
|
|
|
-
|
|
|
- -webkit-transform: rotate(45deg);
|
|
|
- -moz-transform: rotate(45deg);
|
|
|
- -ms-transform: rotate(45deg);
|
|
|
- transform: rotate(45deg);
|
|
|
- }
|
|
|
- .leaflet-popup-content-wrapper,
|
|
|
- .leaflet-popup-tip {
|
|
|
- background: rgba(4, 45, 106, 0.7);
|
|
|
- color: #333;
|
|
|
- box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
|
|
- }
|
|
|
- .leaflet-container a.leaflet-popup-close-button {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- padding: 4px 4px 0 0;
|
|
|
- border: none;
|
|
|
- text-align: center;
|
|
|
- width: 18px;
|
|
|
- height: 14px;
|
|
|
- font: 16px/14px Tahoma, Verdana, sans-serif;
|
|
|
- color: #c3c3c3;
|
|
|
- text-decoration: none;
|
|
|
- font-weight: bold;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
- .leaflet-container a.leaflet-popup-close-button:hover {
|
|
|
- color: #999;
|
|
|
- }
|
|
|
- .leaflet-popup-scrolled {
|
|
|
- overflow: auto;
|
|
|
- border-bottom: 1px solid #ddd;
|
|
|
- border-top: 1px solid #ddd;
|
|
|
- }
|
|
|
-
|
|
|
- .leaflet-oldie .leaflet-popup-content-wrapper {
|
|
|
- -ms-zoom: 1;
|
|
|
- }
|
|
|
- .leaflet-oldie .leaflet-popup-tip {
|
|
|
- width: 24px;
|
|
|
- margin: 0 auto;
|
|
|
-
|
|
|
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
|
|
- filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
|
|
- }
|
|
|
- .leaflet-oldie .leaflet-popup-tip-container {
|
|
|
- margin-top: -1px;
|
|
|
- }
|
|
|
-
|
|
|
- .leaflet-oldie .leaflet-control-zoom,
|
|
|
- .leaflet-oldie .leaflet-control-layers,
|
|
|
- .leaflet-oldie .leaflet-popup-content-wrapper,
|
|
|
- .leaflet-oldie .leaflet-popup-tip {
|
|
|
- border: 1px solid #999;
|
|
|
- }
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table {
|
|
|
+ background-color: #014f9f;
|
|
|
+ color: #fff;
|
|
|
+ border-bottom: 1px solid #335d81;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th {
|
|
|
+ background-color: #032d58c9;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table .cell {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table tr {
|
|
|
+ background-color: #04346f61;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
|
|
+ background-color: #1c7fdb;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table td.el-table__cell div {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
|
|
|
+ border-bottom: 1px solid #335d81;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table::before, .el-table--group::after, .el-table--border::after {
|
|
|
+ background-color: #335d81;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__body-wrapper::-webkit-scrollbar {
|
|
|
+ background: #294f76;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #34669c;
|
|
|
+}
|
|
|
+
|
|
|
+.el-table__body-wrapper::-webkit-scrollbar-track {
|
|
|
+ background-color: #294f76;
|
|
|
+}
|
|
|
+
|
|
|
+/* popup */
|
|
|
+
|
|
|
+.leaflet-popup {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-content-wrapper {
|
|
|
+ padding: 1px;
|
|
|
+ text-align: left;
|
|
|
+ border-radius: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-content {
|
|
|
+ margin: 13px 19px;
|
|
|
+ line-height: 1.4;
|
|
|
+ width: 298px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-content p {
|
|
|
+ margin: 18px 0;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-tip-container {
|
|
|
+ width: 40px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -20px;
|
|
|
+ overflow: hidden;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-tip {
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ padding: 1px;
|
|
|
+
|
|
|
+ margin: -10px auto 0;
|
|
|
+
|
|
|
+ -webkit-transform: rotate(45deg);
|
|
|
+ -moz-transform: rotate(45deg);
|
|
|
+ -ms-transform: rotate(45deg);
|
|
|
+ transform: rotate(45deg);
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-content-wrapper,
|
|
|
+.leaflet-popup-tip {
|
|
|
+ background: rgba(4, 45, 106, 0.7);
|
|
|
+ color: #333;
|
|
|
+ box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-container a.leaflet-popup-close-button {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 4px 4px 0 0;
|
|
|
+ border: none;
|
|
|
+ text-align: center;
|
|
|
+ width: 18px;
|
|
|
+ height: 14px;
|
|
|
+ font: 16px/14px Tahoma, Verdana, sans-serif;
|
|
|
+ color: #c3c3c3;
|
|
|
+ text-decoration: none;
|
|
|
+ font-weight: bold;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-container a.leaflet-popup-close-button:hover {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-popup-scrolled {
|
|
|
+ overflow: auto;
|
|
|
+ border-bottom: 1px solid #ddd;
|
|
|
+ border-top: 1px solid #ddd;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-oldie .leaflet-popup-content-wrapper {
|
|
|
+ -ms-zoom: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-oldie .leaflet-popup-tip {
|
|
|
+ width: 24px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
|
|
|
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-oldie .leaflet-popup-tip-container {
|
|
|
+ margin-top: -1px;
|
|
|
+}
|
|
|
+
|
|
|
+.leaflet-oldie .leaflet-control-zoom,
|
|
|
+.leaflet-oldie .leaflet-control-layers,
|
|
|
+.leaflet-oldie .leaflet-popup-content-wrapper,
|
|
|
+.leaflet-oldie .leaflet-popup-tip {
|
|
|
+ border: 1px solid #999;
|
|
|
+}
|
|
|
</style>
|
bihuisong
