<template> <div id="previewOfSiteStatus"> <div id="previewOfSiteStatusMaps"> <div ref="rootmap" id="earthmap" class="earthmap"> <img src="./../../../static/img/fw_btn.png" alt class="fwStyle" @click="fwClick" /> </div> <div id="popup" class="popup" v-show="featurePopVis"> <div class="lishisousuohead"> <a style="color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer;" @click="closepopup()" >X</a > <div class="xiangxixinxi"> 详细信息 </div> <div style="margin-bottom: 6px;"></div> <div class="lishishuju" @click="historyData(featureData.stCode)"> 历史数据 </div> </div> <div class="lishisousuobeibu"> <div class="beibucolor"> <div class="mingcheng"> 名称: </div> <div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;" > {{ featureData.stName }}: </div> </div> </div> <div class="lishisousuobeibu"> <div class="beibucolor"> <div style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;" > 观测时间: </div> <div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;" > {{ featureData.tt }}: </div> </div> </div> <div class="bgcwidth"> <div v-for="(item, index) in resPData" :key="index" style="width:260px;height:33px;color: darkslategray;line-height:33px;" > <div class="white" style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;" > {{ item.name }} </div> <div class="white" style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left:179px;" > {{ item.value }} </div> </div> </div> <div class="triangle common"></div> </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" > <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> --> </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 id="RightCententBox"> <div class="areaListNoList" v-for="(item, index) in areaList" :key="index" @mouseover="mouseOver2(index)" @mouseleave="mouseLeave2(index)" > <el-tooltip ref="tooltip2" class="item" effect="dark" :content="`${item.name}项目的设备数为:${item.count}`" placement="top" > <div> <span class="areaListNo">{{ item.name }}</span> <span class="areaListName">{{ item.count }}</span> </div> </el-tooltip> </div> </div> </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> </div> <!-- 弹出层 --> <el-dialog class="page-dialog-site" title="历史数据表格" :visible.sync="dialogVisible" width="60%" :append-to-body="true" > <div id="NFSHistoryData"> <div id="TimeBoxs"> <span class="timeTM">时间:</span> <el-date-picker v-model="TimeBoxValue" type="daterange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd" @change="TimeBoxChange" ></el-date-picker> <img src="../../../static/img/NFShouSuo.png" alt class="ButtonImgs" @click="Search()" /> </div> <div id="NFSHistoryData2"> <el-tabs v-model="HistoryBox" @tab-click="HistoryHandleClick"> <el-tab-pane label="表格展示" name="DateGrid" class="timeTM"> <el-table :data="HistoryTableData" style="width: 100%; height: calc(100% - 45px)" v-loading="loading3" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.3)" > <template v-for="(col, index) in NFSNowDataTableHead"> <el-table-column :prop="col.field" :label="col.title" :key="index" show-overflow-tooltip :render-header="labelHead" ></el-table-column> </template> </el-table> <el-pagination @size-change="HistorySizeChange" @current-change="HistoryCurrentChange" :current-page="HistoryPage" :page-sizes="[10, 20, 50, 100]" :page-size="HistorySize" layout="total, sizes, prev, pager, next, jumper" :total="DatagridDataLength" :hide-on-single-page="HRPageHide" style="margin-top: 10px" ></el-pagination> </el-tab-pane> <el-tab-pane label="图形展示" name="Charts" class="timeTM"> <div id="YinziSelect"> 上因子: <el-select v-model="SiteYinzi" placeholder="请选择" @change="YinZiUp" > <el-option v-for="item in SiteYinziAll" :key="item.codeAscii" :label="item.codeProperty" :value="item.codeAscii" ></el-option> </el-select > 下因子: <el-select v-model="SiteYinzi2" placeholder="请选择" @change="YinZiDown" > <el-option v-for="item in SiteYinziAll2" :key="item.codeAscii" :label="item.codeProperty" :value="item.codeAscii" ></el-option> </el-select> </div> <div id="HistoryEchart"></div> </el-tab-pane> </el-tabs> </div> </div> </el-dialog> </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 GeoJSON from "ol/format/GeoJSON"; 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"; import echarts from "echarts"; export default { name: "previewOfSiteStatus", components: { countTo }, //加载数字滚动插件 props: { flag: { type: Boolean, default() { return false; } } }, data: function() { return { featureData: {}, resPData: [], featurePopVis: false, TimeBoxValue: [ this.moment() .subtract("days", 3) .format("YYYY-MM-DD"), this.moment().format("YYYY-MM-DD") ], //起止日期 pickerOptions: { shortcuts: [ { text: "最近三天", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 3); picker.$emit("pick", [start, end]); } }, { text: "最近一周", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); } }, { text: "最近一个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); } } ] }, //时间框的快捷选项 HistoryBox: "DateGrid", //tabs的默认展示未第一个 表格展示 HistoryTableData: [], //历史数据表格数据 HistoryPage: 1, //内页分页默认显示页 DatagridDataLength: 0, //内页分页上显示的数据总条数 HistorySize: 10, //内页分页上显示的每页的条数 HRPageHide: this.DatagridDataLength > 10 ? false : true, //内页分页默认不显示 当页数大于1 的时候在显示 SiteYinzi: "", //上因子 SiteYinzi2: "", //下因子 SiteYinziZn: "", //上因子中文名 SiteYinzi2ZN: "", //下因子中文名 SiteYinziAll: [], //上因子渲染数据 SiteYinziAll2: [], //下因子渲染数据 // myChart: {}, //echarts的配置项 myChart1: {}, //echarts的配置项 ChartsX: "", //X轴数据 ChartsUp: "", //上因子图形数据 ChartsDown: "", //下因子图形数据 //↓↓↓↓↓↓↓↓↓↓页面渲染逻辑以及增加页面流畅的辅助性功能↓↓↓↓↓↓↓↓↓↓ FirstOn: true, //进来页面未点击历史图形的时候为true, 点击历史图形后为false,避免因子与图形接口多次渲染导致页面卡顿。 DateisChange: false, //当时间段的时间进行变换后,切换tab时应该重新请求数据,否则不用数据刷新,默认时间未改动为false。 YinZiChange: true, //判断因子是否改变过,如果改变过则重新请求echarts数据。 loading: false, loading2: false, loading3: false, NFSNowDataTableHead: [], //实时数据表格表头数据 //当前项目code currentPlatformCode: "", //当前站点name currentSiteName: "", //当前站点code currentSiteNo: "", //显示当前站点下的信息 dialogVisible: false, //控制弹框的显隐 // //////////// ///////////// ////////////// menu_overlay: null, currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 timer2: {}, // 顶部中间汇总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: "", //现有设备总数 titlearr: [], valuearr: [], myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], areaList: [], // 各地区站点统计 NoBaoJingData: true, //有无报警数据,有就为false // 站点实时报警B map: "", namelist: [ { name: "全部", platform: "", type: "", select: true }, { name: "合同", platform: "", type: "0", select: false }, { name: "临测", platform: "", type: "1", select: false } ] }; }, methods: { //计算中心点 getCenterFromArray(clusterData) { var north = -90; var south = 90; var east = -180; var west = 180; var cell; for (var i = 0; i < clusterData.length; i++) { cell = clusterData[i]; if (cell.lat && cell.lon) { //计算边框,用于切换项目定位中心点 north = Math.max(parseFloat(cell.lat), north); south = Math.min(parseFloat(cell.lat), south); east = Math.max(parseFloat(cell.lon), east); west = Math.min(parseFloat(cell.lon), west); } } return [(east + west) / 2, (north + south) / 2]; }, //复位功能 fwClick() { this.map.getView().setCenter([114, 30]); this.map.getView().setZoom(5); }, //根据当前项目后台坐标计算出的中心飞行到指定城市 flyToCity() { console.log("经纬度最大边框是:" + this.north); console.log("经纬度最大边框是:" + this.south); console.log("经纬度最大边框是:" + this.east); console.log("经纬度最大边框是:" + this.west); this.map .getView() .setCenter([ (this.east + this.west) / 2, (this.north + this.south) / 2 ]); this.map.getView().setZoom(10); }, //项目图层切换 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); this.currentSiteNo = stCode; this.dialogVisible = true; setTimeout(() => { // this.LoadGridTitleData(); this.loadDataGridData(); }, 0); }, // 获取所有平台 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.getEquipStatistics, { data: { platformCode: this.ChecksplatformCode } }) .then(response => { if (response.status === 200) { // this.XianYou = response.data.data.total; // console.log(response.data.data); this.titlearr = response.data.data.title; this.valuearr = response.data.data.value; this.loadRegionEcharts(this.titlearr, this.valuearr); } else { message(response); } }) .catch(response => { message(response); }); }, // 加载 各地区站点统计 loadQuYuSheBeiHuanBi() { this.$http .post(this.nozzle.getAreaStatistics, { data: { platformCode: this.ChecksplatformCode } }) .then(response => { if (response.data.code === 1) { // console.log(response); this.areaList = response.data.data; } 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); if ( this.ProjectList[index]["areaCode"] && this.ProjectList[index]["groupNo"] != "" ) this.gotoProgramArea(this.ProjectList[index]["areaCode"]); else { this.fwClick(); if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } } // 限制数组的长度不超过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); if (item1["areaCode"] && item1["groupNo"] != "") this.gotoProgramArea(item1["areaCode"]); else { this.fwClick(); if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } } // 根据平台渲染站点数量统计及状态统计 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(titlearr, valuearr) { // console.log(data); // 基于准备好的dom,初始化echarts实例 let myChart1 = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 // this.myChart1.clear(); let option = { xAxis: { type: "category", data: titlearr, axisLine: { color: "#30919a" }, axisLabel: { show: true, textStyle: { color: "#30919a" } } }, yAxis: { type: "value", axisLabel: { show: true, textStyle: { color: "#30919a" } } }, series: [ { type: "bar", showBackground: true, data: valuearr, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0.8, color: "#30919a" }, { offset: 0, color: "#5af9f4" }, { offset: 1, color: "#081d28" } ]) }, emphasis: { itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#2378f7" }, { offset: 0.7, color: "#2378f7" }, { offset: 1, color: "#83bff6" } ]) } } } ], calculable: true, tooltip: { trigger: "axis" } }; myChart1.setOption(option); }, // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { box.scrollTop++; } }, ScrollUp2() { var box = document.getElementById("previewOfSiteStatusCentent5"); var con1 = document.getElementById("RightCententBox"); 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(); } }, mouseOver2(index) { if (this.timer2) { clearInterval(this.timer2); this.$refs.tooltip2[index].handleShowPopper(); } }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, mouseLeave2(index) { this.$refs.tooltip2[index].handleClosePopper(); this.timer2 = setInterval(this.ScrollUp2, 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); }); }, gotoProgramArea(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } /* let response = await fetch( "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ this.$http .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { // console.log(response); let dataJson = response.data.features[0]; // console.log(dataJson); let areaFeature = new GeoJSON().readFeatures(dataJson); this.vectorSourceArea = new SourceVector({ features: areaFeature }); this.vectorArea = new LayerVector({ renderMode: "image", maxResolution: 2, zIndex: 2, source: this.vectorSourceArea, style: feature => { return new Style({ stroke: new Stroke({ color: "#8A2BE2", lineCap: "butt", width: 3 }) }); } }); this.map.addLayer(this.vectorArea); //定位过去 //开始根据routeFeature定位 /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ var extent = areaFeature[0].getGeometry().getExtent(); this.map.getView().fit(extent, this.map.getSize()); }); }, gotoProgramArea1(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } /* let response = await fetch( "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ this.$http .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { console.log(response); let dataJson = response.data.features[0]; console.log(dataJson); let areaFeature = new GeoJSON().readFeatures(dataJson); this.vectorSourceArea = new SourceVector({ features: areaFeature }); this.vectorArea = new LayerVector({ renderMode: "image", maxResolution: 2, zIndex: 2, source: this.vectorSourceArea, style: feature => { return new Style({ stroke: new Stroke({ color: "#8A2BE2", lineCap: "butt", width: 3 }) }); } }); this.map.addLayer(this.vectorArea); //定位过去 //开始根据routeFeature定位 /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ var extent = areaFeature[0].getGeometry().getExtent(); this.map.getView().fit(extent, this.map.getSize()); }); }, //显示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; this.north = -90; this.south = 90; this.east = -180; this.west = 180; 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); //站点属性记录 feature.lon = cell.lon; feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; feature.tt = cell.tt; feature.code = cell.code; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 this.vectorSource.addFeature(feature); this.source.addFeature(feature); //计算边框,用于切换项目定位中心点 this.north = Math.max(parseFloat(cell.lat), this.north); this.south = Math.min(parseFloat(cell.lat), this.south); this.east = Math.max(parseFloat(cell.lon), this.east); this.west = Math.min(parseFloat(cell.lon), this.west); } this.clusterSource = new Cluster({ distance: 40, 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]); } } }); //飞行到指定的城市项目中心点 // this.flyToCity() //?要判断currentZoom加哪一个 if (this.currentZoom >= 8) 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: 19 }); 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.arcgiswhiteMap = new XYZ({ url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}" }); this.arcgisMap = new XYZ({ /* url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" */ url: "http://map.geoq.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); } //点击的是聚簇图标,展示统计信息 else { /* console.log("点击了聚簇"+e.coordinate) */ var cell; var cells = feature.values_.features; for (var cc = 0; cc < cells.length; cc++) { if (cells[cc].code) { cell = cells[cc].code; break; } } this.gotoProgramArea(cell); } } 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(); if (zoom >= 8 && this.currentZoom < 8) { /* if(this.map.getView().getZoom()>10) */ this.map.removeLayer(this.layer); this.map.addLayer(this.vector); //添加行政边框 if (this.vectorArea) { this.vectorArea.setVisible(true); } } else if (zoom < 8 && this.currentZoom >= 8) { this.map.removeLayer(this.vector); this.map.addLayer(this.layer); //清除行政边框 if (this.vectorArea) { this.vectorArea.setVisible(false); } } else { } this.currentZoom = zoom; }); }, closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); this.featurePopVis = false; }, //openlayer属性框 showOlPanel(feature) { this.$http .post(this.nozzle.getTempData, { data: { stCode: feature.stCode } }) .then(resP => { console.log(resP); //开始展示属性字段 /* let textContent = ""; let closeDOM = "<div style='background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray;'><a style='color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a>"; textContent = "<div style='color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px;'>" + "详细信息" + "</div></br> "; textContent += "<div style='margin-bottom: 6px;'></div>"; textContent += `<div style='color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -44px;width:69px;cursor: pointer;text-decoration:underline' onclick='historyData("` + feature.stCode + `")'>` + "历史数据" + "</div></div>"; textContent += '<div style="background-color: rgb(192,213,248);"><div style="width:260px;height:33px;color: darkslategray;line-height:33px;">' + '<div style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;">' + "名称" + "</div>" + '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' + feature.stName + "</div>" + "</div>"; textContent += '<div style="width:260px;height:33px;color: darkslategray;line-height:33px;">' + '<div style="font-size:14px;line-height:33px; margin-left: 22px;margin-top: 5px;position: absolute;">' + "观测时间" + "</div>" + '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' + feature.tt + "</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:33px;color: darkslategray;">' + '<div style="font-size:14px;line-height:33px; margin-left: 11px;margin-top: 5px;position: absolute;">' + key + "</div>" + '<div style="font-size:14px;line-height:33px;margin-top: 5px;position: absolute;margin-left: 179px;">' + data[key] + "</div>" + "</div>"; } textContent += "</div></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.featureData = feature; this.resPData = resP.data.data; this.featurePopVis = true; 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); } }, // ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // 时间选择的change TimeBoxChange() { // 时间改动了,需要调整其状态 this.DateisChange = true; }, // 根据站点编号查询站点的表头数据 LoadGridTitleData() { // 加载历史数据/在表头前面加载 setTimeout(() => { this.loadDataGridData(); }, 0); this.$http .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`) .then(response => { // 加载表头 var headobj = response.data.data; // console.log(headobj); console.log(11111, this.HistoryTableData); // let arr = []; this.NFSNowDataTableHead = headobj.filter((item, index, obj) => { for (let k in this.HistoryTableData[0]) { if (item.field === k) { return item; } } }); // console.log(8888, arr); console.log(22222222, this.NFSNowDataTableHead); }) .catch(response => { message(response); }); }, //tabs的点击事件 HistoryHandleClick(tab, event) { if (tab.index == 1) { // 渲染echarts的因子下拉框 if (this.FirstOn) { // 仅仅第一次进来历史图形的页面时,需要加载因子列表 this.loadSiteYinZiData(); this.FirstOn = false; } if (this.DateisChange) { // 调用函数渲染数据 this.loadEchartsData(); } } else { // 渲染datagrid if (this.DateisChange) { // 渲染站点历史数据表格 this.loadDataGridData(); } } }, //分页 // 主页分页 handleSizeChange(val) { // console.log(`当前页: ${val}`); this.ALLpageSize = val; this.loadFZData(); // console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { // console.log(`当前页: ${val}`); this.ALLpageNum = val; this.loadFZData(); }, HistorySizeChange(val) { // 内页改变每页的条数 this.HistorySize = val; this.loadDataGridData(); }, HistoryCurrentChange(val) { //内页改变页数 this.HistoryPage = val; this.loadDataGridData(); }, // 历史表格数据请求 loadDataGridData() { this.loading3 = true; this.$http .get( this.nozzle.dataSelectSiteSiteManHistoryDataMongoBySerial + "?dName=" + this.currentSiteNo + "&rows=" + this.HistorySize + "&page=" + this.HistoryPage + "&startTime=" + this.TimeBoxValue[0] + "&endTime=" + this.TimeBoxValue[1] ) .then(response => { this.loading3 = false; // console.log(response.data.rows); this.HistoryTableData = response.data.rows; // console.log(1111111, this.HistoryTableData); this.DatagridDataLength = response.data.total; this.$http .get(this.nozzle.siteGetHeads + `?siteNo=${this.currentSiteNo}`) .then(response => { // 加载表头 var headobj = response.data.data; // console.log(headobj); console.log(11111, this.HistoryTableData); // let arr = []; this.NFSNowDataTableHead = headobj.filter((item, index, obj) => { for (let k in this.HistoryTableData[0]) { if (item.field === k) { return item; } } }); // console.log(8888, arr); console.log(22222222, this.NFSNowDataTableHead); }) .catch(response => { message(response); }); }) .catch(response => { message(response); this.loading3 = false; }); }, //获取站点分配的所有因子 loadSiteYinZiData() { this.$http .get( this.nozzle.dataSelectSitePropertyList + "?siteNo=" + this.currentSiteNo ) .then(response => { var SleVal = response.data; // 给数据添加一个空值 SleVal.unshift({ codeAscii: "", codeProperty: "请选择因子" }); // 初始值清空 this.SiteYinzi = ""; this.SiteYinzi2 = ""; // 根据数据长度来判断是否多于两个因子 if (SleVal.length > 1) { this.SiteYinziAll = SleVal; this.SiteYinzi = SleVal[1].codeAscii; this.SiteYinziAll2 = SleVal; this.SiteYinzi2 = SleVal[2].codeAscii; this.SiteYinziZn = SleVal[1].codeProperty; this.SiteYinzi2Zn = SleVal[2].codeProperty; this.loadEchartsData(); } else if (SleVal.length == 1) { this.SiteYinziAll = SleVal; this.SiteYinzi = SleVal[1].codeAscii; this.SiteYinziAll2 = SleVal; this.SiteYinzi2 = SleVal[0].codeAscii; this.SiteYinziZn = SleVal[1].codeProperty; this.SiteYinzi2Zn = SleVal[0].codeProperty; this.loadEchartsData(); } else { this.SiteYinziAll = SleVal; this.SiteYinzi = SleVal[0].codeAscii; this.SiteYinziAll2 = SleVal; this.SiteYinzi2 = SleVal[0].codeAscii; this.SiteYinziZn = SleVal[0].codeProperty; this.SiteYinzi2Zn = SleVal[0].codeProperty; this.$message({ showClose: true, message: "该站点下无分配因子", type: "warning" }); } }); }, // 上因子change事件 YinZiUp(SiteYinzi) { this.YinZiChange = true; this.SiteYinzi = SiteYinzi; for (var i = 0; i < this.SiteYinziAll.length; i++) { if (this.SiteYinziAll[i].codeAscii == this.SiteYinzi) { this.SiteYinziZn = this.SiteYinziAll[i].codeProperty; return false; } } }, // 下因子change事件 YinZiDown(SiteYinzi2) { this.YinZiChange = true; this.SiteYinzi2 = SiteYinzi2; for (var i = 0; i < this.SiteYinziAll2.length; i++) { if (this.SiteYinziAll2[i].codeAscii == this.SiteYinzi2) { this.SiteYinzi2Zn = this.SiteYinziAll2[i].codeProperty; return false; } } }, // 获取echarts数据 loadEchartsData() { if (this.DateisChange || this.YinZiChange) { this.YinZiChange = false; this.DateisChange = false; // 时间改变过或者因子有变化,请求新数据渲染 this.$http .get( this.nozzle.dataSiteDataEchat + "?dName=" + this.currentSiteNo + "&up=" + this.SiteYinzi + "&down=" + this.SiteYinzi2 + "&startTime=" + this.TimeBoxValue[0] + "&endTime=" + this.TimeBoxValue[1] ) .then(response => { if (response.data.tt.length > 0) { this.ChartsX = response.data.tt; this.ChartsUp = response.data.up; this.ChartsDown = response.data.down; this.$nextTick(function() { this.loadEcharts(); }); } else { this.$message({ showClose: true, message: "无数据", type: "warning" }); } }) .catch(response => { this.$message({ showClose: true, message: "无数据", type: "warning" }); }); } else { // 时间未改变且因子也没变化,只需要重新绘制 this.$nextTick(function() { this.loadEcharts(); }); } }, //渲染echarts loadEcharts() { // 基于准备好的dom,初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("HistoryEchart") ); // 绘制图表 this.myChart.clear(); this.myChart.setOption({ color: ["#3398DB", "red"], tooltip: { trigger: "axis", axisPointer: { type: "cross", crossStyle: { color: "#3398DB" } } }, toolbox: { feature: { magicType: { show: true, type: ["line", "bar"] } } }, legend: { data: [this.SiteYinziZn, this.SiteYinzi2Zn], textStyle: { color: "#3398DB" //字体颜色 } }, xAxis: [ { type: "category", data: this.ChartsX, axisPointer: { type: "shadow" }, axisLabel: { show: true, textStyle: { color: "#3398DB" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#3398DB" // 颜色 } } } ], yAxis: [ { type: "value", name: this.SiteYinziZn, axisLabel: { show: true, textStyle: { color: "#3398DB" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#3398DB" // 颜色 } } }, { type: "value", name: this.SiteYinzi2Zn, axisLabel: { show: true, textStyle: { color: "#3398DB" //这里用参数代替了 } }, axisLine: { lineStyle: { color: "#3398DB" // 颜色 } } } ], series: [ { name: this.SiteYinziZn, type: "line", data: this.ChartsUp }, { name: this.SiteYinzi2Zn, type: "line", yAxisIndex: 1, data: this.ChartsDown } ] }); }, HistorySizeChange(val) { // 内页改变每页的条数 this.HistorySize = val; this.loadDataGridData(); }, HistoryCurrentChange(val) { //内页改变页数 this.HistoryPage = val; this.loadDataGridData(); }, // 点击详情里面历史搜索 Search() { if (this.HistoryBox == "Charts") { this.loadEchartsData(); } else { this.loadDataGridData(); } }, labelHead(h, { column, index }) { let l = column.label.length; let f = 16; //每个字大小,其实是每个字的比例值,大概会比字体大小差不多大一点, column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度 //然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全 return h("div", { class: "table-head", style: { width: "100%" } }, [ column.label ]); } }, computed: { switchStatus: function() { return this.flag; // 直接监听props里的status状态 } }, /* created() { window.closepopup = this.closepopup; window.historyData = this.historyData; }, */ mounted: function() { this.loadRegionEcharts(); // 根据平台渲染站点数量统计及状态统计 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); this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); clearInterval(this.timer2); } }; </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); background-size: cover; width: 460px; z-index: 99999; position: relative; border: 2px solid cornflowerblue; } .earthmap { width: 100%; height: 100%; } .fwStyle { position: relative; top: 42px; right: 446px; z-index: 99; cursor: pointer; } .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: 50%; 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; } /* .popuphead { background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray; } .popupheada { color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer; } .xxxx { color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px; } .lssj { color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -38px;width:69px;cursor: pointer;text-decoration:underline } */ #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: 350px; 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: var(--yellow) !important; } .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%; overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ #previewOfSiteStatusCentent6 { width: 100%; height: 100%; /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } #GisRightCententBox2UL, #RightCententBox { 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); } .areaListNoList { width: 100%; height: 30px; /* height: 110px; */ line-height: 30px; color: white; box-sizing: border-box; border-bottom: 1px solid cadetblue; } .areaListNo { width: 50%; float: left; font-size: 14px; color: var(--white); } .areaListName { width: 50%; 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; } #TimeBoxs { position: relative; top: 0; left: 0; } .ButtonImgs { position: absolute; top: 0; left: 420px; } .xiangxixinxi { color: var(--xinxititle) !important; font-size: 17px; font-weight: bold; margin-left: 9px; } .lishishuju { color: cornflowerblue; position: absolute; font-size: 15px; line-height: 33px; margin-left: 22px; margin-top: -32px; width: 69px; cursor: pointer; text-decoration: underline; } .lishisousuohead { background-color: var(--lishisousuohead) !important; border-bottom: 1px solid; border-bottom-color: var(--lishisousuohead) !important; } .lishisousuobeibu { background-color: var(--lishisousuobeibu) !important; } .mingcheng { font-size: 14px; line-height: 33px; margin-left: 22px; margin-top: 5px; position: absolute; } .beibucolor { width: 260px; height: 33px; color: var(--white) !important; line-height: 33px; } .bgcwidth { background-color: var(--lishisousuobeibu) !important; } .white { color: var(--white) !important; } </style>