<template>
<div id="previewOfSiteStatus">
<div id="previewOfSiteStatusMaps">
<div id="previewOfSiteStatusTop">
<div class="previewOfSiteStatusTopC">
<img
src="./../../../static/img/previewOfSiteStatus7.png"
alt
class="previewOfSiteStatusTopimg"
/>
<div class="previewOfSiteStatusTopCFont">
<span class="previewOfSiteStatusTopCData">{{ TopData1 }}</span>
<span class="previewOfSiteStatusTopCMS">设备总数</span>
</div>
</div>
<div class="previewOfSiteStatusTopC">
<img
src="./../../../static/img/previewOfSiteStatus8.png"
alt
class="previewOfSiteStatusTopimg"
/>
<div class="previewOfSiteStatusTopCFont">
<span class="previewOfSiteStatusTopCData">{{ TopData2 }}</span>
<span class="previewOfSiteStatusTopCMS">当前在线数</span>
</div>
</div>
<div class="previewOfSiteStatusTopC">
<img
src="./../../../static/img/previewOfSiteStatus9.png"
alt
class="previewOfSiteStatusTopimg"
/>
<div class="previewOfSiteStatusTopCFont">
<span class="previewOfSiteStatusTopCData">{{ TopData3 }}</span>
<span class="previewOfSiteStatusTopCMS">在线率</span>
</div>
</div>
</div>
<div class="boxmain">
<!-- 项目选择 -->
<div id="previewOfSiteStatusLeftTop">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus1.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">项目选择</span>
</div>
<div class="previewOfSiteStatusCentent">
<!-- 项目选择下拉框 -->
<div class="previewTOP">
<template>
<el-select
class="selectWidth"
v-model="ChecksplatformCodeTest"
filterable
placeholder="全部项目"
@change="ListClick"
size="medium"
clearable
>
<el-option
v-for="(item, index) in ProjectList"
:key="index"
:label="item.groupName"
:value="index"
>
</el-option>
</el-select>
</template>
</div>
<!-- 项目选择历史搜索记录（最多十条） -->
<div class="previewButton">
<h5 class="text">历史搜索</h5>
<div class="previewHistory">
<span
class="previewtext"
v-for="(item, index) in historyList"
:key="index"
@click="HistoryClick(item)"
>
{{ item }}
</span>
</div>
</div>
</div>
</div>
<!-- 平台站点数量及状态统计 -->
<div id="previewOfSiteStatusLeftcenter">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus2.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">站点统计</span>
<div class="previewOfSiteStatusTitleBTN">
<span
v-for="(item, index) in namelist"
:key="index"
@click="allpreview(index, item, $event)"
:class="{ select: item.select }"
>{{ item.name }}</span
>
</div>
</div>
<div class="previewOfSiteStatusCentent">
<div id="previewOfSiteStatusCentent2_1">
<p class="previewOfSiteStatusCentent2P">平台站点（个）</p>
<div class="previewOfSiteStatusCentent2C">
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Site.SAll"
:endVal="Site.EAll"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<!-- </div> -->
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus10.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>总数</span
>
</div>
</div>
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Site.SOn"
:endVal="Site.EOn"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus11.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>在线</span
>
</div>
</div>
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Site.SOff"
:endVal="Site.EOff"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus12.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>离线</span
>
</div>
</div>
</div>
</div>
<!-- <div id="previewOfSiteStatusCentent2_2">
<p class="previewOfSiteStatusCentent2P">项目进度（条）</p>
<div class="previewOfSiteStatusCentent2C">
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Project.SAll"
:endVal="Project.EAll"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus10.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>总数</span
>
</div>
</div>
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Project.SOn"
:endVal="Project.EOn"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus11.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>已完成</span
>
</div>
</div>
<div class="previewOfSiteStatusCentent2CList">
<countTo
:startVal="Project.SOff"
:endVal="Project.EOff"
:duration="2000"
class="previewOfSiteStatusCentent2CListData"
></countTo>
<div class="previewOfSiteStatusCentent2CListFont">
<img
src="./../../../static/img/previewOfSiteStatus12.png"
alt
class="previewOfSiteStatusCentent2CListFontImg"
/>
<span class="previewOfSiteStatusCentent2CListFonts"
>未完成</span
>
</div>
</div>
</div>
</div> -->
</div>
</div>
<!-- 项目站点覆盖排名 -->
<div id="previewOfSiteStatusLeftBottom">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus3.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">项目站点覆盖排名</span>
</div>
<div class="previewOfSiteStatusCentent">
<ul id="previewOfSiteStatusCentent3">
<li
class="previewOfSiteStatusCentent3Li"
v-for="(item, index) in Region"
:key="index"
style="cursor: pointer"
>
<span
class="previewOfSiteStatusCentent3LiName"
:title="item.RegionName"
>{{ item.RegionName }}</span
>
<div class="previewOfSiteStatusCentent3LiCharts">
<div
class="previewOfSiteStatusCentent3LiCharts2"
:style="'width:' + item.RegionJD + '%;'"
></div>
</div>
<span class="previewOfSiteStatusCentent3LiData">
{{ item.RegionNum }}
<span class="previewOfSiteStatusCentent3LiDW">个</span>
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="boxmainR">
<!-- 项目设备总览 -->
<div id="previewOfSiteStatusRightTop">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus4.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">项目设备总览</span>
</div>
<div class="previewOfSiteStatusCentent">
<div id="previewOfSiteStatusCentent4">
<div id="previewOfSiteStatusCentent4eCharts"></div>
<div id="previewOfSiteStatusCentent4Font">
<div id="previewOfSiteStatusCentent4Font1">
<p class="previewOfSiteStatusCentent4Font1P1">
{{ XianYou }}
</p>
<p class="previewOfSiteStatusCentent4Font1P2">
<span class="previewOfSiteStatusCentent4Font1P2S"></span>
现有设备
</p>
</div>
<div id="previewOfSiteStatusCentent4Font2">
<p class="previewOfSiteStatusCentent4Font2P1">{{ DaJian }}</p>
<p class="previewOfSiteStatusCentent4Font2P2">
<span class="previewOfSiteStatusCentent4Font2P2S"></span>
搭建设备
</p>
</div>
</div>
</div>
</div>
</div>
<div id="previewOfSiteStatusRightcenter">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus5.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">项目设备环比增长</span>
</div>
<div class="previewOfSiteStatusCentent">
<div id="previewOfSiteStatusCentent5"></div>
</div>
</div>
<div id="previewOfSiteStatusRightBottom">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus6.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">站点实时报警</span>
</div>
<div class="previewOfSiteStatusCentent">
<div id="previewOfSiteStatusCentent6">
<div id="GisRightCententBox2UL">
<span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
<div
class="GIsRightWaringList"
v-for="(item, index) in WaringList"
:key="index"
@mouseover="mouseOver(index)"
@mouseleave="mouseLeave(index)"
>
<el-tooltip
ref="tooltip"
class="item"
effect="dark"
:content="`${item.factorsName}${item.warnTypeDesc}，${item.warnTypeDesc}值为：${item.warnValue}`"
placement="top"
>
<div>
<span class="GIsRightWaringListNo">{{
item.createTime
}}</span>
<span class="GIsRightWaringListName">{{
item.siteName
}}</span>
<span
class="GIsRightWaringListType"
:class="[item.warnType == 2 ? 'red' : 'Yellow']"
>{{ item.warnTypeDesc }}</span
>
</div>
</el-tooltip>
</div>
</div>
</div>
</div>
<!-- <div id="previewOfSiteStatusCentent6">
<div id="GisRightCententBox2UL">
<span v-if="NoBaoJingData" class="NoBaoJing">暂无报警数据</span>
</div>
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import { message } from "./../../util/item";
import countTo from "vue-count-to"; //引入数字滚动插件
import { loadModules } from "esri-loader";
export default {
name: "previewOfSiteStatus",
components: { countTo }, //加载数字滚动插件
props: {
flag: {
type: Boolean,
default() {
return false;
}
}
},
data: function() {
return {
switchStatusData: this.flag, // 重新定义数据
timer: {}, //定时器
// 顶部中间汇总A
TopData1: "1866",
TopData2: "933",
TopData3: "50" + "%",
// 顶部中间汇总B
// 项目选择A
ProjectList: [
{
exceptionState: 0,
exceptionStatePercentage: "",
groupName: "全部项目",
groupNo: "",
offLine: 0,
offLinePercentage: 0,
total: 0,
totalPercentage: 0
}
],
dynamic: 0,
ChecksplatformCode: "", //选取的平台的编号
platformtype: "", //选取的站点统计类型
ChecksplatformCodeTest: "全部项目", //选取的默认文字
historyList: [],
// 项目选择B
// 平台站点数量及状态统计A
Site: {
// 初始值
SAll: 0,
SOn: 0,
SOff: 0,
// 实时值
EAll: 0,
EOn: 0,
EOff: 0
},
Project: {
// 初始值
SAll: 0,
SOn: 0,
SOff: 0,
// 实时值
EAll: 0,
EOn: 0,
EOff: 0
},
// 平台站点数量及状态统计B
// 项目站点覆盖排名A
Region: [
// { //数据格式
// RegionName: "苏州",
// RegionJD: "90",
// RegionNum: "8600"
// ShortName: "苏州"
// }
],
// 项目站点覆盖排名B
// 项目设备总览A
myChart: {},
XianYou: "", //现有设备总数
DaJian: "", //搭建设备总数
// 项目设备总览B
// 项目设备环比增长A
myChart2: {},
// 项目设备环比增长B
// 站点实时报警A
WaringList: [],
NoBaoJingData: true, //有无报警数据，有就为false
// 站点实时报警B
map: "",
namelist: [
{ name: "全部", platform: "", type: "", select: true },
{ name: "合同", platform: "", type: "0", select: false },
{ name: "临测", platform: "", type: "1", select: false }
]
};
},
methods: {
// 获取所有平台
LoadAllProject() {
this.$http
.post(
this.nozzle.userGroupRelaGetGroups +
"?&pageNo=" +
1 +
"&typeStr=" +
"&pageSize=" +
999
)
.then(response => {
if (response.status === 200) {
this.ProjectList = this.ProjectList.concat(response.data.data);
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 根据平台渲染站点统计
loadSiteNumForOroject() {
// 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 === 200) {
this.Region = response.data.data;
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 加载 项目设备总览
loadQuyuShebei() {
this.$http
.post(this.nozzle.platEquipmentGetEquipStatistics, {
data: {
platform: this.ChecksplatformCode
}
})
.then(response => {
if (response.data.code === 200) {
this.loadRegionEcharts(
response.data.data.title,
response.data.data.exiting,
response.data.data.tobebuilt
);
this.XianYou = response.data.data.exitingsum;
this.DaJian = response.data.data.tobebuiltsum;
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 加载 项目设备环比增长
loadQuYuSheBeiHuanBi() {
this.$http
.post(this.nozzle.sysPlatformGetSiteStateStatistics, {
data: {
platform: this.ChecksplatformCode
}
})
.then(response => {
if (response.data.code === 200) {
this.loadRegionEcharts2(
response.data.data.xdata,
response.data.data.offline,
response.data.data.warn,
response.data.data.malfunction,
response.data.data.alarm
);
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 加载 站点实时报警信息
loadSiteBaoJing() {
this.NoBaoJingData = true;
this.WaringList = [];
this.$http
.post(this.nozzle.warnLogListWarnLog, {
current: 1,
size: 99,
data: {
platForm: this.ChecksplatformCode,
endTime: "",
startTime: "",
siteName: ""
}
})
.then(response => {
if (response.data.code === 200) {
if (response.data.data.total > 0) {
// 没有数据 显示暂无数据的提示
this.NoBaoJingData = false;
}
this.WaringList = response.data.data.records;
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 点击项目ZZJ
ListClick(index) {
this.ChecksplatformCode = this.ProjectList[index]["groupNo"];
// 限制数组的长度不超过10个
// console.log(this.historyList.length);
// console.log(this.ProjectList[index]["groupName"]);
var gname = this.ProjectList[index]["groupName"];
if (this.historyList.length >= 10 && this.historyList.includes(gname)) {
} else if (this.historyList.length >= 10) {
this.historyList.pop();
}
this.historyList = this.selectTag(
this.historyList,
this.ProjectList[index]["groupName"]
);
this.setItem(this.historyList);
// 根据平台渲染站点数量统计及状态统计
this.loadSiteNumForOroject();
// 根据平台渲染项目设备总览
this.loadQuyuShebei();
// 根据平台渲染项目设备环比增长
this.loadQuYuSheBeiHuanBi();
// 根据平台渲染站点实时报警信息
this.loadSiteBaoJing();
// 返回出项目的坐标以及缩放等级************************************************************************************************GIS调用
if (
this.ProjectList[index].latitude != null &&
this.ProjectList[index].longitude != null &&
this.ProjectList[index].zoomLevel != null
) {
let MapPoint = new esri.geometry.Point(
this.ProjectList[index].longitude,
this.ProjectList[index].latitude,
new esri.SpatialReference({
wkid: 4326
})
);
this.map.centerAndZoom(MapPoint, this.ProjectList[index].zoomLevel);
}
},
// 点击历史搜索的文字
HistoryClick(item) {
this.ChecksplatformCodeTest = item;
this.ProjectList.forEach(item1 => {
if (item1["groupName"] == item) {
this.ChecksplatformCode = item1["groupNo"];
// 根据平台渲染站点数量统计及状态统计
this.loadSiteNumForOroject();
// 根据平台渲染项目设备总览
this.loadQuyuShebei();
// 根据平台渲染项目设备环比增长
this.loadQuYuSheBeiHuanBi();
// 根据平台渲染站点实时报警信息
this.loadSiteBaoJing();
// 返回出项目的坐标以及缩放等级**************************GIS调用
if (
item1.latitude != null &&
item1.longitude != null &&
item1.zoomLevel != null
) {
let MapPoint = new esri.geometry.Point(
item1.longitude,
item1.latitude,
new esri.SpatialReference({
wkid: 4326
})
);
this.map.centerAndZoom(MapPoint, item1.zoomLevel);
}
}
});
},
// 本地存储ZZJ
setItem(arr) {
window.sessionStorage.setItem("HISTORYLIST", JSON.stringify(arr));
},
// 本地取值ZZJ
getItem() {
if (!JSON.parse(window.sessionStorage.getItem("HISTORYLIST"))) {
return null;
}
this.historyList = JSON.parse(
window.sessionStorage.getItem("HISTORYLIST")
);
},
// 对历史搜索数组去重判断
selectTag(row, id) {
row.includes(id) ? row : row.unshift(id);
return row;
},
// 加载项目设备总览的ecahrts
loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(
document.getElementById("previewOfSiteStatusCentent4eCharts")
);
// 绘制图表
this.myChart.clear();
this.myChart.setOption({
color: ["red"],
tooltip: {
trigger: "axis"
},
legend: {
x: "center",
data: ["现有设备", "搭建设备"],
show: false
},
radar: [
{
indicator: SheBeiLeiXing,
radius: 70,
shape: "circle",
name: {
formatter: "{value}",
textStyle: {
color: "red"
}
}
}
],
series: [
{
type: "radar",
itemStyle: { normal: { areaStyle: { type: "default" } } },
tooltip: {
trigger: "item"
},
data: [
{
name: "现有设备",
value: XianYouData,
areaStyle: {
normal: {
color: "rgb(255, 217, 0)"
}
},
itemStyle: {
normal: {
color: "rgb(255, 217, 0)",
lineStyle: {
color: "rgb(255, 217, 0)"
},
areaStyle: {
type: "default"
}
}
}
},
{
name: "搭建设备",
value: DaJianData,
areaStyle: {
normal: {
color: "rgb(0, 119, 254)" // 选择项目颜色
}
},
itemStyle: {
normal: {
color: "rgb(0, 119, 254)",
lineStyle: {
color: "rgb(0, 119, 254)"
},
areaStyle: {
type: "default"
}
}
}
}
]
}
]
});
},
// 加载项目设备环比增长的ecahrts
loadRegionEcharts2(XData, V1, V2, V3, V4) {
// 基于准备好的dom，初始化echarts实例
this.myChart2 = this.$echarts.init(
document.getElementById("previewOfSiteStatusCentent5")
); // 绘制图表
this.myChart2.clear();
this.myChart2.setOption({
color: [
"rgb(140,143,146)",
"rgb(255,214,0)",
"rgb(229,132,12)",
"rgb(211,22,22)"
],
tooltip: {
trigger: "axis"
},
legend: {
data: ["离线数量", "预警数量", "故障数量", "报警数量"],
textStyle: {
//图例文字的样式
color: "rgb(0, 119, 254)",
fontSize: 12
}
},
grid: {
left: "3%",
right: "6%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: XData,
axisLabel: {
formatter: "{value}",
textStyle: {
//改变刻度字体样式
color: "rgb(0, 119, 254)"
},
fontSize: 12 //字体大小
},
splitLine: {
show: false
}
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
//改变刻度字体样式
color: "rgb(0, 119, 254)"
},
fontSize: 12 //字体大小
},
splitLine: {
show: false
}
},
series: [
{
name: "离线数量",
type: "line",
data: V1,
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: "预警数量",
type: "line",
data: V2,
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: "故障数量",
type: "line",
data: V3,
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: "报警数量",
type: "line",
data: V4,
smooth: true,
symbol: "none" //取消折点圆圈
}
]
});
},
// 预警报警信息滚动
ScrollUp() {
var box = document.getElementById("previewOfSiteStatusCentent6");
var con1 = document.getElementById("GisRightCententBox2UL");
if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
},
//鼠标移入事件
mouseOver(index) {
if(this.timer) {
clearInterval(this.timer);
this.$refs.tooltip[index].handleShowPopper();
}
},
//鼠标移出事件
mouseLeave(index) {
this.$refs.tooltip[index].handleClosePopper();
this.timer = setInterval(this.ScrollUp, 100);
},
//初始化地图
createMap() {
let _this = this;
loadModules([
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",
"esri/map",
"esri/request",
"esri/graphic",
"esri/geometry/Extent",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/layers/GraphicsLayer",
"esri/SpatialReference",
"esri/dijit/PopupTemplate",
"esri/geometry/Point",
"esri/geometry/webMercatorUtils",
"esri/layers/ArcGISTiledMapServiceLayer",
"extras/ClusterLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
])
.then(
([
parser,
ready,
arrayUtils,
Color,
domStyle,
query,
Map,
esriRequest,
Graphic,
Extent,
SimpleMarkerSymbol,
SimpleFillSymbol,
PictureMarkerSymbol,
ClassBreaksRenderer,
GraphicsLayer,
SpatialReference,
PopupTemplate,
Point,
webMercatorUtils,
ArcGISTiledMapServiceLayer,
ClusterLayer
]) => {
// create map with the given options at a DOM node w/ id 'mapNode'
_this.map = new Map("previewOfSiteStatusMaps", {
center: [100, 35],
zoom: 5,
logo: false,
slider: false
});
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"
);
_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: {}
})
.then(response => {
if (response.data.code === 200) {
let photoInfo = {};
let wgs = new SpatialReference({
wkid: 4326
});
photoInfo.data = arrayUtils.map(
response.data.data,
function(p) {
/* if(p.lon!=null){
} */
let latlng = new Point(
parseFloat(p.lon),
parseFloat(p.lat),
wgs
);
let webMercator = webMercatorUtils.geographicToWebMercator(
latlng
);
let attributes = {
stName: p.stName,
stCode: p.stCode
};
return {
x: webMercator.x,
y: webMercator.y,
attributes: attributes
};
}
);
let popupTemplate = new PopupTemplate({
title: "",
fieldInfos: [
{
fieldName: "stName",
label: "名称：",
visible: true
},
{
fieldName: "stCode",
label: "编号：",
visible: true
}
]
});
let clusterLayer = new ClusterLayer({
data: photoInfo.data,
distance: 100,
id: "clusters",
labelColor: "#fff",
labelOffset: 10,
resolution: _this.map.extent.getWidth() / _this.map.width,
singleColor: "#888",
singleTemplate: popupTemplate
});
let defaultSym = new SimpleMarkerSymbol().setSize(4);
let renderer = new ClassBreaksRenderer(
defaultSym,
"clusterCount"
);
let picBaseUrl =
"https://static.arcgis.com/images/Symbols/Shapes/";
let blue = new PictureMarkerSymbol(
picBaseUrl + "BluePin1LargeB.png",
32,
32
).setOffset(0, 15);
let green = new PictureMarkerSymbol(
picBaseUrl + "GreenPin1LargeB.png",
64,
64
).setOffset(0, 15);
let red = new PictureMarkerSymbol(
picBaseUrl + "RedPin1LargeB.png",
72,
72
).setOffset(0, 15);
renderer.addBreak(0, 2, blue);
renderer.addBreak(2, 200, green);
renderer.addBreak(200, 1001, red);
clusterLayer.setRenderer(renderer);
_this.map.addLayer(clusterLayer);
clusterLayer.on("click", function(res) {
if (res.graphic._graphicsLayer._singles.length == 0) {
return;
}
let d = res;
_this.$http
.post(_this.nozzle.getTempData, {
data: {
stCode:
d.graphic._graphicsLayer._singles[0].attributes
.stCode
}
})
.then(resP => {
let textContent =
"<table style='width: 330px;'><tr><td>名称</td><td>" +
d.graphic._graphicsLayer._singles[0].attributes
.stName +
"</td></tr>";
for (let item in resP.data.data) {
textContent += "<tr>";
for (let arr in resP.data.data[item]) {
textContent +=
"<td>" + resP.data.data[item][arr] + "</td>";
}
textContent += "</tr>";
}
textContent +=
"<tr><td style='text-align: right' colspan='2'><a href ='javascript:void(0)' style='color:dodgerblue' onclick=''>历时数据</a></td></tr></table>";
_this.map.infoWindow.setTitle("详细信息");
_this.map.infoWindow.setContent(textContent);
_this.map.infoWindow.show(
d.mapPoint,
esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT
);
});
});
} else {
message(response);
}
})
.catch(response => {
message(response);
});
});
}
)
.catch(err => {
// handle any script or module loading errors
// console.error(err);
});
},
// 给与gis的方法调动dome
REFSFunctionToGis(type) {
if (!type) {
//加载黑色arcgis午夜蓝图
this.arcgiswhiteMap.hide();
this.arcgisMap.show();
} else {
//加载蓝色底图
this.arcgisMap.hide();
this.arcgiswhiteMap.show();
}
}
},
computed: {
switchStatus: function() {
return this.flag; // 直接监听props里的status状态
}
},
mounted: function() {
// 根据平台渲染站点数量统计及状态统计
this.loadSiteNumForOroject();
// 根据平台渲染项目设备总览
this.loadQuyuShebei();
// 根据平台渲染项目设备环比增长
this.loadQuYuSheBeiHuanBi();
// 根据平台渲染站点实时报警信息
this.loadSiteBaoJing();
// 返回出项目的坐标以及缩放等级**************************GIS调用
// 默认加载所有的平台
this.LoadAllProject();
this.createMap();
// 默认展示 全部 的请求
// this.ListClick(0, { platformCode: "" });
// 默认加载项目站点覆盖排名
this.loadQuyuPaiMing();
this.$nextTick(function() {
this.timer = setInterval(this.ScrollUp, 100);
});
// 默认从本地session srotage里面读取历史搜索记录ZZJ
this.getItem();
},
destroyed: function() {
clearInterval(this.timer);
}
};
</script>
<style scoped>
.select {
color: #fff;
background: rgb(0, 119, 254);
}
.selectWidth {
width: 3.2rem;
}
#previewOfSiteStatusMaps {
width: 100%;
height: 100%;
position: relative;
}
#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);
}
.previewButton .previewHistory .previewtext:nth-child(2n) {
/* margin-left: 0.08rem; */
/* margin-right: 2%; */
}
/* 项目选择A */
#previewOfSiteStatusCentent1 {
width: 100%;
height: calc(100% - 5px);
overflow: auto;
margin: 0;
padding-top: 10px;
box-sizing: border-box;
}
.previewOfSiteStatusCentent1Li {
width: auto;
height: 32px;
line-height: 26px;
border: 1px solid rgb(0, 119, 254);
float: left;
padding: 3px 18px;
color: rgb(0, 119, 254);
margin: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: 14px;
box-sizing: border-box;
}
.selectPreviewOfSiteStatusCentent1Li {
border: 1px solid rgb(255, 217, 0);
color: rgb(255, 217, 0);
}
/* 项目选择B */
/* 平台站点数量及状态统计A */
#previewOfSiteStatusCentent2_1,
#previewOfSiteStatusCentent2_2 {
width: 100%;
height: 50%;
float: left;
}
.previewOfSiteStatusCentent2P {
color: rgb(0, 119, 254);
float: left;
height: 24px;
line-height: 24px;
padding-left: 15px;
font-size: 14px;
margin-top: 20px;
font-size: 16px;
}
.previewOfSiteStatusCentent2C {
width: 100%;
height: 80px;
float: left;
}
.previewOfSiteStatusCentent2CList {
height: 100%;
width: 33.3%;
float: left;
}
.previewOfSiteStatusCentent2CListData {
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
float: left;
color: var(--preTopDatatxt);
font-size: 24px;
}
.previewOfSiteStatusCentent2CListFont {
width: 100px;
text-align: center;
height: 20px;
line-height: 20px;
float: left;
}
.previewOfSiteStatusCentent2CListFontImg {
width: 18px;
height: 18px;
vertical-align: middle;
}
.previewOfSiteStatusCentent2CListFonts {
color: rgb(0, 119, 254);
vertical-align: middle;
font-size: 15px;
}
/* 平台站点数量及状态统计B */
/* 项目站点覆盖排名A */
#previewOfSiteStatusCentent3 {
width: 100%;
height: 100%;
overflow: auto;
}
.previewOfSiteStatusCentent3Li {
width: 100%;
height: 40px;
line-height: 0;
/* background: rgba(47, 53, 77, 0.5); */
}
.previewOfSiteStatusCentent3LiName {
float: left;
width: 90px;
color: var(--white);
text-align: left;
height: 40px;
line-height: 40px;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding-left: 5px;
}
.previewOfSiteStatusCentent3LiCharts {
float: left;
height: 12px;
border: 1px solid rgb(0, 119, 254);
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200px;
margin-top: 14px;
margin-left: 5px;
position: relative;
}
.previewOfSiteStatusCentent3LiCharts2 {
position: absolute;
top: 0;
left: 0;
background: url("./../../../static/img/JDT.png") repeat-x;
height: 10px;
}
.previewOfSiteStatusCentent3LiData {
float: left;
color: var(--preTopDatatxt);
height: 40px;
line-height: 40px;
margin-left: 5px;
}
.previewOfSiteStatusCentent3LiDW {
color: rgb(0, 119, 254);
}
/* 项目站点覆盖排名B */
/* 项目设备总览A */
#previewOfSiteStatusCentent4 {
width: 100%;
height: 100%;
}
#previewOfSiteStatusCentent4eCharts {
width: 250px;
height: 250px;
float: left;
}
#previewOfSiteStatusCentent4Font {
width: 100px;
height: 100%;
float: left;
}
#previewOfSiteStatusCentent4Font1 {
width: 100%;
height: 50%;
float: left;
padding-top: 75px;
box-sizing: border-box;
}
#previewOfSiteStatusCentent4Font2 {
width: 100%;
height: 50%;
float: left;
padding-top: 5px;
box-sizing: border-box;
}
.previewOfSiteStatusCentent4Font1P1 {
float: left;
width: 100%;
height: 24px;
line-height: 24px;
color: rgb(255, 217, 0);
}
.previewOfSiteStatusCentent4Font1P2 {
float: left;
width: 100%;
height: 24px;
line-height: 24px;
color: var(--white);
vertical-align: middle;
}
.previewOfSiteStatusCentent4Font1P2S {
float: left;
width: 16px;
height: 16px;
border-radius: 10px;
background: rgb(255, 217, 0);
vertical-align: middle;
}
.previewOfSiteStatusCentent4Font2P1 {
float: left;
width: 100%;
height: 24px;
line-height: 24px;
color: rgb(0, 119, 254);
}
.previewOfSiteStatusCentent4Font2P2 {
float: left;
width: 100%;
height: 24px;
line-height: 24px;
color: var(--white);
vertical-align: middle;
}
.previewOfSiteStatusCentent4Font2P2S {
float: left;
width: 16px;
height: 16px;
border-radius: 10px;
background: rgb(0, 119, 254);
vertical-align: middle;
}
/* 项目设备总览B */
/* 项目设备环比增长A */
#previewOfSiteStatusCentent5 {
width: 100%;
height: 100%;
}
/* 项目设备环比增长B */
/* 站点实时报警A */
#previewOfSiteStatusCentent6 {
width: 100%;
height: 100%;
/* background: rgba(7, 13, 19, 0.38); */
overflow: auto;
}
#GisRightCententBox2UL {
width: 100%;
height: auto;
}
.GIsRightWaringList {
width: 100%;
height: 30px;
line-height: 30px;
color: white;
box-sizing: border-box;
border-bottom: 1px solid cadetblue;
}
.GIsRightWaringList:hover {
background: rgb(0, 119, 254);
cursor: pointer;
}
.GIsRightWaringListNo {
width: 40%;
float: left;
font-size: 14px;
color: var(--white);
}
.GIsRightWaringListName {
width: 45%;
float: left;
font-size: 14px;
color: var(--white);
}
.GIsRightWaringListType {
width: 15%;
float: left;
font-size: 14px;
}
.red {
color: red;
}
.Yellow {
color: var(--diatitle);
}
.NoBaoJing {
position: relative;
top: 50px;
}
/* 站点实时报警B */
</style>
<style>
.esriPopup .sizer {
width: 300px;
}
/* infowindow相关 */
.esriPopup .outerPointer,
.contentPane,
.actionsPane {
background-color: rgba(17, 32, 39, 0.8) !important;
color: #fff !important;
}
.esriPopup .titlePane {
background-color: #112027 !important;
color: #fff !important;
opacity: 0.8 !important;
}
.esriPopup .contentPane {
padding: 0px 6px 6px 10px !important;
}
.esriPopup .titleButton.close {
opacity: 1 !important;
}
/* .esriPopup .titleButton.closeclose:hover{
opacity:0!important;
} */
.esriViewPopup .headerBox {
overflow: hidden;
}
.esriViewPopup .header {
color: #fff !important;
font-size: 14px;
}
.esriPopup .titleButton.maximize {
display: none;
}
.esriViewPopup .mainSection .attrTable td,
td.attrName {
color: #fff !important;
font-size: 12px;
}
.esriViewPopup .hzLine {
border-top: 1px solid #3f586f !important;
}
.sizer {
width: 350px !important;
}
.esriPopup a {
color: #fff;
}
.actionList {
display: none;
}
.boxmain,
.boxmainR {
position: absolute;
top: 0;
bottom: 0;
width: 350px;
overflow-x: hidden;
overflow-y: auto;
z-index: 100;
}
.boxmain {
left: 0;
}
.boxmainR {
right: 0;
}
</style>
