From 4ac408e9a9c9c24ef0ea3e12004a500238956103 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 28 Apr 2021 11:55:00 +0800
Subject: [PATCH] 地图 热力图 设备 视频 详情页 图标
---
src/views/dataL/dataL.vue | 286 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 193 insertions(+), 93 deletions(-)
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 2d5e981..e5d9191 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -2,26 +2,14 @@
<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">
- <!-- dataState: ["掉线", "在线", "故障", "预警"],
- if (s != "") {
- states = "故障";
- } else {
- if (j != 1) {
- if (o == 1) {
- states = "在线";
- } else {
- states = "掉线";
- }
- } else {
- states = "预警";
- }
- }-->
+ </div>
+ <div class="t-t-title2">
+ <div class="t-t-state">
<span
:class="{
'l-t-s-grey': state == dataState[0],
@@ -30,20 +18,17 @@
'l-t-s-red': state == dataState[3],
'l-t-s-yuan': true,
}"
- ></span>
+ ></span
+ > 
<span>{{ state }}</span>
</div>
-
- <!-- <p>{{evaluate}}</p> -->
- </div>
- <div class="left-bot">
- <p>{{ machineCode }}</p>
- <!-- <p>{{smoke}}</p> -->
- <!-- <p>{{proportion}}</p> -->
+ <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">
@@ -294,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"
@@ -419,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"
@@ -471,6 +456,26 @@
</el-row>
</el-form>
</el-row>
+ </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 id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
+ <source id="source" :src="videoUrl" type="application/x-mpegURL"></source>
+ </video>
+ </div>
</div>
</div>
</el-tab-pane>
@@ -573,7 +578,13 @@
</template>
<script>
import { Loading } from "element-ui";
-import { getdataL, getGalarm, getnum, getImg } from "../../api/dataL/axiosL";
+import {
+ getdataL,
+ getGalarm,
+ getnum,
+ getImg,
+ getVideo,
+} from "../../api/dataL/axiosL";
import axios from "axios";
import echarts from "echarts";
import { Form } from "element-ui";
@@ -584,7 +595,7 @@
// timeL: "",
a: "",
myDeviceNumber: "",
-
+ videoUrl: "",
//折线图
myChart: "",
numdatalist: [120, 132, 101, 134, 90, 230, 210, 120, 132, 0, 134, 0],
@@ -608,6 +619,7 @@
activeName: "first",
// activeName: 'second',
+ // activeName: "third",
isRecord: true,
screens: false,
//复选框
@@ -953,6 +965,7 @@
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",
@@ -965,7 +978,7 @@
var data = res.data.data.records[0];
var setimgl = null;
//插入图片api获取图片
- // this.stetDetails(data);
+ this.stetDetails(data);
getImg(imgdadta, "post").then((res) => {
// console.log(res.data.data.length != 0)
var imgdatas = [];
@@ -985,7 +998,41 @@
setimgl = imgdatas.length == 0 ? ["no"] : imgdatas;
this.stetDetails(data, setimgl);
});
- // console.log(data);
+ var videoData = {
+ deviceCode: that.a.serialNumber,
+ chl: that.a.channelNumber,
+ };
+ // console.log(videoData);
+ // getVideo(videoData).then((res) => {
+ // that.videoUrl = res
+
+ // console.log(res)
+
+ // });
+ var xhr2 = null, //视频请求
+ url =
+ "https://web.byisf.com:18000/GetPlayUrl?deviceCode=" +
+ videoData.deviceCode +
+ "&chl=" +
+ videoData.chl;
+ if (XMLHttpRequest) {
+ //http请求
+ xhr2 = new XMLHttpRequest();
+ } else {
+ xhr2 = new ActiveXObject("Microsoft.XMLHTTP");
+ }
+ xhr2.open("get", url, true);
+ xhr2.send();
+ xhr2.onreadystatechange = function () {
+ if (xhr2.readyState === 4) {
+ if (xhr2.status === 200) {
+ // 判断isJson是否传进来了
+ var data2 = JSON.parse(xhr2.responseText); // JSON转js
+ that.videoUrl = data2.data.m3u8;
+ // console.log(videoUrl);
+ }
+ }
+ };
});
},
stetDetails(d, imgdata) {
@@ -1028,7 +1075,7 @@
// console.log(j, 1000);
// console.log(states, 1000);
- this.state = states;
+ this.state = states;
this.evaluate = "空气质量";
this.machineCode = "无数据" && this.a.deviceNumber;
@@ -1180,7 +1227,8 @@
// _iframe1.contentWindow.location.reload(true);
location.reload();
},
- handleCurrentChange(val) {//行点击事件
+ handleCurrentChange(val) {
+ //行点击事件
// console.log(val.i);
},
},
@@ -1249,79 +1297,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: #CDCDCD;
+ background-color: #cdcdcd;
}
.l-t-s-green {
- background-color: #32C1A2;
+ background-color: #32c1a2;
}
.l-t-s-yewllo {
- background-color: #F49966;
+ background-color: #f49966;
}
.l-t-s-red {
- background-color: #F35B5B;
+ background-color: #f35b5b;
}
}
}
}
- .left-bot,
- .top-r {
- font-size: 14px;
- font-weight: 400;
- color: #c4c4c4;
- // 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%;
@@ -1497,7 +1597,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;
@@ -1540,13 +1640,13 @@
}
}
.r-b-map {
- height: 500px;
+ height: 350px;
// border: 1px solid rgba(109, 109, 109, 0.2);
#detailMap {
position: relative;
top: 25px;
width: 100%;
- height: 500px;
+ height: 350px;
}
}
}
--
Gitblit v1.9.3