|
|
@@ -3,10 +3,9 @@
|
|
|
<section class="mainbox">
|
|
|
<div class="topBox">
|
|
|
<div class="column statisSec">
|
|
|
-
|
|
|
<statis-top></statis-top>
|
|
|
<statis-bottom></statis-bottom>
|
|
|
-
|
|
|
+
|
|
|
<!-- <div class="panel statisBottom">
|
|
|
<h2>折线图-人员变化</h2>
|
|
|
<div class="chart"></div>
|
|
|
@@ -19,7 +18,13 @@
|
|
|
</div> -->
|
|
|
</div>
|
|
|
<div class="column">
|
|
|
- <div class="map" style="" @click="Overview()"></div>
|
|
|
+ <!-- @click="Overview()" -->
|
|
|
+ <div class="map" id="mapF" style="">
|
|
|
+ <div id="pickerBox">
|
|
|
+ <input id="pickerInput" placeholder="输入关键字选取地点" />
|
|
|
+ <div id="poiInfo"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="column">
|
|
|
<div class="panel deviceSum">
|
|
|
@@ -40,7 +45,6 @@
|
|
|
<div class="bottomBox">
|
|
|
<div class="column">221</div>
|
|
|
<div class="column">21211</div>
|
|
|
-
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
@@ -49,16 +53,268 @@
|
|
|
import statisTop from "./components/statisTop";
|
|
|
import statisBottom from "./components/statisBottom";
|
|
|
import pieChart from "./components/pieChart";
|
|
|
+// 地图
|
|
|
+import AMap from "AMap";
|
|
|
+import AMapUI from "AMapUI";
|
|
|
export default {
|
|
|
name: "index",
|
|
|
- components: {statisTop,statisBottom,pieChart},
|
|
|
- methods:{
|
|
|
- Overview(){
|
|
|
- this.$router.push({ path: '/Overview'});//, query: { title: title }
|
|
|
- }
|
|
|
- }
|
|
|
+ components: { statisTop, statisBottom, pieChart },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ Overview() {
|
|
|
+ this.$router.push({ path: "/Overview" }); //, query: { title: title }
|
|
|
+ },
|
|
|
+ async initMap() {
|
|
|
+ this.map = await new AMap.Map("mapF", {
|
|
|
+ mapStyle: "amap://styles/blue", //设置地图的显示样式
|
|
|
+ resizeEnable: true,
|
|
|
+ zoom: 13,
|
|
|
+ zooms: [3, 16],
|
|
|
+ // features: [] //清空背景道路等
|
|
|
+ });
|
|
|
+ this.initMapUi();
|
|
|
+ this.addMarker(
|
|
|
+ [
|
|
|
+ {
|
|
|
+ address: "东川路2988号富康东川木业有限公司3车间西南角",
|
|
|
+ detachmentName: "闵行区消防救援支队",
|
|
|
+ dutyPerson: null,
|
|
|
+ getWaterType: "市政",
|
|
|
+ gisBaiDuX: "121.394165",
|
|
|
+ gisBaiDuY: "31.011814",
|
|
|
+ gisX: "121.382935",
|
|
|
+ gisY: "31.00811",
|
|
|
+ jurisdictionalAgency: "闵行站",
|
|
|
+ phone: "64881840",
|
|
|
+ status: "1",
|
|
|
+ type: "消火栓",
|
|
|
+ waterAdministrative: "单位",
|
|
|
+ waterGage: "3.0000",
|
|
|
+ waterUnit: "闵行水厂",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ address: "瓶安路1600弄鑫都城宝铭苑34号楼东侧",
|
|
|
+ detachmentName: "闵行区消防救援支队",
|
|
|
+ dutyPerson: null,
|
|
|
+ getWaterType: "市政",
|
|
|
+ gisBaiDuX: "121.40705",
|
|
|
+ gisBaiDuY: "31.060436",
|
|
|
+ gisX: "121.39589",
|
|
|
+ gisY: "31.056536",
|
|
|
+ jurisdictionalAgency: "光华站",
|
|
|
+ phone: "021-64881840",
|
|
|
+ status: "1",
|
|
|
+ type: "消火栓",
|
|
|
+ waterAdministrative: "居民",
|
|
|
+ waterGage: "0.3000",
|
|
|
+ waterUnit: "闵行自来水公司",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ "water"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ addMarker(lnglats, type = "") {
|
|
|
+ // 创建标点和点击事件
|
|
|
+ // let icon = "";
|
|
|
+ let markers = lnglats.map((val, ind) => {
|
|
|
+ if (type === "water") {
|
|
|
+ // icon =
|
|
|
+ // val.waterAdministrative === "单位"
|
|
|
+ // ? "http://120.55.70.156/image/unitWater.png"
|
|
|
+ // : val.waterAdministrative === "市政"
|
|
|
+ // ? "http://120.55.70.156/image/szWater.png"
|
|
|
+ // : val.waterAdministrative === "社区" ||
|
|
|
+ // val.waterAdministrative === "居民"
|
|
|
+ // ? "http://120.55.70.156/image/sqWater.png"
|
|
|
+ // : "";
|
|
|
+ }
|
|
|
+ let marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(val.gisX, val.gisY),
|
|
|
+ // icon: icon,
|
|
|
+ zIndex: 9,
|
|
|
+ extData: {
|
|
|
+ id: ind + 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ marker.on("click", async () => {
|
|
|
+ console.log([val.gisX, val.gisY], null, val);
|
|
|
+ await this.addMarkerInfo([val.gisX, val.gisY], null, val);
|
|
|
+ // console.log(222);
|
|
|
+ });
|
|
|
+ return marker;
|
|
|
+ });
|
|
|
+ this.map.add(new AMap.OverlayGroup(markers));
|
|
|
+ this.map.setFitView(); // 根据所有点自适应
|
|
|
+ },
|
|
|
+ // 添加标点
|
|
|
+ addMarkerInfo(position, content, value = "") {
|
|
|
+ // this.map.getIsOpen();
|
|
|
+ console.log(value);
|
|
|
+ this.map.clearInfoWindow();
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ isCustom: true, //使用自定义窗体
|
|
|
+ closeWhenClickMap: true,
|
|
|
+ content:
|
|
|
+ content ||
|
|
|
+ `
|
|
|
+ <div class="tableTooltip mapTab">
|
|
|
+ <div class="tableTitle">
|
|
|
+ <div>${"测试站点1"}</div>
|
|
|
+ </div>
|
|
|
+ <el-row class="tableContent">
|
|
|
+ <div><a>站点状态：</a>${"正常"}</div>
|
|
|
+ <div><a>设备总数：</a>${"5"}</div>
|
|
|
+ <div><a>告警数：</a>${"3"}</div>
|
|
|
+ <div><a>监控类型：</a>${"电力，视频"}</div>
|
|
|
+ <div><a> 电话：</a>${"18888888888"}</div>
|
|
|
+ <div><a> 地址：</a>${"XX路135弄"}</div>
|
|
|
+ </el-row>
|
|
|
+ </div>`,
|
|
|
+ offset: new AMap.Pixel(16, -30),
|
|
|
+ });
|
|
|
+ infoWindow.open(this.map, position);
|
|
|
+ },
|
|
|
+ poiPickerReady(poiPicker) {
|
|
|
+ console.log(poiPicker);
|
|
|
+ var marker = new AMap.Marker();
|
|
|
+
|
|
|
+ var infoWindow = new AMap.InfoWindow({
|
|
|
+ offset: new AMap.Pixel(0, -20),
|
|
|
+ });
|
|
|
+
|
|
|
+ //选取了某个POI
|
|
|
+ poiPicker.on("poiPicked", (poiResult) => {
|
|
|
+ var source = poiResult.source,
|
|
|
+ poi = poiResult.item,
|
|
|
+ info = {
|
|
|
+ source: source,
|
|
|
+ id: poi.id,
|
|
|
+ name: poi.name,
|
|
|
+ location: poi.location.toString(),
|
|
|
+ address: poi.address,
|
|
|
+ };
|
|
|
+
|
|
|
+ marker.setMap(this.map);
|
|
|
+ infoWindow.setMap(this.map);
|
|
|
+
|
|
|
+ marker.setPosition(poi.location);
|
|
|
+ infoWindow.setPosition(poi.location);
|
|
|
+
|
|
|
+ infoWindow.setContent(
|
|
|
+ "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
|
|
|
+ );
|
|
|
+ infoWindow.open(this.map, marker.getPosition());
|
|
|
+
|
|
|
+ this.map.setCenter(marker.getPosition());
|
|
|
+ });
|
|
|
+
|
|
|
+ poiPicker.onCityReady(() => {
|
|
|
+ poiPicker.suggest("美食");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initMapUi() {
|
|
|
+ console.log(22);
|
|
|
+ AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker)=> {
|
|
|
+ console.log(PoiPicker);
|
|
|
+ let poiPickers = new PoiPicker({
|
|
|
+ //city:'北京',
|
|
|
+ input: "pickerInput",
|
|
|
+ });
|
|
|
+
|
|
|
+ //初始化poiPicker
|
|
|
+ this.poiPickerReady(poiPickers);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
+#pickerBox {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9999;
|
|
|
+ top: 50px;
|
|
|
+ right: 30px;
|
|
|
+ width: 300px;
|
|
|
+}
|
|
|
+
|
|
|
+#pickerInput {
|
|
|
+ width: 200px;
|
|
|
+ padding: 5px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+#poiInfo {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+/* 地图弹窗 */
|
|
|
+.mapTab {
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 3%;
|
|
|
+ box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
|
|
|
+ background: rgba(0, 44, 110, 0.5);
|
|
|
+ // box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
|
|
|
+ // background: rgba(0, 44, 110, 0.8);
|
|
|
+ font-size: 0.2rem;
|
|
|
+ padding: 0.1875rem;
|
|
|
+ width: 5rem;
|
|
|
+ font-size: 0.1875rem;
|
|
|
+ font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
|
|
|
+ width: 3.5rem;
|
|
|
+ scrollbar-width: none;
|
|
|
+ /* firefox */
|
|
|
+ -ms-overflow-style: none;
|
|
|
+ /* IE 10+ */
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .tableTitle {
|
|
|
+ // background: url('~@a/img/comprehensive/title.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ & > div {
|
|
|
+ line-height: 0.4rem;
|
|
|
+ background-image: linear-gradient(#caf6ff, #56d1ed);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ color: transparent;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableContent {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 0.125rem;
|
|
|
+ div {
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 0.25rem;
|
|
|
+ line-height: 0.275rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ // margin: 0.0625rem 0;
|
|
|
+ a {
|
|
|
+ width: 0.875rem;
|
|
|
+ font-size: 0.175rem;
|
|
|
+ text-align: right;
|
|
|
+ display: inline-block;
|
|
|
+ color: #00f4fd;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .max {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .divTitle {
|
|
|
+ color: #04f2f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ /* Chrome Safari */
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
