diff --git a/src/assets/img/avatar.jpg b/src/assets/img/avatar.jpg deleted file mode 100644 index 150c17b..0000000 Binary files a/src/assets/img/avatar.jpg and /dev/null differ diff --git a/src/assets/img/bar_chart_bg.png b/src/assets/img/bar_chart_bg.png deleted file mode 100644 index b47614f..0000000 Binary files a/src/assets/img/bar_chart_bg.png and /dev/null differ diff --git a/src/assets/img/close/bo.png b/src/assets/img/close/bo.png deleted file mode 100644 index ebc689f..0000000 Binary files a/src/assets/img/close/bo.png and /dev/null differ diff --git a/src/assets/img/eme/eme_Fireaxe.png b/src/assets/img/eme/eme_Fireaxe.png deleted file mode 100644 index 7e91926..0000000 Binary files a/src/assets/img/eme/eme_Fireaxe.png and /dev/null differ diff --git a/src/assets/img/eme/eme_extinguisher.png b/src/assets/img/eme/eme_extinguisher.png deleted file mode 100644 index 9e91088..0000000 Binary files a/src/assets/img/eme/eme_extinguisher.png and /dev/null differ diff --git a/src/assets/img/eme/eme_medicinebag.png b/src/assets/img/eme/eme_medicinebag.png deleted file mode 100644 index 2336af2..0000000 Binary files a/src/assets/img/eme/eme_medicinebag.png and /dev/null differ diff --git a/src/assets/img/eme/fuzi.png b/src/assets/img/eme/fuzi.png deleted file mode 100644 index 9e04bb0..0000000 Binary files a/src/assets/img/eme/fuzi.png and /dev/null differ diff --git a/src/assets/img/eme/mhq.png b/src/assets/img/eme/mhq.png deleted file mode 100644 index 80358b9..0000000 Binary files a/src/assets/img/eme/mhq.png and /dev/null differ diff --git a/src/assets/img/eme/wz.png b/src/assets/img/eme/wz.png deleted file mode 100644 index bf5a03a..0000000 Binary files a/src/assets/img/eme/wz.png and /dev/null differ diff --git a/src/assets/img/energy/dian.png b/src/assets/img/energy/dian.png deleted file mode 100644 index 1fed5df..0000000 Binary files a/src/assets/img/energy/dian.png and /dev/null differ diff --git a/src/assets/img/energy/energyCardBg.png b/src/assets/img/energy/energyCardBg.png deleted file mode 100644 index 37b0ff6..0000000 Binary files a/src/assets/img/energy/energyCardBg.png and /dev/null differ diff --git a/src/assets/img/energy/energyTitle.png b/src/assets/img/energy/energyTitle.png deleted file mode 100644 index c23cbd8..0000000 Binary files a/src/assets/img/energy/energyTitle.png and /dev/null differ diff --git a/src/assets/img/energy/green-arr.png b/src/assets/img/energy/green-arr.png deleted file mode 100644 index 709dac3..0000000 Binary files a/src/assets/img/energy/green-arr.png and /dev/null differ diff --git a/src/assets/img/energy/mei.png b/src/assets/img/energy/mei.png deleted file mode 100644 index 402b05e..0000000 Binary files a/src/assets/img/energy/mei.png and /dev/null differ diff --git a/src/assets/img/energy/red-arr.png b/src/assets/img/energy/red-arr.png deleted file mode 100644 index 27338f8..0000000 Binary files a/src/assets/img/energy/red-arr.png and /dev/null differ diff --git a/src/assets/img/energy/shui.png b/src/assets/img/energy/shui.png deleted file mode 100644 index f0a40bc..0000000 Binary files a/src/assets/img/energy/shui.png and /dev/null differ diff --git a/src/assets/img/energy/zq.png b/src/assets/img/energy/zq.png deleted file mode 100644 index eaa99ab..0000000 Binary files a/src/assets/img/energy/zq.png and /dev/null differ diff --git a/src/assets/img/env/BenzeneExceedance.png b/src/assets/img/env/BenzeneExceedance.png deleted file mode 100644 index 7082b14..0000000 Binary files a/src/assets/img/env/BenzeneExceedance.png and /dev/null differ diff --git a/src/assets/img/env/EthanolExceedance.png b/src/assets/img/env/EthanolExceedance.png deleted file mode 100644 index ba7fe4a..0000000 Binary files a/src/assets/img/env/EthanolExceedance.png and /dev/null differ diff --git a/src/assets/img/env/HCLExceedance.png b/src/assets/img/env/HCLExceedance.png deleted file mode 100644 index 1a7f1d9..0000000 Binary files a/src/assets/img/env/HCLExceedance.png and /dev/null differ diff --git a/src/assets/img/env/NOExceedance.png b/src/assets/img/env/NOExceedance.png deleted file mode 100644 index a7a7530..0000000 Binary files a/src/assets/img/env/NOExceedance.png and /dev/null differ diff --git a/src/assets/img/env/clean-count.png b/src/assets/img/env/clean-count.png deleted file mode 100644 index ef59223..0000000 Binary files a/src/assets/img/env/clean-count.png and /dev/null differ diff --git a/src/assets/img/env/clean-year.png b/src/assets/img/env/clean-year.png deleted file mode 100644 index 542eb7b..0000000 Binary files a/src/assets/img/env/clean-year.png and /dev/null differ diff --git a/src/assets/img/env/clean.png b/src/assets/img/env/clean.png deleted file mode 100644 index 7ef15a5..0000000 Binary files a/src/assets/img/env/clean.png and /dev/null differ diff --git a/src/assets/img/env/count.png b/src/assets/img/env/count.png deleted file mode 100644 index 5575c7a..0000000 Binary files a/src/assets/img/env/count.png and /dev/null differ diff --git a/src/assets/img/env/cycle-bg.png b/src/assets/img/env/cycle-bg.png deleted file mode 100644 index 2befa6e..0000000 Binary files a/src/assets/img/env/cycle-bg.png and /dev/null differ diff --git a/src/assets/img/env/formaldehydeExcessRate.png b/src/assets/img/env/formaldehydeExcessRate.png deleted file mode 100644 index b1863f8..0000000 Binary files a/src/assets/img/env/formaldehydeExcessRate.png and /dev/null differ diff --git a/src/assets/img/env/gas-year.png b/src/assets/img/env/gas-year.png deleted file mode 100644 index fa14e6e..0000000 Binary files a/src/assets/img/env/gas-year.png and /dev/null differ diff --git a/src/assets/img/env/gas.png b/src/assets/img/env/gas.png deleted file mode 100644 index b95cd17..0000000 Binary files a/src/assets/img/env/gas.png and /dev/null differ diff --git a/src/assets/img/env/methanolExceedance.png b/src/assets/img/env/methanolExceedance.png deleted file mode 100644 index 9248362..0000000 Binary files a/src/assets/img/env/methanolExceedance.png and /dev/null differ diff --git a/src/assets/img/env/waste-year.png b/src/assets/img/env/waste-year.png deleted file mode 100644 index 487a4f3..0000000 Binary files a/src/assets/img/env/waste-year.png and /dev/null differ diff --git a/src/assets/img/env/waste.png b/src/assets/img/env/waste.png deleted file mode 100644 index d0fb1da..0000000 Binary files a/src/assets/img/env/waste.png and /dev/null differ diff --git a/src/assets/img/env/waterImg.png b/src/assets/img/env/waterImg.png deleted file mode 100644 index 15a6df2..0000000 Binary files a/src/assets/img/env/waterImg.png and /dev/null differ diff --git a/src/assets/style/pageCommon.component.scss b/src/assets/style/pageCommon.component.scss index 57bad92..a475689 100644 --- a/src/assets/style/pageCommon.component.scss +++ b/src/assets/style/pageCommon.component.scss @@ -174,53 +174,7 @@ padding-top: 30px; } - .right-cycle-box-con { - margin-bottom: 30px; - .right-cycle-box { - background: url("~@/assets/img/env/cycle-bg.png") 50% 50% no-repeat; - width: 65px; - height: 65px; - background-size: cover; - text-align: center; - margin-right: 67px; - margin-bottom: 14px; - - .con-style-top { - height: 50%; - line-height: 2.4; - font-size: 16px; - font-weight: bold; - } - - .con-style-bottom { - height: 50%; - line-height: 2; - color: #BBBBBB; - } - - } - - &:nth-child(3n) { - .right-cycle-box { - margin-right: 0; - } - } - - &:nth-child(n+4) { - margin-bottom: 0; - } - - .word-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 64px; - color: #BBBBBB; - font-size: 12px; - } - - } } .box-content { @@ -351,43 +305,6 @@ } -@mixin imgStyle { - width: 28px; - height: 22px; - background-size: cover; - margin: 5px auto; -} - -.formaldehydeExcessRate { - background: url("~@/assets/img/env/formaldehydeExcessRate.png") 50% 50% no-repeat; - @include imgStyle -} - -.methanolExceedance { - background: url("~@/assets/img/env/methanolExceedance.png") 50% 50% no-repeat; - @include imgStyle -} - -.NOExceedance { - background: url("~@/assets/img/env/NOExceedance.png") 50% 50% no-repeat; - @include imgStyle -} - - -.HCLExceedance { - background: url("~@/assets/img/env/HCLExceedance.png") 50% 50% no-repeat; - @include imgStyle -} - -.BenzeneExceedance { - background: url("~@/assets/img/env/BenzeneExceedance.png") 50% 50% no-repeat; - @include imgStyle -} - -.EthanolExceedance { - background: url("~@/assets/img/env/EthanolExceedance.png") 50% 50% no-repeat; - @include imgStyle -} .env-left, .env-right { .card-box { @@ -479,15 +396,7 @@ flex: 1; } -.right-pie-chart { - height: 230px; - background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat; -} -.right-pie-chart-water { - height: 230px; - background: url('~@/assets/img/bar_chart_bg.png') 35% 50% no-repeat; -} .margin-top-23 { margin-top: 23px; @@ -1492,15 +1401,6 @@ margin-top: 10px; } -.energyRightTitle { - width: 332px; - height: 42px; - background: url("~@/assets/img/energy/energyTitle.png") no-repeat 50% 50%; - line-height: 42px; - font-size: 14px; - padding: 0 12px; - -} .center-box { position: absolute; @@ -1508,13 +1408,6 @@ display: flex; top: 0; - &-card-bg { - width: 264px; - height: 148px; - background: url("~@/assets/img/energy/energyCardBg.png") no-repeat 50% 50%; - padding: 8px 16px; - } - &-card-title { font-size: 14px; text-align: center; @@ -2243,12 +2136,6 @@ svg.loading-icon { height: 10px; } -.person-icon { - width: 32px; - height: 32px; - background: url("~@/assets/img/env/count.png") no-repeat; - margin-right: 14px; -} .radio-box { display: flex; @@ -2785,12 +2672,14 @@ svg.loading-icon { } .tree-box{ width: 330px; - height: 300px; + max-height: 300px; + overflow-y: auto; padding: 14px; background: rgba(0,0,0,0.5); box-shadow: 0 10px 20px -10px #000000; border-radius: 6px; border: 1px solid; + //flex: 1; border-image: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0)) 1 1; } diff --git a/src/components/view/left/viewLeft.component.html b/src/components/view/left/viewLeft.component.html index e890cb0..443bb21 100644 --- a/src/components/view/left/viewLeft.component.html +++ b/src/components/view/left/viewLeft.component.html @@ -19,7 +19,9 @@
- + + +
{{ node.label }} @@ -36,25 +38,14 @@ 基地导览路线
-
-
+
+
- 北大门东区 + {{item.from}} - 南大门西区 -
- -
-
-
- -
-
- 北大门东区 - - 南大门西区 + {{item.to}}
diff --git a/src/components/view/left/viewLeft.component.ts b/src/components/view/left/viewLeft.component.ts index 209dde6..818ac11 100644 --- a/src/components/view/left/viewLeft.component.ts +++ b/src/components/view/left/viewLeft.component.ts @@ -2,9 +2,9 @@ import {Component, Emit, Vue} from 'vue-property-decorator'; import template from "./viewLeft.component.html" import TitleComponent from "@/components/title.component.vue" import WarningListComponent from "@/components/warningList.component.vue" -import * as turf from '@turf/turf' import Mock from "mockjs" -import moment from "moment" +import {treeData} from "@/mock/treeData"; + import("@/assets/style/pageCommon.component.scss") @@ -22,63 +22,59 @@ export default class ViewLeftComponent extends Vue { //标题左侧图标 imgSrc = require("@/assets/icons/png/env/env-title-icon.png"); - treeData = [ + treeData = treeData; + viewList = [ { - label: '技能训练设施', - children: [] - }, { - label: '灾害事故处置训练设施', - children: [{ - label: '火灾扑救训练设', - children: [ - { - label: '综合训练楼', - children: [] - },{ - label: '化工装置火灾事故处置训练设施', - children: [] - } - ] - }] - }, { - label: '战勤保障训练设施', - children: [] - }] -//获取class类 - getNodeClass(node){ - const arr:string[] = [] - if (node.level>1){ + id: Mock.mock("@id"), + title: '北大门东区→南大门西区', + from: '北大门东区', + to: '南大门西区' + }, { + id: Mock.mock("@id"), + title: '南大门东区→北大门西区', + from: '南大门东区', + to: '北大门西区' + }, + ]; + + //获取class类 + getNodeClass(node) { + const arr: string[] = [] + if (node.level > 1) { arr.push('sub-item') } - if (node.childNodes.length === 0 || !node.expanded){ + if (node.childNodes.length === 0 || !node.expanded) { arr.push('sub-item-border-none') } return arr } + @Emit('showView') - showView(){ + showView() { //todo 展开自由导览 } - //点击告警信息 - @Emit() - getItem(item) { - // console.log('item', item) - } + + + //点击节点 - nodeClick(data,node,self){ - if (node.isLeaf){ + nodeClick(data, node, self) { + if (node.isLeaf) { this.showViewRight(node.data) } } + //显示右侧 @Emit('showViewRight') - showViewRight(item){ + showViewRight(item) { // } - playView(){ + + @Emit('playView') + playView(item) { console.log('导览') } + count = 1 diff --git a/src/components/view/right/viewRight.component.html b/src/components/view/right/viewRight.component.html index 051b27b..a8edfa4 100644 --- a/src/components/view/right/viewRight.component.html +++ b/src/components/view/right/viewRight.component.html @@ -1,15 +1,15 @@
- 化工装置火灾事故装置训练设施 + {{viewRightData.label}}

训练内容

- 模拟在密闭建筑物内发生火灾,消防员在高温、浓烟、高噪音的情况下进行火情侦察,寻找被困人员,救出被困人员,灭火抢险等战斗 + {{viewRightData.data.content}}
-

训练内容

+

模拟火情

-
+
diff --git a/src/components/view/right/viewRight.component.ts b/src/components/view/right/viewRight.component.ts index 254414a..678455e 100644 --- a/src/components/view/right/viewRight.component.ts +++ b/src/components/view/right/viewRight.component.ts @@ -1,4 +1,4 @@ -import {Component, Emit, Vue} from 'vue-property-decorator'; +import {Component, Emit, Prop, Vue} from 'vue-property-decorator'; import template from "./viewRight.component.html" import {lineChartData,radarChartData} from "./chartData"; import TitleComponent from "@/components/title.component.vue" @@ -17,34 +17,8 @@ Component.registerHooks([ }, }) export default class ViewRightComponent extends Vue { + @Prop({default:{}}) viewRightData!:any - tableData = [ - { - rate:3, - title:'顶层沸溢火', - point:'5', - },{ - rate:4, - title:'顶层沸溢火', - point:'5', - },{ - rate:2, - title:'顶层沸溢火', - point:'5', - },{ - rate:3, - title:'顶层沸溢火', - point:'5', - },{ - rate:4, - title:'顶层沸溢火', - point:'5', - },{ - rate:2, - title:'顶层沸溢火', - point:'5', - }, - ] //训练内容详情 @Emit('showDetail') diff --git a/src/mock/treeData.ts b/src/mock/treeData.ts new file mode 100644 index 0000000..f6f7b56 --- /dev/null +++ b/src/mock/treeData.ts @@ -0,0 +1,305 @@ +import Mock from "mockjs" + +export const treeData = [ + { + id: Mock.mock("@id"), + label: '技能训练设施', + type: 'skill', + data: { + content: '模拟在密闭建筑物内发生火灾,消防员在高温、浓烟、高噪音的情况下进行火情侦察,寻找被困人员,救出被困人员,灭火抢险等战斗', + dataList: [ + { + id: Mock.mock("@id"), + rate: 1, + title: '顶层沸溢火', + point: '1', + position: [ + 11660769.28, + 3692443.52, + 67.69076171875 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '1', + position: [ + 11660674.56, + 3692452.8000000003, + 21.751074218750002 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '顶层沸溢火', + point: '3', + position: [[ + 11660930.56, + 3692587.52, + 21.947177734375 + ],[ + 11660902.4, + 3692583.68, + 21.947197265625 + ],[ + 11660860.16, + 3692580.8000000003, + 21.94720703125 + ]] + }, { + id: Mock.mock("@id"), + rate: 3, + title: '罐体火灾', + point: '5', + position: [ + 11661059.84, + 3692514.24, + 13.2171923828125 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '油罐车爆炸', + point: '5', + position: [ + 11661043.200000001, + 3692599.68, + 9.2683056640625 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '5', + }, + ] + }, + + children: [] + }, { + label: '灾害事故处置训练设施', + type: 'fire', + children: [{ + label: '火灾扑救训练设', + children: [ + { + label: '综合训练楼', + data: { + content: '模拟在密闭建筑物内发生火灾,消防员在高温、浓烟、高噪音的情况下进行火情侦察,寻找被困人员,救出被困人员,灭火抢险等战斗', + dataList: [ + { + id: Mock.mock("@id"), + rate: 1, + title: '顶层沸溢火', + point: '1', + position: [ + 11660769.28, + 3692443.52, + 67.69076171875 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '1', + position: [ + 11660674.56, + 3692452.8000000003, + 21.751074218750002 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '顶层沸溢火', + point: '3', + position: [[ + 11660930.56, + 3692587.52, + 21.947177734375 + ],[ + 11660902.4, + 3692583.68, + 21.947197265625 + ],[ + 11660860.16, + 3692580.8000000003, + 21.94720703125 + ]] + }, { + id: Mock.mock("@id"), + rate: 3, + title: '罐体火灾', + point: '5', + position: [ + 11661059.84, + 3692514.24, + 13.2171923828125 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '油罐车爆炸', + point: '5', + position: [ + 11661043.200000001, + 3692599.68, + 9.2683056640625 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '5', + }, + ] + }, + children: [] + }, { + label: '化工装置火灾事故处置训练设施', + data: { + content: '模拟在密闭建筑物内发生火灾,消防员在高温、浓烟、高噪音的情况下进行火情侦察,寻找被困人员,救出被困人员,灭火抢险等战斗', + dataList: [ + { + id: Mock.mock("@id"), + rate: 1, + title: '顶层沸溢火', + point: '1', + position: [ + 11660769.28, + 3692443.52, + 67.69076171875 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '1', + position: [ + 11660674.56, + 3692452.8000000003, + 21.751074218750002 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '顶层沸溢火', + point: '3', + position: [[ + 11660930.56, + 3692587.52, + 21.947177734375 + ],[ + 11660902.4, + 3692583.68, + 21.947197265625 + ],[ + 11660860.16, + 3692580.8000000003, + 21.94720703125 + ]] + }, { + id: Mock.mock("@id"), + rate: 3, + title: '罐体火灾', + point: '5', + position: [ + 11661059.84, + 3692514.24, + 13.2171923828125 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '油罐车爆炸', + point: '5', + position: [ + 11661043.200000001, + 3692599.68, + 9.2683056640625 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '5', + }, + ] + }, + children: [] + } + ] + }] + }, { + label: '战勤保障训练设施', + type: 'safeguard', + data: { + content: '模拟在密闭建筑物内发生火灾,消防员在高温、浓烟、高噪音的情况下进行火情侦察,寻找被困人员,救出被困人员,灭火抢险等战斗', + dataList: [ + { + id: Mock.mock("@id"), + rate: 1, + title: '顶层沸溢火', + point: '1', + position: [ + 11660769.28, + 3692443.52, + 67.69076171875 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '1', + position: [ + 11660674.56, + 3692452.8000000003, + 21.751074218750002 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '顶层沸溢火', + point: '3', + position: [[ + 11660930.56, + 3692587.52, + 21.947177734375 + ],[ + 11660902.4, + 3692583.68, + 21.947197265625 + ],[ + 11660860.16, + 3692580.8000000003, + 21.94720703125 + ]] + }, { + id: Mock.mock("@id"), + rate: 3, + title: '罐体火灾', + point: '5', + position: [ + 11661059.84, + 3692514.24, + 13.2171923828125 + ] + }, { + id: Mock.mock("@id"), + rate: 4, + title: '油罐车爆炸', + point: '5', + position: [ + 11661043.200000001, + 3692599.68, + 9.2683056640625 + ] + }, { + id: Mock.mock("@id"), + rate: 2, + title: '顶层沸溢火', + point: '5', + }, + ] + }, + children: [] + }] diff --git a/src/views/overview.component.html b/src/views/overview.component.html index 51b4aca..cab7f61 100644 --- a/src/views/overview.component.html +++ b/src/views/overview.component.html @@ -7,7 +7,7 @@ - + @@ -19,7 +19,7 @@ - +
diff --git a/src/views/overview.component.ts b/src/views/overview.component.ts index 8dcb49d..8861169 100644 --- a/src/views/overview.component.ts +++ b/src/views/overview.component.ts @@ -38,6 +38,7 @@ export default class OverViewComponent extends BaseComponent { // 是否隐藏除地图外所有板块 public hideAllPanel = false; + public viewRightData = {}; async created(){ // this.currentLayers = this.getCurrentLayers(); } @@ -158,7 +159,8 @@ export default class OverViewComponent extends BaseComponent { //todo 进入自由导览 } //展开导览右侧 - showViewRight(){ + showViewRight(data){ + this.viewRightData = data if (this.viewRightShow){ this.viewRightShow = false setTimeout(()=>{ @@ -166,11 +168,12 @@ export default class OverViewComponent extends BaseComponent { }) }else{ this.viewRightShow = true + } } //右侧详情点击事件 showDetail(item){ - console.log('右侧详情点击事件') + console.log('右侧详情点击事件',item) } mounted() { console.log(2) @@ -201,7 +204,11 @@ export default class OverViewComponent extends BaseComponent { return layers } - + //进入路线导览 + playView(item){ + this.toggleAllPanel() + console.log('进入路线导览',item) + } deactivated(){ console.log(123)