<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 id="previewOfSiteStatusLeftTop">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus1.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">项目选择</span>
</div>
<div class="previewOfSiteStatusCentent">
<ul id="previewOfSiteStatusCentent1">
<li
class="previewOfSiteStatusCentent1Li"
v-for="(item, index) in ProjectList"
:key="index"
:class="{selectPreviewOfSiteStatusCentent1Li:index==dynamic}"
@click="ListClick(index,item) "
style="cursor: pointer;"
:title="item.name"
>{{item.name}}</li>
</ul>
</div>
</div>
<!-- 平台站点数量及状态统计 -->
<div id="previewOfSiteStatusLeftcenter">
<div class="previewOfSiteStatusTitle">
<img
src="./../../../static/img/previewOfSiteStatus2.png"
alt
class="previewOfSiteStatusTitleImg"
/>
<span class="previewOfSiteStatusTitleFont">平台站点数量及状态统计</span>
</div>
<div class="previewOfSiteStatusCentent">
<div id="previewOfSiteStatusCentent2_1">
<p class="previewOfSiteStatusCentent2P">平台站点（个）</p>
<div class="previewOfSiteStatusCentent2C">
<div class="previewOfSiteStatusCentent2CList">
<!-- <div class="previewOfSiteStatusCentent2CListData"> -->
<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 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">1866</p>
<p class="previewOfSiteStatusCentent4Font1P2">
<span class="previewOfSiteStatusCentent4Font1P2S"></span>
现有设备
</p>
</div>
<div id="previewOfSiteStatusCentent4Font2">
<p class="previewOfSiteStatusCentent4Font2P1">1866</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">
<div class="GIsRightWaringList" v-for="(item, index) in WaringList" :key="index">
<!-- @click="WaringListC(item)" -->
<span class="GIsRightWaringListNo">{{item.siteName}}</span>
<span class="GIsRightWaringListName">{{item.factorsName}}</span>
<span
class="GIsRightWaringListType"
:class="[item.warnType==2?'red':'Yellow']"
>{{item.warnTypeDesc}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { message } from "./../../util/item";
import countTo from "vue-count-to"; //引入数字滚动插件
export default {
name: "previewOfSiteStatus",
components: { countTo }, //加载数字滚动插件
data: function() {
return {
timer: {}, //定时器
// 顶部中间汇总A
TopData1: "1866",
TopData2: "933",
TopData3: "50" + "%",
// 顶部中间汇总B
// 项目选择A
ProjectList: [
{
//数据格式
name: "全部",
position: "定位坐标",
ZoomLevel: "8",
platformCode: ""
}
],
dynamic: 0,
ChecksplatformCode: "", //选取的平台的编号
// 项目选择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"
// }
],
// 区域站点覆盖排名B
// 区域设备总览A
myChart: {},
// 区域设备总览B
// 区域设备环比增长A
myChart2: {},
// 区域设备环比增长B
// 站点实时报警A
// WaringListData：测试数据
WaringListData: {
code: 200,
msg: "请求成功",
data: {
total: 59471,
size: 20,
current: 1,
records: [
{
sidx: null,
order: null,
id: "144683",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 17:00:00",
createTime: "2019-11-11 17:01:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144684",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 17:00:00",
createTime: "2019-11-11 17:01:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144681",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:50:00",
createTime: "2019-11-11 16:56:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144682",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:50:00",
createTime: "2019-11-11 16:56:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144677",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:45:00",
createTime: "2019-11-11 16:46:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144678",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:45:00",
createTime: "2019-11-11 16:46:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144675",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:35:00",
createTime: "2019-11-11 16:41:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144676",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:35:00",
createTime: "2019-11-11 16:41:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144671",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:30:00",
createTime: "2019-11-11 16:31:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144672",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:30:00",
createTime: "2019-11-11 16:31:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144669",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:20:00",
createTime: "2019-11-11 16:26:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144670",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:20:00",
createTime: "2019-11-11 16:26:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144665",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:15:00",
createTime: "2019-11-11 16:16:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144666",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:15:00",
createTime: "2019-11-11 16:16:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144663",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:05:00",
createTime: "2019-11-11 16:11:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144664",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:05:00",
createTime: "2019-11-11 16:11:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144659",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 16:00:00",
createTime: "2019-11-11 16:01:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144660",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 16:00:00",
createTime: "2019-11-11 16:01:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144657",
siteNo: "0230190001",
siteName: "JL002文星路382号",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "Z",
factorsName: "水位1",
warnValue: 0.03,
ttTime: "2019-11-11 15:50:00",
createTime: "2019-11-11 15:56:00",
auditorMsg: null,
flag: false
},
{
sidx: null,
order: null,
id: "144658",
siteNo: "0230190008",
siteName: "JL010沿河东路南段",
warnType: 1,
warnTypeDesc: "预警",
factorsAscii: "SBL1",
factorsName: "小时水量1",
warnValue: 0.0,
ttTime: "2019-11-11 15:50:00",
createTime: "2019-11-11 15:56:00",
auditorMsg: null,
flag: false
}
],
pages: 2974
}
},
WaringList: []
// 站点实时报警B
};
},
methods: {
// 获取所有平台
LoadAllProject() {
this.$http
.post(this.nozzle.sysPlatformListPlatform, {
data: {}
})
.then(response => {
if (response.data.code === 200) {
this.ProjectList = this.ProjectList.concat(
response.data.data.records
);
} else {
message(response);
}
})
.catch(response => {
message(response);
});
},
// 根据平台渲染站点数量统计及状态统计
loadSiteNumForOroject() {
this.$http
.post(this.nozzle.sysPlatformGetSiteCountAndState, {
data: { platform: this.ChecksplatformCode }
})
.then(response => {
if (response.data.code === 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.sitecount;
this.Site.EOn = response.data.data.onlinecount;
this.Site.EOff = response.data.data.offlinecount;
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);
});
},
// 点击项目
ListClick(index, item) {
console.log(item);
this.dynamic = index;
this.ChecksplatformCode = item.platformCode;
// 根据平台渲染站点数量统计及状态统计
this.loadSiteNumForOroject();
},
// 加载区域设备总览的ecahrts
loadRegionEcharts() {
// 基于准备好的dom，初始化echarts实例
this.myChart = this.$echarts.init(
document.getElementById("previewOfSiteStatusCentent4eCharts")
);
// 绘制图表
this.myChart.clear();
this.myChart.setOption({
tooltip: {
trigger: "axis"
},
legend: {
x: "center",
data: ["现有设备", "搭建设备"],
show: false
},
radar: [
{
indicator: [
{ text: "电子围栏" },
{ text: "其他" },
{ text: "监测点" },
{ text: "监控探头" },
{ text: "视频监控" },
{ text: "站点" },
{ text: "泵机" },
{ text: "测量仪" }
],
radius: 70,
shape: "circle"
}
],
series: [
{
type: "radar",
itemStyle: { normal: { areaStyle: { type: "default" } } },
tooltip: {
trigger: "item"
},
data: [
{
name: "现有设备",
value: [45, 40, 60, 55, 78, 20, 40, 35],
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: [14, 20, 16, 12, 33, 35, 40, 40],
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() {
// 基于准备好的dom，初始化echarts实例
this.myChart2 = this.$echarts.init(
document.getElementById("previewOfSiteStatusCentent5")
); // 绘制图表
this.myChart2.clear();
this.myChart2.setOption({
color: [
"rgb(251,122,143)",
"rgb(111,254,153)",
"rgb(255,214,0)",
"rgb(67,253,255)",
"rgb(180,123,254)",
"rgb(250,167,87)"
],
tooltip: {
trigger: "axis"
},
legend: {
data: [
"电子围栏",
"视频监控",
"监控探头",
" 测量仪 ",
" 泵 机 ",
" 站 点 "
],
textStyle: {
//图例文字的样式
color: "#fff",
fontSize: 12
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
axisLabel: {
formatter: "{value}",
textStyle: {
//改变刻度字体样式
color: "#fff"
}
},
splitLine: {
show: false
}
},
yAxis: {
type: "value",
axisLabel: {
formatter: "{value}",
textStyle: {
//改变刻度字体样式
color: "#fff"
}
},
splitLine: {
show: false
}
},
series: [
{
name: "电子围栏",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210],
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: " 测量仪 ",
type: "line",
data: [220, 182, 191, 234, 290, 330, 310],
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: " 泵 机 ",
type: "line",
data: [150, 232, 201, 154, 190, 330, 410],
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: " 站 点 ",
type: "line",
data: [320, 332, 301, 334, 390, 330, 320],
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: "视频监控",
type: "line",
data: [820, 932, 901, 934, 1290, 1330, 1320],
smooth: true,
symbol: "none" //取消折点圆圈
},
{
name: "监控探头",
type: "line",
data: [656, 775, 658, 669, 447, 665, 111],
smooth: true,
symbol: "none" //取消折点圆圈
}
]
});
},
// 预警报警信息滚动
ScrollUp() {
// console.log("执行了");
var box = document.getElementById("previewOfSiteStatusCentent6");
var con1 = document.getElementById("GisRightCententBox2UL");
/* console.log(box.scrollTop + "!");
console.log(con1.scrollHeight + "!!");
console.log(box.offsetHeight + "!!!"); */
if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
}
},
mounted: function() {
// 默认加载所有的平台
this.LoadAllProject();
// 默认展示 全部 的请求
this.ListClick(0, { platformCode: "" });
// 默认加载区域站点覆盖排名
this.loadQuyuPaiMing();
this.loadRegionEcharts();
this.loadRegionEcharts2();
this.WaringList = this.WaringListData.data.records;
this.$nextTick(function() {
this.timer = setInterval(this.ScrollUp, 50);
});
},
destroyed: function() {
console.log("我已经离开了！");
clearInterval(this.timer);
}
};
</script>
<style scoped>
#previewOfSiteStatusMaps {
width: 100%;
height: 100%;
position: relative;
}
#previewOfSiteStatusLeftTop {
position: absolute;
left: 0;
width: 350px;
height: 290px;
top: 0px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
#previewOfSiteStatusLeftcenter {
position: absolute;
left: 0;
width: 350px;
height: 290px;
top: 305px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
#previewOfSiteStatusLeftBottom {
position: absolute;
left: 0;
width: 350px;
height: 290px;
top: 610px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
#previewOfSiteStatusRightTop {
position: absolute;
right: 0;
width: 350px;
height: 290px;
top: 0px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
#previewOfSiteStatusRightcenter {
position: absolute;
right: 0;
width: 350px;
height: 290px;
top: 305px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
#previewOfSiteStatusRightBottom {
position: absolute;
right: 0;
width: 350px;
height: 290px;
top: 610px;
background: rgba(27, 28, 32, 0.5);
z-index: 100;
}
.previewOfSiteStatusTitle {
width: 100%;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 10px;
box-sizing: border-box;
background: rgba(25, 26, 28);
}
.previewOfSiteStatusTitleImg {
width: 28px;
height: 28px;
vertical-align: middle;
}
.previewOfSiteStatusTitleFont {
color: rgb(0, 119, 254);
vertical-align: middle;
}
#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;
}
.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: rgb(255, 217, 0);
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);
}
/* 项目选择A */
#previewOfSiteStatusCentent1 {
width: 100%;
height: calc(100% - 5px);
overflow: auto;
margin: 0;
padding-top: 10px;
box-sizing: border-box;
}
.previewOfSiteStatusCentent1Li {
/* width: auto; */
height: 26px;
line-height: 19px;
border: 1px solid rgb(0, 119, 254);
float: left;
padding: 3px 10px;
color: rgb(0, 119, 254);
margin: 5px 10px;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;
box-sizing: border-box;
overflow: hidden;
font-size: 14px;
}
.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: rgb(255, 217, 0);
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: 70px;
color: 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: rgb(255, 217, 0);
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: 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: 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: 50%;
float: left;
font-size: 14px;
}
.GIsRightWaringListName {
width: 25%;
float: left;
font-size: 14px;
}
.GIsRightWaringListType {
width: 25%;
float: left;
font-size: 14px;
}
.red {
color: red;
}
.Yellow {
color: yellow;
}
/* 站点实时报警B */
</style>
