<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.total},在线数为：${item.onLine},离线数为：${item.offLine}`
"
placement="top"
>
<div>
<span class="areaListNo">{{ item.name }}</span>
<i class="areaListfenge">|</i>
<div class="areaListNo1">
<div class="lefticon">
<!-- <img src="../../../static/img/zs_icon.png" alt="" /> -->
<i
id="lefticon1"
:class="{ lefticon11: !newList }"
></i>
</div>
<div class="righttext">
<span id="toptext1" class="toptext">{{
item.total
}}</span>
<span class="buttontext">总数</span>
</div>
</div>
<div class="areaListNo2">
<div class="lefticon">
<!-- <img src="../../../static/img/zx_icon.png" alt="" /> -->
<i
id="lefticon2"
:class="{ lefticon22: !newList }"
></i>
</div>
<div class="righttext">
<span id="toptext2" class="toptext">{{
item.onLine
}}</span>
<span class="buttontext">在线</span>
</div>
</div>
<div class="areaListNo3">
<div class="lefticon">
<!-- <img src="../../../static/img/lx_icon.png" alt="" /> -->
<i
id="lefticon3"
:class="{ lefticon33: !newList }"
></i>
</div>
<div class="righttext">
<span id="toptext3" class="toptext">{{
item.offLine
}}</span>
<span class="buttontext">离线</span>
</div>
</div>
<!-- <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 {
newList: true,
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 }
]
};
},
watch: {
flag: function(newval, oldval) {
this.newList = newval;
}
},
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);
console.log(this.ProjectList);
} 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.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"
},
interval: 0,
formatter: function(params) {
var newParamsName = ""; // 最终拼接成的字符串
var paramsNameNumber = params.length; // 实际标签的个数
var provideNumber = 2; // 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""; // 表示每一次截取的字符串
var start = p * provideNumber; // 开始截取的位置
var end = start + provideNumber; // 结束截取的位置
// 此处特殊处理最后一行的索引值
if (p == rowNumber - 1) {
// 最后一次不换行
tempStr = params.substring(start, paramsNameNumber);
} else {
// 每一次拼接字符串并换行
tempStr = params.substring(start, end) + "\n";
}
newParamsName += tempStr; // 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName;
},
fontSize: 12 //更改坐标轴文字大小
}
},
grid: {
containLabel: true,
bottom: "2%",
top: "10%"
},
yAxis: {
type: "value",
axisLabel: {
show: true,
textStyle: {
color: "#30919a"
}
}
},
series: [
{
type: "bar",
showBackground: true,
data: valuearr,
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0.8, color: "#30919a" },
{ offset: 0, color: "#5af9f4" },
{ offset: 1, color: "#081d28" }
])
},
emphasis: {
itemStyle: {
color: new this.$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, 50);
},
//按照项目选择去联动地图
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();
}
//删除行政区域图层
/* var layers=this.map.getLayers().array_;
for(var i=0;i<layers.length;i++)
{
if(layers[i].values_.layername&&layers[i].values_.layername=="xingzhengbianma")
{
this.map.removeLayer(layers[i])
}
} */
this.$http
.get(this.nozzle.queueadmin + "/" + areaCode + ".json")
.then(response => {
//先删除图层
if (this.vectorArea) this.map.removeLayer(this.vectorArea);
// 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({
layername: "xingzhengbianma",
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({});
if (this.vector) this.map.removeLayer(this.vector);
//初始化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;
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;
feature.status = cell.status; //在线离线状态
//加入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) {
var imgUrl="https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
if(feature.status==0)
imgUrl ="https://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png"
else
imgUrl ='./../../../static/img/offlineStation.png';
return new Style({
image: new Icon({
src:
imgUrl
})
});
},
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 + 6;
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.LoadAllProject();
this.loadRegionEcharts();
// 根据平台渲染站点数量统计及状态统计
this.loadSiteNumForOroject();
// 根据平台渲染设备分类
this.loadQuyuShebei();
// 根据平台渲染项目设备环比增长
this.loadQuYuSheBeiHuanBi();
// // 根据平台渲染站点实时报警信息
this.loadSiteBaoJing();
// 返回出项目的坐标以及缩放等级**************************GIS调用
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);
},
created() {}
};
</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: 60px;
/* height: 110px; */
line-height: 60px;
color: white;
box-sizing: border-box;
border-bottom: 1px solid cadetblue;
}
.areaListNo {
width: 30%;
float: left;
font-size: 18px;
font-weight: bold;
color: var(--white);
}
.areaListNo1,
.areaListNo2,
.areaListNo3 {
width: 22%;
height: 60px;
line-height: 60px;
float: left;
font-size: 14px;
color: var(--white);
}
.lefticon {
float: left;
width: 50%;
height: 60px;
}
.righttext {
float: left;
width: 50%;
height: 60px;
display: flex;
flex-direction: column;
}
.toptext,
.buttontext {
height: 30px;
line-height: 30px;
width: 100%;
}
.toptext {
font-size: 20px;
}
.areaListfenge {
float: left;
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;
}
#toptext1 {
color: #d1b200;
}
#toptext2 {
color: #33d460;
}
#toptext3 {
color: #ed3e3e;
}
#lefticon2,
#lefticon1,
#lefticon3 {
width: 20px;
height: 20px;
display: inline-block;
}
#lefticon1 {
background: url("../../../static/img/zs_icon.png") no-repeat;
}
.lefticon11 {
background: url("../../../static/img/zs_qs_icon.png") no-repeat !important;
}
#lefticon2 {
background: url("../../../static/img/zx_icon.png") no-repeat;
}
.lefticon22 {
background: url("../../../static/img/zx_qs_icon.png") no-repeat !important;
}
#lefticon3 {
background: url("../../../static/img/lx_icon.png") no-repeat;
}
.lefticon33 {
background: url("../../../static/img/lx_qs_icon.png") no-repeat !important;
}
</style>
