MSI\liwei 2 gadi atpakaļ
vecāks
revīzija
6a5099eb32

+ 0 - 1
src/api/qdtl/data.js

@@ -8,7 +8,6 @@ export function getLineData() {
 }
 
 export function getResource(query) {
-    console.log(query);
     return request({
         url: 'qdtl/common/resource',
         method: 'get',

BIN
src/assets/images/bg/3.png


BIN
src/assets/images/bg/bg 2.png


+ 14 - 3
src/components/HeaderDiv/index.vue

@@ -13,6 +13,14 @@
                 </div> -->
                 铁路护路联防
             </div>
+             <div :class='currentindex==13?"active":""' @click="goTarget(13)">
+               <!-- <div style="display:inline-flex">
+                  <div>{{menuName2}}</div>
+                  <div style="margin-left:0.5rem" @click="rightMenu" v-show="showMenu == 0"><i class="el-icon-arrow-right"></i></div>
+                   <div style="margin-left:0.5rem" @click="leftMenu" v-show="showMenu"><i class="el-icon-arrow-left"></i></div>
+                </div> -->
+                隐患处理
+            </div>
             <div :class='currentindex==2?"active":""'>
                 <div style="display:inline-flex">
                   <div>{{menuName}}</div>
@@ -32,9 +40,10 @@
             <div :class='currentindex==11?"active":""' @click="goTarget(11)" v-show="showMenu == 1">巡检监测</div>
              <div :class='currentindex==12?"active":""' @click="goTarget(12)" v-show="showMenu == 1">巡逻电车监测</div>
             
-            <div :class='currentindex==6?"active":""' @click="goTarget(6)" v-show="showMenu == 0">综合管理</div>
+           
             <div :class='currentindex==3?"active":""' @click="goTarget(3)" v-show="showMenu == 0">治理态势</div>
-            <div :class='currentindex==4?"active":""' @click="goTarget(4)" v-show="showMenu == 0">安全态势</div>
+             <div :class='currentindex==6?"active":""' @click="goTarget(6)" v-show="showMenu == 0">综合管理</div>
+            <!-- <div :class='currentindex==4?"active":""' @click="goTarget(4)" v-show="showMenu == 0">安全态势</div> -->
             <div :class='currentindex==5?"active":""' @click="goTarget(5)" v-show="showMenu == 0">公众服务</div>
         </div>
 <!-- 
@@ -93,7 +102,7 @@ export default {
       }else if(index == 11){
            this.$router.push('/keepWatch')
       }else if(index == 3){
-           this.$router.push('/governance')
+           this.$router.push('/new')
       }else if(index == 4){
            this.$router.push('/safe')
       }else if(index == 5){
@@ -104,6 +113,8 @@ export default {
            this.$router.push('/introduction')
       }else if(index == 12){
            this.$router.push('/electri')
+      }else if(index == 13){
+           this.$router.push('/trouble')
       }
     },
     rightMenu(index){

+ 6 - 0
src/router/index.js

@@ -105,6 +105,12 @@ export const constantRoutes = [{
         hidden: true,
     },
     {
+        path: "/trouble",
+        component: () =>
+            import ("@/views/trouble"),
+        hidden: true,
+    },
+    {
         path: "/safe",
         component: () =>
             import ("@/views/safe"),

+ 14 - 60
src/views/introduction/zone.vue

@@ -3,45 +3,19 @@
             <div class='comClass'>
                   <el-row type="flex" justify="space-around">
                       <el-col :span='3'>
-                           <div style="float:right;padding-top:30vh" @click="previousPage"><img src='~@/assets/images/bg/下一页2.png'></img></div>
+                           <div style="float:right;padding-top:30vh" @click="changeShow"><img src='~@/assets/images/bg/下一页2.png'></img></div>
                       </el-col>
                       <el-col :span='18'>
-                             <div style="padding-left:2rem;padding-top:5vh" v-show='current == 0'>
-                                        <div style="font-size: 3rem;
-                                                  font-family: Microsoft YaHei;
-                                                  font-weight: bold;
-                                                  color: #23FFFC;
-                                                  text-align:center;margin-top:10vh">{{title}}</div>
-                                       <img src='~@/assets/images/bg/1.png' style="margin-top:5vh"></img>
-                              </div>
-                             <div style="padding-left:5rem;padding-top:5vh" v-show='current == 1'>
-                                        <div style="font-size: 3rem;
-                                                  font-family: Microsoft YaHei;
-                                                  font-weight: bold;
-                                                  color: #23FFFC;
-                                                  text-align:center;margin-top:10vh">{{title}}</div>
-                                        <img src='~@/assets/images/bg/2.png' style="margin-top:5vh"></img>
-                              </div>
-                               <div style="padding-left:5rem;padding-top:5vh" v-show='current == 2'>
-                                        <div style="font-size: 3rem;
-                                                  font-family: Microsoft YaHei;
-                                                  font-weight: bold;
-                                                  color: #23FFFC;
-                                                  text-align:center;margin-top:10vh">{{title}}</div>
-                                        <img src='~@/assets/images/manhua/weixin.png' style="margin-top:5vh"></img>
-                              </div>
-                             <div style="padding-left:25rem;padding-top:15vh" v-show='current == 3'><img src='~@/assets/images/manhua/manhua1.png'></img></div>
-                              <div style="padding-left:25rem;padding-top:15vh" v-show='current == 4'><img src='~@/assets/images/manhua/manhua2.png'></img></div>
-                               <div style="padding-left:25rem;padding-top:15vh" v-show='current == 5'><img src='~@/assets/images/manhua/manhua3.png'></img></div>
-                                <div style="padding-left:25rem;padding-top:15vh" v-show='current == 6'><img src='~@/assets/images/manhua/manhua4.png'></img></div>
-                                 <div style="padding-left:25rem;padding-top:15vh" v-show='current == 7'><img src='~@/assets/images/manhua/manhua5.png'></img></div>
-                                  <div style="padding-left:25rem;padding-top:15vh" v-show='current == 8'><img src='~@/assets/images/manhua/manhua6.png'></img></div>
-                                   <div style="padding-left:25rem;padding-top:15vh" v-show='current == 9'><img src='~@/assets/images/manhua/manhua7.png'></img></div>
-                                    <div style="padding-left:25rem;padding-top:15vh" v-show='current == 10'><img src='~@/assets/images/manhua/manhua8.png'></img></div>
-                                     <div style="padding-left:25rem;padding-top:15vh" v-show='current == 11'><img src='~@/assets/images/manhua/manhua9.png'></img></div>
+                            <div style="font-size: 3rem;
+                                        font-family: Microsoft YaHei;
+                                        font-weight: bold;
+                                        color: #23FFFC;
+                                        text-align:center;margin-top:10vh">{{title}}</div>
+                             <div style="padding-left:2rem;padding-top:5vh" v-show='isShow'><img src='~@/assets/images/bg/1.png'></img></div>
+                             <div style="padding-left:5rem;padding-top:5vh" v-show='!isShow'><img src='~@/assets/images/bg/2.png'></img></div>
                       </el-col>
                       <el-col :span='3'>
-                           <div style="padding-top:30vh" @click="nextPage"><img src='~@/assets/images/bg/下一页.png'></img></div>
+                           <div style="padding-top:30vh" @click="changeShow"><img src='~@/assets/images/bg/下一页.png'></img></div>
                       </el-col>
                   </el-row>
             </div>
@@ -58,8 +32,7 @@ export default {
   data() {
     return {
         title:'启东护路联防组织架构图',
-        isShow:true,
-        current:0,
+        isShow:true
     };
   },
    components:{
@@ -69,32 +42,13 @@ export default {
 
   },
   methods: {
-          previousPage(){
-                  if(this.current  == 0){
+        changeShow(){
+             if(this.isShow){
+                  this.isShow = false
                   this.title = '铁路安全隐患处理流程示意图'
-             }else if(this.current == 1){
-                  this.title = '启东护路联防组织架构图'
-             }else if(this.current == 2){
-                  this.title = '小程序安全隐患处理流程示意图'
-             }
-             if(this.current == 0){
-                    this.current  = 11
              }else{
-                 this.current --
-             }
-          },
-        nextPage(){
-             if(this.current  == 0){
-                  this.title = '铁路安全隐患处理流程示意图'
-             }else if(this.current == 1){
+                  this.isShow = true
                   this.title = '启东护路联防组织架构图'
-             }else if(this.current == 2){
-                  this.title = '小程序安全隐患处理流程示意图'
-             }
-             if(this.current == 11){
-                    this.current  = 0
-             }else{
-                 this.current ++
              }
         }
   }

+ 41 - 17
src/views/new/index.vue

@@ -57,10 +57,10 @@
 
           <div class="block" style="height:25vh">
                         <el-carousel trigger="click" height="25vh">
-                        <el-carousel-item v-for="item in 4" :key="item">
-                               <div style="display:flex;flex-direction:row;padding-top:1rem">
+                        <el-carousel-item  v-for="(item,index) in incidentList" :key="index">
+                               <div style="display:flex;flex-direction:row;padding-top:1rem;padding-left:2rem">
                                         <div> 
-                                               <img src='http://localhost/dev/profile/upload/2022/08/11/62a175ea-e0f2-4875-b520-3356c0bdab49.jpg' class="imgClass"/>
+                                               <img :src="getImageUrl(item.pics.split(',')[0])" class="imgClass"/>
                                         </div> 
                                         <div style="padding-top:5rem;margin-left:3rem">
                                                 <div style="display:flex;flex-direction:row"> 
@@ -73,7 +73,7 @@
                                                 </div>
                                         </div>  
                                         <div style="margin-left:3rem">
-                                               <img src='http://localhost/dev/profile/upload/2022/08/11/62a175ea-e0f2-4875-b520-3356c0bdab49.jpg' class="imgClass"/>
+                                               <img :src="getImageUrl(item.dealPics.split(',')[0])" class="imgClass"/>
                                         </div>
                                </div>
                         </el-carousel-item>
@@ -165,11 +165,15 @@
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">工作面貌展示</div>
         </div>
 
-        <div>
-              <img src="../../assets/images/goverce/bg.png" style="width:40rem;height:20rem;margin-top:2rem;margin-left:4rem"/>
+        <div style="margin-top:2rem"> 
+             <el-carousel trigger="click" height="20rem">
+                        <el-carousel-item v-for="item in workList" :key="item">
+                                <img :src="getImageUrl(JSON.parse(item.picUrl)[0].fileName)" style="width:40rem;height:20rem;margin-left:3rem"/>
+                        </el-carousel-item>
+            </el-carousel>
         </div>
         
-         <div class="publicTitle" style="margin-top:0.5rem">
+         <div class="publicTitle" style="margin-top:1rem">
            <img src="../../assets/images/icon.png" style="width:1.8rem;height:1.8rem;margin-top:0.3rem"/>
            <div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;margin-left:0.5rem">今日巡检</div>
         </div>
@@ -224,9 +228,10 @@
 <script>
 import moment from "moment";
 import mapdiv from "../../components/map/index.vue"
+import { listWork } from "@/api/qdtl/work";
 import headerdiv from '@/components/HeaderDiv/index.vue'
 import { httpRequest } from "@/api/data/http";
-import { getLineData,getResource,getgovern } from "@/api/qdtl/data";
+import { getLineData,getResource,getgovern,getincidentList } from "@/api/qdtl/data";
 
 import videodiv from "../../components/Videoplayer/index.vue"
 
@@ -234,11 +239,13 @@ export default {
     name: "big",
     data() {
         return {
+              workList:[],
+              incidentList:[],
               userList:[],
               areaList:[],
               tdxjCount:111,
               tdcsCount:152,
-              currentindexNew:4,
+              currentindexNew:3,
               videoChartDate:{},
               ccode:"32068166001320000235",
               videoParams:{
@@ -260,13 +267,37 @@ export default {
       videodiv,
     },
     mounted() {
-        console.log(111)
         this.initchart();
         this.getGovern();
         this.inityjchart();
         this.getGdChart();
+        this.getImgList();
+        this.getWorkList();
     },
     methods:{
+        getWorkList(){
+          var obj = {
+                      status:1
+                    } 
+          listWork(obj).then(response =>{
+                this.workList = response.rows
+                //console.log(response);
+          })
+        },
+        getImageUrl(pic){
+               return process.env.VUE_APP_BASE_API+pic
+        },
+        getImgList(){
+              getincidentList().then(response =>{
+                      console.log(response);
+                      for(var index in response.rows){
+                              if(response.rows[index].pics != null && response.rows[index].dealPics != null && response.rows[index].status == 2 && this.incidentList.length < 6){
+                                     this.incidentList.push(response.rows[index]);
+                              }
+                      }
+                      console.log(this.incidentList)
+              })
+        },
         getGdChart(){
              var myChart = this.$echarts.init(document.getElementById('gdChart'));
              var option = {
@@ -318,7 +349,6 @@ export default {
         },
         getGovern(){
                 getgovern().then(data =>{
-                       console.log(data);
                        this.userList  = data.data.checkStatic;
                        this.tdxjCount = data.data.xunTotalDistance;
                        this.tdcsCount = data.data.checkPointLogNum;
@@ -431,9 +461,6 @@ export default {
 
         },
          initVideochart(){
-             console.log(11111)
-                console.log(this.videoChartDate);
-                // console.log(document.getElementById('videoeChart'));
                 var myChart = this.$echarts.init(document.getElementById('videoeChart'));
                 var option = {
                                 tooltip: {
@@ -497,11 +524,8 @@ export default {
                                 ]
                                 };
                     myChart.setOption(option);
-                    console.log(option)
         },
         initlcchart(){
-                console.log(111);
-                console.log(this.$echarts);
                 var myChart = this.$echarts.init(document.getElementById('lcChart'));
                var option = {
                             color: [

+ 3 - 1
src/views/qdtl/incident/index.vue

@@ -15,7 +15,7 @@
          </el-col>
          <el-col :span="6">
                      <el-input
-                                    v-model="queryParams.wenTou"
+                                    v-model="queryParams.name"
                                     placeholder="请输入事件名称"
                                     clearable
                                     size="small"
@@ -170,11 +170,13 @@
 
 <script>
 import { getincidentList,getincidentExport } from "@/api/qdtl/data";
+import { listWork } from "@/api/qdtl/work";
 import { listDocument } from '@/api/qdtl/document'
 import headerdiv from '@/components/HeaderDiv/index.vue'
 import mapdiv from "@/components/map/index.vue"
 import addDocument from '@/views/qdtl/document/add.vue'
 
+
 export default {
   name: "Location",
   dicts: ['tl_xun_area'],

+ 8 - 5
src/views/qdtl/work/index.vue

@@ -15,8 +15,8 @@
          </el-col>
          <el-col :span="6">
                      <el-input
-                                    v-model="queryParams.wenTou"
-                                    placeholder="请输入事件名称"
+                                    v-model="queryParams.picName"
+                                    placeholder="请输入图片名称"
                                     clearable
                                     size="small"
                                     style="width:30rem"
@@ -314,16 +314,19 @@ export default {
             return process.env.VUE_APP_BASE_API+'/profile/upload/2022/08/11/62a175ea-e0f2-4875-b520-3356c0bdab49.jpg'
       },
       getImageUrl(pic){
+        //console.log(pic.length > 0);
+        if(pic.picUrl > 0){
             var url = JSON.parse(pic.picUrl)[0]
-            console.log(url);
-            console.log(process.env.VUE_APP_BASE_API+url.fileName)
             return process.env.VUE_APP_BASE_API+url.fileName
+        }
       },
       openDetail(obj){
             //console.log(obj);
             this.dialogVisibleDetail = true
             this.detailObj = obj;
-            this.detailObj.url = JSON.parse(this.detailObj.picUrl)
+            if(this.detailObj.picUrl){
+                     this.detailObj.url = JSON.parse(this.detailObj.picUrl)
+            }
             //this.detailObj.index = 1;
       },
       getLevel(level){

+ 124 - 0
src/views/trouble/comic.vue

@@ -0,0 +1,124 @@
+<template>
+     <div style="heigh:100%;width:100%">
+            <div class='comClass'>
+                  <el-row type="flex" justify="space-around">
+                      <el-col :span='3'>
+                           <div style="float:right;padding-top:30vh" @click="previousPage"><img src='~@/assets/images/bg/下一页2.png'></img></div>
+                      </el-col>
+                      <el-col :span='18'>
+                             <!-- <div style="padding-left:2rem;padding-top:5vh" v-show='current == 0'>
+                                        <div style="font-size: 3rem;
+                                                  font-family: Microsoft YaHei;
+                                                  font-weight: bold;
+                                                  color: #23FFFC;
+                                                  text-align:center;margin-top:10vh">{{title}}</div>
+                                       <img src='~@/assets/images/bg/1.png' style="margin-top:5vh"></img>
+                              </div>
+                             <div style="padding-left:5rem;padding-top:5vh" v-show='current == 1'>
+                                        <div style="font-size: 3rem;
+                                                  font-family: Microsoft YaHei;
+                                                  font-weight: bold;
+                                                  color: #23FFFC;
+                                                  text-align:center;margin-top:10vh">{{title}}</div>
+                                        <img src='~@/assets/images/bg/2.png' style="margin-top:5vh"></img>
+                              </div> -->
+                              <div style="padding-left:5rem;padding-top:5vh" v-show='current == 0'>
+                                        <div style="font-size: 3rem;
+                                                  font-family: Microsoft YaHei;
+                                                  font-weight: bold;
+                                                  color: #23FFFC;
+                                                  text-align:center;margin-top:10vh">铁路安全隐患处理流程示意图</div>
+                                        <img src='~@/assets/images/bg/3.png' style="margin-top:5vh"></img>
+                              </div>
+                               <div style="padding-left:5rem;padding-top:5vh" v-show='current == 1'>
+                                        <div style="font-size: 3rem;
+                                                  font-family: Microsoft YaHei;
+                                                  font-weight: bold;
+                                                  color: #23FFFC;
+                                                  text-align:center;margin-top:10vh">小程序安全隐患处理流程示意图</div>
+                                        <img src='~@/assets/images/manhua/weixin.png' style="margin-top:5vh"></img>
+                              </div>
+                             <div style="padding-left:25rem;padding-top:15vh" v-show='current == 2'><img src='~@/assets/images/manhua/manhua1.png'></img></div>
+                              <div style="padding-left:25rem;padding-top:15vh" v-show='current == 3'><img src='~@/assets/images/manhua/manhua2.png'></img></div>
+                               <div style="padding-left:25rem;padding-top:15vh" v-show='current == 4'><img src='~@/assets/images/manhua/manhua3.png'></img></div>
+                                <div style="padding-left:25rem;padding-top:15vh" v-show='current == 5'><img src='~@/assets/images/manhua/manhua4.png'></img></div>
+                                 <div style="padding-left:25rem;padding-top:15vh" v-show='current == 6'><img src='~@/assets/images/manhua/manhua5.png'></img></div>
+                                  <div style="padding-left:25rem;padding-top:15vh" v-show='current == 7'><img src='~@/assets/images/manhua/manhua6.png'></img></div>
+                                   <div style="padding-left:25rem;padding-top:15vh" v-show='current == 8'><img src='~@/assets/images/manhua/manhua7.png'></img></div>
+                                    <div style="padding-left:25rem;padding-top:15vh" v-show='current == 9'><img src='~@/assets/images/manhua/manhua8.png'></img></div>
+                                     <div style="padding-left:25rem;padding-top:15vh" v-show='current == 10'><img src='~@/assets/images/manhua/manhua9.png'></img></div>
+                      </el-col>
+                      <el-col :span='3'>
+                           <div style="padding-top:30vh" @click="nextPage"><img src='~@/assets/images/bg/下一页.png'></img></div>
+                      </el-col>
+                  </el-row>
+            </div>
+     </div>
+</template>
+
+<script>
+import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/qdtl/location";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+  name: "IntroductionIndex",
+  data() {
+    return {
+        title:'小程序安全隐患处理流程示意图',
+        isShow:true,
+        current:0,
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+         this.timer = setInterval(() => {
+                this.nextPage();
+      }, 6000);
+  },
+  methods: {
+          previousPage(){
+            //       if(this.current  == 0){
+            //       this.title = '铁路安全隐患处理流程示意图'
+            //  }else if(this.current == 1){
+            //       this.title = '启东护路联防组织架构图'
+            //  }else if(this.current == 2){
+            //       this.title = '小程序安全隐患处理流程示意图'
+            //  }
+             if(this.current == 0){
+                    this.current  = 9
+             }else{
+                 this.current --
+             }
+          },
+        nextPage(){
+            //  if(this.current  == 0){
+            //       this.title = '铁路安全隐患处理流程示意图'
+            //  }else if(this.current == 1){
+            //       this.title = '启东护路联防组织架构图'
+            //  }else if(this.current == 2){
+            //       this.title = '小程序安全隐患处理流程示意图'
+            //  }
+             if(this.current == 9){
+                    this.current  = 0
+             }else{
+                 this.current ++
+             }
+        }
+  }
+};
+</script>
+
+
+<style scoped>
+.comClass{
+          background: url("~@/assets/images/bg/bg 2.png") no-repeat;
+          /* display: flex;
+          flex-direction: row; */
+          background-size: 100% 100%;
+          width:100%;
+          height:95vh;         
+}
+</style>

+ 204 - 0
src/views/trouble/index.vue

@@ -0,0 +1,204 @@
+<template>
+<div style="width:100%;height:100%;position:relative">
+  <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
+      <!-- <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer> -->
+      <!-- <mapdiv ref="mapdiv" style=""></mapdiv> -->
+      <!-- <zhgl></zhgl> -->
+      <!-- <introduction v-if="currentindex==2"></introduction> -->
+      <comic></comic>
+      <!-- <communication v-if="currentindex==3"></communication> -->
+    </div>
+   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
+
+
+<!-- 
+    <div class="bottombg1">
+      <div class="itemt item2" @click="currentindex=1"></div>
+      <div class="itemt item1 item2" @click="currentindex=2"></div>
+      <div class="itemt item1 item2" @click="currentindex=3"></div>
+
+    </div> -->
+
+    <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
+
+
+</div>
+
+
+</template>
+
+<script>
+import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
+// import introduction from './introduction.vue'
+// import communication from './communication.vue'
+import comic from './comic.vue'
+import zhgl from "../../components/zhgl/index.vue"
+import headerdiv from '@/components/HeaderDiv/index.vue'
+import { httpRequest } from "@/api/data/http";
+import { getLineData,getResource } from "@/api/qdtl/data";
+// import LivePlayer from '@liveqing/liveplayer' // vue2
+
+import videodiv from "../../components/Videoplayer/index.vue"
+
+export default {
+    name: "big",
+    data() {
+      return {
+            currentindex:13,
+            videoUrl:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001',
+            currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
+            currentindexNew:13,
+            ccode:"32068166001320000235",
+            videoParams:{
+              url:'http://2.90.220.252:9017/artemis-web/debug',
+              params:'{"httpMethod":"POST","path":"/api/resource/v1/cameras","headers":{},"query":{},"parameter":{},"body":{"pageNo": 1,"pageSize": 5000,"treeCode": "0"},"contentType":"application/json;charset=UTF-8","mock":false,"appKey":"27794545","appSecret":"5Xi27Gl7JrbHHF1MpdaB"}'
+            },
+        };
+    },
+    components:{
+      mapdiv,
+      zhgl,
+      headerdiv,
+      videodiv,
+      comic
+    },
+    mounted() {
+        // this.getTrain();
+        // this.getResource();
+        // this.getvideoList();
+        // this.$$refs.headerDiv.currentindex = 1;
+        setInterval(() => {
+            this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
+        }, 1000);
+
+    },
+    methods:{
+        changeMapTab(index){
+            this.$refs.mapdiv.iconSelect = index
+        },
+         getTrain(){
+                  this.$refs.mapdiv.addPoint('video.png');
+         },
+        //  getResource(){
+        //        getResource({date:'2022-03-12'}).then(response =>{
+        //              var trainArry = [];
+        //              var bridgeArry = [];
+        //              var railArry = [];
+        //              var stationLocation = [];
+        //              var areaList = [];
+        //              for(var index in response.data.staticLocation){
+        //                   var obj = response.data.staticLocation[index]
+        //                   obj.fence = obj.lnglat
+        //                   obj.name = obj.locationName
+        //                   stationLocation.push(obj)
+        //              }
+        //              for(var index in response.data.area){
+        //                  var obj = response.data.area[index]
+        //                  if(obj.areaType == '1'){
+        //                       areaList.push(obj);
+        //                  }else if(obj.areaType == '2'){
+        //                      obj.name = obj.areaName
+        //                      trainArry.push(obj);
+        //                  }else if(obj.areaType == '3'){
+        //                      obj.name = obj.areaName
+        //                      bridgeArry.push(obj);
+        //                  }else if(obj.areaType == '4'){
+        //                      obj.name = obj.areaName
+        //                      railArry.push(obj);
+        //                  }
+        //              }
+        //              for(var index in areaList){
+        //                      var json = JSON.parse(areaList[index].fence)
+        //                      this.$refs.mapdiv.addPolygon(json);
+        //              }
+        //              for(var key in response.data.deviceTrail){
+        //                       var jsonStr = '['
+        //                      for(var index in response.data.deviceTrail[key]){
+        //                        var obj = response.data.deviceTrail[key][index]
+        //                        if(index == response.data.deviceTrail[key].length - 1){
+        //                          var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+']'
+        //                        }else{
+        //                          var location = '['+obj.fence.split(',')[0]+','+obj.fence.split(',')[1]+'],'
+        //                        }
+        //                        jsonStr += location
+        //                       //  deviceArry.push(obj.fence.split(','));
+        //                      }
+        //                       jsonStr += ']'
+        //                       var json = JSON.parse(jsonStr);
+        //                      this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
+        //                      this.$refs.mapdiv.addline(json,'device');
+        //              }
+        //                this.$refs.mapdiv.addPoints(trainArry,'train.png',0.6,'train');
+        //                this.$refs.mapdiv.addPoints(bridgeArry,'bridge.png',0.6,'bridge');
+        //                this.$refs.mapdiv.addPoints(railArry,'rail.png',0.6,'rail');
+        //                this.$refs.mapdiv.addPoints(stationLocation,'location.png',0.6,'location');
+        //        })
+        //  },
+        //  getvideoList(){
+        //           httpRequest(this.videoParams).then(data =>{
+        //                  var json = JSON.parse(data.data);
+        //                  this.staticCount += json.data.list.length
+        //                  this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+        //           });
+
+        //  }
+
+    }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+
+
+.bottombg1{
+
+  position: absolute;
+  background-size: 100% 100%;
+  z-index: 1;
+  width: 85.1rem;
+  height: 16.3rem;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%,-0%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color:#fff;
+  font-size:1.6rem;
+
+  .itemt:hover{
+    cursor: pointer;
+  }
+  .itemt{
+    width: 33%;
+    text-align: center;
+    justify-content: center;
+    position: relative;
+    // background: #25f8bd;
+    height: 100%;
+    .num{
+      font-size:3rem;
+      color:#25f8bd;
+    }
+  }
+   .item1{
+    width: 33%;
+  }
+  .item2::after{
+    content: "";
+    // background: url("../../assets/images/图层\ 2@2x.png");
+    background-size: 100% 100%;
+    width: 0.2rem;
+    height: 7.3rem;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+.ol-zoom-in,.ol-zoom-out{
+  display: none !important;
+
+}
+
+</style>