<template> <div id="previewOfSiteStatus"> <div id="previewOfSiteStatusMaps"> <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-show="NoBaoJingData" class="NoBaoJing">暂无报警数据</span> <div class="GIsRightWaringList" v-for="(item, index) in WaringList" :key="index" > <!-- @click="WaringListC(item)" --> <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> </div> </div> </div> </div> </div> </div> </div> </template> <script> import { message } from "./../../util/item"; import countTo from "vue-count-to"; //引入数字滚动插件 import { loadModules } from "esri-loader"; export default { name: "previewOfSiteStatus", components: { countTo }, //加载数字滚动插件 data: function() { return { 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: "", //选取的平台的编号 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: { // 获取所有平台 LoadAllProject() { this.$http .post( this.nozzle.userGroupRelaGetGroups + "?&pageNo=" + 1 + "&typeStr=" + "&pageSize=" + 999 ) .then(response => { if (response.status === 200) { this.ProjectList = this.ProjectList.concat(response.data.data); } else { message(response); } }) .catch(response => { message(response); }); }, // 根据平台渲染站点统计 loadSiteNumForOroject() { this.$http .post(this.nozzle.getSiteNum, { data: { platform: this.ChecksplatformCode, type: "" } }) .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; this.$http .post(this.nozzle.getSiteNum, { data: { platform: item.platform, type: item.type } }) .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 === 200) { 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"]; // 限制数组的长度不超过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.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++; } }, //初始化地图 createMap() { let _this = this; loadModules([ "dojo/parser", "dojo/ready", "dojo/_base/array", "esri/Color", "dojo/dom-style", "dojo/query", "esri/map", "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, 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: [100, 35], zoom: 5, logo: false, slider: false }); let Main_Map = new ArcGISTiledMapServiceLayer( "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer" ); _this.map.addLayer(Main_Map); /* _this.map.on("zoom-end", function() { }); _this.map.on("click", function(e) { }); */ _this.map.on("load", function() { _this.$http .post(_this.nozzle.listStationBase, { data: {} }) .then(response => { if (response.data.code === 200) { let photoInfo = {}; let wgs = new SpatialReference({ wkid: 4326 }); 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 } ] }); let 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 picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; 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); clusterLayer.setRenderer(renderer); _this.map.addLayer(clusterLayer); 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); }); } }, mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 // 默认加载所有的平台 this.LoadAllProject(); this.createMap(); // 默认展示 全部 的请求 // this.ListClick(0, { platformCode: "" }); // 默认加载项目站点覆盖排名 this.loadQuyuPaiMing(); this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 50); }); // 默认从本地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; } #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.2rem; } .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); } .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 { width: 100%; height: 40px; line-height: 0; /* background: rgba(47, 53, 77, 0.5); */ } .previewOfSiteStatusCentent3LiName { float: left; 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 { float: left; height: 12px; border: 1px solid rgb(0, 119, 254); -webkit-box-sizing: border-box; box-sizing: border-box; width: 200px; 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 { float: left; color: var(--preTopDatatxt); height: 40px; line-height: 40px; margin-left: 5px; } .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>