<template> <div id="previewOfSiteStatus"> <div id="previewOfSiteStatusMaps"> <div ref="rootmap" id="earthmap" class="earthmap"> </div> <div id="popup" class="popup"> </div> <!-- <div id="previewOfSiteStatusTop"> <div class="previewOfSiteStatusTopC"> <img src="./../../../static/img/previewOfSiteStatus7.png" alt class="previewOfSiteStatusTopimg" /> <div class="previewOfSiteStatusTopCFont"> <span class="previewOfSiteStatusTopCData">{{ TopData1 }}</span> <span class="previewOfSiteStatusTopCMS">设备总数</span> </div> </div> <div class="previewOfSiteStatusTopC"> <img src="./../../../static/img/previewOfSiteStatus8.png" alt class="previewOfSiteStatusTopimg" /> <div class="previewOfSiteStatusTopCFont"> <span class="previewOfSiteStatusTopCData">{{ TopData2 }}</span> <span class="previewOfSiteStatusTopCMS">当前在线数</span> </div> </div> <div class="previewOfSiteStatusTopC"> <img src="./../../../static/img/previewOfSiteStatus9.png" alt class="previewOfSiteStatusTopimg" /> <div class="previewOfSiteStatusTopCFont"> <span class="previewOfSiteStatusTopCData">{{ TopData3 }}</span> <span class="previewOfSiteStatusTopCMS">在线率</span> </div> </div> </div> --> <div class="boxmain"> <!-- 项目选择 --> <div id="previewOfSiteStatusLeftTop"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus1.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">项目选择</span> </div> <div class="previewOfSiteStatusCentent"> <!-- 项目选择下拉框 --> <div class="previewTOP"> <template> <el-select class="selectWidth" v-model="ChecksplatformCodeTest" filterable placeholder="全部项目" @change="ListClick" size="medium" clearable > <el-option v-for="(item, index) in ProjectList" :key="index" :label="item.groupName" :value="index" > </el-option> </el-select> </template> </div> <!-- 项目选择历史搜索记录(最多十条) --> <div class="previewButton"> <h5 class="text">历史搜索</h5> <div class="previewHistory"> <span class="previewtext" v-for="(item, index) in historyList" :key="index" @click="HistoryClick(item)" > {{ item }} </span> </div> </div> </div> </div> <!-- 平台站点数量及状态统计 --> <div id="previewOfSiteStatusLeftcenter"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus2.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">站点统计</span> <div class="previewOfSiteStatusTitleBTN"> <span v-for="(item, index) in namelist" :key="index" @click="allpreview(index, item, $event)" :class="{ select: item.select }" >{{ item.name }}</span > </div> </div> <div class="previewOfSiteStatusCentent"> <div id="previewOfSiteStatusCentent2_1"> <p class="previewOfSiteStatusCentent2P">平台站点(个)</p> <div class="previewOfSiteStatusCentent2C"> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Site.SAll" :endVal="Site.EAll" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <!-- </div> --> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus10.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >总数</span > </div> </div> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Site.SOn" :endVal="Site.EOn" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus11.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >在线</span > </div> </div> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Site.SOff" :endVal="Site.EOff" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus12.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >离线</span > </div> </div> </div> </div> <!-- <div id="previewOfSiteStatusCentent2_2"> <p class="previewOfSiteStatusCentent2P">项目进度(条)</p> <div class="previewOfSiteStatusCentent2C"> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Project.SAll" :endVal="Project.EAll" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus10.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >总数</span > </div> </div> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Project.SOn" :endVal="Project.EOn" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus11.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >已完成</span > </div> </div> <div class="previewOfSiteStatusCentent2CList"> <countTo :startVal="Project.SOff" :endVal="Project.EOff" :duration="2000" class="previewOfSiteStatusCentent2CListData" ></countTo> <div class="previewOfSiteStatusCentent2CListFont"> <img src="./../../../static/img/previewOfSiteStatus12.png" alt class="previewOfSiteStatusCentent2CListFontImg" /> <span class="previewOfSiteStatusCentent2CListFonts" >未完成</span > </div> </div> </div> </div> --> </div> </div> <!-- 项目站点覆盖排名 --> <div id="previewOfSiteStatusLeftBottom"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus3.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">项目站点覆盖排名</span> </div> <div class="previewOfSiteStatusCentent"> <ul id="previewOfSiteStatusCentent3"> <li class="previewOfSiteStatusCentent3Li" v-for="(item, index) in Region" :key="index" style="cursor: pointer;" > <span class="previewOfSiteStatusCentent3LiName" :title="item.RegionName" >{{ item.RegionName }}</span > <div class="previewOfSiteStatusCentent3LiCharts"> <div class="previewOfSiteStatusCentent3LiCharts2" :style="'width:' + item.RegionJD + '%;'" ></div> </div> <span class="previewOfSiteStatusCentent3LiData"> {{ item.RegionNum }} <span class="previewOfSiteStatusCentent3LiDW">个</span> </span> </li> </ul> </div> </div> </div> <div class="boxmainR"> <!-- 项目设备总览 --> <div id="previewOfSiteStatusRightTop"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus4.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">项目设备总览</span> </div> <div class="previewOfSiteStatusCentent"> <div id="previewOfSiteStatusCentent4"> <div id="previewOfSiteStatusCentent4eCharts"></div> <div id="previewOfSiteStatusCentent4Font"> <div id="previewOfSiteStatusCentent4Font1"> <p class="previewOfSiteStatusCentent4Font1P1"> {{ XianYou }} </p> <p class="previewOfSiteStatusCentent4Font1P2"> <span class="previewOfSiteStatusCentent4Font1P2S"></span> 现有设备 </p> </div> <div id="previewOfSiteStatusCentent4Font2"> <p class="previewOfSiteStatusCentent4Font2P1">{{ DaJian }}</p> <p class="previewOfSiteStatusCentent4Font2P2"> <span class="previewOfSiteStatusCentent4Font2P2S"></span> 搭建设备 </p> </div> </div> </div> </div> </div> <div id="previewOfSiteStatusRightcenter"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus5.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">项目设备环比增长</span> </div> <div class="previewOfSiteStatusCentent"> <div id="previewOfSiteStatusCentent5"></div> </div> </div> <div id="previewOfSiteStatusRightBottom"> <div class="previewOfSiteStatusTitle"> <img src="./../../../static/img/previewOfSiteStatus6.png" alt class="previewOfSiteStatusTitleImg" /> <span class="previewOfSiteStatusTitleFont">站点实时报警</span> </div> <div class="previewOfSiteStatusCentent"> <div id="previewOfSiteStatusCentent6"> <div id="GisRightCententBox2UL"> <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span> <div class="GIsRightWaringList" v-for="(item, index) in WaringList" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)" > <el-tooltip ref="tooltip" class="item" effect="dark" :content=" `${item.factorsName}${item.warnTypeDesc},${item.warnTypeDesc}值为:${item.warnValue}` " placement="top" > <div> <span class="GIsRightWaringListNo">{{ item.createTime }}</span> <span class="GIsRightWaringListName">{{ item.siteName }}</span> <span class="GIsRightWaringListType" :class="[item.warnType == 2 ? 'red' : 'Yellow']" >{{ item.warnTypeDesc }}</span > </div> </el-tooltip> </div> </div> </div> </div> <!-- <div id="previewOfSiteStatusCentent6"> <div id="GisRightCententBox2UL"> <span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span> </div> </div> --> </div> </div> </div> </div> </template> <script> import { message } from "./../../util/item"; import countTo from "vue-count-to"; //引入数字滚动插件 import { Polygon, LineString } from "ol/geom"; import { Map, View, Feature } from "ol"; import "ol/ol.css"; import XYZ from "ol/source/XYZ"; import * as layer from "ol/layer.js"; import * as source from "ol/source.js"; import * as geom from "ol/geom.js"; import * as style from "ol/style.js"; import Overlay from "ol/Overlay.js"; import TileLayer from "ol/layer/Tile"; import { fromLonLat } from "ol/proj"; import SourceVector from "ol/source/Vector"; import LayerVector from "ol/layer/Vector"; import Cluster from "ol/source/Cluster"; import Style from "ol/style/Style"; import Fill from "ol/style/Fill"; import Text from "ol/style/Text"; import Circle from "ol/style/Circle"; import Stroke from "ol/style/Stroke"; import Draw from "ol/interaction/Draw"; import dragzoom from "ol/interaction/DragZoom"; import Icon from "ol/style/Icon"; import Select from "ol/interaction/Select"; import Modify from "ol/interaction/Modify"; import FormatWKT from "ol/format/WKT"; import { ScaleLine, ZoomSlider, ZoomToExtent, Zoom } from "ol/control"; export default { name: "previewOfSiteStatus", components: { countTo }, //加载数字滚动插件 props: { flag: { type: Boolean, default() { return false; } } }, data: function() { return { menu_overlay: null, currentZoom:5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 // 顶部中间汇总A TopData1: "1866", TopData2: "933", TopData3: "50" + "%", // 顶部中间汇总B // 项目选择A ProjectList: [ { exceptionState: 0, exceptionStatePercentage: "", groupName: "全部项目", groupNo: "", offLine: 0, offLinePercentage: 0, total: 0, totalPercentage: 0 } ], dynamic: 0, ChecksplatformCode: "", //选取的平台的编号 platformtype: "", //选取的站点统计类型 ChecksplatformCodeTest: "全部项目", //选取的默认文字 historyList: [], // 项目选择B // 平台站点数量及状态统计A Site: { // 初始值 SAll: 0, SOn: 0, SOff: 0, // 实时值 EAll: 0, EOn: 0, EOff: 0 }, Project: { // 初始值 SAll: 0, SOn: 0, SOff: 0, // 实时值 EAll: 0, EOn: 0, EOff: 0 }, // 平台站点数量及状态统计B // 项目站点覆盖排名A Region: [ // { //数据格式 // RegionName: "苏州", // RegionJD: "90", // RegionNum: "8600" // ShortName: "苏州" // } ], // 项目站点覆盖排名B // 项目设备总览A myChart: {}, XianYou: "", //现有设备总数 DaJian: "", //搭建设备总数 // 项目设备总览B // 项目设备环比增长A myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], NoBaoJingData: true, //有无报警数据,有就为false // 站点实时报警B map: "", namelist: [ { name: "全部", platform: "", type: "", select: true }, { name: "合同", platform: "", type: "0", select: false }, { name: "临测", platform: "", type: "1", select: false } ] }; }, methods: { //项目图层切换 initPointToMap(projectNo){ this.$http .post(this.nozzle.listStationBase, { data: { platformCode:projectNo } }) .then(response => { console.log(response) if (response.data.code === 1) { this.showCluster(response.data.data); } }) }, //点击历史数据 historyData(stCode) { console.log(stCode) }, // 获取所有平台 LoadAllProject() { this.$http .post( this.nozzle.userGroupRelaGetGroups + "?&pageNo=" + 1 + "&typeStr=" + "&pageSize=" + 999 ) .then(response => { // console.log(response); if (response.status === 200) { var qwe = response.data.data === "" ? [] : response.data.data; this.ProjectList = this.ProjectList.concat(qwe); } else { message(response); } }) .catch(response => { message(response); }); }, // 根据平台渲染站点统计 loadSiteNumForOroject() { // console.log(this.platformtype, this.ChecksplatformCode); this.$http .post(this.nozzle.getSiteNum, { data: { platform: this.ChecksplatformCode, type: this.platformtype } }) .then(response => { if (response.status === 200) { // 将当前数据设置成数字滚动的初始值 this.Site.SAll = this.Site.EAll; this.Site.SOn = this.Site.EOn; this.Site.SOff = this.Site.EOff; this.Project.SAll = this.Project.EAll; this.Project.SOn = this.Project.EOn; this.Project.SOff = this.Project.EOff; // 将新数据设置成数字滚动的结束值 也就是展示值 this.Site.EAll = response.data.data.all; this.Site.EOn = response.data.data.online; this.Site.EOff = response.data.data.offline; // this.Project.EAll = response.data.data.projectcount; // this.Project.EOn = response.data.data.completed; // this.Project.EOff = response.data.data.noncompleted; } else { message(response); } }) .catch(response => { message(response); }); }, // 单击显示平台站点 allpreview(index, item, event) { // console.log(index, platform, event.target); this.namelist.forEach(item => { item.select = false; }); this.namelist[index].select = true; // console.log(this.platformtype, this.ChecksplatformCode); this.platformtype = item.type; this.$http .post(this.nozzle.getSiteNum, { data: { platform: this.ChecksplatformCode, type: this.platformtype } }) .then(response => { if (response.status === 200) { // 将当前数据设置成数字滚动的初始值 this.Site.SAll = this.Site.EAll; this.Site.SOn = this.Site.EOn; this.Site.SOff = this.Site.EOff; this.Project.SAll = this.Project.EAll; this.Project.SOn = this.Project.EOn; this.Project.SOff = this.Project.EOff; // 将新数据设置成数字滚动的结束值 也就是展示值 this.Site.EAll = response.data.data.all; this.Site.EOn = response.data.data.online; this.Site.EOff = response.data.data.offline; // this.Project.EAll = response.data.data.projectcount; // this.Project.EOn = response.data.data.completed; // this.Project.EOff = response.data.data.noncompleted; } else { message(response); } }) .catch(response => { message(response); }); }, // 加载项目站点覆盖排名 loadQuyuPaiMing() { this.$http .post(this.nozzle.sysPlatformGetAllSiteCount) .then(response => { if (response.data.code === 1) { this.Region = response.data.data; } else { message(response); } }) .catch(response => { message(response); }); }, // 加载 项目设备总览 loadQuyuShebei() { this.$http .post(this.nozzle.platEquipmentGetEquipStatistics, { data: { platform: this.ChecksplatformCode } }) .then(response => { if (response.data.code === 200) { this.loadRegionEcharts( response.data.data.title, response.data.data.exiting, response.data.data.tobebuilt ); this.XianYou = response.data.data.exitingsum; this.DaJian = response.data.data.tobebuiltsum; } else { message(response); } }) .catch(response => { message(response); }); }, // 加载 项目设备环比增长 loadQuYuSheBeiHuanBi() { this.$http .post(this.nozzle.sysPlatformGetSiteStateStatistics, { data: { platform: this.ChecksplatformCode } }) .then(response => { if (response.data.code === 200) { this.loadRegionEcharts2( response.data.data.xdata, response.data.data.offline, response.data.data.warn, response.data.data.malfunction, response.data.data.alarm ); } else { message(response); } }) .catch(response => { message(response); }); }, // 加载 站点实时报警信息 loadSiteBaoJing() { this.NoBaoJingData = true; this.WaringList = []; this.$http .post(this.nozzle.warnLogListWarnLog, { current: 1, size: 99, data: { platForm: this.ChecksplatformCode, endTime: "", startTime: "", siteName: "" } }) .then(response => { if (response.data.code === 200) { if (response.data.data.total > 0) { // 没有数据 显示暂无数据的提示 this.NoBaoJingData = false; } this.WaringList = response.data.data.records; } else { message(response); } }) .catch(response => { message(response); }); }, // 点击项目ZZJ ListClick(index) { this.ChecksplatformCode = this.ProjectList[index]["groupNo"]; //刷新联动地图上的点位按照项目实际的个数 console.log(this.ChecksplatformCode) this.initPointToMap(this.ChecksplatformCode) // 限制数组的长度不超过10个 // console.log(this.historyList.length); // console.log(this.ProjectList[index]["groupName"]); var gname = this.ProjectList[index]["groupName"]; if (this.historyList.length >= 10 && this.historyList.includes(gname)) { } else if (this.historyList.length >= 10) { this.historyList.pop(); } this.historyList = this.selectTag( this.historyList, this.ProjectList[index]["groupName"] ); this.setItem(this.historyList); // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级************************************************************************************************GIS调用 if ( this.ProjectList[index].latitude != null && this.ProjectList[index].longitude != null && this.ProjectList[index].zoomLevel != null ) { let MapPoint = new esri.geometry.Point( this.ProjectList[index].longitude, this.ProjectList[index].latitude, new esri.SpatialReference({ wkid: 4326 }) ); this.map.centerAndZoom(MapPoint, this.ProjectList[index].zoomLevel); } }, // 点击历史搜索的文字 HistoryClick(item) { this.ChecksplatformCodeTest = item; this.ProjectList.forEach(item1 => { if (item1["groupName"] == item) { this.ChecksplatformCode = item1["groupNo"]; //地图联动响应的项目 this.initPointToMap(this.ChecksplatformCode) // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 if ( item1.latitude != null && item1.longitude != null && item1.zoomLevel != null ) { let MapPoint = new esri.geometry.Point( item1.longitude, item1.latitude, new esri.SpatialReference({ wkid: 4326 }) ); this.map.centerAndZoom(MapPoint, item1.zoomLevel); } } }); }, // 本地存储ZZJ setItem(arr) { window.sessionStorage.setItem("HISTORYLIST", JSON.stringify(arr)); }, // 本地取值ZZJ getItem() { if (!JSON.parse(window.sessionStorage.getItem("HISTORYLIST"))) { return null; } this.historyList = JSON.parse( window.sessionStorage.getItem("HISTORYLIST") ); }, // 对历史搜索数组去重判断 selectTag(row, id) { row.includes(id) ? row : row.unshift(id); return row; }, // 加载项目设备总览的ecahrts loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) { // 基于准备好的dom,初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 this.myChart.clear(); this.myChart.setOption({ color: ["red"], tooltip: { trigger: "axis" }, legend: { x: "center", data: ["现有设备", "搭建设备"], show: false }, radar: [ { indicator: SheBeiLeiXing, radius: 70, shape: "circle", name: { formatter: "{value}", textStyle: { color: "red" } } } ], series: [ { type: "radar", itemStyle: { normal: { areaStyle: { type: "default" } } }, tooltip: { trigger: "item" }, data: [ { name: "现有设备", value: XianYouData, areaStyle: { normal: { color: "rgb(255, 217, 0)" } }, itemStyle: { normal: { color: "rgb(255, 217, 0)", lineStyle: { color: "rgb(255, 217, 0)" }, areaStyle: { type: "default" } } } }, { name: "搭建设备", value: DaJianData, areaStyle: { normal: { color: "rgb(0, 119, 254)" // 选择项目颜色 } }, itemStyle: { normal: { color: "rgb(0, 119, 254)", lineStyle: { color: "rgb(0, 119, 254)" }, areaStyle: { type: "default" } } } } ] } ] }); }, // 加载项目设备环比增长的ecahrts loadRegionEcharts2(XData, V1, V2, V3, V4) { // 基于准备好的dom,初始化echarts实例 this.myChart2 = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent5") ); // 绘制图表 this.myChart2.clear(); this.myChart2.setOption({ color: [ "rgb(140,143,146)", "rgb(255,214,0)", "rgb(229,132,12)", "rgb(211,22,22)" ], tooltip: { trigger: "axis" }, legend: { data: ["离线数量", "预警数量", "故障数量", "报警数量"], textStyle: { //图例文字的样式 color: "rgb(0, 119, 254)", fontSize: 12 } }, grid: { left: "3%", right: "6%", bottom: "3%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: XData, axisLabel: { formatter: "{value}", textStyle: { //改变刻度字体样式 color: "rgb(0, 119, 254)" }, fontSize: 12 //字体大小 }, splitLine: { show: false } }, yAxis: { type: "value", axisLabel: { formatter: "{value}", textStyle: { //改变刻度字体样式 color: "rgb(0, 119, 254)" }, fontSize: 12 //字体大小 }, splitLine: { show: false } }, series: [ { name: "离线数量", type: "line", data: V1, smooth: true, symbol: "none" //取消折点圆圈 }, { name: "预警数量", type: "line", data: V2, smooth: true, symbol: "none" //取消折点圆圈 }, { name: "故障数量", type: "line", data: V3, smooth: true, symbol: "none" //取消折点圆圈 }, { name: "报警数量", type: "line", data: V4, smooth: true, symbol: "none" //取消折点圆圈 } ] }); }, // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { box.scrollTop++; } }, //鼠标移入事件 mouseOver(index) { if (this.timer) { clearInterval(this.timer); this.$refs.tooltip[index].handleShowPopper(); } }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, //按照项目选择去联动地图 initPointToMap1(projectNo) { let _this = this; loadModules([ "dojo/parser", "dojo/ready", "dojo/_base/array", "esri/Color", "dojo/dom-style", "dojo/query", "esri/map", "esri/dijit/InfoWindow", "esri/request", "esri/graphic", "esri/geometry/Extent", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/PictureMarkerSymbol", "esri/renderers/ClassBreaksRenderer", "esri/layers/GraphicsLayer", "esri/SpatialReference", "esri/dijit/PopupTemplate", "esri/geometry/Point", "esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer", "extras/ClusterLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ]) .then( ([ parser, ready, arrayUtils, Color, domStyle, query, Map, InfoWindow, esriRequest, Graphic, Extent, SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer, GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils, ArcGISTiledMapServiceLayer, ClusterLayer ]) => { _this.$http .post(_this.nozzle.listStationBase, { data: { platformCode:projectNo } }) .then(response => { console.log(response) if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; let photoInfo = {}; var imagealone={}; let position ={}; //第一步清空 _this.map.graphics.clear(); if(this.graphicsLayerByMarker) { _this.map.removeLayer(this.graphicsLayerByMarker); } this.graphicsLayerByMarker = new GraphicsLayer();//点 let wgs = new SpatialReference({ wkid: 4326 }); //第一步先初始化好点图层graphicsLayerByMarker var Marker_point; let markerPng; var marksymbol = new PictureMarkerSymbol( picBaseUrl + "BluePin1LargeB.png", 32, 32 ).setOffset(0, 15); for(var k=0;k<response.data.data.length;k++) { if(response.data.data[k].lon&&response.data.data[k].lon!="0") { Marker_point = new Point( parseFloat(response.data.data[k].lon), parseFloat(response.data.data[k].lat), wgs ); var attr = { stCode:response.data.data[k].stCode, stName:response.data.data[k].stName, mapPoint:Marker_point }; markerPng = new Graphic(Marker_point,marksymbol,attr); this.graphicsLayerByMarker.add(markerPng); } } //初始化结束 photoInfo.data = arrayUtils.map( response.data.data, function(p) { /* if(p.lon!=null){ } */ let latlng = new Point( parseFloat(p.lon), parseFloat(p.lat), wgs ); let webMercator = webMercatorUtils.geographicToWebMercator( latlng ); let attributes = { stName: p.stName, stCode: p.stCode }; return { x: webMercator.x, y: webMercator.y, attributes: attributes }; } ); let popupTemplate = new PopupTemplate({ title: "", fieldInfos: [ { fieldName: "stName", label: "名称:", visible: true }, { fieldName: "stCode", label: "编号:", visible: true } ] }); if(this.clusterLayer) { _this.map.removeLayer(this.clusterLayer); } this.clusterLayer = new ClusterLayer({ data: photoInfo.data, distance: 100, id: "clusters"+projectNo, labelColor: "#fff", labelOffset: 10, resolution: _this.map.extent.getWidth() / _this.map.width, singleColor: "#888", singleTemplate: popupTemplate }); let defaultSym = new SimpleMarkerSymbol().setSize(4); let renderer = new ClassBreaksRenderer( defaultSym, "clusterCount" ); let blue = new PictureMarkerSymbol( picBaseUrl + "BluePin1LargeB.png", 32, 32 ).setOffset(0, 15); let green = new PictureMarkerSymbol( picBaseUrl + "GreenPin1LargeB.png", 64, 64 ).setOffset(0, 15); let red = new PictureMarkerSymbol( picBaseUrl + "RedPin1LargeB.png", 72, 72 ).setOffset(0, 15); renderer.addBreak(0, 2, blue); renderer.addBreak(2, 200, green); renderer.addBreak(200, 1001, red); this.clusterLayer.setRenderer(renderer); _this.map.addLayer(this.clusterLayer); //聚簇图层按级别控制开关 _this.map.on("update-end", ()=> { console.log("当前级别是:"+_this.map.getLevel()) //隐藏聚簇图层 if(_this.map.getLevel()>9) { if(this.clusterLayer) _this.map.removeLayer(this.clusterLayer); _this.map.addLayer(this.graphicsLayerByMarker); } else { if(this.graphicsLayerByMarker) _this.map.removeLayer(this.graphicsLayerByMarker); _this.map.addLayer(this.clusterLayer); } }) //点击单个图标事件 this.graphicsLayerByMarker.on("click", (res)=> { console.log(res.graphic.attributes.mapPoint) console.log(res.graphic.attributes.stCode) console.log(res.graphic.attributes.stName) _this.$http .post(_this.nozzle.getTempData, { data: { stCode: res.graphic.attributes.stCode } }) .then(resP => { let textContent = "<table style='width: 330px;'><tr><td>名称</td><td>" + res.graphic.attributes.stName + "</td></tr>"; for (let item in resP.data.data) { textContent += "<tr>"; for (let arr in resP.data.data[item]) { textContent += "<td>" + resP.data.data[item][arr] + "</td>"; } textContent += "</tr>"; } textContent += "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>"; _this.map.infoWindow.setTitle("详细信息"); _this.map.infoWindow.setContent(textContent); _this.map.infoWindow.show( res.graphic.attributes.mapPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT ); }); }); //聚簇图层按地图级别控制开关 this.clusterLayer.on("click", function(res) { if (res.graphic._graphicsLayer._singles.length == 0) { return; } let d = res; _this.$http .post(_this.nozzle.getTempData, { data: { stCode: d.graphic._graphicsLayer._singles[0].attributes .stCode } }) .then(resP => { let textContent = "<table style='width: 330px;'><tr><td>名称</td><td>" + d.graphic._graphicsLayer._singles[0].attributes .stName + "</td></tr>"; for (let item in resP.data.data) { textContent += "<tr>"; for (let arr in resP.data.data[item]) { textContent += "<td>" + resP.data.data[item][arr] + "</td>"; } textContent += "</tr>"; } textContent += "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>"; _this.map.infoWindow.setTitle("详细信息"); _this.map.infoWindow.setContent(textContent); _this.map.infoWindow.show( d.mapPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT ); }); }); } else { message(response); } }) .catch(response => { message(response); }); } ) .catch(err => { // handle any script or module loading errors // console.error(err); }); }, //显示cluster聚簇界面 showCluster(clusterData) { //初始化kkLayer if (this.source) { this.source.clear(); } this.source = new SourceVector({}); //初始化kkLayer if (this.vectorSource) { this.vectorSource.clear(); } this.vectorSource = new SourceVector({ wrapX: false, }); this.vector = new LayerVector({ source: this.vectorSource, style: feature => { return this.getStyleOfCar(feature); } }); var cell, resultwkt = ""; var feature; var keydataStruct; for (var i = 0; i < clusterData.length; i++) { cell = clusterData[i]; if (cell.lon != null && cell.lat != null) { resultwkt = "POINT(" + cell.lon + " " + cell.lat + ")"; } feature = new FormatWKT().readFeature(resultwkt); //车辆报警缓存状态--判断逻辑是下面两个字段只要有一个不为null,就是报警状态 feature.lon = cell.lon; feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 this.vectorSource.addFeature(feature) this.source.addFeature(feature); } this.clusterSource = new Cluster({ distance: 100, source: this.source }); var styleCache = {}; this.layer = new LayerVector({ source: this.clusterSource, //source: this.source, style: feature => { var size = feature.get("features").length; var currentFeature = feature.get("features"); if (size > 200) { return new Style({ text: new Text({ text: size.toString(), font: "bold 12px 微软雅黑", fill: new Fill({ color: "#8A2BE2" }), textAlign: "center", //textBaseline: "top" }), image: new Icon({ src: "https://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png" }) /* image: new Circle({ radius: 18, stroke: new Stroke({ color: "#fff" }), fill: new Fill({ color: "#3399CC" }) }) */ }); } else if (size > 2) { return new Style({ text: new Text({ text: size.toString(), font: "bold 12px 微软雅黑", fill: new Fill({ color: "green" }), textAlign: "center", //textBaseline: "top" }), image: new Icon({ src: "https://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png" }) /* image: new Circle({ radius: 18, stroke: new Stroke({ color: "#fff" }), fill: new Fill({ color: "#3399CC" }) }) */ }); } else { return this.getStyleOfCar(currentFeature[0]); } } }); //?要判断currentZoom加哪一个 if(this.currentZoom>=10) this.map.addLayer(this.vector); else this.map.addLayer(this.layer); }, getStyleOfCar(feature) { return new Style({ image: new Icon({ src: "https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png" }) }); }, createOlMap() { /* let picBaseUrl ="https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"; let blue =picBaseUrl + "BluePin1LargeB.png" let green = picBaseUrl + "GreenPin1LargeB.png" let red = picBaseUrl + "RedPin1LargeB.png" */ //加载地图自定义图标 var view = new View({ projection: "EPSG:4326", //使用这个坐标系 center: [114, 30], zoom: 5, maxZoom: 15 }); var mapcontainer = this.$refs.rootmap; this.arcgiswhiteMap= new XYZ({ url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer/tile/{z}/{y}/{x}" }) this.arcgisMap=new XYZ({ url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" }) this.map = new Map({ target: mapcontainer, layers: [ new TileLayer({ source: this.arcgisMap }) ], view: view }); //添加面板 this.menu_overlay = new Overlay({ element: document.getElementById("popup"), positioning: "center-left", offset:[20,0] }); this.menu_overlay.setVisible(false); this.map.addOverlay(this.menu_overlay) this.REFSFunctionToGis(!this.switchStatusData); //定义无聚簇的layer /* this.vectorSource = new SourceVector({ //features: this.Features wrapX: false, }); this.vector = new LayerVector({ source: this.vectorSource, style: feature => { return this.getStyleOfCar(feature); } }); */ // this.map.addLayer(this.vector); this.$http .post(this.nozzle.listStationBase, { data: { /* platformCode:projectNo */ } }) .then(response => { console.log(response) if (response.data.code === 1) { this.showCluster(response.data.data); } }) //鼠标监听 //鼠标点击事件 this.map.on("click", e => { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); var pixel = this.map.getEventPixel(e.originalEvent); var feature = this.map.forEachFeatureAtPixel(pixel, function( feature, layer ) { return feature; }); if (feature) { //捕捉到要素后,进行后续操作,如弹出要素信息 // this.addPopupContent(e.coordinate, feature.values_.features); if ( !!feature.get("features") && typeof feature.get("features") != "undefined" ) { if (feature.get("features").length == 1) { console.log("点击了单个点"+e.coordinate) var cell = feature.values_.features[0]; this.showOlPanel(cell) /* var cell = feature.values_.features[0]; this.popBox.title = cell.idNumber; this.popBox.carId = cell.vehicleId; this.popBox.carStatus = cell.onlineStatus; this.popBox.PopBoxVisible = true; */ } //点击的是聚簇图标,展示统计信息 else { console.log("点击了聚簇"+e.coordinate) this.map.getView().setCenter([e.coordinate[0],e.coordinate[1]]) this.map.getView().setZoom(10) } } else { //点击的是vector图层的feature console.log(feature) //开始展示属性 this.showOlPanel(feature) } } }); //鼠标移动事件 this.map.on("pointermove", function(evt) { if (evt.map.hasFeatureAtPixel(evt.pixel)) { evt.map.getTargetElement().style.cursor = "pointer"; } else { evt.map.getTargetElement().style.cursor = ""; } }); //鼠标移动事件 this.map.on("moveend", evt=> { var zoom=this.map.getView().getZoom() console.log(zoom) if(zoom>=10&&this.currentZoom<10) /* if(this.map.getView().getZoom()>10) */ { this.map.removeLayer(this.layer) this.map.addLayer(this.vector); } else if(zoom<10&&this.currentZoom>=10) { this.map.removeLayer(this.vector) this.map.addLayer(this.layer); } else { } this.currentZoom=zoom }); }, closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); }, //openlayer属性框 showOlPanel(feature) { this.$http .post(this.nozzle.getTempData, { data: { stCode: feature.stCode } }) .then(resP => { console.log(resP) //开始展示属性字段 let textContent = ""; let closeDOM = "<a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a>"; textContent = "<div style='color: #fff !important;font-size: 17px;font-weight: bold;margin-left: 9px;'>" + "详细信息" + "</div> <a style='color:#fff;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a></br> "; textContent += "<div style='border-top: 1px solid #3F586F !important;border: none;margin-top: 6px;margin-bottom: 6px;'></div>"; //添加html拼接---缩放至 textContent += "<div style='color: #29818a;position:absolute;font-size:9px;line-height:30px;margin-left: 11px;margin-top: -44px;width:69px;cursor: pointer;text-decoration:underline' onclick='historyData(" + feature.stCode + ")'>" + "历史数据" + "</div>"; textContent += '<div style="width:260px;height:30px;color: #fff;">' + '<div style="font-size:14px;line-height:30px; margin-left: 11px;margin-top: 5px;position: absolute;">' + '名称' + "</div>" + '<div style="font-size:14px;line-height:30px;margin-top: 5px;position: absolute;margin-left: 179px;">' + feature.stName+ "</div>" + "</div>"; let data = {} let currentData=resP.data.data; for(let kx=0;kx<currentData.length;kx++) { data[currentData[kx].name]=currentData[kx].value } console.log(data) textContent += '<div style="width:300px;">'; for (let key in data) { textContent += '<div style="width:260px;height:30px;color: #fff;">' + '<div style="font-size:14px;line-height:30px; margin-left: 11px;margin-top: 5px;position: absolute;">' + key + "</div>" + '<div style="font-size:14px;line-height:30px;margin-top: 5px;position: absolute;margin-left: 179px;">' + data[key] + "</div>" + "</div>"; } textContent += "</div>"; textContent = closeDOM + textContent; textContent += "<div style='bottom: 50%;left: -4px;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #3364bd;width: 0; height: 0; position: absolute;transform: translate(-50%, 0);'></div>"; //提取公共方法,放缩地图、显示属性等 document.getElementById("popup").innerHTML = textContent; this.menu_overlay.setPosition([feature.lon,feature.lat]); this.map.getView().setCenter([feature.lon,feature.lat]); }) }, //初始化地图 createMap(projectNo) { let _this = this; loadModules([ "dojo/parser", "dojo/ready", "dojo/_base/array", "esri/Color", "dojo/dom-style", "dojo/query", "esri/map", "esri/dijit/InfoWindow", "esri/request", "esri/graphic", "esri/geometry/Extent", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/PictureMarkerSymbol", "esri/renderers/ClassBreaksRenderer", "esri/layers/GraphicsLayer", "esri/SpatialReference", "esri/dijit/PopupTemplate", "esri/geometry/Point", "esri/geometry/webMercatorUtils", "esri/layers/ArcGISTiledMapServiceLayer", "extras/ClusterLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ]) .then( ([ parser, ready, arrayUtils, Color, domStyle, query, Map, InfoWindow, esriRequest, Graphic, Extent, SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer, GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils, ArcGISTiledMapServiceLayer, ClusterLayer ]) => { // create map with the given options at a DOM node w/ id 'mapNode' _this.map = new Map("previewOfSiteStatusMaps", { center: [114, 30], zoom: 5, logo: false, slider: false, maxZoom: 15 }); this.arcgiswhiteMap = new ArcGISTiledMapServiceLayer( //"http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer" ); _this.map.addLayer(this.arcgiswhiteMap); /* this.arcgiswhiteMap.hide() */ this.arcgisMap = new ArcGISTiledMapServiceLayer( /* "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" */ "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" ); _this.map.addLayer(this.arcgisMap); // console.log("zzzzzzzzzzz " + this.switchStatusData); this.REFSFunctionToGis(!this.switchStatusData); /* _this.map.on("zoom-end", function() { }); _this.map.on("click", function(e) { }); */ _this.map.on("load", function() { _this.$http .post(_this.nozzle.listStationBase, { data: { platformCode:projectNo } }) .then(response => { console.log(response) if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; let photoInfo = {}; var imagealone={}; let position ={}; if(this.graphicsLayerByMarker) this.graphicsLayerByMarker.clear() this.graphicsLayerByMarker = new GraphicsLayer();//点 let wgs = new SpatialReference({ wkid: 4326 }); //第一步先初始化好点图层graphicsLayerByMarker var Marker_point; let markerPng; var marksymbol = new PictureMarkerSymbol( picBaseUrl + "BluePin1LargeB.png", 32, 32 ).setOffset(0, 15); for(var k=0;k<response.data.data.length;k++) { if(response.data.data[k].lon&&response.data.data[k].lon!="0") { Marker_point = new Point( parseFloat(response.data.data[k].lon), parseFloat(response.data.data[k].lat), wgs ); var attr = { stCode:response.data.data[k].stCode, stName:response.data.data[k].stName, mapPoint:Marker_point }; markerPng = new Graphic(Marker_point,marksymbol,attr); this.graphicsLayerByMarker.add(markerPng); } } //初始化结束 photoInfo.data = arrayUtils.map( response.data.data, function(p) { /* if(p.lon!=null){ } */ let latlng = new Point( parseFloat(p.lon), parseFloat(p.lat), wgs ); let webMercator = webMercatorUtils.geographicToWebMercator( latlng ); let attributes = { stName: p.stName, stCode: p.stCode }; return { x: webMercator.x, y: webMercator.y, attributes: attributes }; } ); let popupTemplate = new PopupTemplate({ title: "", fieldInfos: [ { fieldName: "stName", label: "名称:", visible: true }, { fieldName: "stCode", label: "编号:", visible: true } ] }); if(this.clusterLayer) this.clusterLayer.clear() this.clusterLayer = new ClusterLayer({ data: photoInfo.data, distance: 100, id: "clusters", labelColor: "#fff", labelOffset: 10, resolution: _this.map.extent.getWidth() / _this.map.width, singleColor: "#888", singleTemplate: popupTemplate }); let defaultSym = new SimpleMarkerSymbol().setSize(4); let renderer = new ClassBreaksRenderer( defaultSym, "clusterCount" ); let blue = new PictureMarkerSymbol( picBaseUrl + "BluePin1LargeB.png", 32, 32 ).setOffset(0, 15); let green = new PictureMarkerSymbol( picBaseUrl + "GreenPin1LargeB.png", 64, 64 ).setOffset(0, 15); let red = new PictureMarkerSymbol( picBaseUrl + "RedPin1LargeB.png", 72, 72 ).setOffset(0, 15); renderer.addBreak(0, 2, blue); renderer.addBreak(2, 200, green); renderer.addBreak(200, 1001, red); this.clusterLayer.setRenderer(renderer); _this.map.addLayer(this.clusterLayer); //聚簇图层按级别控制开关 _this.map.on("update-end", ()=> { console.log("当前级别是:"+_this.map.getLevel()) //隐藏聚簇图层 if(_this.map.getLevel()>9) { if(this.clusterLayer) _this.map.removeLayer(this.clusterLayer); _this.map.addLayer(this.graphicsLayerByMarker); } else { if(this.graphicsLayerByMarker) _this.map.removeLayer(this.graphicsLayerByMarker); _this.map.addLayer(this.clusterLayer); } _this.map.on("update-end", () => { console.log("当前级别是:" + _this.map.getLevel()); //隐藏聚簇图层 if (_this.map.getLevel() > 9) { if (clusterLayer) _this.map.removeLayer(clusterLayer); _this.map.addLayer(graphicsLayerByMarker); } else { if (graphicsLayerByMarker) _this.map.removeLayer(graphicsLayerByMarker); _this.map.addLayer(clusterLayer); } }); //点击单个图标事件 this.graphicsLayerByMarker.on("click", (res)=> { console.log(res.graphic.attributes.mapPoint) console.log(res.graphic.attributes.stCode) console.log(res.graphic.attributes.stName) _this.$http .post(_this.nozzle.getTempData, { data: { stCode: res.graphic.attributes.stCode } }) .then(resP => { let textContent = "<table style='width: 330px;'><tr><td>名称</td><td>" + res.graphic.attributes.stName + "</td></tr>"; for (let item in resP.data.data) { textContent += "<tr>"; for (let arr in resP.data.data[item]) { textContent += "<td>" + resP.data.data[item][arr] + "</td>"; } textContent += "</tr>"; } textContent += "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>"; _this.map.infoWindow.setTitle("详细信息"); _this.map.infoWindow.setContent(textContent); _this.map.infoWindow.show( res.graphic.attributes.mapPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT ); }); }); }); //聚簇图层按地图级别控制开关 this.clusterLayer.on("click", function(res) { if (res.graphic._graphicsLayer._singles.length == 0) { return; } let d = res; _this.$http .post(_this.nozzle.getTempData, { data: { stCode: d.graphic._graphicsLayer._singles[0].attributes .stCode } }) .then(resP => { let textContent = "<table style='width: 330px;'><tr><td>名称</td><td>" + d.graphic._graphicsLayer._singles[0].attributes .stName + "</td></tr>"; for (let item in resP.data.data) { textContent += "<tr>"; for (let arr in resP.data.data[item]) { textContent += "<td>" + resP.data.data[item][arr] + "</td>"; } textContent += "</tr>"; } textContent += "<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>"; _this.map.infoWindow.setTitle("详细信息"); _this.map.infoWindow.setContent(textContent); _this.map.infoWindow.show( d.mapPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT ); }); }); } else { message(response); } }) .catch(response => { message(response); }); }); } ) .catch(err => { // handle any script or module loading errors // console.error(err); }); }, // 给与gis的方法调动dome REFSFunctionToGis(type) { if (!type) { //加载黑色arcgis午夜蓝图 let baseLayer = this.map.getLayers().item(0); baseLayer.setSource(this.arcgisMap); } else { //加载蓝色底图 let baseLayer = this.map.getLayers().item(0); baseLayer.setSource(this.arcgiswhiteMap); } } }, computed: { switchStatus: function() { return this.flag; // 直接监听props里的status状态 } }, created() { window.closepopup = this.closepopup; window.historyData = this.historyData; }, mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 // 默认加载所有的平台 this.LoadAllProject(); this.createOlMap() /* this.createMap(""); */ // 默认展示 全部 的请求 // this.ListClick(0, { platformCode: "" }); // 默认加载项目站点覆盖排名 this.loadQuyuPaiMing(); this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); } }; </script> <style scoped> .select { color: #fff; background: rgb(0, 119, 254); } .selectWidth { width: 3.2rem; } #previewOfSiteStatusMaps { width: 100%; height: 100%; position: relative; } .popup { background: url(./../../../static/img/tc_bg_img.png) no-repeat; background-size: 100% 100%; width: 323px; } .earthmap { width: 100%; height: 100%; } .bubble { width: 200px; height: 50px; border: 5px solid gray;; position: relative; } .common { width: 0; height: 0; position: absolute; /* 使用绝对定位 */ left: 50%; transform: translate(-50%, 0); /* 水平居中 */ } .triangle { bottom: 101px; left: -4px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid #3364bd; } .cover { bottom: -13px; border-top: 20px solid gray;; border-right: 20px solid transparent; border-left: 20px solid transparent; } #previewOfSiteStatusLeftTop { /* position: absolute; */ /* left: 0; */ width: 350px; height: 290px; /* top: 0px; */ background: rgba(0, 0, 0, 0.5); z-index: 100; } #previewOfSiteStatusLeftcenter { position: relative; /* left: 0; */ width: 350px; height: 220px; margin-top: 15px; /* top: 305px; */ background: rgba(0, 0, 0, 0.5); z-index: 100; } #previewOfSiteStatusLeftBottom { /* position: absolute; */ /* left: 0; */ width: 350px; height: 290px; margin-top: 15px; /* top: 610px; */ background: rgba(0, 0, 0, 0.5); z-index: 100; } #previewOfSiteStatusRightTop { /* position: absolute; */ /* right: 0; */ width: 350px; height: 290px; /* top: 0px; */ background: rgba(0, 0, 0, 0.5); z-index: 100; } #previewOfSiteStatusRightcenter { /* position: absolute; */ /* right: 0; */ width: 350px; height: 220px; /* top: 305px; */ margin-top: 15px; background: rgba(0, 0, 0, 0.5); z-index: 100; } #previewOfSiteStatusRightBottom { /* position: absolute; */ /* right: 0; */ width: 350px; height: 290px; /* top: 540px; */ margin-top: 15px; background: rgba(0, 0, 0, 0.5); z-index: 100; } .previewOfSiteStatusTitle { width: 100%; height: 40px; line-height: 40px; text-align: left; padding-left: 10px; box-sizing: border-box; background: var(--preSiteTitle); } .previewOfSiteStatusTitleImg { width: 28px; height: 28px; vertical-align: middle; } .previewOfSiteStatusTitleFont { color: rgb(0, 119, 254); vertical-align: middle; } .previewOfSiteStatusTitleBTN { position: absolute; top: 8px; color: var(--eldatebefore); right: 20px; border: 1px solid var(--eldatebefore); height: 26px; line-height: 26px; } .previewOfSiteStatusTitleBTN span { float: left; font-size: 12px; padding: 0 10px; cursor: pointer; height: 100%; border-right: 1px solid var(--eldatebefore); } .previewOfSiteStatusTitleBTN span:nth-child(3) { border-right: none; } #previewOfSiteStatusTop { position: absolute; top: 0; left: 350px; width: calc(100% - 700px); height: 80px; /* background-image: linear-gradient(rgb(11, 20, 29), rgba(11, 20, 29, 0.2)); */ text-align: center; z-index: 99; } .previewOfSiteStatusTopC { display: inline-block; height: 50px; width: 180px; padding: 15px; } .previewOfSiteStatusTopimg { width: 40px; height: 40px; float: left; margin-top: 7px; } .previewOfSiteStatusTopCFont { float: left; height: 50px; width: 140px; padding-left: 10px; box-sizing: border-box; line-height: 0px; } .previewOfSiteStatusTopCData { width: 100%; height: 35px; line-height: 35px; display: inline-block; text-align: left; color: var(--preTopDatatxt); font-size: 20px; } .previewOfSiteStatusTopCMS { width: 100%; height: 15px; line-height: 15px; display: inline-block; text-align: left; font-size: 12px; color: white; } .previewOfSiteStatusCentent { width: 100%; height: calc(100% - 40px); background: var(--preSiteCentent); overflow: hidden; } .previewOfSiteStatusCentent .previewButton { padding-top: 0.05rem; } .previewOfSiteStatusCentent .previewButton .text { text-align: left; color: var(--white); } .previewButton .previewHistory { display: flex; flex-wrap: wrap; /* width: 100%; */ margin: 0 3%; justify-content: space-between; } .previewButton .previewHistory .previewtext { cursor: pointer; width: 48%; /* height: 0.213333rem; */ margin-top: 0.1125rem; /* margin-left: 2%; */ /* line-height: 0.213333rem; */ line-height: 24px; /* font-size: 0.093333rem; */ font-size: 12px; text-align: center; border: 1px solid var(--eldatebefore); color: #fff; background: var(--pretextbg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* .previewButton .previewHistory .previewtext:nth-child(2n) { /* margin-left: 0.08rem; */ /* margin-right: 2%; */ /* } */ */ /* 项目选择A */ #previewOfSiteStatusCentent1 { width: 100%; height: calc(100% - 5px); overflow: auto; margin: 0; padding-top: 10px; box-sizing: border-box; } .previewOfSiteStatusCentent1Li { width: auto; height: 32px; line-height: 26px; border: 1px solid rgb(0, 119, 254); float: left; padding: 3px 18px; color: rgb(0, 119, 254); margin: 5px 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 14px; box-sizing: border-box; } .selectPreviewOfSiteStatusCentent1Li { border: 1px solid rgb(255, 217, 0); color: rgb(255, 217, 0); } /* 项目选择B */ /* 平台站点数量及状态统计A */ #previewOfSiteStatusCentent2_1, #previewOfSiteStatusCentent2_2 { width: 100%; height: 50%; float: left; } .previewOfSiteStatusCentent2P { color: rgb(0, 119, 254); float: left; height: 24px; line-height: 24px; padding-left: 15px; font-size: 14px; margin-top: 20px; font-size: 16px; } .previewOfSiteStatusCentent2C { width: 100%; height: 80px; float: left; } .previewOfSiteStatusCentent2CList { height: 100%; width: 33.3%; float: left; } .previewOfSiteStatusCentent2CListData { width: 100%; text-align: center; height: 40px; line-height: 40px; float: left; color: var(--preTopDatatxt); font-size: 24px; } .previewOfSiteStatusCentent2CListFont { width: 100px; text-align: center; height: 20px; line-height: 20px; float: left; } .previewOfSiteStatusCentent2CListFontImg { width: 18px; height: 18px; vertical-align: middle; } .previewOfSiteStatusCentent2CListFonts { color: rgb(0, 119, 254); vertical-align: middle; font-size: 15px; } /* 平台站点数量及状态统计B */ /* 项目站点覆盖排名A */ #previewOfSiteStatusCentent3 { width: 100%; height: 100%; overflow: auto; } .previewOfSiteStatusCentent3Li { display: flex; width: 100%; height: 40px; line-height: 0; /* background: rgba(47, 53, 77, 0.5); */ } .previewOfSiteStatusCentent3LiName { width: 90px; color: var(--white); text-align: left; height: 40px; line-height: 40px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; box-sizing: border-box; padding-left: 5px; } .previewOfSiteStatusCentent3LiCharts { height: 12px; border: 1px solid rgb(0, 119, 254); -webkit-box-sizing: border-box; box-sizing: border-box; flex: 1; margin-top: 14px; margin-left: 5px; position: relative; } .previewOfSiteStatusCentent3LiCharts2 { position: absolute; top: 0; left: 0; background: url("./../../../static/img/JDT.png") repeat-x; height: 10px; } .previewOfSiteStatusCentent3LiData { width: 70px; color: var(--preTopDatatxt); height: 40px; line-height: 40px; margin-left: 5px; white-space: nowrap; } .previewOfSiteStatusCentent3LiDW { color: rgb(0, 119, 254); } /* 项目站点覆盖排名B */ /* 项目设备总览A */ #previewOfSiteStatusCentent4 { width: 100%; height: 100%; } #previewOfSiteStatusCentent4eCharts { width: 250px; height: 250px; float: left; } #previewOfSiteStatusCentent4Font { width: 100px; height: 100%; float: left; } #previewOfSiteStatusCentent4Font1 { width: 100%; height: 50%; float: left; padding-top: 75px; box-sizing: border-box; } #previewOfSiteStatusCentent4Font2 { width: 100%; height: 50%; float: left; padding-top: 5px; box-sizing: border-box; } .previewOfSiteStatusCentent4Font1P1 { float: left; width: 100%; height: 24px; line-height: 24px; color: rgb(255, 217, 0); } .previewOfSiteStatusCentent4Font1P2 { float: left; width: 100%; height: 24px; line-height: 24px; color: var(--white); vertical-align: middle; } .previewOfSiteStatusCentent4Font1P2S { float: left; width: 16px; height: 16px; border-radius: 10px; background: rgb(255, 217, 0); vertical-align: middle; } .previewOfSiteStatusCentent4Font2P1 { float: left; width: 100%; height: 24px; line-height: 24px; color: rgb(0, 119, 254); } .previewOfSiteStatusCentent4Font2P2 { float: left; width: 100%; height: 24px; line-height: 24px; color: var(--white); vertical-align: middle; } .previewOfSiteStatusCentent4Font2P2S { float: left; width: 16px; height: 16px; border-radius: 10px; background: rgb(0, 119, 254); vertical-align: middle; } /* 项目设备总览B */ /* 项目设备环比增长A */ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; } /* 项目设备环比增长B */ /* 站点实时报警A */ #previewOfSiteStatusCentent6 { width: 100%; height: 100%; /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } #GisRightCententBox2UL { width: 100%; height: auto; } .GIsRightWaringList { width: 100%; height: 30px; line-height: 30px; color: white; box-sizing: border-box; border-bottom: 1px solid cadetblue; } .GIsRightWaringList:hover { background: rgb(0, 119, 254); cursor: pointer; } .GIsRightWaringListNo { width: 40%; float: left; font-size: 14px; color: var(--white); } .GIsRightWaringListName { width: 45%; float: left; font-size: 14px; color: var(--white); } .GIsRightWaringListType { width: 15%; float: left; font-size: 14px; } .red { color: red; } .Yellow { color: var(--diatitle); } .NoBaoJing { position: relative; top: 50px; } /* 站点实时报警B */ </style> <style> .esriPopup .sizer { width: 300px; } /* infowindow相关 */ .esriPopup .outerPointer, .contentPane, .actionsPane { background-color: rgba(17, 32, 39, 0.8) !important; color: #fff !important; } .esriPopup .titlePane { background-color: #112027 !important; color: #fff !important; opacity: 0.8 !important; } .esriPopup .contentPane { padding: 0px 6px 6px 10px !important; } .esriPopup .titleButton.close { opacity: 1 !important; } /* .esriPopup .titleButton.closeclose:hover{ opacity:0!important; } */ .esriViewPopup .headerBox { overflow: hidden; } .esriViewPopup .header { color: #fff !important; font-size: 14px; } .esriPopup .titleButton.maximize { display: none; } .esriViewPopup .mainSection .attrTable td, td.attrName { color: #fff !important; font-size: 12px; } .esriViewPopup .hzLine { border-top: 1px solid #3f586f !important; } .sizer { width: 350px !important; } .esriPopup a { color: #fff; } .actionList { display: none; } .boxmain, .boxmainR { position: absolute; top: 0; bottom: 0; width: 350px; overflow-x: hidden; overflow-y: auto; z-index: 100; } .boxmain { left: 0; } .boxmainR { right: 0; } </style>