<template>
|
<div class="center">
|
<div id="map" style="width:100%;height:100%;"></div>
|
<!-- <Dialog v-model="DialogVisible" :DialogVisible="DialogVisible" :tagid="tagid"/> -->
|
<el-dialog :modal="false" :visible.sync="centerdialogVisible" title="设备信息" width="60%" align-center
|
@close="handelClose" draggable>
|
<el-descriptions :column="2" border>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1725344883243" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="3262" width="16" height="16">
|
<path
|
d="M93.149 564.65h639.198l-293.404 293.4 73.35 73.351 419.147-419.149-419.149-419.143-73.35 73.351 293.404 293.401h-639.198l0.001 104.79zM93.149 564.65z"
|
fill="#272636" p-id="3263"></path>
|
</svg>
|
<!-- <arrow-right-outlined /> -->
|
东位移
|
</div>
|
</template>
|
{{ edm }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1671784088964" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="2978" style="margin-top: 3px"
|
width="16" height="16">
|
<path
|
d="M719.8 115c-6.5 0-13 0.3-19.4 1-16.2 1.6-28.4 15.4-28.4 31.7 0 18.9 16.2 33.9 35 32 4-0.4 8.1-0.6 12.2-0.6 32.9-0.2 64.4 12.1 88.3 34.6 26.1 24.5 40.4 57.8 40.4 93.4 0 3.6-0.1 7.1-0.4 10.6-1.5 18.5 13.2 34.4 31.8 34.4h0.2c16.5 0 30.4-12.6 31.8-29 0.5-6.2 0.7-12.5 0.6-18.9-1.5-105.5-86.7-189.3-192.1-189.2z"
|
p-id="2979"></path>
|
<path
|
d="M717 0c-5 0-9.9 0.1-14.8 0.3-16.9 0.9-30.2 14.9-30.2 31.9v0.3c0 18.2 15.3 32.6 33.5 31.8 3.8-0.2 7.6-0.3 11.5-0.3 32.8 0 64.7 6.4 94.6 19.1 28.9 12.2 54.9 29.8 77.3 52.1 22.3 22.3 39.9 48.3 52.1 77.3 12.7 29.9 19.1 61.7 19.1 94.6 0 3.8-0.1 7.6-0.3 11.4-0.8 18.3 13.6 33.6 31.9 33.6h0.2c17 0 31.1-13.3 31.9-30.3 0.2-4.9 0.3-9.8 0.3-14.7C1024 137.2 886.8 0 717 0zM293.5 368.9L249 413.5 93.4 257.9c-1.6-1.6-1.6-4.1 0-5.7l38.9-38.9c1.6-1.6 4.1-1.6 5.7 0l155.5 155.6m90.5 0L146.4 131.4c-6.2-6.2-16.4-6.2-22.6 0L11.4 243.8c-6.2 6.2-6.2 16.4 0 22.6L249 504l135-135.1zM814 889.4l-41.7 41.7c-1.6 1.6-4.1 1.6-5.7 0L611 775.5l44.5-44.5L814 889.4M655.6 640.5l-135.1 135 237.6 237.6c6.2 6.2 16.4 6.2 22.6 0l112.4-112.4c6.2-6.2 6.2-16.4 0-22.6L655.6 640.5zM780.4 244.9c-12.4-12.9-33.5-12.6-46.2 0.1l-89.3 89.3c-12.5 12.5-32.8 12.5-45.3 0l-33.9-33.9c-18.7-18.7-49.1-18.7-67.9 0L128.3 669.9c-62.5 62.5-62.5 163.8 0 226.3 31.2 31.2 72.2 46.9 113.1 46.9 40.9 0 81.9-15.6 113.1-46.9L724 526.7c18.7-18.7 18.7-49.1 0-67.9l-33.9-33.9c-12.5-12.5-12.5-32.8 0-45.3l89.8-89.8c12.5-12.4 12.6-32.3 0.5-44.9z m-471.1 606c-37.5 37.5-98.3 37.5-135.8 0-18.7-18.7-28.1-43.3-28.1-67.9s9.4-49.1 28.1-67.9l352.6-352.6c3.1-3.1 8.2-3.1 11.3 0L661.9 487c3.1 3.1 3.1 8.2 0 11.3L309.3 850.9z"
|
p-id="2980"></path>
|
</svg>
|
卫星数量
|
</div>
|
</template>
|
{{ gpsnum }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1725345044683" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="5299" width="16" height="16">
|
<path
|
d="M512.00988746 141.21142578c10.45623779 0 19.24145531 3.50024414 26.37542748 10.71331811l259.5421145 259.55200196C805.03668189 418.58105492 808.63085938 427.33660865 808.63085938 437.84228516c0 10.60949731-3.53485132 19.46887183-10.56994606 26.46936011-7.02026391 7.00543237-15.88952661 10.60949731-26.50891137 10.60949731-10.44140625 0-19.22167969-3.60900903-26.35565185-10.71331811L549.09863305 267.79370094V845.7097168c0 10.19915748-3.62384057 18.94976782-10.89624071 26.16284179-7.23284888 7.31195068-15.97357177 10.91601563-26.2122798 10.91601563-10.23376465 0-18.959656-3.60900903-26.22216796-10.91601563-7.24273705-7.21307397-10.87646508-15.96862769-10.87646508-26.16284179V267.79370094l-196.10760522 196.41906761C271.65484619 471.31213355 262.87951684 474.92114258 252.41833496 474.92114258c-10.61938477 0-19.45898438-3.60900903-26.4990232-10.60949731C218.86444068 457.31115699 215.36914062 448.45178247 215.36914062 437.84228516c0-10.50567651 3.55462623-19.26123023 10.69354248-26.36553931l259.53717042-259.55200196C492.7288816 144.71166992 501.52398658 141.21142578 511.97033691 141.21142578h0.03955055z"
|
p-id="5300"></path>
|
</svg>
|
北位移
|
</div>
|
</template>
|
{{ ndm }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1725345147550" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="6533" width="16" height="16">
|
<path d="M0 0h1024v1024H0z" fill="#FFFFFF" opacity=".005" p-id="6534"></path>
|
<path
|
d="M743.509333 303.36a55.466667 55.466667 0 0 1 55.466667 55.466667v55.466666h27.818667a55.466667 55.466667 0 0 1 55.466666 55.466667v111.317333a55.466667 55.466667 0 0 1-55.466666 55.466667h-27.818667v55.466667a55.466667 55.466667 0 0 1-55.466667 55.466666h-584.533333a55.466667 55.466667 0 0 1-55.466667-55.466666V358.826667a55.466667 55.466667 0 0 1 55.466667-55.466667z m83.498667 278.314667v-111.317334h-83.498667V358.826667h-584.533333v333.952h584.533333v-111.317334z"
|
p-id="6535"></path>
|
<path
|
d="M205.696 390.314667h350.336q15.232 0 15.232 20.864v229.589333q0 20.864-15.232 20.864H205.696q-15.232 0-15.232-20.864V411.178667q0-20.864 15.232-20.864z"
|
p-id="6536"></path>
|
</svg>
|
设备电量
|
</div>
|
</template>
|
{{ power }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1725345066520" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="5457" width="16" height="16">
|
<path
|
d="M904 692c0 8.189-3.124 16.379-9.372 22.628-12.497 12.496-32.759 12.496-45.256 0L512 377.255 174.628 714.628c-12.497 12.496-32.758 12.496-45.255 0-12.497-12.498-12.497-32.758 0-45.256l360-360c12.497-12.496 32.758-12.496 45.255 0l360 360C900.876 675.621 904 683.811 904 692z"
|
fill="" p-id="5458"></path>
|
</svg>
|
天位移
|
</div>
|
</template>
|
{{ hdm }}
|
</el-descriptions-item>
|
<el-descriptions-item>
|
<template slot="label">
|
<div class="cell-item">
|
<svg t="1725345253428" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
xmlns="http://www.w3.org/2000/svg" p-id="7693" width="16" height="16">
|
<path
|
d="M139.884 420.157a33.142 33.142 0 0 1-10.635-1.756 34.642 34.642 0 0 1-21.432-43.576C164.71 199.629 324.495 81.92 505.421 81.92c179.968 0 339.481 116.895 396.938 290.877a34.657 34.657 0 0 1-21.217 43.69 33.613 33.613 0 0 1-42.793-21.663c-48.185-145.92-181.98-243.948-332.928-243.948-151.752 0-285.773 98.719-333.486 245.642a33.859 33.859 0 0 1-32.051 23.64zM505.42 936.96c-185.61 0-346.624-121.667-400.67-302.756a34.606 34.606 0 0 1 22.46-43.008 33.674 33.674 0 0 1 42.148 22.938c45.328 151.859 180.378 253.89 336.062 253.89 155.008 0 293.652-105.938 337.147-257.623a33.684 33.684 0 0 1 41.907-23.408 34.601 34.601 0 0 1 22.922 42.767c-51.845 180.874-217.17 307.2-401.976 307.2z m-44.826-250.568a33.556 33.556 0 0 1-31.744-22.738l-67.584-190.52-48.046 57.969a33.48 33.48 0 0 1-25.784 12.21H59.392a34.483 34.483 0 0 1 0-68.955h212.357l75.612-91.223a33.413 33.413 0 0 1 31.744-11.669 33.976 33.976 0 0 1 25.795 22.2l64.799 182.677 60.6-91.924a33.485 33.485 0 0 1 31.744-15.023 33.905 33.905 0 0 1 27.75 21.766l16.19 42.465 34.17-51.118a33.587 33.587 0 0 1 27.9-15.043h286.315a34.483 34.483 0 0 1 0 68.956H685.875l-60.242 90.112a33.475 33.475 0 0 1-59.392-6.927l-16.005-41.984-61.63 93.537a33.577 33.577 0 0 1-28.01 15.232z"
|
p-id="7694"></path>
|
</svg>
|
设备状态
|
</div>
|
</template>
|
{{ gpsstate }}
|
</el-descriptions-item>
|
</el-descriptions>
|
</el-dialog>
|
</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 jizhun from "@/assets/images/ceju.png"
|
import jiance from "@/assets/images/lingjin.png"
|
import onlie from "@/assets/images/onile.png"
|
|
import processBar from "@/components/processPar";
|
import Pagination from '@/components/Pagination'
|
import drawMixin from "@/utils/drawMixin"; //自适应缩放
|
import { formatTime1 } from "@/utils/index.js"; //日期格式转换
|
import { getList, getEquipment, alldevice, getdevicestate } from '@/api/user'
|
import { deepClone } from '@/utils'
|
const _temp = {//表单数据对象
|
tagid: '',
|
anchorname: '',
|
edmm: '',
|
ndmm: [],
|
tdmm: '管理员',
|
gpsnum: '',
|
}
|
export default {
|
mixins: [drawMixin],
|
name: 'Home',
|
components: {
|
processBar,
|
Pagination
|
},
|
data() {
|
return {
|
gpsnum: '',
|
edm: '',
|
hdm: '',
|
ndm: '',
|
power: '',
|
gpsstate: '',
|
centerdialogVisible: false,
|
DialogVisible: false,
|
tagid: '',
|
temp: Object.assign({}, _temp),
|
count: null,//百分比总和
|
zongdmm: null,//总位移
|
pagerCount: '3',
|
processBarModel: [],
|
list: [],
|
listLoading: true,
|
listQuery: {
|
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,//报文条数
|
total: 0,
|
dialogVisible: false,
|
dialogType: 'view',
|
}
|
},
|
computed: {
|
|
},
|
created() {
|
},
|
mounted() {
|
const params = { username: localStorage.getItem('username'), phone: localStorage.getItem('phone') };
|
alldevice(params).then(response => {
|
console.log(111111111);
|
|
console.log(response);
|
|
this.initMap(response.data.dataList, response.data.view,response.data.shijiao)
|
})
|
|
|
},
|
methods: {
|
handelClose() {
|
this.edm = ''
|
this.ndm = ''
|
this.hdm = ''
|
this.power = ''
|
this.gpsnum = ''
|
this.gpsstate = ''
|
},
|
initMap(tags, view,shijiao) {
|
|
// $(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]), 19);
|
map.enableScrollWheelZoom(true);
|
map.setHeading(shijiao); // 设置地图旋转角度
|
map.setTilt(shijiao); // 设置地图倾斜角度
|
|
map.addEventListener("rightclick", function(e) {
|
console.log(e);
|
|
// e.point 是点击位置的像素坐标
|
// e.pixel 是点击位置的地理坐标（经纬度）
|
console.log(e.point);
|
console.log(e.pixel);
|
|
|
var lat = e.latlng.lat; // 纬度
|
var lng = e.latlng.lng; // 经度
|
|
|
// 在控制台打印经纬度
|
console.log("右键点击的经纬度：", `纬度: ${lat}, 经度: ${lng}`);
|
|
// 你也可以将经纬度显示在页面上
|
alert(`右键点击的经纬度： ${lng}; ${lat}`);
|
});
|
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))
|
let onliezhan = new BMapGL.Icon(onlie, 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) });
|
console.log(tags[i]);
|
|
if (tags[i].type == 0) {
|
|
if(tags[i].onlie==1){
|
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: onliezhan
|
});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#474747",
|
transform: 'translateX(-50%)',
|
})
|
}
|
|
|
} else {
|
|
if(tags[i].onlie==1){
|
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%)',
|
})
|
}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: onliezhan
|
});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: "#474747",
|
transform: 'translateX(-50%)',
|
})
|
}
|
|
}
|
marker.addEventListener("click", () => {
|
this.tagid = tags[i].tagid
|
var params = { tagid: tags[i].tagid }
|
getdevicestate(params).then(response => {
|
this.edm = response.data.dataList.edmm + "mm"
|
this.ndm = response.data.dataList.ndmm + "mm"
|
this.hdm = response.data.dataList.tdmm + "mm"
|
this.power = response.data.dataList2.electricity
|
this.gpsnum = response.data.dataList2.gpsnum
|
this.gpsstate = response.data.dataList2.gpsstate
|
})
|
|
// tagid.value = tags[i].tagid
|
this.centerdialogVisible = true
|
})
|
marker.setLabel(label)
|
map.addOverlay(marker)
|
}
|
}
|
}
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.center {
|
// position: fixed;
|
position: absolute;
|
// left: 50%;
|
// top: 90px;
|
width: 100%;
|
height: 100%;
|
// transform: translate(-50%, -50%);
|
// transform-origin: left top;
|
// background: url(../../assets/images/center.png) no-repeat;
|
z-index: 20;
|
overflow: hidden;
|
}
|
.el-dialog__wrapper {
|
position: fixed;
|
top: 42%;
|
right: 0;
|
bottom: 0;
|
left: 34%;
|
overflow: auto;
|
margin: 0;
|
}
|
#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;
|
}
|
|
.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;
|
}
|
|
.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: 78px;
|
margin-left: 380px;
|
}
|
|
.title_left_ndmm {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 78px;
|
margin-left: 250px;
|
}
|
|
.title_left_edmm {
|
font-size: 14px;
|
position: absolute;
|
margin-top: 78px;
|
margin-left: 95px;
|
}
|
|
.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;
|
}
|
|
// 表头边框
|
::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_right_monitor {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 100px;
|
margin-left: 160px;
|
}
|
|
.title_right_standard {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 100px;
|
margin-left: 410px;
|
}
|
|
|
.title_right_offline {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 260px;
|
margin-left: 160px;
|
}
|
|
|
.title_right_alarm {
|
font-size: 30px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 260px;
|
margin-left: 410px;
|
}
|
|
|
.title_right_message {
|
font-size: 50px;
|
// left: 94%;
|
position: absolute;
|
margin-top: 500px;
|
margin-left: 130px;
|
}
|
|
.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;
|
/* 你想要的背景颜色 */
|
|
|
}
|
|
.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;
|
}
|
|
.process {
|
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>
|
