Merge branch 'guangyin'

src/components/view/right/viewRight.component.html

@@ -18,14 +18,18 @@
                 <img :src="item.img" alt="">
             <div>
                 <p>{{ item.title }}</p>
-                <div class="d-flex align-items-center right-sub-text">
+                <div v-show="item.rate" class="d-flex align-items-center right-sub-text">
                     <span>难度:</span>
                     <el-rate disabled v-model="item.rate" :max="5"></el-rate>
                 </div>
-                <div class="d-flex align-items-center right-sub-text">
+                <div v-show="item.rate" class="d-flex align-items-center right-sub-text">
                     <span>火点:</span>
                     <span>{{ item.point }}个</span>
                 </div>
+                <div v-show="item.idx" class="d-flex align-items-center right-sub-text">
+                    <span>点位:</span>
+                    <span>{{ item.idx }}</span>
+                </div>
             </div>
         </div>
 

src/mock/layer.ts

@@ -65,4 +65,27 @@ export default [ {
     scale:[0,0,0],
     selected:false,
     pages:["home","view"]
+},{
+    name:"视频监控",
+    ids:[] as string[],
+    type:"moveMarker",
+    urls:[
+        "@path:1.png",
+        "@path:2.png",
+        "@path:3.png",
+        "@path:4.png",
+        "@path:5.png",
+        "@path:6.png",
+        "@path:7.png",
+        "@path:8.png",
+        "@path:9.png",
+    ],
+    init:async ()=>{
+        return await service.getCameraList()
+    },
+    scale:[0,0,0],
+    value:"video" ,
+    selected:false,
+    hasPop:true,
+    pages:["view"]
 }]

src/mock/treeData.ts

@@ -1855,6 +1855,222 @@ export const treeData = [
                                     img: require('@/assets/img/view/氮气泄露.png'),
                                     content: '氮气泄露。',
                                     mainPoint: "氮气泄露。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    idx:1,
+                                    title: '罐车无泄露罐体无霜冻',
+                                    look:[
+                                        11661038.66375,
+                                        3692474.989844,
+                                        10.775087,
+                                        0,
+                                        -34.737137,
+                                        63.712109,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        1
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车无泄露罐体无霜冻。',
+                                    mainPoint: "罐车无泄露罐体无霜冻。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    idx:2,
+                                    title: '罐车无泄露罐体有霜冻',
+                                    look:[
+                                        11661036.226719,
+                                        3692473.52625,
+                                        10.775087,
+                                        0,
+                                        -34.737137,
+                                        63.712109,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车无泄露罐体有霜冻。',
+                                    mainPoint: "罐车无泄露罐体有霜冻。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    idx:3,
+                                    title: '罐车垂直倾翻未泄漏',
+                                    look:[
+                                        11661037.976563,
+                                        3692466.9175,
+                                        8.837294,
+                                        0,
+                                        -47.400764,
+                                        63.71207,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    idx:4,
+                                    title: '罐车安全阀泄露',
+                                    look:[
+                                        11661030.209375,
+                                        3692459.952187,
+                                        5.805962,
+                                        0,
+                                        -27.080067,
+                                        -20.37447,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    title: '罐车管线阀门泄露',
+                                    look:[
+                                        11661030.209375,
+                                        3692459.952187,
+                                        5.805962,
+                                        0,
+                                        -27.080067,
+                                        -20.37447,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    idx:5,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    title: '罐车泄露灾情异常',
+                                    look:[
+                                        11661029.610625,
+                                        3692467.293906,
+                                        12.065425,
+                                        0,
+                                        -39.69001,
+                                        33.82233,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    idx:6,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    title: '槽车火灾处置',
+                                    look:[
+                                        11661029,
+                                        3692466.315,
+                                        11.264197,
+                                        0,
+                                        -37.605675,
+                                        23.234461,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    idx:7,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    title: '操作箱阀门功能介绍',
+                                    look:[
+                                        11661026.115625,
+                                        3692465.86625,
+                                        9.601785,
+                                        0,
+                                        -21.406857,
+                                        20.658468,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    idx:8,
+                                    type:'video',
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
+                                },{
+                                    id: Mock.mock("@id"),
+                                    title: '罐体结构',
+                                    look:[
+                                        11661036.347656,
+                                        3692468.925391,
+                                        7.925199,
+                                        0,
+                                        -28.857199,
+                                        69.452904,
+                                        2
+                                    ],
+                                    position: [
+                                        11661043.200000001,
+                                        3692464.3200000003,
+                                        3.2007153320312502
+                                    ],
+                                    needFocus:true,
+                                    distance:3,
+                                    type:'video',
+                                    idx:9,
+                                    img: require('@/assets/img/view/槽罐车侧壁泄露.png'),
+                                    content: '罐车垂直倾翻未泄漏。',
+                                    mainPoint: "罐车垂直倾翻未泄漏。"
                                 },
 
                             ]

src/views/base.component.ts

@@ -149,7 +149,6 @@ export default class BaseComponent extends Vue {
 
     public async addMarker(layer,trackCustom?){
         if(!layer.ids.length){
-           
             const options = layer.data.map((item,index)=>{
                 const option = {} as any
                 if(item.hasPop){
@@ -162,7 +161,7 @@ export default class BaseComponent extends Vue {
                     coordinateType:layer.coordinateType?layer.coordinateType:0,
                     displayMode:2,
                     imagePath:layer.url || layer.urls[item.type],
-                    imageSize:[48,48],
+                    imageSize:item.model?[30,30]:[48,48],
                     popupSize:[480,388],
                     popupOffset:[50,0],
                     autoHidePopupWindow:false,

src/views/overview.component.ts

@@ -53,7 +53,6 @@ export default class OverViewComponent extends BaseComponent {
     waringRightShow = false
     //显示展示隐藏按钮
     showPlay = false
-
     // 是否隐藏除地图外所有板块
     public hideAllPanel = false;
     public viewRightData = {};
@@ -108,6 +107,9 @@ export default class OverViewComponent extends BaseComponent {
             if(data.GroupID==="car"){
                 this.emitCarPop(currentData)
             }
+            if(data.GroupID==="video"){
+                this.openVideo(currentData)
+            }
         }
     }
 
@@ -285,6 +287,7 @@ export default class OverViewComponent extends BaseComponent {
     }
     //右侧详情点击事件
     showDetail(item){
+        debugger
         if(this.currentEvent){
             if(this.currentEvent.id === item.id){
                 return
@@ -294,45 +297,51 @@ export default class OverViewComponent extends BaseComponent {
                 this.currentEvent = null;
             }
         }
-        if(!this.viewLayer[item.id]){
+        if(item.type === 'video'){
-            const data = [] as any;
+            const currentData = (this.layerData.find(item=>item.value === "video")as any).data.find(items=>items.remark === item.title)
-            if(item.point>1){
+            this.openVideo(currentData)
-                for(let i = 0;i<item.point;i++){
+        }else{
+            if(!this.viewLayer[item.id]){
+                const data = [] as any;
+                if(item.point>1){
+                    for(let i = 0;i<item.point;i++){
+                        data.push({
+                            id:item.id+'_'+i,
+                            position:item.position[i],
+                            rotation:item.rotation || [0,90,0],
+                            hasPop:item.hasPop && i===1,
+                        })
+                    }
+                }else{
                     data.push({
-                        id:item.id+'_'+i,
+                        id:item.id,
-                        position:item.position[i],
+                        position:item.position,
                         rotation:item.rotation || [0,90,0],
-                        hasPop:item.hasPop && i===1,
+                        hasPop:item.hasPop
                     })
                 }
-            }else{
+                this.viewLayer[item.id] = {
-                data.push({
+                    type:"moveMarker",
-                    id:item.id,
+                    assetPath:item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
-                    position:item.position,
+                    value:"fire",
-                    rotation:item.rotation || [0,90,0],
+                    popData:item,
-                    hasPop:item.hasPop
+                    selected:true,
-                })
+                    scale:item.scale || [1,1,1],
-            }
+                    urls:[],
-            this.viewLayer[item.id] = {
+                    ids:[],
-                type:"moveMarker",
+                    data,
-                assetPath:item.assetPath || "/JC_CustomAssets/ParticleLibrary/Exhibition/火/火焰_10",
-                value:"fire",
-                popData:item,
-                selected:true,
-                scale:item.scale || [1,1,1],
-                urls:[],
-                ids:[],
-                data,
 
-            }
+                }
-            this.currentEvent = item;
-        }else{
-            this.viewLayer[item.id].selected = !this.viewLayer[item.id].selected;
-            if(this.viewLayer[item.id].selected){
                 this.currentEvent = item;
+            }else{
+                this.viewLayer[item.id].selected = !this.viewLayer[item.id].selected;
+                if(this.viewLayer[item.id].selected){
+                    this.currentEvent = item;
+                }
             }
+            this.addCustom(this.viewLayer[item.id],item.hasPop);
         }
-        this.addCustom(this.viewLayer[item.id],item.hasPop);
+
         if(item.needFocus){
             if(item.look){
                 this.player.api.camera.lookAt(
@@ -365,9 +374,9 @@ export default class OverViewComponent extends BaseComponent {
                 item.data = (await item.init()).data
             }
             if(item.pages.includes(this.currentNav)){
-                if(!item.selected){
+                    if(!item.selected){
-                    this.toggleLayer(item)
+                        this.toggleLayer(item)
-                }
+                    }
                 layers.push(item)
             }else{
                 if(item.selected){
@@ -405,6 +414,45 @@ export default class OverViewComponent extends BaseComponent {
     playAction(type){
         this.player.api.cameraTour[type]()
     }
+    // 打开摄像头
+    openVideo(item){
+        this.resetMap();
+        setTimeout(()=>{
+            // this.player.api.marker.focus(item.id,20,2)
+            if(item.model === 'video'){
+                setTimeout(()=>{
+                    layer.open({
+                        type:1,
+                        shade:0,
+                        title:item.remark,
+                        content:`<div class="customClass">
+                      <video src="${item.info}" controls style="width:100%" autoplay></video>
+                    </div>`
+                    })
+                },2000)
+            }else{
+                setTimeout(()=>{
+                    layer.open({
+                        type:1,
+                        shade:0,
+                        title:item.remark,
+                        content:`<div class="customClass"><div
+style="
+    background: #0000008c;
+    color: #ffffff;
+    font-size: 12px;
+    padding: 10px;
+    line-height: 2;
+    white-space: pre-wrap;
+"
+>${item.info}</div></div>`
+
+                    })
+                },2000)
+            }
+
+        },1000)
+    }
     deactivated(){
         //
     }