打点画线

src/api/qdtl/data.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function getLineData() {
+    return request({
+      url: 'qdtl/common/railwayLine',
+      method: 'get'
+    })
+  }
+
+  export function getResource(query) {
+    console.log(query);
+    return request({
+      url: 'qdtl/common/resource?date=2022-03-12',
+      method: 'get',
+      param:query
+    })
+  }

src/components/map/index.vue

@@ -4,34 +4,53 @@
     <div id="map" ref="rootmap"></div>
   </div>
 
-<!-- <el-dialog
-  title="提示"
-  :visible.sync="dialogVisible"
-  width="30%"
-  :before-close="handleClose">
-  <span>这是一段信息</span>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogVisible = false">取 消</el-button>
-    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
-  </span>
-</el-dialog> -->
-
-  <el-dialog
-      title="视频播放"
-      :visible.sync="dialogVisible"
-      v-if="dialogVisible"
-      width="50%"
-      :before-close="handleClose"
-      >
-         <div style="width:100%;height:60rem;position:relative">
-           <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv>
-         </div>
-
-          <span slot="footer" class="dialog-footer">
-    <el-button @click="handleClose()">关闭</el-button>
-    <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
-  </span>
-</el-dialog>
+  <div class="iconSelect" v-if="iconSelect == 1">
+      <el-checkbox-group  v-model="checkList" @change="handleChange" >
+          <el-checkbox v-for="item in dict.type.tl_static_type" :label="item.value"  :key="item.value" style="margin-top:1rem">
+                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
+                 <img class="tipicon"  :src="imageMap[item.value]" />
+                <span style="color:white">{{item.label}}</span>
+           </el-checkbox>
+      </el-checkbox-group>
+  </div>
+
+    <div class="iconSelect" v-if="iconSelect == 2">
+      <el-checkbox-group  v-model="checkList" @change="handleChange" >
+          <el-checkbox v-for="item in dict.type.tl_dt_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
+                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
+                 <img class="tipicon"  :src="imageMap[item.raw.cssClass]" />
+                <span style="color:white">{{item.label}}</span>
+           </el-checkbox>
+      </el-checkbox-group>
+   </div>
+
+  <div class="iconSelect" v-if="iconSelect == 3">
+      <el-checkbox-group  v-model="checkList" @change="handleChange" >
+          <el-checkbox v-for="item in dict.type.tl_area_type" :label="item.raw.cssClass"  :key="item.value" style="margin-top:1rem">
+                 <!-- <img class="tipicon"  src="../../assets/images/icons/video.png" /> -->
+                 <img class="tipicon"  :src="imageMap[item.raw.cssClass]" />
+                <span style="color:white">{{item.label}}</span>
+           </el-checkbox>
+      </el-checkbox-group>
+   </div>
+
+
+      <el-dialog
+          title="视频播放"
+          :visible.sync="dialogVisible"
+          v-if="dialogVisible"
+          width="50%"
+          :before-close="handleClose"
+          >
+            <div style="width:100%;height:60rem;position:relative">
+              <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv>
+            </div>
+
+              <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose()">关闭</el-button>
+        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
+      </span>
+    </el-dialog>
 </div>
 </template>
 
@@ -56,12 +75,13 @@ import {TileGrid} from "ol/tilegrid/TileGrid";
 import {TileImage} from "ol/source/TileImage";
 import {XYZ, Vector as SourceVec} from "ol/source";
 import {Tile,Vector as LayerVec} from "ol/layer";
+import { Polygon } from "ol/geom"
 
-import {Circle as CircleStyle, Fill, Stroke, Style, Icon} from 'ol/style';
+import {Circle as CircleStyle, Fill, Stroke, Style, Icon, Text } from 'ol/style';
 import {Draw, Modify, Snap} from 'ol/interaction';
 // import {OSM, Vector as SourceVec} from 'ol/source';
 // import {Tile as TileLayer, Vector as LayerVec} from 'ol/layer';
-import {get} from 'ol/proj';
+import {get,fromLonLat } from 'ol/proj';
 import { Feature } from "ol";
 
 
@@ -71,6 +91,7 @@ import { Feature } from "ol";
 import videodiv from "@/components/Videoplayer/index.vue"
 import {LineString, Point} from "ol/geom";
 import { scale } from 'ol/coordinate';
+import { getLineData } from "@/api/qdtl/data";
 // import {Icon, Stroke, Style} from "ol/style";
 // import {Vector as LayerVec} from "ol/layer";
 
@@ -80,8 +101,12 @@ export default {
       pointObj:{type:Object},
       isEdit:false
   },
+  dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
   data() {
     return {
+      iconSelectArea:true,
+      iconSelect:1,
+      checkList:[],
       map: null,
       typeSelect:'Point',
       source:null,
@@ -89,18 +114,53 @@ export default {
       snap:null,
       locations:[],
       vector:null,
-      pointArry:new Map(),
+      pointArry:{},
+      mapHashMap:{},
+      deviceList:[],
+      areaList:[],
       dialogVisible:false,
-      ccode:''
+      ccode:'',
+      imgSrc:'require(../../assets/images/icons/',
+      imgtype:'.png)',
+      imageMap:{
+            video:require('../../assets/images/icons/video.png'),
+            location:require('../../assets/images/icons/location.png'),
+            stop:require('../../assets/images/icons/stop.png'),
+            work:require('../../assets/images/icons/work.png'),
+            area:require('../../assets/images/icons/area.png'),
+            bridge:require('../../assets/images/icons/bridge.png'),
+            train:require('../../assets/images/icons/train.png'),
+            rail:require('../../assets/images/icons/rail.png'),
+            yjdw:require('../../assets/images/icons/yjdw.png'),
+            device:require('../../assets/images/icons/device.png'),
+            police:require('../../assets/images/icons/police.png'),
+            wrj:require('../../assets/images/icons/wrj.png'),
+            yxjl:require('../../assets/images/icons/yxjl.png'),
+      },
     };
   },
    components:{
       videodiv
     },
+   watch:{
+      iconSelect(val, oldVal){//普通的watch监听
+          this.checkList = [];
+          for(var key in this.mapHashMap){
+                 this.mapHashMap[key].setVisible(false)
+            }
+            for(var index in this.deviceList){
+                 this.deviceList[index].setVisible(false)
+            }
+            for(var index in this.areaList){
+                 this.areaList[index].setVisible(false)
+            }
+      },
+    },
   mounted() {
-
     this.initdev();
     this.initPoint();
+    this.getTrain(),
+    this.getLineList();
     window.videosize = "1x1";
     // this.addpoint(point);
 
@@ -109,27 +169,18 @@ export default {
     var that = this
     this.map.on("click", function (e) {
           //  that.addMarker(e.coordinate,'专家站点.png',0.2);
-           console.log(e)
             var pixel = that.map.getEventPixel(e.originalEvent);
             var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
                 return feature;
               });
-            // var feature = that.map.forEachFeatureAtPixel(e.pixel,
-            //     function(feature) {
-            //       console.log(feature);
-            //         return feature;
-            //     });
-                console.log(feature)
             if (feature) { //这里说明我们点击的是点标记，
                 let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
                 if (tadata) {
                     if (tadata.sectionId == "line") {
-                        alert("我是线：" + tadata.towerNumber)
+                        // alert("我是线：" + tadata.towerNumber)
                     }
                     if (tadata.sectionId == "point") {
-                         console.log(tadata.data)
                          that.ccode = tadata.data.cameraIndexCode
-                         console.log(that.ccode);
                          window.cameraid = that.ccode;
                          that.dialogVisible = true
                          setTimeout(() => {
@@ -151,65 +202,49 @@ export default {
 
     });
     this.map.on('moveend', function (e) {
-
     });
 
+    this.map.on('pointermove', function(e) {
+            // var pixel=this.map.getEventPixel(e.originalEvent);
+            // var feature=this.map.forEachFeatureAtPixel(pixel,
+            //     function (feature) {
+            //         return feature;
+            //     },
+            //    {hitTolerance:10}
+            // ) 
+            // if(feature === undefined){
+            //     this.map.getTargetElement().style.cursor="auto"
+            // }else{
+            //     this.map.getTargetElement().style.cursor="pointer"
+            // }
+        });
+
   },
   methods: {
-    initdev: function () {
-
-      // function getWMTSLayer(url, layer) {
-      //   let key = "98ec3e37b32974c2d58ea1a790640fe7"
-      //   let projection = getProjection("EPSG:3857");
-      //   let projectionExtent = projection.getExtent();
-      //   let size = getWidth(projectionExtent) / 256;
-
-      //   function getResolutions() {
-      //     let resolutions = [];
-      //     for (let z = 1; z < 19; ++z) {
-      //       resolutions[z] = size / Math.pow(2, z);
-      //     }
-      //     return resolutions
-      //   }
-
-      //   return new TileLayer({
-      //     source: new WMTS({
-      //       url: url,
-      //       layer: layer,
-      //       style: "default",
-      //       matrixSet: "w",
-      //       format: "tiles",
-      //       tileGrid: new WMTSTileGrid({
-      //         origin: getTopLeft(projectionExtent),
-      //         resolutions: getResolutions(),
-      //         matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
-      //       }),
-      //     }),
-
-      //   })
-
-      // }
-
-      // var projection = getProjection("EPSG:3857");
-
-
-
-      // const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
-
-
-
-      // var map = new Map({
-      //   target: 'map',
-      //   layers: [
-      //     ign,
-      //     getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
-      //   ],
-      //   view: new View({
-      //     projection: projection
-      //   })
-      // });
-
+         getTrain(){
+           var trainArry = [[121.645366,31.856052],[121.636002,32.02354],[121.530258,32.086391]];
+           for(var index in trainArry){
+                  this.addMarker(trainArry[index],'train.png',0.6,'marker');
+           }
+         },
+         getLineList(){
+           getLineData().then(data =>{
+                    for(var index in data.data){
+                         var obj = data.data[index]
+                         if(obj.configKey.indexOf('lined') > -1){
+                                var lineLocations ="["+obj.configValue+"]"                            
+                                var json = JSON.parse(lineLocations);
+                                this.addline(json,1);
+                         }else if(obj.configKey.indexOf('lineun') > -1){
+                                var lineLocations ="["+obj.configValue+"]"
+                                var json = JSON.parse(lineLocations);
+                                this.addline(json,2);
+                         }
 
+                    }
+              })   
+         },
+    initdev: function () {
       var projection = getProjection("EPSG:3857");
    const satellite = new Tile({ // 卫星地图
     visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
@@ -269,22 +304,11 @@ const vector = new LayerVec({
 
     const modify = new Modify({source: this.source});
       map.addInteraction(modify);
-
-      // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
       this.map = map;
-      // this.addDrawLayer();
       if(this.isEdit){
            this.addInteractions();
       }
       var that = this;
-
-      //  map.getView().setCenter(
-      //     [118.642876, 31.970445]
-      // );
-      // map.getView().setCenter(this.transpoints([
-      //   [118.642876, 31.970445]
-      // ], 0)[0]);
-      // map.getView().setZoom(13);
     },
     addInteractions() {
       var that = this
@@ -318,16 +342,17 @@ const vector = new LayerVec({
           }
       },
       removeLayer(id){
-         var layers = this.pointArry.get(id);
+         var layers = this.pointArry[id];
          this.map.removeLayer(layers);
 
       },
-      addMarker(lnglats,icon,size,id,data) {
+      addMarker(lnglats,icon,size,id,data,type) {
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
                     towerNumber: 22,
                     data: data,
+                    type: type
                 }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                 geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
             });
@@ -338,48 +363,134 @@ const vector = new LayerVec({
                         crossOrigin: "anonymous",
                         src: require("../../assets/images/icons/" + icon), //本地的样式
                         scale:size
-                    })
-                })
+                    }),
+                },)
             ); //这里是样式
             var markerta = new LayerVec({
                 source: new SourceVec({
                     features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
-                })
+                }),
+                zIndex:30
             });
-            this.pointArry.set(id,markerta);
+            this.pointArry[id]=markerta;
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
       },
-        addline: function() {
+      addPoints(data,icon,size,type){
+        var tamarkerArry =[]
+        let tamarker = null
+        for(var index in data){
+          if(type === 'video'){
+                 tamarker = new Feature({
+                    tadata: {
+                        sectionId: "point",
+                        towerNumber: 22,
+                        data:data[index],
+                        type:type
+                    }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                    geometry: new Point([data[index].longitude, data[index].latitude]) //这里是点坐标的位置，这里要注意fromLonLat
+                });
+          }else {
+                 tamarker = new Feature({
+                    tadata: {
+                        sectionId: "point",
+                        towerNumber: 22,
+                        data:data[index],
+                        type:type
+                    }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                    geometry: new Point(data[index].fence.split(',')) //这里是点坐标的位置，这里要注意fromLonLat
+                });
+          }
+            tamarker.setStyle(
+                new Style({
+                    image: new Icon({
+                        color: "#eee",
+                        crossOrigin: "anonymous",
+                        src: require("../../assets/images/icons/" + icon), //本地的样式
+                        scale:size,
+                        anchor: [0.5, 60],              //锚点
+                        anchorOrigin:'top-right',       //锚点源
+                        anchorXUnits: 'fraction',       //锚点X值单位
+                        anchorYUnits: 'pixels',         //锚点Y值单位
+                        offsetOrigin: 'top-right',      //偏移原点
+                    }),
+                },)
+            ); //这里是样式
+            tamarkerArry.push(tamarker);
+        }
 
-            var points = [
-                [118.78, 32.04],
-                [118.88, 32.14]
-            ]
+            var markerta = new LayerVec({
+                source: new SourceVec({
+                    features: tamarkerArry //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                }),
+                zIndex:30
+            });
+            // this.pointArry.set(id,markerta);
+            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+            markerta.setVisible(false);
+            if(type == 'device'){
+                 this.deviceList.push(markerta);
+            }else{
+                 this.mapHashMap[type]=markerta;
+            }
+            // markerta.setVisible(true)
 
+      },
+        addline: function(lnglats,type) {
             let line = new Feature({
                 tadata: {
                     sectionId: "line",
                     towerNumber: 22
                 },
-                geometry: new LineString(points)
+                geometry: new LineString(lnglats)
             }); //这里要注意写fromLonLat，很重要
-            line.setStyle(new Style({
-                stroke: new Stroke({
-                    width: 3,
-                    color: "#008000"
-                })
-            }));
-            this.linevectorLayer = new LayerVec({
+            
+            var style =this.getStyle(type);
+
+            line.setStyle(style);
+
+            var linevectorLayer = new LayerVec({
                 source: new SourceVec({
                     features: [line] //要绘制多段线，直接push到这里面就行了
                 })
             });
-            this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
-
+              if(type == 'device'){
+                 this.deviceList.push(linevectorLayer);
+                 linevectorLayer.setVisible(false)
+            }
+            this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
+        },
+         addPolygon(item) {
+          var polygon = new Feature({
+            geometry: new Polygon(item),
+            type: "polygon",
+          });
+          let style = [
+            new Style({
+              fill: new Fill({
+                color: "rgba(5,96,187,0.2)",
+              }),
+              // 描边
+               stroke: new Stroke({
+                  color:"#0560BB",
+                  width:3,
+                  lineDash:[10,20],
+                  lineCap:"butt"
+               }),
+              zIndex: 10,
+            }),
+          ];
+          polygon.setStyle(style);
+           var polygonLayer = new LayerVec({
+                source: new SourceVec({
+                    features: [polygon]
+                })
+            });
+          this.map.addLayer(polygonLayer);
+          this.areaList.push(polygonLayer);
+          polygonLayer.setVisible(false)
         },
         initPoint(){
               var pointObj = this.pointObj;
-               console.log(pointObj);
               if(pointObj){
                   if(pointObj.type == 2){
                     this.addMarker(pointObj.locations.split(','),'左侧-车站-高亮.png',0.2,'marker');
@@ -417,6 +528,95 @@ const vector = new LayerVec({
         handleOpen(){
           window.cameraid = this.ccode;
           startPreview(window.cameraid,-1);
+        },
+        handleChange(value){  
+            for(var key in this.mapHashMap){
+                 this.mapHashMap[key].setVisible(false)
+            }
+            for(var index in this.deviceList){
+                 this.deviceList[index].setVisible(false)
+            }
+            for(var index in this.areaList){
+                 this.areaList[index].setVisible(false)
+            }
+            for(var index in value){
+              if(value[index] == 'device'){
+                    for(var index in this.deviceList){
+                         this.deviceList[index].setVisible(true)
+                    }
+              }else  if(value[index] == 'area'){
+                    for(var index in this.areaList){
+                         this.areaList[index].setVisible(true)
+                    }
+              }else{
+                var mapkey = value[index]
+                if(this.mapHashMap[mapkey]){
+                    this.mapHashMap[mapkey].setVisible(true)
+                }
+              }
+            }
+        },
+        getStyle(type){
+          var style =  new Style({
+                stroke: new Stroke({
+                    width: 3,
+                    color: "#008000"
+                })
+            })
+          if(type == 1){
+              style =[
+                          new Style({
+                              stroke: new Stroke({
+                                  color:"#000000",
+                                  width:6,
+                                  lineCap:"butt"
+                              }),
+                              zIndex:20
+                          }),
+                          new Style({
+                              stroke: new Stroke({
+                                  color:"#ffffff",
+                                  width:6,
+                                  lineDash:[15,15],
+                                  lineCap:"butt"
+                              }),
+                              zIndex:21
+                          })
+                      ]
+          }else if(type == 2){
+               style =[
+                     new Style({
+                          stroke: new Stroke({
+                              color:"#000000",
+                              width:6,
+                              lineDash:[15,45],
+                              lineCap:"butt"
+                          }),
+                          zIndex:20
+                      }),
+                      new Style({
+                          stroke: new Stroke({
+                              color:"#ffffff",
+                              width:6,
+                              lineDash:[15,45],
+                              lineDashOffset:30,
+                              lineCap:"butt"
+                          }),
+                          zIndex:21
+                      })
+                    ]
+          }else if(type == 'device'){
+               style =new Style({
+                          stroke: new Stroke({
+                              color:"#07DBFF",
+                              width:6,
+                              lineDash:[15,45],
+                              lineCap:"butt"
+                          }),
+                          zIndex:20
+                      })
+          }
+             return style;
         }
   }
 };
@@ -426,8 +626,20 @@ const vector = new LayerVec({
 #map {
   height: 100%;
 }
-/* .el-dialog__body {
-    background: #041824 84%;
-    position: relative;
-} */
+
+.iconSelect{
+    position: absolute;
+    top: 10rem;
+    right: 5rem;
+    width: 16rem;
+    min-height: 30rem;
+    background-color: transparent ;
+    padding-left:1rem
+}
+
+.tipicon{
+    width:3rem;
+    height:3rem;
+    vertical-align: middle;
+}
 </style>

src/views/bigscreen/index.vue

@@ -1,16 +1,16 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
-      <mapdiv></mapdiv>
+      <mapdiv ref="mapdiv"></mapdiv>
       <!-- <zhgl></zhgl> -->
     </div>
    <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
 
     <div class="bottombg">
-      <div class="item item2"><div class="num">1123</div><div>静态资源</div></div>
-      <div class="item item1 item2"><div class="num">113</div><div>动态资源</div></div>
-      <div class="item item1 item2"><div class="num">531</div><div>重点区域</div></div>
-      <div class="item"><div class="num">16</div><div>实时告警</div></div>
+      <div class="item item2" @click="changeMapTab(1)"><div class="num">1123</div><div>静态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(2)"><div class="num">113</div><div>动态资源</div></div>
+      <div class="item item1 item2" @click="changeMapTab(3)"><div class="num">531</div><div>重点区域</div></div>
+      <div class="item"><div class="num" @click="changeMapTab(4)">16</div><div>实时告警</div></div>
     </div>
 
     <!-- <videodiv :cameracode="ccode" style="width:700px;height:300px;position:absolute;top:100px;left:100px"></videodiv> -->
@@ -26,6 +26,8 @@ import moment from "moment";
 import mapdiv from "../../components/map/index.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 videodiv from "../../components/Videoplayer/index.vue"
 
@@ -35,7 +37,11 @@ export default {
         return {
             currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
             currentindexNew:1,
-            ccode:"32068166001320000235"
+            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:{
@@ -45,11 +51,88 @@ export default {
       videodiv
     },
     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 =>{
+                     console.log(response.data);
+                     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
+                          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'){
+                             trainArry.push(obj);
+                         }else if(obj.areaType == '3'){
+                             bridgeArry.push(obj);
+                         }else if(obj.areaType == '4'){
+                             railArry.push(obj);   
+                         }
+                     }
+                     for(var index in areaList){
+                             console.log(areaList[index].fence);
+                             var json = JSON.parse(areaList[index].fence)
+                             console.log(json);
+                             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 += ']'
+                              console.log(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(){
+                  console.log(1111);
+                  httpRequest(this.videoParams).then(data =>{
+                        var json = JSON.parse(data.data);
+                        console.log(json);
+                         this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
+                  });
+              
+         }
+
+    }
 };
 </script>
 

src/views/bigscreen/introduction.vue

@@ -0,0 +1,44 @@
+<template>
+     <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: "Introduction",
+  data() {
+    return {
+       
+    };
+  },
+   components:{
+      mapdiv
+    },
+  created() {
+
+  },
+  methods: {
+   
+  }
+};
+</script>
+
+
+<style>
+ .divtitle{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
+       }
+
+
+</style>

src/views/qdtl/area/index.vue

@@ -315,13 +315,13 @@ export default {
 //     },
     areaTypeChange(){
       console.log(this.form.areaType);
-      // if(this.form.areaType == 1){
-      //     this.$refs.mapv.typeSelect="Polygon";
-      //     this.$refs.mapv.changeAddInteractions();
-      // }else{
-      //     this.$refs.mapv.typeSelect="Point";
-      //     this.$refs.mapv.changeAddInteractions();
-      // } 
+      if(this.form.areaType == 1){
+          this.$refs.mapv.typeSelect="Polygon";
+          this.$refs.mapv.changeAddInteractions();
+      }else{
+          this.$refs.mapv.typeSelect="Point";
+          this.$refs.mapv.changeAddInteractions();
+      } 
             // this.$refs.mapv.typeSelect="";
     },
     tableRowClassName({ row, rowIndex }) {
@@ -429,6 +429,14 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+             if(this.form.areaType == 1){
+                  // this.form.fence = this.$refs.mapv.locations.join(';');
+                  this.form.fence =JSON.stringify(this.$refs.mapv.locations);
+                  // this.form.lnglat = null;
+            }else{
+                  this.form.fence = this.$refs.mapv.locations.join(',');
+                  // this.form.fence = null;
+            }
             updateArea(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;

src/views/qdtl/area1/index.vue

@@ -0,0 +1,351 @@
+<template>
+  <div class="app-container">
+    <div class="title"><div style="padding-top:0.8rem;padding-left:3rem;font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">{{title}}</div></div>
+     
+    <div style="margin-top:1rem">
+          <el-button style="width:8rem;height:3.2rem;" type="primary">新增</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">编辑</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">查看</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">删除</el-button>
+    </div>
+
+    <div style="margin-top:1rem">
+    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" stripe
+      class="my_table"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编号" align="center" prop="dictId" />
+      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+            <span>{{ scope.row.dictType }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      style=" position:fixed;top:90rem;right:5rem;"
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :layout="layout"
+      @pagination="getList"
+    />
+    </div>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
+import { areaList } from "@/api/data/qdtl";
+
+export default {
+  name: "Area",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "区域管理",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+
+      layout:"total, prev, pager, next,jumper",
+      // 表单校验
+      rules: {
+        dictName: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" }
+        ],
+        dictType: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    // this.getList();
+    this.areaList();
+  },
+  methods: {
+     areaList(){
+                 areaList().then(response =>{
+                        console.log(response);
+                     })
+     },
+     tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.typeList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: "0",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典类型";
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.dictId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictId = row.dictId || this.ids
+      getType(dictId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典类型";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.dictId != undefined) {
+            updateType(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addType(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictIds = row.dictId || this.ids;
+      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+        return delType(dictIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/dict/type/export', {
+        ...this.queryParams
+      }, `type_${new Date().getTime()}.xlsx`)
+    },
+    /** 刷新缓存按钮操作 */
+    handleRefreshCache() {
+      refreshCache().then(() => {
+        this.$modal.msgSuccess("刷新成功");
+      });
+    }
+  }
+};
+</script>
+
+<style>
+       .title{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem
+       }
+
+       .el-button--primary {
+          color:#C5D0D4;
+          background:#0A4559 !important;
+          border-color:#0A4559 !important;
+        }
+
+      .el-button--primary:hover {
+        background: #3DFFEA !important;
+        border-color: #3DFFEA !important;
+        color: #000000 !important;
+      }
+
+      .el-pagination__total{
+          color:#3DFFEA
+      }
+
+      .el-pagination__jump{
+          color:#3DFFEA
+      }       
+      
+      .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {   
+            background: #068583 20%;
+            color: #0BC4F0;
+      }
+
+      .el-pagination.is-background .el-pager li:not(.disabled).active {
+            background-color: #3DFFEA;
+            color: #031B3C;
+      }
+
+      .el-input__inner{
+          background: #068583 20%;
+          border: 1px solid #068583;
+      }
+
+      .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+           background: transparent;
+           border: none;
+           color: #C5D0D4;
+      }
+
+      .el-table .el-table__body tr.el-table__row td.el-table__cell{
+           background: transparent;
+           border: none;
+           color: #C5D0D4;
+      }
+
+       .el-table .warning-row {
+          background:#052C3E 20%;
+        }
+
+        .el-table .success-row {
+          background: #041621;
+        }
+
+        .el-checkbox__inner{
+          background: transparent
+        }
+
+        /* td{
+          border: none;
+          color: #C5D0D4;
+        } */
+        .el-table::before {
+          height: 0px;
+        }
+         
+</style>

src/views/qdtl/location1/index.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="app-container">
+    <div class="title"><div style="padding-top:0.8rem;padding-left:3rem;font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">{{title}}</div></div>
+     
+    <div style="margin-top:1rem">
+          <el-button style="width:8rem;height:3.2rem;" type="primary">新增</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">编辑</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">查看</el-button>
+
+          <el-button style="width:8rem;height:3.2rem;" type="primary">删除</el-button>
+    </div>
+
+    <div style="margin-top:1rem">
+    <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" stripe
+      class="my_table"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{background:'#24A3B3 50%',color: '#C5D0D4'}">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="字典编号" align="center" prop="dictId" />
+      <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" />
+      <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+            <span>{{ scope.row.dictType }}</span>
+          </router-link>
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      style=" position:fixed;top:90rem;right:5rem;"
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      :layout="layout"
+      @pagination="getList"
+    />
+    </div>
+
+    <!-- 添加或修改参数配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="字典名称" prop="dictName">
+          <el-input v-model="form.dictName" placeholder="请输入字典名称" />
+        </el-form-item>
+        <el-form-item label="字典类型" prop="dictType">
+          <el-input v-model="form.dictType" placeholder="请输入字典类型" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
+
+export default {
+  name: "Dict",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 字典表格数据
+      typeList: [],
+      // 弹出层标题
+      title: "巡检点管理",
+      // 是否显示弹出层
+      open: false,
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        dictName: undefined,
+        dictType: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+
+      layout:"total, prev, pager, next,jumper",
+      // 表单校验
+      rules: {
+        dictName: [
+          { required: true, message: "字典名称不能为空", trigger: "blur" }
+        ],
+        dictType: [
+          { required: true, message: "字典类型不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+     tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
+    /** 查询字典类型列表 */
+    getList() {
+      this.loading = true;
+      listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.typeList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        dictId: undefined,
+        dictName: undefined,
+        dictType: undefined,
+        status: "0",
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加字典类型";
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.dictId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const dictId = row.dictId || this.ids
+      getType(dictId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改字典类型";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.dictId != undefined) {
+            updateType(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addType(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const dictIds = row.dictId || this.ids;
+      this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+        return delType(dictIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/dict/type/export', {
+        ...this.queryParams
+      }, `type_${new Date().getTime()}.xlsx`)
+    },
+    /** 刷新缓存按钮操作 */
+    handleRefreshCache() {
+      refreshCache().then(() => {
+        this.$modal.msgSuccess("刷新成功");
+      });
+    }
+  }
+};
+</script>
+
+<style>
+       .title{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem
+       }
+
+       .el-button--primary {
+          color:#C5D0D4;
+          background:#0A4559 !important;
+          border-color:#0A4559 !important;
+        }
+
+      .el-button--primary:hover {
+        background: #3DFFEA !important;
+        border-color: #3DFFEA !important;
+        color: #000000 !important;
+      }
+
+      .el-pagination__total{
+          color:#3DFFEA
+      }
+
+      .el-pagination__jump{
+          color:#3DFFEA
+      }       
+      
+      .el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-next, .el-pagination.is-background .el-pager li {   
+            background: #068583 20%;
+            color: #0BC4F0;
+      }
+
+      .el-pagination.is-background .el-pager li:not(.disabled).active {
+            background-color: #3DFFEA;
+            color: #031B3C;
+      }
+
+      .el-input__inner{
+          background: #068583 20%;
+          border: 1px solid #068583;
+      }
+
+      .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
+           background: transparent;
+           border: none;
+           color: #C5D0D4;
+      }
+
+      .el-table .el-table__body tr.el-table__row td.el-table__cell{
+           background: transparent;
+           border: none;
+           color: #C5D0D4;
+      }
+
+       .el-table .warning-row {
+          background:#052C3E 20%;
+        }
+
+        .el-table .success-row {
+          background: #041621;
+        }
+
+        .el-checkbox__inner{
+          background: transparent
+        }
+
+        /* td{
+          border: none;
+          color: #C5D0D4;
+        } */
+        .el-table::before {
+          height: 0px;
+        }
+         
+</style>

src/views/qdtl/video/index.vue

@@ -210,7 +210,7 @@ export default {
               if(node == false){
                    this.$refs.mapv.removeLayer(data.id);
               }else if(node == true){
-                   this.$refs.mapv.addMarker(data.lnglat.split(','),'监控 (2) 拷贝 20.png',0.8,data.id,data);
+                   this.$refs.mapv.addMarker(data.lnglat.split(','),'video.png',0.8,data.id,data,'video');
               }
 
           }