From 8aa3edd56c279100c9053576f3e90fa55459fe77 Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Mon, 16 Jan 2023 16:15:55 +0800
Subject: [PATCH] 修改
---
src/views/dataL/dataL.vue | 721 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 554 insertions(+), 167 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 6559625..7710cb1 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -1,34 +1,34 @@
<template>
- <div id="Lour">
- <div class="left">
+ <div id="Lour" style="height: 100%">
+ <div class="left" style="height: 101%">
<div class="top">
- <div class="top-l">
- <div class="left-top">
+ <div class="top-t">
+ <div class="t-t-title">
<p style="font-size: 24px; font-weight: 100">
- {{ name.length > 14 ? name.substr(0, 14) + "···" : name }}
+ {{ name }}
</p>
- <div class="l-t-state">
+ </div>
+ <div class="t-t-title2">
+ <div class="t-t-state">
<span
:class="{
- 'l-t-s-grey': state == '掉线',
- 'l-t-s-green': state == '测试',
- 'l-t-s-red': state == '报警',
+ 'l-t-s-grey': state == dataState[0],
+ 'l-t-s-green': state == dataState[1],
+ 'l-t-s-yewllo': state == dataState[2],
+ 'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
></span>
- <span>{{ state }}</span>
- </div>
- <!-- <p>{{evaluate}}</p> -->
- </div>
- <div class="left-bot">
- <p>{{ machineCode }}</p>
- <!-- <p>{{smoke}}</p> -->
- <!-- <p>{{proportion}}</p> -->
+ <span>{{ " " + state }}</span>
+ </div>
+ <div class="t-t-time">
+ <p>{{ ReportTime }}</p>
+ </div>
</div>
</div>
- <div class="top-r">
- <p>{{ ReportTime }}</p>
+ <div class="top-b">
+ {{ machineCode }}
</div>
</div>
<div class="l-main">
@@ -37,9 +37,13 @@
<el-tab-pane label="预警历史" name="first">
<!-- <el-tab-pane label="预警历史" name="second"> -->
<div class="frist-left">
- <div id="echart01" style="width: 100%; height: 260px"></div>
+ <div
+ id="echart01"
+ style="width: 100%; height: 260px"
+ ref="echart01"
+ ></div>
- <div class="l-main-2">
+ <div class="l-main-2" ref="aaa">
<div class="l-m-2-heard">
<span style="font-size: 14px">历史事件</span>
<span style="font-size: 12px">全部事件类型</span>
@@ -93,8 +97,9 @@
viewBox="0 0 1024 1024"
width="100%"
height="100%"
- fill="#29c093"
+ fill="rgba(0,0,0,0.5)"
style="width: 13px; position: relative; top: 2px"
+ ref="svgBut"
>
<path
d="M870.52 63.32H153.19c-25.61 0-40.84 28.57-26.57 49.83l295.73 440.58V927a32 32 0 0 0 47.06 28.24l116-61.87a32 32 0 0 0 16.94-28.23v-312.9l294.74-439.09c14.27-21.26-0.96-49.83-26.57-49.83z"
@@ -122,9 +127,19 @@
v-show="eventDetails.length != 0"
class="l-m-2-m-table"
>
- <p class="l-m-2-m-tableheard">{{ value.year }}年</p>
+ <p
+ class="l-m-2-m-tableheard"
+ style="fontsize: 20px; font-weight: 100"
+ >
+ {{ value.year }}年
+ </p>
<div class="l-m-2-m-tablemain">
- <el-table :data="value.data" style="width: 100%">
+ <el-table
+ :data="value.data"
+ style="width: 100%"
+ highlight-current-row
+ @current-change="handleCurrentChange"
+ ><!--highlight-current-row: 单选，current-change单选事件-->
<el-table-column type="index"> </el-table-column>
<el-table-column label="日期" prop="day">
</el-table-column>
@@ -149,8 +164,9 @@
<el-tag>{{ props.row.state }}</el-tag>
</template>
</el-table-column>
- <el-table-column label="跳转实时" prop="">
- </el-table-column>
+ <!-- <el-table-column label="跳转实时" prop="">
+
+ </el-table-column> -->
</el-table>
</div>
</div>
@@ -185,7 +201,7 @@
prop="open">
</el-table-column>
</el-table>
- </el-form>
+ </el-form>
</template>
</el-table-column>
<el-table-column
@@ -263,9 +279,9 @@
<el-tab-pane label="设备详情" name="second">
<div class="l-main-3">
<div class="l-m-3-heard">
- <h2>
+ <!-- <h2>
{{ name.length > 16 ? name.substr(0, 16) + "···" : name }}
- </h2>
+ </h2> -->
<div>设备数据详情</div>
</div>
<el-divider content-position="left"
@@ -310,7 +326,7 @@
</el-row>
<el-row>
<el-col span="12">
- <el-form-item label="负责人">
+ <el-form-item label="主要负责人">
<el-input
disabled="true"
v-model="detailsData.person"
@@ -336,7 +352,7 @@
v-model="detailsData.user"
autocomplete="off"
></el-input>
- </el-form-item>
+ </el-form-item>
</el-col> -->
<el-col span="12">
<el-form-item label="序列号">
@@ -388,7 +404,7 @@
</el-form-item>
</el-col>
<el-col span="12">
- <el-form-item label="街道">
+ <el-form-item label="地址">
<el-input
disabled="true"
v-model="detailsData.street"
@@ -427,8 +443,6 @@
></el-input>
</el-form-item>
</el-col>
- </el-row>
- <el-row>
<el-col span="12">
<el-form-item label="心跳时间">
<el-input
@@ -445,6 +459,29 @@
</div>
</div>
</el-tab-pane>
+ <el-tab-pane label="现场视频" name="third">
+ <div class="l-main-3">
+ <!-- <div class="l-m-3-heard">222</div> -->
+ <div class="l-m-3-heard">
+ <div>设备现场视频</div>
+ </div>
+ <!-- <el-divider content-position="left"></el-divider> -->
+ <el-divider content-position="left"
+ ><i class="el-icon-mobile-phone"></i
+ ></el-divider>
+ <div class="l-m-3-main">
+ <!-- {{ videoUrl }} -->
+ <div>
+ <video
+ style="height: 550px; width: 100%"
+ controls="controls"
+ id="real_video_conversationDataL"
+ src=""
+ ></video>
+ </div>
+ </div>
+ </div>
+ </el-tab-pane>
</el-tabs>
</div>
</div>
@@ -453,7 +490,7 @@
<div class="r-one">
<div class="r-heard">
<div class="r-heard-top">部署信息</div>
- <button @click="modifyl" class="r-but-top">修改</button>
+ <!-- <button @click="modifyl" class="r-but-top">修改</button> -->
</div>
<div class="r-body">
<div class="r-b-top">
@@ -469,40 +506,47 @@
<!-- <div class="r-b-t-main">
<span class="r-b-t-left">设备标签</span>
<span class="r-b-t-right">
- <div
- class="r-b-t-r-label"
- v-for="(value,index) in labels"
+ <div
+ class="r-b-t-r-label"
+ v-for="(value,index) in labels"
:key="index"
>
- {{value}}
+ {{value}}
</div>
</span>
</div> -->
<!-- 图暂时没有 -->
- <!-- <div class="r-b-t-main">
- <span class="r-b-t-left" style="position:relative;top: -27px;">部署图片</span>
- <span class="r-b-t-right">
- <div
- class="r-b-t-r-imgsl"
- v-for="(value,index) in imgsl"
- :key="index"
- >
- <el-image
- style="width: 68px; height: 68px"
- :src="value"
- :preview-src-list="imgsl"
- v-show="value != 'no'"
- >
- </el-image>
- <div
- v-show="value == 'no'"
- style="width: 68px; height: 68px;text-algin: center;color: rgba(0,0,0,.5)"
- >
- 无图片
- </div>
- </div>
- </span>
- </div> -->
+ <div class="r-b-t-main">
+ <span class="r-b-t-left" style="position: relative; top: -27px"
+ >部署图片</span
+ >
+ <span class="r-b-t-right">
+ <div
+ class="r-b-t-r-imgsl"
+ v-for="(value, index) in imgsl"
+ :key="index"
+ >
+ <el-image
+ style="width: 68px; height: 68px"
+ :src="value"
+ :preview-src-list="imgsl"
+ v-show="value != 'no'"
+ >
+ </el-image>
+ <div
+ v-show="value == 'no'"
+ style="
+ width: 68px;
+ height: 68px;
+ text-algin: center;
+ color: rgba(0, 0, 0, 0.5);
+ "
+ >
+ 无图片
+ </div>
+ </div>
+ </span>
+ </div>
<div class="r-b-t-main">
<span class="r-b-t-left">部署时间</span>
<span class="r-b-t-right">{{ deploymentTime }}</span>
@@ -510,13 +554,23 @@
</div>
<div class="r-b-map">
<el-row>
- <iframe
+ <!-- <iframe
id="supervisoryMap"
ref="supervisoryMap"
:src="baseUrl"
frameborder="0"
width="100%"
height="100%"
+ ></iframe> -->
+ <!-- <button @click="re">刷新</button> -->
+ <iframe
+ id="detailMap"
+ ref="detailMap"
+ :src="baseUrl"
+ frameborder="0"
+ width="100%"
+ height="100%"
+ name="detailMap"
></iframe>
</el-row>
</div>
@@ -527,19 +581,30 @@
</template>
<script>
import { Loading } from "element-ui";
-import { getdataL, getGalarm, getnum } from "../../api/dataL/axiosL";
+import {
+ getdataL,
+ getGalarm,
+ getnum,
+ getImg,
+ getVideo,
+} from "../../api/dataL/axiosL";
import axios from "axios";
+import Hls from "hls.js";
import echarts from "echarts";
import { Form } from "element-ui";
const cityOptions = ["未处理", "处理中", "已处理"];
export default {
data() {
return {
+ // timeL: "",
+ a: "",
myDeviceNumber: "",
-
+ videoUrl: "",
//折线图
myChart: "",
numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
+
+ jingqingPdianji: null,
name: "",
state: "",
@@ -552,17 +617,25 @@
calls: "",
labels: ["店面", "楼房"],
imgsl: [
- "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
- "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
- "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
+ // "https://resource-city.sensoro.com/6E0FB78DC42C35F3B8FF0F6A03472433",
],
deploymentTime: "2019-08-28 11:16:14",
activeName: "first",
// activeName: 'second',
+ // activeName: "third",
isRecord: true,
screens: false,
//复选框
+ dataState: ["掉线", "正常", "故障", "预警"],
+ // [grey,green,red][
+ // onlineStatus = 0,
+ // onlineStatus = 1,
+ // state!= "",
+ // jtype != 2
+ // ]
checkAll: false,
checkedCities: [], //选择的
cities: cityOptions,
@@ -580,6 +653,7 @@
menuAlign: "center",
column: {},
},
+
eventDetails: [], //真实数据
eventDetaill: [
//原始数据
@@ -671,6 +745,7 @@
// heartbeat: '2021-04-07', // 心跳时间
// },
baseUrl: "", //mapurl\
+ mapStart: false,
//省份
form: {},
@@ -740,6 +815,11 @@
let option = {
title: {
text: "警情月分布",
+ textStyle: {
+ fontSize: 18,
+ fontStyle: "300",
+ fontFamily: "sans-serif",
+ },
},
tooltip: {
trigger: "axis",
@@ -803,9 +883,9 @@
this.myChart.setOption(option);
this.myChart.hideLoading();
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- window.addEventListener("resize", function () {
- myChart.resize();
- });
+ // window.addEventListener("resize", function () {
+ // this.myChart.resize();
+ // });
},
modifyl() {
//right 修改按钮
@@ -829,6 +909,7 @@
this.checkedCities = ["未处理", "处理中", "已处理"];
// console.log(`按钮重置`);
this.doEvents(this.checkedCities);
+ this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
// this.eventDetails = this.eventDetaill;
},
determine() {
@@ -838,8 +919,14 @@
if (this.checkedCities.length == 0) {
// console.log(`未选择`);
this.eventDetails = [];
+ this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
} else {
this.doEvents(this.checkedCities); //筛选数据
+ if (this.checkedCities.length == 3) {
+ this.$refs.svgBut.setAttribute("fill", "rgba(0,0,0,0.5)"); //改变svg图片样式
+ } else {
+ this.$refs.svgBut.setAttribute("fill", "rgba(41,192,147)"); //改变svg图片样式
+ }
}
},
doEvents(ends) {
@@ -884,50 +971,85 @@
getdata() {
// const url = `/api/blade-jfpts/equipment/equipment/pageDept?deviceName=${this.myDeviceNumber}¤t=1&size=10&pid=`
// axios.get(url)
+ var that = this;
var data = {
deviceName: this.myDeviceNumber,
current: "1",
size: "10",
};
+ var imgdadta = {
+ deviceNumber: this.myDeviceNumber,
+ };
getdataL(data).then((res) => {
var data = res.data.data.records[0];
+ var setimgl = null;
+ //插入图片api获取图片
this.stetDetails(data);
- // console.log(data);
+ getImg(imgdadta, "post").then((res) => {
+ // console.log(res.data.data.length != 0)
+ var imgdatas = [];
+ if (res.data.data.length != 0) {
+ imgdatas = res.data.data[0].paddress.split(",");
+ }
+ // console.log(imgdatas);
+ // imgdatas = [ //最多5张照片
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+ // "https://resource-city.sensoro.com/B8D675A3C4F71C5C8DE2FD764881BE57",
+
+ // "https://resource-city.sensoro.com/1723C1A66DB44F792564F3648E5AA1EE",
+ // "https://web.byisf.com/minio/jfpt/upload/depl/ad049799e7024c529b9c890d3ba434bc.JPEG",
+ // ];
+ setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
+ this.stetDetails(data, setimgl);
+ });
});
},
- stetDetails(d) {
- this.name = "无数据" && d.deviceName;
- this.state =
- "无数据" && d.dtype == 0 ? "掉线" : d.dtype == 1 ? "测试" : "报警";
+ stetDetails(c, imgdata) {
+ this.name = "无数据" && this.a.deviceName;
+ //设备状态
+ var states,
+ d = this.a.dtype;
+ if (d == 0) {
+ states = "掉线";
+ } else if (d == 1) {
+ states = "正常";
+ } else if (d == 3) {
+ states = "故障";
+ } else if (d == 2) {
+ states = "预警";
+ }
+ this.state = states;
+
this.evaluate = "空气质量";
- this.machineCode = "无数据" && d.deviceNumber;
+ this.machineCode = "无数据" && this.a.deviceNumber;
this.smoke = "烟雾";
this.proportion = "电量";
- this.ReportTime = "最近上报：" + d.heartbeat;
- this.contacts = "无数据" && d.oneContacts;
- this.calls = "无数据" && d.onePhone;
- this.labels = ["无数据"] && [d.deviceType];
- this.imgsl = ["no"];
- this.deploymentTime = "无数据" && d.stime;
+ this.ReportTime = "最近上报：" + this.a.heartbeat;
+ this.contacts = "无数据" && this.a.oneContacts;
+ this.calls = "无数据" && this.a.onePhone;
+ this.labels = ["无数据"] && [this.a.deviceType];
+ this.imgsl = imgdata;
+ this.deploymentTime = "无数据" && this.a.stime;
this.detailsData = {
- machineName: d.deviceName, // 设备名称
- machineNumber: d.deviceNumber, //
- user: d.ownership, // 使用方
- serialNumber: d.serialNumber, // 序列号
- channel: d.channelNumber, // 通道号
- deployment: d.devicestate == 1 ? "布防" : "撤防", // 布撤防状态:
- machineType: d.deviceType, // 设备类型
- province: ["邮编：", d.district, ""], // 省份
- street: d.street, // 街道
- person: d.oneContacts, // 负责人
- call: d.onePhone, // 负责人电话
- dueDate: d.expireTime, // 到期时间
- payment: d.pay, // 缴费信息
- installation: d.stime, // 安装时间
- heartbeat: d.heartbeat, // 心跳时间
+ machineName: this.a.deviceName, // 设备名称
+ machineNumber: this.a.deviceNumber, //
+ user: this.a.ownership, // 使用方
+ serialNumber: this.a.serialNumber, // 序列号
+ channel: this.a.channelNumber, // 通道号
+ deployment: this.a.devicestate == 1 ? "布防" : "撤防", // 布撤防状态:
+ machineType: this.a.deviceType, // 设备类型
+ province: ["邮编：", this.a.district, ""], // 省份
+ street: this.a.street, // 街道
+ person: this.a.oneContacts, // 负责人
+ call: this.a.onePhone, // 负责人电话
+ dueDate: this.a.expireTime, // 到期时间
+ payment: this.a.pay, // 缴费信息
+ installation: this.a.stime, // 安装时间
+ heartbeat: this.a.heartbeat, // 心跳时间
};
- this.form = d;
+ this.form = c;
},
getdataG() {
var dataG = {
@@ -940,6 +1062,7 @@
var ds = res.data.data.records;
// console.log(ds)
this.setdataG(ds);
+ this.jingqingPdianji = ds;
});
},
setdataG(d) {
@@ -979,6 +1102,7 @@
oneContacts: d[key].oneContacts,
alarmPeople: d[key].alarmPeople,
onePhone: d[key].onePhone,
+ jjTime: d[key].jjTime,
childs: [],
});
}
@@ -995,6 +1119,21 @@
}
});
creates(i, tData);
+ }
+ }
+ for (var k1 in Num) {
+ //添加序号
+ var n2 = Num[k1];
+ for (var k2 in n2) {
+ if (k2 == "year") {
+ continue;
+ }
+ // console.log(n2[k2])
+ var n3 = n2[k2];
+ for (var k3 in n3) {
+ // console.log(+k3 + 1);
+ n3[k3].i = +k3 + 1;
+ }
}
}
// console.log(Num);
@@ -1021,15 +1160,160 @@
this.numdatalist = dataM;
this.startEcharts01();
},
+ getMap() {
+ window.frames[1].init("DetailMap", {
+ x: this.a.jd,
+ y: this.a.wd,
+ });
+ },
+ re() {
+ // var _body = window.parent;
+ // var _iframe1=_body.document.getElementById('detailMap');
+ // window.onbeforeunload=function(){};
+ // _iframe1.contentWindow.location.reload(true);
+ location.reload();
+ },
+ handleCurrentChange(val) {
+ //行点击事件
+ var b = this.jingqingPdianji;
+ for (var key in b) {
+ if (b[key].jjTime == val.jjTime) {
+ // console.log(b[key]);
+ // this.$store.commit("SET_DATAL", this.a);
+ this.$router.push({ path: "/policeTracking/track", query: b[key] });
+ }
+ }
+ // console.log(this.$store.state)
+ },
+ //获取视频
+ openRealVideoBox(serialNumber, channelNumber,deviceNumber,manufacturer) {
+ var that = this;
+
+ if (manufacturer == "HK"){
+ axios
+ .get(
+ `/api/blade-jfpts/equipment/equipment/selectEquimentPlayInfo?number=${deviceNumber}&bmp=m3u8&manufacturer=${manufacturer}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.data.url;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ // console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ });
+ }
+ });
+ }else{
+ var res = that.a;
+ if (res.deviceName.indexOf("（象湖院区）") != -1 || res.deviceName.indexOf("（东湖院区）") != -1){
+ debugger
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ dom.src = res.netType;
+ dom.play();
+ return;
+ }
+
+ var newAxios = axios.create({
+ baseURL: "https://web.byisf.com:18000",
+ withCredentials: false,
+ headers: {
+ "Content-type": "application/x-www-form-urlencoded",
+ },
+ });
+ newAxios
+ .post(
+ "/api_control",
+ {},
+ {
+ params: {
+ param: JSON.stringify({ PktType: "GetAccessToken" }),
+ },
+ }
+ )
+ .then((res) => {
+ newAxios
+ .get(
+ `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${serialNumber}&chl=${channelNumber}`
+ )
+ .then((result) => {
+ that.videoSource = result.data.data.m3u8;
+ if (Hls.isSupported()) {
+ var dom = document.getElementById(
+ "real_video_conversationDataL"
+ );
+ that.hls = new Hls();
+ var m3u8Url = decodeURIComponent(that.videoSource);
+ that.hls.loadSource(m3u8Url);
+ that.hls.attachMedia(dom);
+ that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
+ dom.play();
+ });
+ that.hls.on(Hls.Events.ERROR, function (event, data) {
+ // console.log(data, 4566824159, "视频播放有问题！！！");
+ if (data.fatal) {
+ switch (data.type) {
+ case Hls.ErrorTypes.NETWORK_ERROR:
+ console.log(
+ "fatal network error encountered, try to recover"
+ );
+ that.hls.startLoad();
+ break;
+ case Hls.ErrorTypes.MEDIA_ERROR:
+ console.log(
+ "fatal media error encountered, try to recover"
+ );
+ that.hls.recoverMediaError();
+ break;
+ }
+ }
+ });
+ }
+ });
+ });
+ }
+ },
},
created() {
// let loadingInstance1 = Loading.service({ fullscreen: true });
- this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
- this.myDeviceNumber = this.$route.query.deviceNumber;
-
- var a = this.$route.query;
- console.log(a);
-
+ // this.baseUrl = `/map/index.html?openid=SupervisoryMap`;
+ // this.a = this.$route.query.deviceNumber == undefined? this.$store.state.dataL.dataLa : this.$route.query;
+ if(this.$route.query.deviceNumber == undefined){
+ this.a = this.$store.state.dataL.dataLa;
+ }else{
+ this.a = this.$route.query;
+ this.$store.commit("SET_DATAL", this.a);//每次都缓存在vuex中，如果没有从正确路径进来，则使用缓存
+ }
+ // console.log(this.a);
+ this.baseUrl = `/map/index.html?ISinit=1&openid=DetailMap&jd=${this.a.jd}&wd=${this.a.wd}`;
+ this.myDeviceNumber = this.a.deviceNumber;
+ // console.log(this.a);
// console.log(this.myDeviceNumber);
this.getdata();
this.getdataG();
@@ -1038,13 +1322,45 @@
mounted() {
this.loginEcharts01(); //载入折线图等待数据
// this.eventDetails = this.eventDetaill;//载入历史事件数据
- // this.doEvents();//cc
+ // this.doEvents();
+ // var timel = setTimeout(() => {
+ this.$refs.detailMap.onload = () => {
+ // window.frames[1].init("DetailMap", {
+ // x: this.a.jd,
+ // y: this.a.wd,
+ // });
+ if (window.frames[1].init) {
+ this.getMap();
+ } else {
+ // this.re();
+ console.log(`没有找到到window.frames[1].init`);
+ }
+ };
+ },
+ watch: {
+ activeName() {
+ if (this.activeName == "third") {
+ this.i++;
+ this.openRealVideoBox(this.a.serialNumber, this.a.channelNumber,this.a.deviceNumber,this.a.manufacturers);
+ } else {
+ var dom = document.getElementById("real_video_conversationDataL");
+ if (dom.getAttribute("src") != "") {
+ dom.pause();
+ dom.setAttribute("src", "");
+ this.hls.destroy();
+ }
+ }
+ },
},
};
</script>
<style lang="scss" >
+video::-webkit-media-controls-timeline {
+ display: none;
+ }
#Lour {
width: 100%;
+ font-size: 14px;
height: 100%;
// font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
// font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
@@ -1054,12 +1370,13 @@
display: flex;
// align-items: center;
justify-content: space-around;
- position: relative;
+ // position: relative;
font-size: 13px;
line-height: 20px;
font-weight: normal;
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
+ overflow: hidden;
.left {
width: 67%;
height: 100%;
@@ -1072,75 +1389,131 @@
width: 98%;
height: 150px;
// border: 1px solid rgb(21, 18, 204);
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- .top-l {
- position: relative;
- top: 40px;
- width: 500px;
- // border: 1px solid rgb(24, 207, 48);
- div {
- display: flex;
- align-items: center;
- justify-content: space-around;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-family: PingFangSC-Regular;
+ .top-t,
+ .top-b {
+ width: 95%;
+ // padding-left: 50px;
+ }
+ .top-t {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ // border: 1px solid rgb(204, 161, 18);
+ .t-t-title {
font-size: 14px;
- // border: 1px solid rgb(24, 207, 48);
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ // border: 1px solid rgb(18, 204, 80);
}
- .left-top {
- p {
- width: 356px;
- // border: 1px solid rgb(37, 37, 37);
- }
- padding-left: 15px;
- // border: 1px solid rgb(24, 207, 48);
- .l-t-state {
- // border: 1px solid rgb(24, 207, 48);
- position: relative;
- top: 5px;
- left: 10px;
- width: 55px;
+ .t-t-title2 {
+ position: relative;
+ top: 25px;
+ .t-t-state {
.l-t-s-yuan {
- display: block;
+ display: inline-block;
width: 10px;
height: 10px;
border-radius: 5px;
border: 1px solid transparent;
}
.l-t-s-grey {
- background-color: rgb(187, 187, 187);
+ background-color: #cdcdcd;
}
.l-t-s-green {
- background-color: rgb(41, 202, 135);
+ background-color: #32c1a2;
+ }
+ .l-t-s-yewllo {
+ background-color: #f49966;
}
.l-t-s-red {
- background-color: rgb(243, 75, 75);
+ background-color: #f35b5b;
}
}
}
}
- .left-bot,
- .top-r {
- font-weight: 900;
- color: rgba($color: #00000075, $alpha: 0.25);
- // border: 1px solid rgb(24, 207, 48);
+ .top-b,
+ .t-t-time {
+ // width: 100%;
+ font-weight: 600;
+ color: rgba($color: #6b6b6b, $alpha: 0.5);
+ // border: 1px solid rgb(18, 204, 148);
}
- .left-bot {
- position: relative;
- left: -68px;
- p {
- width: 295px;
- // border: 1px solid rgb(37, 37, 37);
- }
- }
- .top-r {
- width: 250px;
- // border: 1px solid rgb(24, 207, 48);
- float: right;
- position: relative;
- top: -50px;
- }
- // border-bottom:1px solid #000;
+ // .top-l {
+ // position: relative;
+ // top: 40px;
+ // width: 500px;
+ // border: 1px solid rgb(24, 207, 48);
+ // div {
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-around;
+ // font-size: 14px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-top {
+ // p {
+ // width: 356px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // padding-left: 15px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // .l-t-state {
+ // // border: 1px solid rgb(24, 207, 48);
+ // position: relative;
+ // top: 5px;
+ // left: 50px;
+ // width: 55px;
+ // .l-t-s-yuan {
+ // display: block;
+ // width: 10px;
+ // height: 10px;
+ // border-radius: 5px;
+ // border: 1px solid transparent;
+ // }
+ // .l-t-s-grey {
+ // background-color: #cdcdcd;
+ // }
+ // .l-t-s-green {
+ // background-color: #32c1a2;
+ // }
+ // .l-t-s-yewllo {
+ // background-color: #f49966;
+ // }
+ // .l-t-s-red {
+ // background-color: #f35b5b;
+ // }
+ // }
+ // }
+ // }
+ // .left-bot,
+ // .top-r {
+ // font-size: 14px;
+ // font-weight: 400;
+ // color: #c4c4c4;
+ // // border: 1px solid rgb(24, 207, 48);
+ // }
+ // .left-bot {
+ // position: relative;
+ // left: -68px;
+ // p {
+ // width: 295px;
+ // // border: 1px solid rgb(37, 37, 37);
+ // }
+ // }
+ // .top-r {
+ // width: 250px;
+ // // border: 1px solid rgb(24, 207, 48);
+ // float: right;
+ // position: relative;
+ // top: -50px;
+ // }
+ // // border-bottom:1px solid #000;
}
.l-main {
width: 98%;
@@ -1223,7 +1596,12 @@
.l-m-2-main {
width: 100%;
height: 370px;
- overflow: scroll;
+ // overflow: scroll;
+ overflow-y: scroll; //滚动条
+ scrollbar-color: transparent transparent;
+ scrollbar-track-color: transparent;
+ -ms-scrollbar-track-color: transparent;
+
// border: 1px solid rg b(23, 66, 209);
.l-m-2-m-not {
display: flex;
@@ -1278,7 +1656,7 @@
}
.right {
width: 30%;
- height: 88.5%;
+ height: 95.5%;
// border: 1px solid rgb(23, 201, 62);
background-color: #fff;
display: flex;
@@ -1311,7 +1689,7 @@
font-weight: normal;
font-size: 14px;
.r-b-top {
- height: 200px;
+ height: 380px;
display: flex;
// border: 1px solid rgb(23, 201, 62);
display: flex;
@@ -1320,7 +1698,9 @@
display: flex;
align-items: center;
justify-content: space-between;
+ // border: 1px solid rgb(148, 199, 159);
padding: 10px 0 10px 0;
+ margin-bottom: 5px;
}
.r-b-t-left {
display: block;
@@ -1332,6 +1712,8 @@
.r-b-t-right {
display: block;
width: 70%;
+ color: #5d5d5d;
+ font-size: 12px;
// border: 1px solid rgb(49, 74, 184);
.r-b-t-r-label {
float: left;
@@ -1350,11 +1732,13 @@
}
}
.r-b-map {
- height: 550px;
- border: 1px solid rgba(109, 109, 109, 0.2);
- #supervisoryMap {
+ height: 350px;
+ // border: 1px solid rgba(109, 109, 109, 0.2);
+ #detailMap {
+ position: relative;
+ top: 25px;
width: 100%;
- height: 550px;
+ height: 350px;
}
}
}
@@ -1382,4 +1766,7 @@
margin-bottom: 0;
width: 50%;
}
-</style>
\ No newline at end of file
+video::-webkit-media-controls-timeline {
+ display: none;
+}
+</style>
--
Gitblit v1.9.3