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/index.ts

@@ -9,7 +9,8 @@ import line from "./line";
 import four from "./four";
 import four2 from "./four2";
 import dangrous from "./dangrous";
-
+const currentVideo  = require("@/assets/video/操作箱阀门功能介绍.mp4");
+const currentVideo1  = require("@/assets/video/罐体结构.mp4");
 export class MockData {
     public static getPeopleList() {
         const data = [] as any;
@@ -32,57 +33,114 @@ export class MockData{
             data,
         })
     }
+
     public static getCameraList() {
         const data = [] as any;
-        const positions=[[
+        const positions = [
-            13312915.200000001,
+            [
-            4098598.08,
+                11661040.64,
-            0.51
+                3692463.04,
+                1
             ], [
-            13313086.72,
+                11661039.36,
-            4098442.24,
+                3692464.3200000003,
-            0.51001953125
+                1
             ], [
-            13312961.280000001,
+                11661038.08,
-            4098238.72,
+                3692462.72,
-            0.5099609375
+                2
             ], [
-            13312853.76,
+                11661032.96,
-            4098298.88,
+                3692460.48,
-            0.5099609375
+                1
             ], [
-            13312756.48,
+                11661032.96,
-            4098408.96,
+                3692459.52,
-            0.51
+                2
             ], [
-            13312967.68,
+                11661035.52,
-            4098156.48,
+                3692461.12,
-            0.6099609375
+                -0.5
             ], [
-            13313036.8,
+                11661034.24,
-            4098762.24,
+                3692461.12,
-            0.51
+                -0.5
-        ],[
+            ],
-            13312883.200000001,
+            [
-            4098757.7600000002,
+                11661032.96,
-            0.4
+                3692460.48,
-        ],[
+                0
-            13313327.36,
+            ],
-            4098413.12,
+            [
-            0.51
+                11661038.08,
-        ],[
+                3692463.04,
-            13312756.48,
+                2
-            4098400.96,
-            0.51
             ]]
-        const typeList = ["热成像摄像机","红外球形摄像机","高空瞭望摄像机"]
+        const dataList = [
+            {
+            title: '罐车无泄露罐体无霜冻',
+                model:'txt',
+            info: '①如完好，应重点进行排氮操作(表指针1%以下属于安全范围内)。由于事故后，氮的分层会加速，应实时观察并不间断排除，减少罐内分层涡旋沸腾压力，车体完好按转移危险源处置条件不成熟按倒罐转输或放空排险处置；\n' +
+                '②抢先处置期间要保证罐体不失真空，禁止向罐体、管线、安全阀部位射水。'
+        }, {
+            title: '罐车无泄露罐体有霜冻',
+                model:'txt',
+            info: '①　实时加大排氮操作频次，减少罐内分层沸腾压力，尽快做倒罐转输或转移危险源准备;\n' +
+                '②　前沿处置人员应做好紧急避险准备;\n' +
+                '③　外壳保险器、管线、阀门如出现局部液化天然气泄露，可在扩散气体云团下风向5-15米部署水幕水枪、水力自摆炮稀释驱散；\n' +
+                '④　罐体结霜处置规程中不论出现任何状况，严禁向罐体结霜面打水;2、严禁直流水直接冲击扩散云团。'
+        },
+            {
+                title: '罐车垂直倾翻未泄漏',
+                model:'txt',
+                info: '①　需在专业技术人员的指导下进行排压处置，泄压消除储罐压力风险(内罐或外罐);\n' +
+                    '②　如果出现槽罐垂直倾翻，可采取进料线反向管路排压，将罐体压力经进(出)料管路引流泄压或倒罐;\n' +
+                    '③　紧急情况下，可采取液相出口连接消防水带引至下风向就地直接排放，消除危险源;\n' +
+                    '④　如以降低罐车压力为目的，应以罐车气相出口排放为主，如以加快排放速度为目的，应以罐车液相出口排放为主；\n' +
+                    '⑤　作业前需提前部署好排流点两层以上水雾稀释保护圈，防止扩大危险和回火引爆。'
+            },  {
+                title: '罐车安全阀泄露',
+                model:'txt',
+                info: '①　如罐车撞击、倾翻、罐体完好，仅出现安全阀泄露，可复位安全阀消除泄露;\n' +
+                    '②　如安全阀出现液相冻结，可采取直流水融化解冻或木槌轻敲复位消除泄露；\n' +
+                    '③　处置作业时应注意避开安全阀一爆破片双联保险装置，防止爆破片瞬间爆破液压造成物体打击伤害。'
+            }, {
+                title: '罐车管线阀门泄露',
+                model:'txt',
+                info: '①　如罐车撞击、倾翻，罐体完好，出现管线泄露。应实时进行罐体排氮操作，减少罐内天然气分层、涡旋、沸腾压力，及时采取木楔封堵、缠绕滴水封冻等方法临时堵漏，尽可能采取倒罐转输等进一步消除危险源的措施；\n' +
+                    '②　若无法实现倒罐转输或起吊作业，可采取在罐车气(液)相出口延长管路下风向就地直排或安全控烧的方法消除危险源；\n' +
+                    '③　堵漏方法选择要正确，稀释保护要到位。'
+            }, {
+                title: '罐车泄露灾情异常',
+                model:'txt',
+                info: '①　若封堵措施无法实现，应进一步加大安全警戒区域和火源控制区距离，在泄露点下风向冷蒸气雾与爆炸性混合物区之间(泄露云团下风向10--20米处)部署移动水泡、水幕发生器、扇形递进喷雾水稀释控制扩散范围；\n' +
+                    '②　提高防护等级，必要时采取紧急疏散措施扩大警戒范围。'
+            },{
+                title: '槽车火灾处置',
+                model:'txt',
+                info: '①　在上风向部署自摆式移动水炮冷却保护罐体，严防内外罐超压破裂，引起储罐解体发生化学爆炸；\n' +
+                    '②　处置过程中应严格遵守气体火灾扑救原则，关阀、封堵等切断气源措施未完全到位前，一般不宜直接扑灭燃烧火焰，可采取控制燃烧战术。稳妥处置。处置后期应逐步降低冷却强度，保持罐内LNG持续蒸发，直至燃尽，防止回火闪燃。'
+            },{
+                title: '操作箱阀门功能介绍',
+                model:'video',
+                info: currentVideo
+
+            },{
+                title: '罐体结构',
+                model:'video',
+                info: currentVideo1
+            },
+        ]
         //turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
-        for(let i=0;i<10;i++){
+        for (let i = 0; i < dataList.length; i++) {
             data.push({
                 id: Mock.mock("@id"),
                 position: positions[i],
-                remark:typeList[i%3],
+                remark: dataList[i].title,
-                type:i%4,
+                model: dataList[i].model,
+                info: dataList[i].info,
+                hasPop: true,
+                type: i,
             })
         }
         return Mock.mock({
@@ -91,6 +149,7 @@ export class MockData{
             data,
         })
     }
+
     public static getCompanyList() {
         const data = [] as any;
         const typeList = ["江苏汉邦唐", "北京汉邦唐"];
@@ -164,6 +223,7 @@ export class MockData{
             data,
         })
     }
+
     public static getFourList() {
         const data = [] as any;
         const areaList = four;
@@ -181,6 +241,7 @@ export class MockData{
             data,
         })
     }
+
     public static getFourList2() {
         const data = [] as any;
         const areaList = four2;
@@ -260,6 +321,7 @@ export class MockData{
             data,
         })
     }
+
     public static getBuildingList() {
         const remarkList = ["避难所", "消防站", "气防站", "防空洞"];
         const points = [[
@@ -337,7 +399,6 @@ export class MockData{
     }
 
 
-
     public static getStopCarList() {
         const plateList = ["苏A7E8U6", "苏A3X4K5", "苏J8868P", "苏A7E8U6", "苏A9H2K0", "苏A756H3", "苏A886E7", "苏J12321", "苏A11123", "苏A92984"];
         const typeList = ["重载", "空载"];
@@ -494,6 +555,7 @@ export class MockData{
             data,
         })
     }
+
     public static getCarList() {
         const plateList = ["苏A7E8U6", "苏A3X4K5", "苏J8868P", "苏A7E8U6", "苏A9H2K0"];
         const typeList = ["罐车", "挂车", "油车"];
@@ -536,6 +598,7 @@ export class MockData{
             data,
         })
     }
+
     public static getRealBounds() {
         const data = [] as any;
         for (let i = 0; i < 1; i++) {
@@ -550,6 +613,7 @@ export class MockData{
             data,
         })
     }
+
     public static getSafeBounds() {
         const data = [] as any;
         for (let i = 0; i < 1; i++) {
@@ -564,6 +628,7 @@ export class MockData{
             data,
         })
     }
+
     public static getPlanBounds() {
         const data = [] as any;
         for (let i = 0; i < 1; i++) {
@@ -578,6 +643,7 @@ export class MockData{
             data,
         })
     }
+
     public static getSafeLine() {
         const data = [] as any;
         for (let i = 0; i < 2; i++) {
@@ -612,7 +678,6 @@ export class MockData{
     }
 
 
-
     public static getHiddenDangrous() {
 
         /*  const data = hiddenDangerList.map((item,i)=>{
@@ -745,6 +810,7 @@ export class MockData{
             data: [data[i]],
         })
     }
+
     public static deviceList() {
         const nameList = [
             "2号区3号库采样点",
@@ -769,6 +835,7 @@ export class MockData{
             data,
         })
     }
+
     public static xkz() {
 
         const data = [
@@ -819,6 +886,7 @@ export class MockData{
             data,
         })
     }
+
     public static dangerSourceDetail() {
 
         const data = {

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,6 +297,10 @@ export default class OverViewComponent extends BaseComponent {
                 this.currentEvent = null;
             }
         }
+        if(item.type === 'video'){
+            const currentData = (this.layerData.find(item=>item.value === "video")as any).data.find(items=>items.remark === item.title)
+            this.openVideo(currentData)
+        }else{
             if(!this.viewLayer[item.id]){
                 const data = [] as any;
                 if(item.point>1){
@@ -333,6 +340,8 @@ export default class OverViewComponent extends BaseComponent {
                 }
             }
             this.addCustom(this.viewLayer[item.id],item.hasPop);
+        }
+
         if(item.needFocus){
             if(item.look){
                 this.player.api.camera.lookAt(
@@ -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(){
         //
     }