|
@@ -0,0 +1,204 @@
|
|
|
+<template>
|
|
|
+<div style="width:100%;height:100%;position:relative">
|
|
|
+ <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
|
|
|
+ <!-- <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> -->
|
|
|
+ <!-- <mapdiv ref="mapdiv" style=""></mapdiv> -->
|
|
|
+ <!-- <zhgl></zhgl> -->
|
|
|
+ <!-- <introduction v-if="currentindex==2"></introduction> -->
|
|
|
+ <comic></comic>
|
|
|
+ <!-- <communication v-if="currentindex==3"></communication> -->
|
|
|
+ </div>
|
|
|
+ <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
|
|
|
+
|
|
|
+
|
|
|
+<!--
|
|
|
+ <div class="bottombg1">
|
|
|
+ <div class="itemt item2" @click="currentindex=1"></div>
|
|
|
+ <div class="itemt item1 item2" @click="currentindex=2"></div>
|
|
|
+ <div class="itemt item1 item2" @click="currentindex=3"></div>
|
|
|
+
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from "moment";
|
|
|
+import mapdiv from "../../components/map/index.vue"
|
|
|
+// import introduction from './introduction.vue'
|
|
|
+// import communication from './communication.vue'
|
|
|
+import comic from './comic.vue'
|
|
|
+import zhgl from "../../components/zhgl/index.vue"
|
|
|
+import headerdiv from '@/components/HeaderDiv/index.vue'
|
|
|
+import { httpRequest } from "@/api/data/http";
|
|
|
+import { getLineData,getResource } from "@/api/qdtl/data";
|
|
|
+// import LivePlayer from '@liveqing/liveplayer' // vue2
|
|
|
+
|
|
|
+import videodiv from "../../components/Videoplayer/index.vue"
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "big",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ currentindex:13,
|
|
|
+ videoUrl:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001',
|
|
|
+ currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
|
|
|
+ currentindexNew:13,
|
|
|
+ ccode:"32068166001320000235",
|
|
|
+ videoParams:{
|
|
|
+ url:'http://2.90.220.252:9017/artemis-web/debug',
|
|
|
+ params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ mapdiv,
|
|
|
+ zhgl,
|
|
|
+ headerdiv,
|
|
|
+ videodiv,
|
|
|
+ comic
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.getTrain();
|
|
|
+ // this.getResource();
|
|
|
+ // this.getvideoList();
|
|
|
+ // this.$$refs.headerDiv.currentindex = 1;
|
|
|
+ setInterval(() => {
|
|
|
+ this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ changeMapTab(index){
|
|
|
+ this.$refs.mapdiv.iconSelect = index
|
|
|
+ },
|
|
|
+ getTrain(){
|
|
|
+ this.$refs.mapdiv.addPoint('video.png');
|
|
|
+ },
|
|
|
+ // getResource(){
|
|
|
+ // getResource({date:'2022-03-12'}).then(response =>{
|
|
|
+ // var trainArry = [];
|
|
|
+ // var bridgeArry = [];
|
|
|
+ // var railArry = [];
|
|
|
+ // var stationLocation = [];
|
|
|
+ // var areaList = [];
|
|
|
+ // for(var index in response.data.staticLocation){
|
|
|
+ // var obj = response.data.staticLocation[index]
|
|
|
+ // obj.fence = obj.lnglat
|
|
|
+ // obj.name = obj.locationName
|
|
|
+ // stationLocation.push(obj)
|
|
|
+ // }
|
|
|
+ // for(var index in response.data.area){
|
|
|
+ // var obj = response.data.area[index]
|
|
|
+ // if(obj.areaType == '1'){
|
|
|
+ // areaList.push(obj);
|
|
|
+ // }else if(obj.areaType == '2'){
|
|
|
+ // obj.name = obj.areaName
|
|
|
+ // trainArry.push(obj);
|
|
|
+ // }else if(obj.areaType == '3'){
|
|
|
+ // obj.name = obj.areaName
|
|
|
+ // bridgeArry.push(obj);
|
|
|
+ // }else if(obj.areaType == '4'){
|
|
|
+ // obj.name = obj.areaName
|
|
|
+ // railArry.push(obj);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // for(var index in areaList){
|
|
|
+ // var json = JSON.parse(areaList[index].fence)
|
|
|
+ // this.$refs.mapdiv.addPolygon(json);
|
|
|
+ // }
|
|
|
+ // for(var key in response.data.deviceTrail){
|
|
|
+ // var jsonStr = '['
|
|
|
+ // for(var index in response.data.deviceTrail[key]){
|
|
|
+ // var obj = response.data.deviceTrail[key][index]
|
|
|
+ // if(index == response.data.deviceTrail[key].length - 1){
|
|
|
+ // var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
|
|
|
+ // }else{
|
|
|
+ // var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
|
|
|
+ // }
|
|
|
+ // jsonStr += location
|
|
|
+ // // deviceArry.push(obj.fence.split(','));
|
|
|
+ // }
|
|
|
+ // jsonStr += ']'
|
|
|
+ // var json = JSON.parse(jsonStr);
|
|
|
+ // this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
|
|
|
+ // this.$refs.mapdiv.addline(json,'device');
|
|
|
+ // }
|
|
|
+ // this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
|
|
|
+ // this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
|
|
|
+ // this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
|
|
|
+ // this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ // getvideoList(){
|
|
|
+ // httpRequest(this.videoParams).then(data =>{
|
|
|
+ // var json = JSON.parse(data.data);
|
|
|
+ // this.staticCount += json.data.list.length
|
|
|
+ // this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
|
|
|
+ // });
|
|
|
+
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss">
|
|
|
+
|
|
|
+
|
|
|
+.bottombg1{
|
|
|
+
|
|
|
+ position: absolute;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 1;
|
|
|
+ width: 85.1rem;
|
|
|
+ height: 16.3rem;
|
|
|
+ bottom: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%,-0%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ color:#fff;
|
|
|
+ font-size:1.6rem;
|
|
|
+
|
|
|
+ .itemt:hover{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .itemt{
|
|
|
+ width: 33%;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ // background: #25f8bd;
|
|
|
+ height: 100%;
|
|
|
+ .num{
|
|
|
+ font-size:3rem;
|
|
|
+ color:#25f8bd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item1{
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ .item2::after{
|
|
|
+ content: "";
|
|
|
+ // background: url("../../assets/images/图层\ 2@2x.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 0.2rem;
|
|
|
+ height: 7.3rem;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.ol-zoom-in,.ol-zoom-out{
|
|
|
+ display: none !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|