guangyin
/
hbt-training-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: guangyin:2a21bcb586034afb22ad3421df1b9113802014ee
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu
..
compare: guangyin:0b99f0ece9c3d82a1cfe902d05888fa97bcf5ca9
Branches Tags
guangyin:master
guangyin:guangyin
guangyin:wuyanfu

No commits in common. "2a21bcb586034afb22ad3421df1b9113802014ee" and "0b99f0ece9c3d82a1cfe902d05888fa97bcf5ca9" have entirely different histories.
2a21bcb586 ... 0b99f0ece9

8 changed files with 436 additions and 794 deletions
Show Stats Expand all files Collapse all files

BIN
src/assets/video/操作箱阀门功能介绍.mp4
View File

Binary file not shown.

BIN
src/assets/video/罐体结构.mp4
View File

Binary file not shown.

8
src/components/view/right/viewRight.component.html
View File

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

150
src/mock/index.ts
View File

@ -9,8 +9,7 @@ import line from "./line";
import four from "./four"; import four from "./four";
import four2 from "./four2"; import four2 from "./four2";
import dangrous from "./dangrous"; import dangrous from "./dangrous";
const currentVideo = require("@/assets/video/操作箱阀门功能介绍.mp4");
const currentVideo1 = require("@/assets/video/罐体结构.mp4");
export class MockData{ export class MockData{
public static getPeopleList(){ public static getPeopleList(){
const data = [] as any; const data = [] as any;
@ -33,114 +32,57 @@ export class MockData {
data, data,
}) })
} }
public static getCameraList(){ public static getCameraList(){
const data = [] as any; const data = [] as any;
const positions = [ const positions=[[
[ 13312915.200000001,
11661040.64, 4098598.08,
3692463.04, 0.51
1
],[ ],[
11661039.36, 13313086.72,
3692464.3200000003, 4098442.24,
1 0.51001953125
],[ ],[
11661038.08, 13312961.280000001,
3692462.72, 4098238.72,
2 0.5099609375
],[ ],[
11661032.96, 13312853.76,
3692460.48, 4098298.88,
1 0.5099609375
],[ ],[
11661032.96, 13312756.48,
3692459.52, 4098408.96,
2 0.51
],[ ],[
11661035.52, 13312967.68,
3692461.12, 4098156.48,
-0.5 0.6099609375
],[ ],[
11661034.24, 13313036.8,
3692461.12, 4098762.24,
-0.5 0.51
], ],[
[ 13312883.200000001,
11661032.96, 4098757.7600000002,
3692460.48, 0.4
0 ],[
], 13313327.36,
[ 4098413.12,
11661038.08, 0.51
3692463.04, ],[
2 13312756.48,
4098400.96,
0.51
]] ]]
const dataList = [ const typeList = ["热成像摄像机","红外球形摄像机","高空瞭望摄像机"]
{
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]), //turf.randomPosition([119.588709 ,34.514257,119.596724,34.520382]),
for (let i = 0; i < dataList.length; i++) { for(let i=0;i<10;i++){
data.push({ data.push({
id:Mock.mock("@id"), id:Mock.mock("@id"),
position:positions[i], position:positions[i],
remark: dataList[i].title, remark:typeList[i%3],
model: dataList[i].model, type:i%4,
info: dataList[i].info,
hasPop: true,
type: i,
}) })
} }
return Mock.mock({ return Mock.mock({
@ -149,7 +91,6 @@ export class MockData {
data, data,
}) })
} }
public static getCompanyList(){ public static getCompanyList(){
const data = [] as any; const data = [] as any;
const typeList = ["江苏汉邦唐","北京汉邦唐"]; const typeList = ["江苏汉邦唐","北京汉邦唐"];
@ -223,7 +164,6 @@ export class MockData {
data, data,
}) })
} }
public static getFourList(){ public static getFourList(){
const data = [] as any; const data = [] as any;
const areaList = four; const areaList = four;
@ -241,7 +181,6 @@ export class MockData {
data, data,
}) })
} }
public static getFourList2(){ public static getFourList2(){
const data = [] as any; const data = [] as any;
const areaList = four2; const areaList = four2;
@ -321,7 +260,6 @@ export class MockData {
data, data,
}) })
} }
public static getBuildingList(){ public static getBuildingList(){
const remarkList = ["避难所","消防站","气防站","防空洞"]; const remarkList = ["避难所","消防站","气防站","防空洞"];
const points = [[ const points = [[
@ -399,6 +337,7 @@ export class MockData {
} }
public static getStopCarList(){ public static getStopCarList(){
const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0","苏A756H3","苏A886E7","苏J12321","苏A11123","苏A92984"]; const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0","苏A756H3","苏A886E7","苏J12321","苏A11123","苏A92984"];
const typeList = ["重载","空载"]; const typeList = ["重载","空载"];
@ -555,7 +494,6 @@ export class MockData {
data, data,
}) })
} }
public static getCarList(){ public static getCarList(){
const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"]; const plateList = ["苏A7E8U6","苏A3X4K5","苏J8868P","苏A7E8U6","苏A9H2K0"];
const typeList = ["罐车","挂车","油车"]; const typeList = ["罐车","挂车","油车"];
@ -598,7 +536,6 @@ export class MockData {
data, data,
}) })
} }
public static getRealBounds(){ public static getRealBounds(){
const data = [] as any; const data = [] as any;
for(let i=0;i<1;i++){ for(let i=0;i<1;i++){
@ -613,7 +550,6 @@ export class MockData {
data, data,
}) })
} }
public static getSafeBounds(){ public static getSafeBounds(){
const data = [] as any; const data = [] as any;
for(let i=0;i<1;i++){ for(let i=0;i<1;i++){
@ -628,7 +564,6 @@ export class MockData {
data, data,
}) })
} }
public static getPlanBounds(){ public static getPlanBounds(){
const data = [] as any; const data = [] as any;
for(let i=0;i<1;i++){ for(let i=0;i<1;i++){
@ -643,7 +578,6 @@ export class MockData {
data, data,
}) })
} }
public static getSafeLine(){ public static getSafeLine(){
const data = [] as any; const data = [] as any;
for(let i=0;i<2;i++){ for(let i=0;i<2;i++){
@ -678,6 +612,7 @@ export class MockData {
} }
public static getHiddenDangrous(){ public static getHiddenDangrous(){
/* const data = hiddenDangerList.map((item,i)=>{ /* const data = hiddenDangerList.map((item,i)=>{
@ -810,7 +745,6 @@ export class MockData {
data:[data[i]], data:[data[i]],
}) })
} }
public static deviceList(){ public static deviceList(){
const nameList = [ const nameList = [
"2号区3号库采样点", "2号区3号库采样点",
@ -835,7 +769,6 @@ export class MockData {
data, data,
}) })
} }
public static xkz(){ public static xkz(){
const data = [ const data = [
@ -886,7 +819,6 @@ export class MockData {
data, data,
}) })
} }
public static dangerSourceDetail(){ public static dangerSourceDetail(){
const data = { const data = {

23
src/mock/layer.ts
View File

@ -65,27 +65,4 @@ export default [ {
scale:[0,0,0], scale:[0,0,0],
selected:false, selected:false,
pages:["home","view"] 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"]
}] }]

216
src/mock/treeData.ts
View File

@ -1855,222 +1855,6 @@ export const treeData = [
img: require('@/assets/img/view/氮气泄露.png'), img: require('@/assets/img/view/氮气泄露.png'),
content: '氮气泄露。', content: '氮气泄露。',
mainPoint: "氮气泄露。" 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: "罐车垂直倾翻未泄漏。"
}, },
] ]

3
src/views/base.component.ts
View File

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

50
src/views/overview.component.ts
View File

@ -53,6 +53,7 @@ export default class OverViewComponent extends BaseComponent {
waringRightShow = false waringRightShow = false
//显示展示隐藏按钮 //显示展示隐藏按钮
showPlay = false showPlay = false
// 是否隐藏除地图外所有板块 // 是否隐藏除地图外所有板块
public hideAllPanel = false; public hideAllPanel = false;
public viewRightData = {}; public viewRightData = {};
@ -107,9 +108,6 @@ export default class OverViewComponent extends BaseComponent {
if(data.GroupID==="car"){ if(data.GroupID==="car"){
this.emitCarPop(currentData) this.emitCarPop(currentData)
} }
if(data.GroupID==="video"){
this.openVideo(currentData)
}
} }
} }
@ -287,7 +285,6 @@ export default class OverViewComponent extends BaseComponent {
} }
//右侧详情点击事件 //右侧详情点击事件
showDetail(item){ showDetail(item){
debugger
if(this.currentEvent){ if(this.currentEvent){
if(this.currentEvent.id === item.id){ if(this.currentEvent.id === item.id){
return return
@ -297,10 +294,6 @@ export default class OverViewComponent extends BaseComponent {
this.currentEvent = null; 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]){ if(!this.viewLayer[item.id]){
const data = [] as any; const data = [] as any;
if(item.point>1){ if(item.point>1){
@ -340,8 +333,6 @@ export default class OverViewComponent extends BaseComponent {
} }
} }
this.addCustom(this.viewLayer[item.id],item.hasPop); this.addCustom(this.viewLayer[item.id],item.hasPop);
}
if(item.needFocus){ if(item.needFocus){
if(item.look){ if(item.look){
this.player.api.camera.lookAt( this.player.api.camera.lookAt(
@ -414,45 +405,6 @@ export default class OverViewComponent extends BaseComponent {
playAction(type){ playAction(type){
this.player.api.cameraTour[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(){ deactivated(){
// //
} }