列表地图

src/components/map/index.vue

@@ -23,13 +23,13 @@ import View from "ol/View";
 import {get as getProjection, transform} from "ol/proj";
 import {TileGrid} from "ol/tilegrid/TileGrid";
 import {TileImage} from "ol/source/TileImage";
-import {XYZ, Vector as VectorSource} from "ol/source";
-import {Tile,Vector as VectorLayer} from "ol/layer";
+import {XYZ, Vector as SourceVec} from "ol/source";
+import {Tile,Vector as LayerVec} from "ol/layer";
 
 import {Circle as CircleStyle, Fill, Stroke, Style, Icon} from 'ol/style';
 import {Draw, Modify, Snap} from 'ol/interaction';
-// import {OSM, Vector as VectorSource} from 'ol/source';
-// import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
+// import {OSM, Vector as SourceVec} from 'ol/source';
+// import {Tile as TileLayer, Vector as LayerVec} from 'ol/layer';
 import {get} from 'ol/proj';
 import { Feature } from "ol";
 
@@ -53,20 +53,23 @@ export default {
       source:null,
       draw:null,
       snap:null,
-      locations:[]
+      locations:[],
+      vector:null,
     };
   },
   mounted() {
   //  console.log(this.point)
-    var point =JSON.parse(this.point);
+    // var point =JSON.parse(this.point);
 
     this.initdev();
-    this.addpoint(point);
+    // this.addpoint(point);
 
 
 
+    var that = this
     this.map.on("click", function (e) {
-
+      // console.log(e.coordinate);
+      //      that.addMarker(e.coordinate,'专家站点.png',0.2);
     });
 
 
@@ -82,28 +85,22 @@ export default {
 
     });
 
+  //  this.map.on('keyup', function (e) {
+  //    console.log(e.keyCode);
+  //            if (e.keyCode == 27)
+  //       that.draw.abortDrawing();
+  //   else if (that.e.keyCode == 90 && that.e.ctrlKey) {
+  //       console.log(draw);
+  //       if (that.typeSelect.value== 'Circle')
+  //           that.draw.abortDrawing();
+  //       else
+  //           that.draw.removeLastPoint()
+  //   }
+  //   });
+    
+
   },
   methods: {
-    transpoints: function (points, type) {
-      if (false) {
-        return points;
-      } else {
-        if (type == 1) {
-          var pp = [];
-          points.forEach(point => {
-            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
-          });
-          return pp;
-        } else {
-          var pp = [];
-          points.forEach(point => {
-            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
-          });
-          return pp;
-        }
-      }
-    },
-
     initdev: function () {
 
       // function getWMTSLayer(url, layer) {
@@ -174,8 +171,8 @@ export default {
     })
   })
 
-this.source = new VectorSource();
-const vector = new VectorLayer({
+this.source = new SourceVec();
+const vector = new LayerVec({
   source: this.source,
   style: new Style({
     fill: new Fill({
@@ -193,6 +190,7 @@ const vector = new VectorLayer({
     }),
   }),
 });
+  this.vector = vector;
 
   // 创建地图
   const map = new Map({
@@ -219,6 +217,7 @@ const vector = new VectorLayer({
 
       // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
       this.map = map;
+      // this.addDrawLayer();
       this.addInteractions();
       var that = this;
   
@@ -238,6 +237,8 @@ const vector = new VectorLayer({
         });
         console.log(draw);
         draw.on('drawend',that.getLocation,this);
+        draw.on('drawstar',that.removeDraw,this);
+        //  draw.on('drawstart',that.removeDraw,this);
         this.draw = draw;
         this.map.addInteraction(draw);
         let snap = new Snap({source: this.source});
@@ -251,47 +252,76 @@ const vector = new VectorLayer({
           var geo = feature.getGeometry();
           var cor = geo.getCoordinates();
           this.locations = cor;
+          console.log(2);
       },
-      changeAddInteractions() {
+      changeAddInteractions(evt) {
          this.map.removeInteraction(this.draw);
          this.map.removeInteraction(this.snap);
          this.addInteractions();
       },
+      removeDraw(evt){
+        console.log(this.locations.length);
+          if(this.locations.length > 0){
+            console.log(this.locations.length);
+              this.vector.getSource().clear()
+          }
+      },
       addPointArry(){
         console.log(1111);
       },
-      addpoint(addrArry) {
-        console.log(addrArry);
-        //  addpoint: function(addrArry, data, img, type) {
-            // var lnglat = this.transpoints(addrArry, 0)[0];
-
+      addMarker(lnglats,icon,size) {
+        console.log(lnglats);
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
                     towerNumber: 22,
-                    // data: data,
-                    // type: type
                 }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
-                geometry: new Point(addrArry) //这里是点坐标的位置，这里要注意fromLonLat
+                geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
             });
-            console.log(tamarker);
             tamarker.setStyle(
                 new Style({
                     image: new Icon({
                         color: "#eee",
                         crossOrigin: "anonymous",
-                        src: require("../../assets/images/组件1.png") //本地的样式
+                        src: require("../../assets/images/icons/" + icon) //本地的样式
                     })
                 })
             ); //这里是样式
-            var markerta = new VectorLayer({
-                source: new VectorSource({
+            var markerta = new LayerVec({
+                source: new SourceVec({
                     features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                 })
             });
-            console.log(markerta);
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
-        }
+      }, 
+        addline: function() {
+
+            var points = [
+                [118.78, 32.04],
+                [118.88, 32.14]
+            ]
+
+            let line = new Feature({
+                tadata: {
+                    sectionId: "line",
+                    towerNumber: 22
+                },
+                geometry: new LineString(points)
+            }); //这里要注意写fromLonLat，很重要
+            line.setStyle(new Style({
+                stroke: new Stroke({
+                    width: 3,
+                    color: "#008000"
+                })
+            }));
+            this.linevectorLayer = new LayerVec({
+                source: new SourceVec({
+                    features: [line] //要绘制多段线，直接push到这里面就行了
+                })
+            });
+            this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
+
+        },
   }
 };
 </script>

src/views/bigscreen/index.vue

@@ -1,7 +1,8 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
-      <mapdiv></mapdiv>
+      <!-- <mapdiv></mapdiv> -->
+      <zhgl></zhgl>
     </div>
    <div class="header">
         <div class="title">
@@ -20,12 +21,12 @@
         </div>
     </div>
 
-    <div class="bottombg">
+    <!-- <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>
+    </div> -->
 
 
 </div>
@@ -36,6 +37,7 @@
 <script>
 import moment from "moment";
 import mapdiv from "../../components/map/index.vue"
+import zhgl from "../../components/zhgl/index.vue"
 
 export default {
     name: "big",
@@ -46,8 +48,8 @@ export default {
         };
     },
     components:{
-      mapdiv
-
+      mapdiv,
+      zhgl
     },
     mounted() {
         setInterval(() => {

src/views/qdtl/area/index.vue

@@ -1,6 +1,6 @@
 <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 class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">{{title}}</div></div>
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem">
       <el-form-item label="编号" prop="areaCode">
         <el-input
@@ -160,6 +160,7 @@
       <div slot="footer" class="dialog-footer" style="text-align:center">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button type="primary" @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="deleteLocation">清 除</el-button>
       </div>
     </el-dialog>
   </div>
@@ -231,11 +232,6 @@ export default {
     openMap(){
        var locationArry = "[[" + this.form.fence + "]]";
        this.pointArry = locationArry;
-      //  console.log(locationArry);
-      //  this.$refs.mapv.addPointArry();
-      //  setTimeout(this.addPoint(),100000);
-      //  addPointArry
-      //  this.$refs.mapv.addpoint(locationArry);
     },
 //     addPoint(){
 // this.$refs.mapv.addpoint(locationArry)
@@ -323,6 +319,8 @@ export default {
         this.form = response.data;
         this.open = true;
         this.addtitle = "修改区域管理";
+         this.areaTypeChange();
+        // that.$refs.mapv.addInteractions();
       });
     },
     /** 提交按钮 */
@@ -370,17 +368,27 @@ export default {
       this.download('qdtl/area/export', {
         ...this.queryParams
       }, `area_${new Date().getTime()}.xlsx`)
+    },
+    //清除绘制内容
+    deleteLocation(){
+      console.log(111);
+      console.log(this.$refs.mapv.draw.removeLastPoint());
+      // this.$refs.mapv.draw.set
+       this.$refs.mapv.vector.getSource().clear()
     }
   }
 };
 </script>
 
 <style>
- .title{
+ .divtitle{
           background: url("~@/assets/images/title2@2x.png") no-repeat;
           background-size: 100% 100%;
           width:100%;
-          height:3.9rem
+          height:3.9rem;
+          padding-top:0.8rem;
+          padding-left:3rem;
+          float: left;
        }
 
 

src/views/qdtl/device/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">{{divtitle}}</div></div>
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="设备编号" prop="deviceCode">
         <el-input
@@ -36,22 +37,22 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+     <el-col :span="1.5">
         <el-button
+          style="width:8rem;height:3.2rem;" 
           type="primary"
           plain
           icon="el-icon-plus"
-          size="mini"
           @click="handleAdd"
           v-hasPermi="['qdtl:device:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
+          style="width:8rem;height:3.2rem;" 
+          type="primary"
           plain
           icon="el-icon-edit"
-          size="mini"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['qdtl:device:edit']"
@@ -59,10 +60,10 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
+          style="width:8rem;height:3.2rem;" 
+          type="primary"
           plain
           icon="el-icon-delete"
-          size="mini"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['qdtl:device:remove']"
@@ -71,7 +72,10 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="deviceList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="deviceList" @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="deviceCode" />
       <el-table-column label="设备名称" align="center" prop="deviceName" />
@@ -180,6 +184,8 @@ export default {
       areaOptions: [],
       // 弹出层标题
       title: "",
+
+      divtitle:'巡检设备管理',
       // 是否显示弹出层
       open: false,
       // 查询参数
@@ -313,7 +319,29 @@ export default {
       this.download('qdtl/device/export', {
         ...this.queryParams
       }, `device_${new Date().getTime()}.xlsx`)
-    }
+    },
+    tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
   }
 };
 </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/location/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+     <div class="divtitle"><div style="font-size:1.6rem;font-family: Adobe Heiti Std;font-weight: normal;color: #DFEEF3;">{{divtitle}}</div></div>
     <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="编号" prop="locationCode">
         <el-input
@@ -28,20 +29,20 @@
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
+          style="width:8rem;height:3.2rem;" 
           type="primary"
           plain
           icon="el-icon-plus"
-          size="mini"
           @click="handleAdd"
           v-hasPermi="['qdtl:location:add']"
         >新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="success"
+           style="width:8rem;height:3.2rem;" 
+          type="primary"
           plain
           icon="el-icon-edit"
-          size="mini"
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['qdtl:location:edit']"
@@ -49,10 +50,10 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
-          type="danger"
+          style="width:8rem;height:3.2rem;" 
+          type="primary"
           plain
           icon="el-icon-delete"
-          size="mini"
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['qdtl:location:remove']"
@@ -61,7 +62,10 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="locationList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="locationList" @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="locationCode" />
       <el-table-column label="名称" align="center" prop="locationName" />
@@ -133,6 +137,8 @@ export default {
     return {
       // 遮罩层
       loading: true,
+
+      divtitle:'巡检点管理',
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -268,7 +274,29 @@ export default {
       this.download('qdtl/location/export', {
         ...this.queryParams
       }, `location_${new Date().getTime()}.xlsx`)
-    }
+    },
+        tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
   }
 };
 </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>