Merge branch 'guangyin'

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;
 }
 

src/components/view/left/viewLeft.component.html

@@ -19,7 +19,9 @@
                          <!-- 判断是否存在子级数据 -->
                          <div v-if="node.level === 1"
                               class="tree-level-1-icon d-flex align-items-center is-justify-space-center">
-                             <img src="~@/assets/img/home/training-devices-B.png" alt="">
+                             <img v-if="data.type === 'skill'" src="~@/assets/img/home/training-devices-B.png" alt="">
+                             <img v-if="data.type === 'fire'" src="~@/assets/img/home/disasters-B.png" alt="">
+                             <img v-if="data.type === 'safeguard'" src="~@/assets/img/home/logistics-B.png" alt="">
                          </div>
                           <i class="doc-style" v-if="node.level > 1"></i>
                           <span class="white">{{ node.label }}</span>
@@ -36,25 +38,14 @@
             基地导览路线
         </title-component>
         <div class="view-list margin-top-23">
-            <div class="view-list-item">
+            <div class="view-list-item" :key="i" v-for="(item,i) in  viewList">
-                <div @click="playView" class="cover d-flex align-items-center is-justify-space-center">
+                <div @click="playView(item)" class="cover d-flex align-items-center is-justify-space-center">
                     <img src="~@/assets/img/view/play.png" alt="">
                 </div>
                 <div class="view-list-item-title d-flex align-items-center is-justify-space-center">
-                    <span>北大门东区</span>
+                    <span>{{item.from}}</span>
                     <i class="el-icon-right"></i>
-                    <span>南大门西区</span>
+                    <span>{{item.to}}</span>
-                </div>
-                <img src="~@/assets/img/view/view.png" alt="">
-            </div>
-            <div class="view-list-item">
-                <div @click="playView" class="cover d-flex align-items-center is-justify-space-center">
-                    <img src="~@/assets/img/view/play.png" alt="">
-                </div>
-                <div class="view-list-item-title d-flex align-items-center is-justify-space-center">
-                    <span>北大门东区</span>
-                    <i class="el-icon-right"></i>
-                    <span>南大门西区</span>
                 </div>
                 <img src="~@/assets/img/view/view.png" alt="">
             </div>

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: '技能训练设施',
+            id: Mock.mock("@id"),
-        children: []
+            title: '北大门东区→南大门西区',
-    }, {
+            from: '北大门东区',
-        label: '灾害事故处置训练设施',
+            to: '南大门西区'
-        children: [{
+        }, {
-            label: '火灾扑救训练设',
+            id: Mock.mock("@id"),
-            children: [
+            title: '南大门东区→北大门西区',
-                {
+            from: '南大门东区',
-                    label: '综合训练楼',
+            to: '北大门西区'
-                    children: []
+        },
-                },{
+    ];
-                    label: '化工装置火灾事故处置训练设施',
+
-                    children: []
+    //获取class类
-                }
+    getNodeClass(node) {
-            ]
+        const arr: string[] = []
-        }]
+        if (node.level > 1) {
-    }, {
-        label: '战勤保障训练设施',
-        children: []
-    }]
-//获取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){
+    nodeClick(data, node, self) {
-        if (node.isLeaf){
+        if (node.isLeaf) {
             this.showViewRight(node.data)
         }
 
     }
+
     //显示右侧
     @Emit('showViewRight')
-    showViewRight(item){
+    showViewRight(item) {
         //
     }
-    playView(){
+
+    @Emit('playView')
+    playView(item) {
         console.log('导览')
     }
+
     count = 1
 
 

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

@@ -1,15 +1,15 @@
 <div class="env-right emergency-part">
 
         <div class="view-right-title flex-0">
-            化工装置火灾事故装置训练设施
+            {{viewRightData.label}}
         </div>
         <h3 class="sub-title  flex-0">训练内容</h3>
         <div class="text-con  flex-0">
-            模拟在密闭建筑物内发生火灾，消防员在高温、浓烟、高噪音的情况下进行火情侦察，寻找被困人员，救出被困人员，灭火抢险等战斗
+            {{viewRightData.data.content}}
         </div>
-        <h3 class="sub-title  flex-0">训练内容</h3>
+        <h3 class="sub-title  flex-0">模拟火情</h3>
         <div class="right-view-list">
-            <div class="right-view-item d-flex align-items-center" @click="showDetail(item)" v-for="(item,i) in tableData">
+            <div class="right-view-item d-flex align-items-center" @click="showDetail(item)" v-for="(item,i) in viewRightData.data.dataList">
                 <img v-if="1%2 === 0" src="~@/assets/img/view/fire.png" alt="">
                 <img v-else src="~@/assets/img/view/fire2.png" alt="">
                 <div>

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')

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: []
+    }]

src/views/overview.component.html

@@ -7,7 +7,7 @@
 <!--            首页-->
             <HomeLeftComponent v-if="currentNav === 'home'" class="animate__animated animate__fadeInLeft"></HomeLeftComponent>
 <!--            导览-->
-            <ViewLeftComponent @showView="showView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
+            <ViewLeftComponent @showView="showView" @playView="playView" @showViewRight="showViewRight" v-if="currentNav === 'view'" class="animate__animated animate__fadeInLeft"></ViewLeftComponent>
 
 <!--            运营管理-->
             <ManageLeftComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageLeftComponent>
@@ -19,7 +19,7 @@
             <HomeRightComponent v-if="currentNav === 'home'"
                                 class="animate__animated animate__fadeInRight"></HomeRightComponent>
             <!--            导览-->
-            <ViewRightComponent @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
+            <ViewRightComponent :viewRightData="viewRightData" @showDetail="showDetail" v-if="currentNav === 'view' && viewRightShow" class="animate__animated animate__fadeInLeft"></ViewRightComponent>
             <!--            运营管理-->
             <ManageRightComponent v-if="currentNav === 'manage'" class="animate__animated animate__fadeInLeft"></ManageRightComponent>
         </div>

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)