<template>
|
<!-- <div > -->
|
<!-- <div class="center">
|
<div id="map" style="width:100%;height:100%;"></div>
|
</div> -->
|
|
|
<div id="index" ref="appRef">
|
|
<!-- <dv-full-screen-container> -->
|
<div class="bg" ref="editor">
|
<!-- <dv-loading>Loading...</dv-loading> -->
|
<!-- 头部样式 -->
|
<div class="top">
|
<span class="toptitle" v-if="!systemname">
|
广西中油监测管理平台
|
</span>
|
<span class="toptitle" v-else>
|
{{ systemname }}
|
</span>
|
|
</div>
|
<div class="title_right">
|
<img src="../../assets/images/title_right_time.png" class="title_right_img" alt="">
|
<span class="title_right_time">{{ dateDay }}</span>
|
<span class="title_right_day">{{ dateYear }}</span>
|
<span class="title_right_week">{{ dateWeek }}</span>
|
</div>
|
<div class="title_left">
|
<span class="title_left_text">欢迎：{{ role }}</span>
|
<el-button class="title_left_bnt" type="text" @click="backstage">管理后台</el-button>
|
<el-button class="title_leftout_bnt" type="text" @click="backout">退出</el-button>
|
</div>
|
<!-- 左侧进度条数据 -->
|
<div class="left">
|
<!-- <el-radio-group v-model="leftradio" class="title_left_radio" v-removeAriaHidden>
|
<el-radio class="title_left_edmm" :label="2" >东位移</el-radio>
|
<el-radio class="title_left_ndmm" :label="4" >北位移</el-radio>
|
<el-radio class="title_left_tdmm" :label="8" >天位移</el-radio>
|
</el-radio-group> -->
|
|
<BarChart :chart-data="barChartData" width="530px" height="900px" v-if="barChartData.tagid != ''"
|
style="position: absolute;top: 70px;" />
|
<!-- <BarChart /> -->
|
<!-- <span class="title_left_edmm">东位移</span>
|
<span >北位移</span>
|
<span >天位移</span> -->
|
<!-- 循环堆叠进度条以及悬停弹窗 -->
|
<!-- <div class="process">
|
<div v-for="(item, index) in processBarModel" :key="index">
|
<span class="process_left_tagid">{{ item.tagid }}</span>
|
|
<processBar :processValue="item.processValue" :processValueyuan=item.processValueyuan
|
style="top: 20px;" />
|
<span class="process_left_zong"> {{ totalSum(item) }}</span>
|
</div>
|
</div> -->
|
|
|
<!-- <pagination small class="pageleft" v-show="total > 0" :total="total" :pagerCount="pagerCount"
|
:page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="fetchData" /> -->
|
</div>
|
<!-- 居中地图 -->
|
<div class="center">
|
|
<!-- <div id="map" style="width:100%;height:100%;"></div> -->
|
<!-- <Dialog v-model="DialogVisible" :DialogVisible="DialogVisible" :tagid="tagid"/> -->
|
|
<iframe width="100%" height="100%" src="/#/dpmap" frameBorder="0" />
|
</div>
|
<!-- 右侧数据 -->
|
<div class="right">
|
<el-popover placement="right" title="监测站" trigger="click" v-model="monitorvisible"
|
style="height: 200px; overflow: auto;">
|
<el-button type="text" class="monitor_left_bnt"
|
style="position: absolute;right: 20px;top: 0;font-size: 16px;"
|
@click="monitorvisible = false">关闭</el-button>
|
<el-divider content-position="right"></el-divider>
|
<!-- <dv-border-box-12 class="monitor" style="position: absolute;z-index: 2004;"> -->
|
<el-table class="dptable" :data="monitorGridData" height="250" style=" overflow: auto;">
|
<el-table-column width="80" property="date" label="编号"><template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template></el-table-column>
|
<el-table-column width="150" property="name" label="名称"> <template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template></el-table-column>
|
<el-table-column width="120" property="address" label="状态"> <template slot-scope="scope">
|
<!-- <span v-if="scope.row.onlie == '1'"><img src="../../assets/images/online.png"></span>
|
<span v-else-if="scope.row.onlie == '0'"><img
|
src="../../assets/images/offline.png"></span> -->
|
<span v-if="scope.row.onlie == '1'">在线</span>
|
<span v-else-if="scope.row.onlie == '0'">离线</span>
|
<span v-else-if="scope.row.onlie == '4'">高精度</span>
|
<span v-else-if="scope.row.onlie == '6'">超阈值告警</span>
|
<span v-else-if="scope.row.onlie == '7'">非高精度告警</span>
|
</template></el-table-column>
|
<el-table-column width="150" property="address" label="时间"> <template slot-scope="scope">
|
<span>{{ scope.row.addtime }}</span>
|
</template></el-table-column>
|
</el-table>
|
<!-- </dv-border-box-12> -->
|
<el-button class="title_right_monitor" type="text" style="color: aliceblue; font-size: 30px;"
|
slot="reference">{{
|
monitorNum }}</el-button>
|
<!-- <span class="title_right_monitor" slot="reference" @click="monitorNumList">{{ monitorNum }}</span> -->
|
</el-popover>
|
|
<el-popover placement="right" title="基准站" trigger="click" v-model="standardvisible">
|
<el-button type="text" class="standard_left_bnt"
|
style="position: absolute;right: 20px;top: 0;font-size: 16px;"
|
@click="standardvisible = false">关闭</el-button>
|
<el-divider content-position="right"></el-divider>
|
<!-- <dv-border-box-12 class="monitor" style="position: absolute;z-index: 2004;"> -->
|
<el-table class="dptable" :data="standardGridData" height="250" style=" overflow: auto;">
|
<el-table-column width="80" property="date" label="编号"><template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template></el-table-column>
|
<el-table-column width="150" property="name" label="名称"> <template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template></el-table-column>
|
<el-table-column width="120" property="address" label="状态"> <template slot-scope="scope">
|
<!-- <span v-if="scope.row.onlie == '1'"><img src="../../assets/images/online.png"></span>
|
<span v-else-if="scope.row.onlie == '0'"><img
|
src="../../assets/images/offline.png"></span> -->
|
<span v-if="scope.row.onlie == '1'">在线</span>
|
<span v-else-if="scope.row.onlie == '0'">离线</span>
|
<span v-else-if="scope.row.onlie == '4'">高精度</span>
|
<span v-else-if="scope.row.onlie == '6'">超阈值告警</span>
|
<span v-else-if="scope.row.onlie == '7'">非高精度告警</span>
|
</template></el-table-column>
|
<el-table-column width="150" property="address" label="时间"> <template slot-scope="scope">
|
<span>{{ scope.row.addtime }}</span>
|
</template></el-table-column>
|
</el-table>
|
<!-- </dv-border-box-12> -->
|
<el-button class="title_right_standard" type="text" style="color: aliceblue; font-size: 30px;"
|
slot="reference">{{
|
standardNum }}</el-button>
|
<!-- <span class="title_right_standard" slot="reference">{{ standardNum }}</span> -->
|
<!-- <span class="title_right_monitor" @click="monitorNumList">{{ monitorNum }}</span> -->
|
</el-popover>
|
|
<el-popover placement="right" title="离线设备" trigger="click" v-model="offlinevisible">
|
<el-button type="text" class="offline_left_bnt"
|
style="position: absolute;right: 20px;top: 0;font-size: 16px;"
|
@click="offlinevisible = false">关闭</el-button>
|
<el-divider content-position="right"></el-divider>
|
<!-- <dv-border-box-12 class="monitor" style="position: absolute;z-index: 2004;"> -->
|
<el-table class="dptable" :data="offlineGridData" height="250" style=" overflow: auto;">
|
<el-table-column width="80" property="date" label="编号"><template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template></el-table-column>
|
<el-table-column width="150" property="name" label="名称"> <template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template></el-table-column>
|
<el-table-column width="120" property="address" label="状态"> <template slot-scope="scope">
|
<!-- <span v-if="scope.row.onlie == '1'"><img src="../../assets/images/online.png"></span>
|
<span v-else-if="scope.row.onlie == '0'"><img
|
src="../../assets/images/offline.png"></span> -->
|
|
<span v-if="scope.row.onlie == '1'">在线</span>
|
<span v-else-if="scope.row.onlie == '0'">离线</span>
|
<span v-else-if="scope.row.onlie == '4'">高精度</span>
|
<span v-else-if="scope.row.onlie == '6'">超阈值告警</span>
|
<span v-else-if="scope.row.onlie == '7'">非高精度告警</span>
|
</template></el-table-column>
|
<el-table-column width="150" property="address" label="离线时间"> <template slot-scope="scope">
|
<span>{{ scope.row.addtime }}</span>
|
</template></el-table-column>
|
</el-table>
|
<!-- </dv-border-box-12> -->
|
<el-button class="title_right_offline" type="text" style="color: aliceblue; font-size: 30px;"
|
slot="reference">{{
|
offlineNum }}</el-button>
|
<!-- <span class="title_right_offline" slot="reference">{{ offlineNum }}</span> -->
|
<!-- <span class="title_right_offline" >{{ offlineNum }}</span> -->
|
<!-- <span class="title_right_monitor" @click="monitorNumList">{{ monitorNum }}</span> -->
|
</el-popover>
|
|
<el-popover placement="right" title="告警信息" trigger="click" v-model="alarmvisible">
|
<el-button type="text" class="alarm_left_bnt"
|
style="position: absolute;right: 20px;top: 0;font-size: 16px;"
|
@click="alarmvisible = false">关闭</el-button>
|
<el-divider content-position="right"></el-divider>
|
<!-- <dv-border-box-12 class="monitor" style="position: absolute;z-index: 2004;"> -->
|
<el-table class="dptable" :data="alarmGridData" height="250" style=" overflow: auto;">
|
<el-table-column width="80" property="date" label="编号"><template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template></el-table-column>
|
<el-table-column width="100" property="name" label="名称"> <template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template></el-table-column>
|
<el-table-column width="80" property="address" label="报警类型"> <template slot-scope="scope">
|
{{ scope.row.alarmtype }}
|
</template></el-table-column>
|
<el-table-column width="80" property="address" label="处理状态"> <template slot-scope="scope">
|
{{ scope.row.status }}
|
</template></el-table-column>
|
<el-table-column width="150" property="address" label="时间"> <template slot-scope="scope">
|
<span>{{ scope.row.alarmtime }}</span>
|
</template></el-table-column>
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button-group>
|
<el-button type="success" size="mini" @click="processing(scope)">
|
处理
|
</el-button>
|
<!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope)">
|
删除
|
</el-button> -->
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- </dv-border-box-12> -->
|
<el-button class="title_right_alarm" type="text" style="color: aliceblue; font-size: 30px;"
|
slot="reference">{{
|
alarmNum }}</el-button>
|
<!-- <span class="title_right_alarm" slot="reference">{{ alarmNum }}</span> -->
|
<!-- <span class="title_right_offline" >{{ offlineNum }}</span> -->
|
<!-- <span class="title_right_offline" >{{ offlineNum }}</span> -->
|
<!-- <span class="title_right_monitor" @click="monitorNumList">{{ monitorNum }}</span> -->
|
</el-popover>
|
|
<span class="title_right_alerttime">{{ alerttime }}</span>
|
<span class="title_right_message">{{ messageNum }}</span>
|
</div>
|
<!-- 底部表格 -->
|
<div class="bottom">
|
<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" stripe fit height="70%"
|
style="top: 5%;" class="table-container" highlight-current-row>
|
<el-table-column label="编号" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.tagid }}
|
</template>
|
</el-table-column>
|
<el-table-column label="设备名称" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.anchorname }}
|
</template>
|
</el-table-column>
|
|
<el-table-column label="东位移（毫米）" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.edmm }}
|
</template>
|
</el-table-column>
|
<el-table-column label="北位移（毫米）" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.ndmm }}
|
</template>
|
</el-table-column>
|
<el-table-column label="天位移（毫米）" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.hdmm }}</span>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column label="电量" align="center">
|
<template slot-scope="scope">
|
{{ scope.row.power }}
|
</template>
|
</el-table-column> -->
|
<el-table-column label="设备状态" width="160" align="center">
|
<template slot-scope="scope">
|
<!-- <span v-if="scope.row.onlie == '1'"><img src="../../assets/images/online.png"></span>
|
<span v-else-if="scope.row.onlie == '0'"><img src="../../assets/images/offline.png"></span> -->
|
<span v-if="scope.row.onlie == '1'">在线</span>
|
<span v-else-if="scope.row.onlie == '0'">离线</span>
|
<span v-else-if="scope.row.onlie == '4'">高精度</span>
|
<span v-else-if="scope.row.onlie == '6'">超阈值告警</span>
|
<span v-else-if="scope.row.onlie == '7'">非高精度告警</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="卫星数" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.gpsnum+"/"+scope.row.gpsstate }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="分析时间" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.jxtime }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="详情" align="center">
|
<template slot-scope="scope">
|
<el-button-group>
|
<el-button type="primary" icon="el-icon-view" size="mini" @click="view(scope)">
|
查看
|
</el-button>
|
<!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="del(scope)">
|
删除
|
</el-button> -->
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<img src="../../assets/images/bottom.png"
|
style="position: absolute;z-index: 19; width: 100%;height: 90%;" alt="">
|
<!-- <pagination class="page" v-show="total > 0" :total="total" :page.sync="listQuery.current"
|
:limit.sync="listQuery.size" @pagination="fetchData" /> -->
|
</div>
|
|
<el-dialog :modal="false" :visible.sync="processingdialogVisible" title="处理">
|
|
|
<el-form ref="dataForm" :model="temp" label-width="120px" label-position="right">
|
<el-form-item label="序号">
|
<el-input v-model="temp.id
|
" />
|
</el-form-item>
|
<el-form-item label="快速处理">
|
<el-radio-group v-model="radio" v-removeAriaHidden class="dpradio">
|
<el-radio :label="3" class="dpradio">无需处理</el-radio>
|
<el-radio :label="6" class="dpradio">误报</el-radio>
|
<el-radio :label="9" class="dpradio">已联系</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="处理记录">
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入处理记录"
|
v-model="temp.records">
|
</el-input>
|
</el-form-item>
|
</el-form>
|
<div class="text-right">
|
<el-button type="danger" @click="processingdialogVisible = false">
|
取消
|
</el-button>
|
<el-button type="primary" @click="submit">
|
确定
|
</el-button>
|
</div>
|
</el-dialog>
|
<!-- 查看对话框 -->
|
<!-- <el-dialog :modal="false" :visible.sync="dialogVisible" :title="dialogType === 'view' ? '查看' : '新增'" custom-class="lineChart"> -->
|
|
<!-- <el-form ref="dataForm" :model="temp" label-width="120px" label-position="right">
|
<el-form-item label="编号">
|
<el-input v-model="temp.tagid" readonly />
|
</el-form-item>
|
<el-form-item label="名称">
|
<el-input v-model="temp.anchorname" readonly />
|
</el-form-item>
|
<el-form-item label="东位移">
|
<el-input v-model="temp.edmm" readonly />
|
</el-form-item>
|
<el-form-item label="北位移">
|
<el-input v-model="temp.ndmm" readonly />
|
</el-form-item>
|
<el-form-item label="天位移">
|
<el-input v-model="temp.tdmm" readonly />
|
</el-form-item>
|
<el-form-item label="卫星">
|
<el-input v-model="temp.gpsnum" readonly />
|
</el-form-item>
|
</el-form> -->
|
|
<div class="lineChart" v-if="dialogVisible" style="background-color:rgb(8, 17, 56) ;">
|
<span
|
style=" display: flex;justify-content: center;align-items: center;font-size: 25px;margin-top: 20px;">
|
{{
|
temp.anchorname + "-" + temp.tagid+"变化趋势图"}}</span>
|
|
<el-button type="text" class="monitor_left_bnt"
|
style="position: absolute;right: 20px;top: 0;font-size: 25px;"
|
@click="dialogVisible = false">关闭</el-button>
|
<el-divider content-position="right"></el-divider>
|
<line-chart :chart-data="lineChartData" height="85%" />
|
<!-- <el-button type="primary" @click="dialogVisible = false">
|
关闭
|
</el-button> -->
|
</div>
|
<!-- </el-dialog> -->
|
</div>
|
<!-- </dv-full-screen-container> -->
|
</div>
|
<!-- </div> -->
|
</template>
|
|
<script>
|
|
const ToDigital = (strDu, strFen, strMiao, len) => {
|
len = (len > 6 || typeof (len) == "undefined") ? 6 : len;//精确到小数点后最多六位
|
strDu = (typeof (strDu) == "undefined" || strDu == "") ? 0 : parseFloat(strDu);
|
strFen = (typeof (strFen) == "undefined" || strFen == "") ? 0 : parseFloat(strFen) / 60;
|
strMiao = (typeof (strMiao) == "undefined" || strMiao == "") ? 0 : parseFloat(strMiao) / 60; //秒为分的格式
|
var digital = strDu + strFen + strMiao;
|
if (digital == 0) {
|
return "";
|
} else {
|
return digital.toFixed(len);
|
}
|
}
|
class Convertor {
|
constructor(ak) {
|
this.stepCount = 100;
|
this.pointCount = [];
|
this.Result = [];
|
this.NoisIndex = [];
|
this.Time = new Date();
|
this.AK = ak;
|
this.M_PI = 3.14159265358979324;
|
this.A = 6378245.0;
|
this.EE = 0.00669342162296594323;
|
this.X_PI = this.M_PI * 3000.0 / 180.0;
|
}
|
/**
|
* WGS->百度坐标系
|
*/
|
WGS2BD09(poi) {
|
var poi2 = this.WGS2GCJ(poi);
|
if (typeof poi2 === "undefined") {
|
return;
|
}
|
//GCJ->百度坐标系
|
return this.GCJ2BD09(poi2);
|
}
|
|
GCJ2BD09(poi) {
|
var poi2 = {};
|
var x = poi.lng
|
, y = poi.lat;
|
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.X_PI);
|
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.X_PI);
|
poi2.lng = z * Math.cos(theta) + 0.0065;
|
poi2.lat = z * Math.sin(theta) + 0.006;
|
return poi2;
|
}
|
WGS2GCJ(poi) {
|
if (this.outofChine(poi)) {
|
return;
|
}
|
var poi2 = {};
|
var dLat = this.WGS2GCJ_lat(poi.lng - 105.0, poi.lat - 35.0);
|
var dLon = this.WGS2GCJ_lng(poi.lng - 105.0, poi.lat - 35.0);
|
var radLat = poi.lat / 180.0 * this.M_PI;
|
var magic = Math.sin(radLat);
|
magic = 1 - this.EE * magic * magic;
|
var sqrtMagic = Math.sqrt(magic);
|
dLat = (dLat * 180.0) / ((this.A * (1 - this.EE)) / (magic * sqrtMagic) * this.M_PI);
|
dLon = (dLon * 180.0) / (this.A / sqrtMagic * Math.cos(radLat) * this.M_PI);
|
poi2.lat = poi.lat + dLat;
|
poi2.lng = poi.lng + dLon;
|
return poi2;
|
}
|
WGS2GCJ_lat(x, y) {
|
var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
ret1 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (20.0 * Math.sin(y * this.M_PI) + 40.0 * Math.sin(y / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (160.0 * Math.sin(y / 12.0 * this.M_PI) + 320 * Math.sin(y * this.M_PI / 30.0)) * 2.0 / 3.0;
|
return ret1;
|
}
|
;
|
WGS2GCJ_lng(x, y) {
|
var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
ret2 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (20.0 * Math.sin(x * this.M_PI) + 40.0 * Math.sin(x / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (150.0 * Math.sin(x / 12.0 * this.M_PI) + 300.0 * Math.sin(x / 30.0 * this.M_PI)) * 2.0 / 3.0;
|
return ret2;
|
}
|
outofChine(p) {
|
if (p.lng < 72.004 || p.lng > 137.8347) {
|
return true;
|
}
|
if (p.lat < 0.8293 || p.lat > 55.8271) {
|
return true;
|
}
|
return false;
|
}
|
}
|
// import BMap from 'BMap';
|
// import { screenSize } from '@/assets/js/utils'
|
// import Dialog from "./components/dialog"
|
import LineChart from "./components/LineChart";
|
import { addorupAlarmrecord, addSystemOperationLog } from '@/api/Alarmrecord'
|
import jizhun from "@/assets/images/ceju.png"
|
import jiance from "@/assets/images/lingjin.png"
|
import processBar from "@/components/processPar";
|
import BarChart from "./components/BarChart";
|
import Pagination from '@/components/Pagination'
|
import drawMixin from "@/utils/drawMixin"; //自适应缩放
|
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
|
import { getList, getEquipment, alldevice, getdevicestate, getsystem, getEquipmentmonitor, getEquipmenttwo } from '@/api/user'
|
import { deepClone } from '@/utils'
|
import { handlechart2, handlechartupdate3 } from '@/api/analysis'
|
const lineChartData = {
|
tagid: '',
|
ed: [],
|
nd: [],
|
hd: [],
|
x: [],
|
};
|
const _temp = {//表单数据对象
|
tagid: '',
|
anchorname: '',
|
edmm: '',
|
ndmm: [],
|
tdmm: '管理员',
|
gpsnum: '',
|
}
|
export default {
|
// name: 'BaiduMapComponent',
|
mixins: [drawMixin],
|
name: 'Home',
|
components: {
|
LineChart,
|
BarChart,
|
processBar,
|
Pagination
|
},
|
data() {
|
return {
|
month: '',
|
barChartData: {
|
tagid: '',
|
ed: [],
|
nd: [],
|
hd: [],
|
x: [],
|
winmax: '',
|
winmin: '',
|
},
|
lineChartData: lineChartData.newVisitis,
|
// leftradio: 2,
|
radio: 3,
|
standardvisible: false,
|
monitorvisible: false,
|
offlinevisible: false,
|
alarmvisible: false,
|
|
systemname: '',
|
gpsnum: '',
|
edm: '',
|
hdm: '',
|
ndm: '',
|
power: '',
|
gpsstate: '',
|
centerdialogVisible: false,
|
DialogVisible: false,
|
tagid: '',
|
temp: Object.assign({}, _temp),
|
count: null,//百分比总和
|
zongdmm: null,//总位移
|
pagerCount: '3',
|
processBarModel: [],
|
standardGridData: [],
|
alarmGridData: [],
|
|
offlineGridData: [],
|
monitorGridData: [],
|
list: [],
|
listLoading: true,
|
listQuery: {
|
// isdp:'true',
|
username: localStorage.getItem('username') || '',
|
// current: 1,
|
// size: 20,
|
created_at: undefined,
|
status: undefined,
|
keyword: undefined
|
},
|
role: '超级管理员',//右上角当前登陆人权限
|
timing: null,
|
//时分秒
|
dateDay: null,
|
//年月日
|
dateYear: null,
|
//周几
|
dateWeek: null,
|
//周几
|
weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
monitorNum: 0,//监测站
|
standardNum: 0,//基准站
|
offlineNum: 0,//离线设备
|
alarmNum: 0,//报警条数
|
messageNum: 0,//报文条数
|
alerttime: '',
|
total: 0,
|
dialogVisible: false,
|
dialogType: 'view',
|
processingdialogVisible: false,
|
}
|
},
|
computed: {
|
|
},
|
created() {
|
console.log(333333333);
|
|
this.fetchData()
|
this.monitordata()
|
},
|
mounted() {
|
this.timeFn();
|
const params = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
alldevice(params).then(response => {
|
console.log(response.data.dataList);
|
|
this.initMap(response.data.dataList, response.data.view)
|
})
|
|
|
},
|
beforeDestroy() {
|
//离开时删除计时器
|
clearInterval(this.timing);
|
},
|
methods: {
|
handelClose() {
|
this.edm = ''
|
this.ndm = ''
|
this.hdm = ''
|
this.power = ''
|
this.gpsnum = ''
|
this.gpsstate = ''
|
},
|
initMap(tags, view) {
|
|
// $(window).scrollTop(0);
|
// window.scroll(0, 0);
|
var c = new Convertor();
|
var map = new BMapGL.Map("map");
|
// var point = new BMapGL.Point(116.404, 39.915); // 地图中心点坐标
|
// map.centerAndZoom(point, 15);
|
const views = view.split(";");
|
map.centerAndZoom(new BMapGL.Point(views[0], views[1]), 12);
|
map.enableScrollWheelZoom(true);
|
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
|
map.addControl(scaleCtrl);
|
var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
|
map.addControl(zoomCtrl);
|
//绿色监测，橙色基准
|
let jizhunzhan = new BMapGL.Icon(jizhun, new BMapGL.Size(30, 30))
|
let jiancezhan = new BMapGL.Icon(jiance, new BMapGL.Size(30, 30))
|
for (let i = 0; i < tags.length; i++) {
|
if (tags[i].lon != null && tags[i].lon != "" && tags[i].lat != null && tags[i].lat != "") {
|
if (tags[i].lon.toString().length > 5 && tags[i].lat.toString().length > 4) {
|
var marker;
|
var label = new BMapGL.Label(tags[i].anchorname + " " + tags[i].tagid, { offset: new BMapGL.Size(0, -40) });
|
if (tags[i].type == 0) {
|
var rr = c.WGS2BD09({
|
lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
|
lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
|
});
|
var pt = new BMapGL.Point(rr.lng, rr.lat)
|
marker = new BMapGL.Marker(pt, {
|
icon: jizhunzhan
|
});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#fa770b",
|
transform: 'translateX(-50%)',
|
})
|
} else {
|
var rr = c.WGS2BD09({
|
lng: new Number(ToDigital(tags[i].lon.substring(0, 3), tags[i].lon.substring(3, 5), tags[i].lon.substring(5))),
|
lat: new Number(ToDigital(tags[i].lat.substring(0, 2), tags[i].lat.substring(2, 4), tags[i].lat.substring(4)))
|
});
|
var pt = new BMapGL.Point(rr.lng, rr.lat)
|
marker = new BMapGL.Marker(pt, {
|
icon: jiancezhan
|
});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#32CD32",
|
transform: 'translateX(-50%)',
|
})
|
}
|
marker.addEventListener("click", () => {
|
this.tagid = tags[i].tagid
|
var params = { tagid: tags[i].tagid }
|
|
|
// tagid.value = tags[i].tagid
|
this.centerdialogVisible = true
|
})
|
marker.setLabel(label)
|
map.addOverlay(marker)
|
}
|
}
|
}
|
},
|
totalSum(item) {
|
return (Number(item.edmm) + Number(item.ndmm) + Number(item.tdmm)).toFixed(2);
|
},
|
|
search() {
|
this.fetchData()
|
this.monitordata()
|
},
|
refresh() {
|
this.listQuery = {
|
// isdp:'true',
|
username: localStorage.getItem('username') || '',
|
// current: 1,
|
// size: 20,
|
created_at: undefined,
|
status: undefined,
|
keyword: undefined
|
}
|
this.fetchData()
|
this.monitordata()
|
},
|
|
//获取表格数据
|
fetchData() {
|
const params = { csname: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
getsystem(params).then(response => {
|
if (response.data.systemname != null) {
|
localStorage.setItem('systemname', response.data.systemname);
|
} else {
|
localStorage.setItem('systemname', response.data.systemname);
|
}
|
this.systemname = response.data.systemname
|
|
})
|
this.role = localStorage.getItem('username') || '';
|
this.listLoading = true
|
const params1 = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
getEquipmentmonitor(params1).then(response => {
|
console.log(4444444);
|
this.list = response.data
|
console.log(response);
|
this.listLoading = false
|
|
})
|
const params2 = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
getEquipmenttwo(params2).then(response => {
|
console.log(5555555555);
|
this.processBarModel = []
|
// this.list = response.data
|
var json = {
|
edmm: [],
|
ndmm: [],
|
hdmm: [],
|
tagid: [],
|
processValue: [],
|
winmax: '',
|
winmin: '',
|
processValueyuan: []
|
}
|
for (let index = 0; index < response.data.length; index++) {
|
|
// json.tagid = response.data[index].tagid
|
json.edmm.push(response.data[index].edmm)
|
json.ndmm.push(response.data[index].ndmm)
|
json.hdmm.push(response.data[index].hdmm)
|
json.tagid.push(response.data[index].tagid)
|
json.winmax = response.data[index].winmax
|
json.winmin = response.data[index].winmin
|
}
|
this.barChartData = json
|
console.log(response);
|
|
})
|
// getList(this.listQuery).then(response => {
|
|
// this.processBarModel = []
|
// this.list = response.data
|
// var json = {
|
// edmm: [],
|
// ndmm: [],
|
// tdmm: [],
|
// tagid: [],
|
// processValue: [],
|
// winmax: '',
|
// winmin: '',
|
// processValueyuan: []
|
// }
|
// for (let index = 0; index < response.data.length; index++) {
|
|
// // json.tagid = response.data[index].tagid
|
// json.edmm.push(response.data[index].edmm)
|
// json.ndmm.push(response.data[index].ndmm)
|
// json.tdmm.push(response.data[index].tdmm)
|
// json.tagid.push(response.data[index].tagid)
|
// json.winmax = response.data[index].winmax
|
// json.winmin = response.data[index].winmin
|
// }
|
// this.barChartData = json
|
// this.total = response.data.total
|
// this.listLoading = false
|
// })
|
setTimeout(() => {
|
this.fetchData()
|
}, 10000);
|
},
|
//右侧数据
|
monitordata() {
|
const params = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
getEquipment(params).then(response => {
|
this.monitorGridData = response.data.monitorNumList
|
this.standardGridData = response.data.standardNumList
|
this.offlineGridData = response.data.offlineNumList
|
this.alarmGridData = response.data.alarmNumList
|
|
this.monitorNum = response.data.monitorNum
|
this.standardNum = response.data.standardNum
|
this.offlineNum = response.data.offlineNum
|
this.alarmNum = response.data.alarmNum
|
this.messageNum = response.data.messageNum
|
this.alerttime = response.data.alerttime
|
|
})
|
setTimeout(() => {
|
this.monitordata()
|
}, 10000);
|
},
|
resetTemp() {
|
this.temp = Object.assign({}, _temp)
|
},
|
// 查看
|
view(scope) {
|
// this.dialogVisible = false
|
// 获取当前日期
|
const currentDate = new Date();
|
var new_year = currentDate.getFullYear(); // 取当前的年份（实际是输入日期的年份）
|
var month = currentDate.getMonth(); // 获取月份（0-11）
|
var new_month = month + 1; // 将月份转换为可读的格式（1-12）
|
this.month = new_month
|
// 获取当月的第一天
|
var firstDay = new Date(new_year, new_month - 6, 1); // 月份需要减1，因为getMonth()返回的是0-11
|
const newDate = formatTime1(firstDay, "yyyy-MM-dd");
|
//获取当前年月日
|
const dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
const params = { date1: dateYear, date2: newDate, username: localStorage.getItem('username') || '', tagid: scope.row.tagid };
|
console.log(params);
|
|
handlechartupdate3(params).then(response => {
|
this.lineChartData = response.data
|
console.log(response.data);
|
this.dialogVisible = true
|
})
|
this.resetTemp()
|
|
this.dialogType = 'view'
|
this.temp = deepClone(scope.row)
|
// this.$nextTick(() => {
|
// this.$refs['dataForm'].clearValidate()
|
// })
|
},
|
processing(scope) {
|
|
this.resetTemp()
|
this.processingdialogVisible = true
|
this.alarmvisible = false
|
// this.dialogType = 'processing'
|
this.temp = deepClone(scope.row)
|
this.$nextTick(() => {
|
this.$refs['dataForm'].clearValidate()
|
})
|
},
|
//跳转后台
|
backstage() {
|
|
window.open('/#/large/dashboard');
|
// window.open('/dashboard');
|
// window.open('http://localhost:8084/#/dashboard');
|
// this.$router.push({ path: '/dashboard' })
|
|
},
|
//退出
|
// backout() {
|
backout() {
|
this.$store.dispatch('user/logout')
|
this.$router.push(`/login?redirect=${this.$route.fullPath}`)
|
},
|
// window.open('/#/large/dashboard');
|
// window.open('/dashboard');
|
// window.open('http://localhost:8084/#/dashboard');
|
// this.$router.push({ path: '/dashboard' })
|
|
// },
|
|
//当前时间
|
timeFn() {
|
this.timing = setInterval(() => {
|
|
//获取当前时分秒
|
this.dateDay = formatTime1(new Date(), "HH: mm: ss");
|
|
//获取当前年月日
|
this.dateYear = formatTime1(new Date(), "yyyy-MM-dd");
|
|
//获取当前周几
|
this.dateWeek = this.weekday[new Date().getDay()];
|
}, 1000);
|
},
|
submit() {
|
|
if (this.loading) {
|
return
|
}
|
this.loading = true
|
addorupAlarmrecord(this.temp).then(() => {
|
this.temp.adminname = localStorage.getItem('username') || '';
|
const params = { name: this.temp.adminname, content: '处理了一个告警日志，该设备id为：' + this.temp.tagid };
|
addSystemOperationLog(params).then(response => {
|
|
})
|
this.fetchData()
|
setTimeout(() => {
|
this.$message({
|
message: '提交成功',
|
type: 'success'
|
})
|
this.monitordata()
|
this.processingdialogVisible = false
|
this.loading = false
|
}, 300)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
#index {
|
color: #d3d6dd;
|
// width: 118%;
|
// height: 115%;
|
width: 2270px;
|
height: 1080px;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
transform-origin: left top;
|
overflow: hidden;
|
|
.bg {
|
|
position: fixed;
|
//整体页面背景
|
width: 100%;
|
height: 100%;
|
padding: 16px 16px 0 16px;
|
background-image: url("../../assets/images/bj.png"); //背景图
|
background-size: cover; //背景尺寸
|
background-position: center center; //背景位置
|
z-index: 1;
|
overflow: hidden;
|
}
|
|
.top {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 80px;
|
background-color: transparent;
|
background: url(../../assets/images/top.png) no-repeat;
|
background-position: 50% 0;
|
}
|
|
.title_right {
|
top: 10px;
|
width: 100%;
|
height: 80px;
|
background: url(../../assets/images/topright.png) no-repeat;
|
}
|
|
.right {
|
position: absolute;
|
top: 100px;
|
width: 23%;
|
height: 60%;
|
background: url(../../assets/images/right.png) no-repeat;
|
z-index: 20;
|
}
|
|
.toptitle {
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
// font-style: oblique;
|
font-size: 36px;
|
letter-spacing: 10px;
|
font-weight: 500;
|
display: flex;
|
justify-content: center;
|
/* 水平居中 */
|
align-items: center;
|
/* 垂直居中 */
|
// height: 90vh; /* 容器高度 */
|
height: 80px;
|
background-color: transparent;
|
}
|
|
|
.title_left {
|
position: absolute;
|
top: 16px;
|
width: 98.5%;
|
height: 80px;
|
background: url(../../assets/images/topleft.png) no-repeat;
|
background-position: 100% 0;
|
}
|
|
.center {
|
position: fixed;
|
// position: absolute;
|
left: 24%;
|
top: 105px;
|
width: 51.5%;
|
height: 60%;
|
// background: url(../../assets/images/center.png) no-repeat;
|
z-index: 20;
|
overflow: hidden;
|
}
|
|
.lineChart {
|
position: fixed;
|
// position: absolute;
|
left: 24%;
|
top: 105px;
|
width: 51.5%;
|
height: 60%;
|
// background: url(../../assets/images/center.png) no-repeat;
|
z-index: 20;
|
overflow: hidden;
|
}
|
|
.left {
|
position: absolute;
|
left: 76%;
|
top: 100px;
|
width: 30%;
|
height: 100%;
|
background: url(../../assets/images/left.png) no-repeat;
|
z-index: 20;
|
}
|
|
.title_left_tdmm {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 69px;
|
margin-left: 355px;
|
}
|
|
.title_left_ndmm {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 69px;
|
margin-left: 222px;
|
}
|
|
|
.title_left_edmm {
|
|
// background: rgb(14, 91, 155) !important;
|
font-size: 14px;
|
position: absolute;
|
margin-top: 69px;
|
margin-left: 68px;
|
}
|
|
.el-radio__input {
|
white-space: nowrap;
|
cursor: pointer;
|
outline: none;
|
display: inline-block;
|
line-height: 1;
|
position: relative;
|
vertical-align: middle;
|
|
}
|
|
.title_left_tdmm.el-radio__input.is-checked .el-radio__inner {
|
border-color: #1890ff;
|
background: #11b95c;
|
}
|
|
.title_left_ndmm.el-radio__input.is-checked .el-radio__inner {
|
border-color: #1890ff;
|
background: #11b95c;
|
}
|
|
.title_left_radio.el-radio__input.is-checked .el-radio__inner {
|
border-color: #1890ff;
|
background: #11b95c;
|
}
|
|
.title_left_ndmm.el-radio__input.is-checked .el-radio__inner {
|
border-color: #1890ff;
|
background: #11b95c;
|
}
|
|
.bottom {
|
position: absolute;
|
bottom: -15px;
|
width: 75%;
|
height: 30%;
|
z-index: 20;
|
}
|
|
/*最外层透明*/
|
.bottom ::v-deep .el-table,
|
.bottom ::v-deep .el-table__expanded-cell {
|
position: absolute;
|
z-index: 20;
|
background-color: transparent;
|
width: 98%;
|
left: 1%;
|
// background: url(../../assets/images/bottom.png) no-repeat;
|
|
}
|
|
|
// 头部样式
|
.bottom ::v-deep .el-table th {
|
background-color: rgb(8, 17, 56);
|
color: #fff;
|
}
|
|
.dpradio::v-deep.el-radio__input,
|
.el-radio__input {
|
white-space: nowrap;
|
cursor: pointer;
|
outline: none;
|
display: inline-block;
|
line-height: 1;
|
position: relative;
|
vertical-align: middle;
|
}
|
|
// 表头边框
|
::v-deep .el-table tr {
|
background-color: transparent !important;
|
}
|
|
// 内容行样色
|
.bottom::v-deep .el-table__row {
|
background-color: rgb(14, 27, 71) !important;
|
color: #B2C9EE;
|
}
|
|
//自定义斑马线和鼠标移入样式
|
// .bottom ::v-deep .el-table__body tr.hover-row>td {
|
// background-color: rgb(14, 27, 71) !important;
|
// }
|
::v-deep.el-table__body tr.current-row>td {
|
background-color: transparent;
|
}
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
|
background-color: rgb(14, 27, 71) !important;
|
}
|
|
//斑马纹颜色
|
.bottom::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
|
background: rgb(8, 17, 56);
|
}
|
|
//去掉表头下边框线
|
::v-deep .is-leaf {
|
border-bottom: none !important;
|
}
|
|
//去掉表格内容下边框线
|
::v-deep .el-table td,
|
.el-table th.is-leaf {
|
border-bottom: none;
|
}
|
|
/* // 去掉最下面的那一条线 */
|
::v-deep .el-table::before {
|
height: 0px;
|
}
|
|
/* 定义滚动容器的滚动条样式 */
|
::v-deep.el-table__body-wrapper::-webkit-scrollbar {
|
|
width: 10px;
|
/* 定义滚动条的宽度 */
|
height: 10px;
|
/* 定义滚动条的高度 */
|
}
|
|
/* 定义滚动条滑块的样式 */
|
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
background-color: #0d9eec;
|
/* 定义滑块的颜色 */
|
border-radius: 5px;
|
/* 定义滑块的圆角 */
|
}
|
|
|
|
//去除表头轨道
|
::v-deep .el-table th.gutter {
|
display: none !important;
|
// width: 100px !important;
|
}
|
|
|
|
|
|
.title_left_text {
|
left: 86%;
|
position: absolute;
|
top: 30px;
|
}
|
|
.title_right_img {
|
position: absolute;
|
margin-top: 20px;
|
margin-left: 20px;
|
|
}
|
|
.title_right_time {
|
font-size: 16px;
|
position: absolute;
|
margin-top: 20px;
|
margin-left: 42px;
|
}
|
|
.title_right_day {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 40px;
|
margin-left: 42px;
|
}
|
|
.title_right_week {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 40px;
|
margin-left: 120px;
|
}
|
|
/* 鼠标未悬浮时效果设置 */
|
.title_left_bnt {
|
font-size: 16px;
|
color: rgb(43, 150, 226);
|
left: 94%;
|
position: absolute;
|
top: 20px;
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_left_bnt:hover {
|
color: #ffffff;
|
text-decoration: underline;
|
}
|
|
.title_leftout_bnt {
|
font-size: 16px;
|
color: rgb(43, 150, 226);
|
left: 97%;
|
position: absolute;
|
top: 20px;
|
}
|
|
/* 鼠标悬浮后的设置 */
|
.title_leftout_bnt:hover {
|
color: #ffffff;
|
text-decoration: underline;
|
}
|
|
|
|
.title_right_monitor {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 100px;
|
margin-left: 160px;
|
}
|
|
.title_right_monitor:hover {
|
text-decoration: underline;
|
}
|
|
|
.title_right_standard {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 100px;
|
margin-left: 410px;
|
}
|
|
.title_right_standard:hover {
|
text-decoration: underline;
|
}
|
|
.title_right_offline {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 260px;
|
margin-left: 160px;
|
}
|
|
.title_right_offline:hover {
|
text-decoration: underline;
|
}
|
|
.title_right_alarm {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 260px;
|
margin-left: 410px;
|
}
|
|
.title_right_alarm:hover {
|
text-decoration: underline;
|
}
|
|
.title_right_message {
|
font-size: 50px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 500px;
|
margin-left: 130px;
|
}
|
|
.title_right_alerttime {
|
font-size: 20px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 460px;
|
margin-left: 280px;
|
}
|
|
|
|
.custom-table .el-table__row .el-table_1_column_1 {
|
color: #ffffff;
|
background: url(../../assets/images/bottom.png) no-repeat;
|
|
/* 设置文本颜色 */
|
}
|
|
.cell-bg-color {
|
background-color: #2167a0;
|
/* 你想要的背景颜色 */
|
|
|
}
|
|
.dpradio.el-radio__input {
|
white-space: nowrap;
|
cursor: pointer;
|
outline: none;
|
display: inline-block;
|
line-height: 1;
|
position: relative;
|
vertical-align: middle;
|
}
|
|
.page {
|
// width: 100%;
|
height: 20%;
|
position: absolute;
|
z-index: 20;
|
top: 250px;
|
left: 30%;
|
}
|
|
.pageleft {
|
width: 30%;
|
height: 20%;
|
position: absolute;
|
z-index: 20;
|
top: 85%;
|
left: 4%;
|
}
|
|
.pagination-container[data-v-72233bcd] {
|
background: transparent !important;
|
padding: 0;
|
}
|
|
.pagination-container {
|
margin-top: 0;
|
}
|
|
/* 定义滚动条的样式 */
|
div::-webkit-scrollbar {
|
width: 10px;
|
/* 设置滚动条的宽度 */
|
}
|
|
/* 定义滚动条滑块的样式 */
|
div::-webkit-scrollbar-thumb {
|
background-color: #0d9eec;
|
/* 设置滑块的背景颜色 */
|
border-radius: 5px;
|
/* 设置滑块的圆角 */
|
}
|
|
.process {
|
overflow: auto;
|
position: relative;
|
top: 100px;
|
z-index: 30;
|
width: 70%;
|
height: 75%;
|
left: 30px;
|
}
|
|
.process_left_tagid {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 22px;
|
margin-left: 8px;
|
}
|
|
.process_left_zong {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 22px;
|
margin-left: 8px;
|
}
|
}
|
</style>
|
