更新

src/api/qdtl/video.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询巡检计划人员关系列表
+export function listVideo(query) {
+  return request({
+    url: '/qdtl/monitor/list',
+    method: 'get',
+    params: query
+  })
+}

src/assets/styles/ruoyi.scss

@@ -306,6 +306,7 @@ color: #000000 !important;
 .el-input__inner{
 	background: #068583 20%;
 	border: 1px solid #068583;
+	color:white
 }
 
 .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{

src/components/HeaderDiv/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="header">
+        <div class="headertitle">
+            <img src="../../assets/images/启东市铁路沿线综合治理信息化管理平台@2x.png" />
+        </div>
+        <div class="mum">
+            <div :class='currentindex==1?"active":""' @click="goTarget(1)">首页</div>
+            <div :class='currentindex==2?"active":""' @click="goTarget(2)">设施监测</div>
+            <div :class='currentindex==3?"active":""' @click="goTarget(3)">治理态势</div>
+            <div :class='currentindex==4?"active":""' @click="goTarget(4)">安全态势</div>
+            <div :class='currentindex==5?"active":""' @click="goTarget(5)">公众服务</div>
+            <div :class='currentindex==6?"active":""' @click="goTarget(6)">综合管理</div>
+        </div>
+        <div class="time">
+            <img src="../../assets/images/图层 9@2x.png" /><span>{{ currenttime }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+  name: "HeaderDiv",
+   props: {
+      currentindexP:Number
+  },
+  data() {
+    return {
+      // 版本号
+      version: "3.8.1",
+      currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
+      currentindex:this.currentindexP
+    };
+  },
+   mounted() {
+        setInterval(() => {
+            this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
+        }, 1000);
+    },
+  methods: {
+    goTarget(index) {
+      if(index == 1){
+           this.$router.push('/big')
+      }else if(index == 6){
+           this.$router.push('/index')
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.header {
+    background: url("../../assets/images/top@2x.png") no-repeat;
+    background-size: 100% 100%;
+    max-height: 5.2rem;
+    position: relative;
+    z-index: 1;
+    .headertitle {
+        margin-left: 1.1rem;
+        img {
+            width: 41.36rem;
+            height: 4.2rem;
+        }
+    }
+    .mum {
+        font-size: 1.6rem;
+        color: #fff;
+        position: absolute;
+        top: 1.2rem;
+        left: 63rem;
+        >div {
+            display: inline-block;
+            margin-right: 7.9rem;
+            cursor: pointer;
+        }
+        .active {
+            color: #30FFEA;
+        }
+        .active::before {
+            display: inline-block;
+            content: "";
+            background: url("../../assets/images/左@2x.png") no-repeat;
+            width: 2.2rem;
+            height: 1.4rem;
+            background-size: 100% 100%;
+            margin-right: 0.2rem;
+        }
+        .active::after {
+            display: inline-block;
+            content: "";
+            background: url("../../assets/images/左@2x.png") no-repeat;
+            width: 2.2rem;
+            height: 1.4rem;
+            background-size: 100% 100%;
+            margin-left: 0.2rem;
+        }
+    }
+    .time {
+        position: absolute;
+        top: 1.2rem;
+        right: 4.7rem;
+        font-size: 1.6rem;
+        color: #fff;
+        img {
+            width: 2.4rem;
+            height: 2.4rem;
+            vertical-align: middle;
+            margin-top: -0.1rem;
+            margin-right: 1.6rem;
+        }
+    }
+}
+.bottombg{
+  background: url("../../assets/images/底部菜单bg@2x.png");
+  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;
+
+
+  .item{
+    width: 27%;
+    text-align: center;
+    justify-content: center;
+    position: relative;
+    .num{
+      font-size:3rem;
+      color:#25f8bd;
+    }
+  }
+   .item1{
+    width: 23%;
+  }
+  .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>
+

src/components/map/index.vue

@@ -44,7 +44,8 @@ import {LineString, Point} from "ol/geom";
 
 export default {
   props: {
-      point:String
+      pointObj:{type:Object},
+      isEdit:false
   },
   data() {
     return {
@@ -55,22 +56,22 @@ export default {
       snap:null,
       locations:[],
       vector:null,
+      pointArry:new Map(),
+     
     };
   },
   mounted() {
-  //  console.log(this.point)
-    // var point =JSON.parse(this.point);
 
     this.initdev();
+    this.initPoint();
     // this.addpoint(point);
 
 
 
     var that = this
-    this.map.on("click", function (e) {
-      // console.log(e.coordinate);
-      //      that.addMarker(e.coordinate,'专家站点.png',0.2);
-    });
+    // this.map.on("click", function (e) {
+    //        that.addMarker(e.coordinate,'专家站点.png',0.2);
+    // });
 
 
     var view = this.map.getView();
@@ -84,21 +85,7 @@ export default {
     this.map.on('moveend', function (e) {
 
     });
-
-  //  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: {
     initdev: function () {
@@ -218,7 +205,9 @@ const vector = new LayerVec({
       // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
       this.map = map;
       // this.addDrawLayer();
-      this.addInteractions();
+      if(this.isEdit){
+           this.addInteractions();
+      }
       var that = this;
   
       //  map.getView().setCenter(
@@ -235,7 +224,6 @@ const vector = new LayerVec({
           source: this.source,
           type: this.typeSelect,
         });
-        console.log(draw);
         draw.on('drawend',that.getLocation,this);
         draw.on('drawstar',that.removeDraw,this);
         //  draw.on('drawstart',that.removeDraw,this);
@@ -244,15 +232,12 @@ const vector = new LayerVec({
         let snap = new Snap({source: this.source});
         this.snap = snap;
         this.map.addInteraction(snap);
-        console.log(snap)
       },
       getLocation(evt){
-          console.log(evt);
           var feature = evt.feature;
           var geo = feature.getGeometry();
           var cor = geo.getCoordinates();
           this.locations = cor;
-          console.log(2);
       },
       changeAddInteractions(evt) {
          this.map.removeInteraction(this.draw);
@@ -260,17 +245,11 @@ const vector = new LayerVec({
          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);
-      },
-      addMarker(lnglats,icon,size) {
-        console.log(lnglats);
+      addMarker(lnglats,icon,size,id) {
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
@@ -292,6 +271,7 @@ const vector = new LayerVec({
                     features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                 })
             });
+            this.pointArry.set(id,markerta);
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
       }, 
         addline: function() {
@@ -322,6 +302,39 @@ const vector = new LayerVec({
             this.map.addLayer(this.linevectorLayer); //这里是执行，执行之后点就出来了
 
         },
+        initPoint(){
+              var pointObj = this.pointObj;
+               console.log(pointObj);
+              if(pointObj){
+                  if(pointObj.type == 2){
+                    this.addMarker(pointObj.locations.split(','),'左侧-车站-高亮.png',0.2,'marker');
+                  }
+                  if(pointObj.type == 5){
+                    this.addMarker(pointObj.locations.split(','),'专家站点.png',0.2,'marker');
+                  }
+
+                
+              }
+        },
+        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;
+                }
+            }
+        },
   }
 };
 </script>

src/layout/components/Sidebar/index.vue

@@ -34,6 +34,7 @@ export default {
         ...mapState(["settings"]),
         ...mapGetters(["sidebarRouters", "sidebar"]),
         activeMenu() {
+            console.log();
             const route = this.$route;
             const { meta, path } = route;
             // if set path, the sidebar will highlight the path you set
@@ -51,7 +52,7 @@ export default {
         isCollapse() {
             return !this.sidebar.opened;
         }
-    }
+    },
 };
 </script>
 

src/layout/index.vue

@@ -1,7 +1,9 @@
 <template>
+<div>
+   <headerdiv :currentindexP = currentindexNew></headerdiv>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
     <!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> -->
-    <sidebar class="sidebar-container"/>
+    <sidebar class="sidebar-container" style="margin-top:4.5rem"/>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
         <!-- <navbar /> -->
@@ -13,24 +15,34 @@
       </right-panel>
     </div>
   </div>
+</div>
 </template>
 
 <script>
 import RightPanel from '@/components/RightPanel'
+import headerdiv from '@/components/HeaderDiv/index.vue'
 import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
 
+
+
 export default {
   name: 'Layout',
+   data() {
+    return {
+     currentindexNew:6
+    };
+  },
   components: {
     AppMain,
+    headerdiv,
     Navbar,
     RightPanel,
     Settings,
     Sidebar,
-    TagsView
+    TagsView,
   },
   mixins: [ResizeMixin],
   computed: {

src/router/index.js

@@ -71,8 +71,7 @@ export const constantRoutes = [{
             path: "index",
             component: () =>
                 import ("@/views/index"),
-            name: "Index",
-            meta: { title: "首页", icon: "dashboard", affix: true },
+            name: "Index"
         }, ],
     },
     {

src/store/modules/permission.js

@@ -30,6 +30,7 @@ const permission = {
       state.topbarRouters = routes.concat(index);
     },
     SET_SIDEBAR_ROUTERS: (state, routes) => {
+      console.log(routes);
       state.sidebarRouters = routes
     },
   },

src/views/bigscreen/index.vue

@@ -1,32 +1,17 @@
 <template>
 <div style="width:100%;height:100%;position:relative">
   <div style="width:100%;height:100%;padding-top:5.1rem;position:absolute">
-      <!-- <mapdiv></mapdiv> -->
-      <zhgl></zhgl>
-    </div>
-   <div class="header">
-        <div class="title">
-            <img src="../../assets/images/启东市铁路沿线综合治理信息化管理平台@2x.png" />
-        </div>
-        <div class="mum">
-            <div :class='currentindex==1?"active":""' @click="currentindex=1">首页</div>
-            <div :class='currentindex==2?"active":""' @click="currentindex=2">设施监测</div>
-            <div :class='currentindex==3?"active":""' @click="currentindex=3">治理态势</div>
-            <div :class='currentindex==4?"active":""' @click="currentindex=4">安全态势</div>
-            <div :class='currentindex==5?"active":""' @click="currentindex=5">公众服务</div>
-            <div :class='currentindex==6?"active":""' @click="currentindex=6">综合管理</div>
-        </div>
-        <div class="time">
-            <img src="../../assets/images/图层 9@2x.png" /><span>{{ currenttime }}</span>
-        </div>
+      <mapdiv></mapdiv>
+      <!-- <zhgl></zhgl> -->
     </div>
+   <headerdiv ref="headerDiv" :currentindexP = currentindexNew></headerdiv>
 
-    <!-- <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>
@@ -38,20 +23,23 @@
 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'
 
 export default {
     name: "big",
     data() {
         return {
             currenttime: moment().format("YYYY-MM-DD HH:mm:ss"),
-            currentindex:1,
+            currentindexNew:1,
         };
     },
     components:{
       mapdiv,
-      zhgl
+      zhgl,
+      headerdiv
     },
     mounted() {
+        // this.$$refs.headerDiv.currentindex = 1;
         setInterval(() => {
             this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
         }, 1000);
@@ -60,67 +48,6 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-.header {
-    background: url("../../assets/images/top@2x.png") no-repeat;
-    background-size: 100% 100%;
-    max-height: 5.2rem;
-    position: relative;
-    z-index: 1;
-    .title {
-        margin-left: 1.1rem;
-        img {
-            width: 41.36rem;
-            height: 4.2rem;
-        }
-    }
-    .mum {
-        font-size: 1.6rem;
-        color: #fff;
-        position: absolute;
-        top: 1.2rem;
-        left: 63rem;
-        >div {
-            display: inline-block;
-            margin-right: 7.9rem;
-            cursor: pointer;
-        }
-        .active {
-            color: #30FFEA;
-        }
-        .active::before {
-            display: inline-block;
-            content: "";
-            background: url("../../assets/images/左@2x.png") no-repeat;
-            width: 2.2rem;
-            height: 1.4rem;
-            background-size: 100% 100%;
-            margin-right: 0.2rem;
-        }
-        .active::after {
-            display: inline-block;
-            content: "";
-            background: url("../../assets/images/左@2x.png") no-repeat;
-            width: 2.2rem;
-            height: 1.4rem;
-            background-size: 100% 100%;
-            margin-left: 0.2rem;
-        }
-    }
-    .time {
-        position: absolute;
-        top: 1.2rem;
-        right: 4.7rem;
-        font-size: 1.6rem;
-        color: #fff;
-        img {
-            width: 2.4rem;
-            height: 2.4rem;
-            vertical-align: middle;
-            margin-top: -0.1rem;
-            margin-right: 1.6rem;
-        }
-    }
-}
 .bottombg{
   background: url("../../assets/images/底部菜单bg@2x.png");
   position: absolute;

src/views/login.vue

@@ -141,7 +141,7 @@ export default {
             Cookies.remove('rememberMe');
           }
           this.$store.dispatch("Login", this.loginForm).then(() => {
-            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
+            this.$router.push({ path: this.redirect || "/big" }).catch(()=>{});
           }).catch(() => {
             this.loading = false;
             if (this.captchaOnOff) {

src/views/qdtl/area/index.vue

@@ -32,7 +32,7 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
@@ -84,8 +84,24 @@
           <dict-tag :options="dict.type.tl_area_type" :value="scope.row.areaType"/>
         </template>
       </el-table-column>
-      <el-table-column label="区域设备" align="center" prop="deviceCount" />
-      <el-table-column label="区域巡检点" align="center" prop="locationCount" />
+      <el-table-column label="区域设备" align="center" prop="deviceCount" >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="getDevice(scope.row)"
+          >{{scope.row.deviceCount}}</el-button>
+          </template>
+      </el-table-column>
+      <el-table-column label="区域巡检点" align="center" prop="locationCount">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="getLocation(scope.row)"
+          >{{scope.row.locationCount}}</el-button>
+          </template>
+      </el-table-column>
       <el-table-column label="区域描述" align="center" prop="detail" />
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -119,7 +135,7 @@
     />
 
     <!-- 添加或修改区域管理对话框 -->
-    <el-dialog :title="addtitle" :visible.sync="open" width="150rem" append-to-body @open="openMap">
+    <el-dialog :title="addtitle" :visible.sync="open" width="150rem" append-to-body @open="openMap" v-if="open">
       <div style="height:70rem">
       <div style="float:left;width:30rem">
       <el-form ref="form" :model="form" :rules="rules" label-width="8rem" >
@@ -154,7 +170,7 @@
       </el-form>
       </div>
       <div style="float:left;height:60rem;width:100rem;margin-left:10rem;margin-top:5rem">
-           <mapdiv ref='mapv' :point='pointArry'></mapdiv>
+           <mapdiv ref='mapv' :pointObj='pointArry' :isEdit='isEdit'></mapdiv>
       </div>
       </div>
       <div slot="footer" class="dialog-footer" style="text-align:center">
@@ -163,16 +179,56 @@
         <el-button type="primary" @click="deleteLocation">清 除</el-button>
       </div>
     </el-dialog>
+
+     <el-dialog title="巡检设备列表" :visible.sync="openDevice" width="150rem" append-to-body>
+      <div style="height:70rem">
+            <el-table v-loading="loading" :data="deviceList"  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" />
+                  <el-table-column label="设备类型" align="center" prop="deviceType">
+                    <template slot-scope="scope">
+                      <dict-tag :options="dict.type.tl_device_type" :value="scope.row.deviceType"/>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="经纬度" align="center" prop="lnglat" />
+                  <el-table-column label="备注" align="center" prop="remark" />
+          </el-table>    
+      </div>
+    </el-dialog>
+
+     <el-dialog title="巡检点列表" :visible.sync="openLocaton" width="150rem" append-to-body>
+      <div style="height:70rem">
+            <el-table :data="locationList" 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" />
+                <el-table-column label="描述" align="center" prop="detail" />
+                <el-table-column label="巡检设备" align="center" prop="deviceIds" />
+                <el-table-column label="所属区域" align="center" prop="areaId" />
+                <el-table-column label="备注" align="center" prop="remark" />
+            </el-table>  
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/qdtl/device";
+import { listLocation, getLocation, delLocation, addLocation, updateLocation } from "@/api/qdtl/location";
 import mapdiv from "@/components/map/index.vue"
 
 export default {
   name: "Area",
-  dicts: ['tl_area_type'],
+  dicts: ['tl_area_type','tl_device_type'],
+  // dicts: ['tl_device_type'],
   data() {
     return {
       // 遮罩层
@@ -189,14 +245,24 @@ export default {
       total: 0,
       // 区域管理表格数据
       areaList: [],
+
+      deviceList:[],
+
+      locationList:[],
       // 弹出层标题
       title: "区域管理",
       // 是否显示弹出层
       open: false,
+
+      openDevice: false,
+
+      openLocaton:false,
       //分页器类型
       layout:"total, prev, pager, next,jumper",
 
       addtitle:"新增区域",
+      //地图受否可以编辑打点
+      isEdit:'true',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -205,7 +271,10 @@ export default {
         areaName: null,
         areaType: null,
       },
-      pointArry:null,
+      pointArry:{
+        locations:'',
+        type:''
+      },
       // 表单参数
       form: {},
       // 表单校验
@@ -229,22 +298,30 @@ export default {
     this.getList();
   },
   methods: {
+    // getDeviceList() {
+    //   listDevice(this.queryParams).then(response => {
+    //     this.deviceList = response.rows;
+    //     this.total = response.total;
+    //   });
+    // },
     openMap(){
-       var locationArry = "[[" + this.form.fence + "]]";
-       this.pointArry = locationArry;
+       var locationArry =  this.form.fence ;
+       this.pointArry.locations = locationArry;
+       this.pointArry.type = this.form.areaType
+       console.log(this.pointArry);
     },
 //     addPoint(){
 // this.$refs.mapv.addpoint(locationArry)
 //     },
     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 }) {
@@ -286,6 +363,10 @@ export default {
         updateBy: null,
         updateTime: null
       };
+      if(this.pointArry){
+           this.pointArry = {locations:'',
+      type:''};
+      }
       this.resetForm("form");
     },
     /** 搜索按钮操作 */
@@ -320,9 +401,29 @@ export default {
         this.open = true;
         this.addtitle = "修改区域管理";
          this.areaTypeChange();
+         this.openMap();
         // that.$refs.mapv.addInteractions();
       });
     },
+     /** 打开设备列表弹窗 */
+     getDevice(row) {
+      const id = row.id || this.ids
+      const that = this;
+      listDevice({areaId:id}).then(response => {
+             this.openDevice = true;
+             this.deviceList = response.rows;
+              console.log( this.deviceList);
+      });
+    },
+     getLocation(row) {
+      const id = row.id || this.ids
+      const that = this;
+      listLocation({areaId:id}).then(response => {
+             this.openLocaton = true;
+             this.locationList = response.rows;
+              // console.log( this.locationList);
+      });
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
@@ -371,8 +472,6 @@ export default {
     },
     //清除绘制内容
     deleteLocation(){
-      console.log(111);
-      console.log(this.$refs.mapv.draw.removeLastPoint());
       // this.$refs.mapv.draw.set
        this.$refs.mapv.vector.getSource().clear()
     }

src/views/qdtl/device/index.vue

@@ -116,26 +116,28 @@
     />
 
     <!-- 添加或修改巡检设备管理对话框 -->
-    <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="deviceCode">
+    <el-dialog :title="title" :visible.sync="open" width="150rem" append-to-body>
+      <div style="height:70rem">
+         <div style="float:left;width:30rem">
+      <el-form ref="form" :model="form" :rules="rules" label-width="8rem">
+        <el-form-item label="设备编号" prop="deviceCode"  style="margin-top:2rem">
           <el-input v-model="form.deviceCode" placeholder="请输入设备编号" />
         </el-form-item>
-        <el-form-item label="设备名称" prop="deviceName">
-          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
+        <el-form-item label="设备名称" prop="deviceName"  style="margin-top:6rem">
+          <el-input v-model="form.deviceName" placeholder="请输入设备名称"  />
         </el-form-item>
-        <el-form-item label="设备类型" prop="deviceType">
-          <el-select v-model="form.deviceType" placeholder="请选择设备类型">
+        <el-form-item label="设备类型" prop="deviceType"  style="margin-top:6rem">
+          <el-select v-model="form.deviceType" placeholder="请选择设备类型" >
             <el-option
               v-for="dict in dict.type.tl_device_type"
               :key="dict.value"
               :label="dict.label"
-:value="dict.value"
+              :value="dict.value"
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="所属区域" prop="areaId">
-          <el-select v-model="form.deviceType" placeholder="请选择所属区域">
+        <el-form-item label="所属区域" prop="areaId"  style="margin-top:6rem">
+          <el-select v-model="form.areaId" placeholder="请选择所属区域" >
             <el-option
               v-for="item in areaOptions"
               :key="item.id"
@@ -144,16 +146,22 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="经纬度" prop="lnglat">
+        <el-form-item label="经纬度" prop="lnglat"  style="margin-top:6rem">
           <el-input v-model="form.lnglat" placeholder="请输入经纬度" />
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
+        <el-form-item label="备注" prop="remark"  style="margin-top:6rem">
           <el-input v-model="form.remark" placeholder="请输入备注" />
         </el-form-item>
       </el-form>
+      </div>
+       <div style="float:left;height:60rem;width:100rem;margin-left:10rem;margin-top:5rem">
+           <mapdiv ref='mapv' :pointObj='pointArry' :isEdit='isEdit'></mapdiv>
+      </div>
+      </div>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="deleteLocation">清 除</el-button>
       </div>
     </el-dialog>
   </div>
@@ -161,6 +169,8 @@
 
 <script>
 import { listDevice, getDevice, delDevice, addDevice, updateDevice } from "@/api/qdtl/device";
+import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
 
 export default {
   name: "Device",
@@ -197,8 +207,16 @@ export default {
         deviceType: null,
         areaId: null,
       },
+      areaQueryParams:{},
       // 表单参数
       form: {},
+
+        pointArry:{
+        locations:'',
+        type:''
+      },
+
+       isEdit:'true',
       // 表单校验
       rules: {
         deviceCode: [
@@ -218,8 +236,16 @@ export default {
   },
   created() {
     this.getList();
+    this.getAreaList();
   },
+  components:{
+      mapdiv
+    },
   methods: {
+     deleteLocation(){
+      // this.$refs.mapv.draw.set
+       this.$refs.mapv.vector.getSource().clear()
+    },
     /** 查询巡检设备管理列表 */
     getList() {
       this.loading = true;
@@ -229,6 +255,11 @@ export default {
         this.loading = false;
       });
     },
+     getAreaList() {
+      listArea(this.areaQueryParams).then(response => {
+        this.areaOptions = response.rows;
+      });
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -288,6 +319,9 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+           if(this.$refs.mapv.locations.length > 0){
+                  this.form.lnglat = this.$refs.mapv.locations.join(',');
+              }
           if (this.form.id != null) {
             updateDevice(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");

src/views/qdtl/location/index.vue

@@ -102,7 +102,7 @@
     />
 
     <!-- 添加或修改巡检点管理对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <!-- <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="locationCode">
           <el-input v-model="form.locationCode" placeholder="请输入编号" />
@@ -124,12 +124,56 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+    </el-dialog> -->
+
+     <el-dialog :title="title" :visible.sync="open" width="150rem" append-to-body @open="openMap" v-if="open">
+      <div style="height:70rem">
+      <div style="float:left;width:30rem">
+        <el-form ref="form" :model="form" :rules="rules" label-width="8rem">
+        <el-form-item label="编号" prop="locationCode" style="margin-top:2rem">
+          <el-input v-model="form.locationCode" placeholder="请输入编号" />
+        </el-form-item>
+        <el-form-item label="名称" prop="locationName" style="margin-top:6rem">
+          <el-input v-model="form.locationName" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="描述" prop="detail" style="margin-top:6rem">
+          <el-input v-model="form.detail" placeholder="请输入描述" />
+        </el-form-item>
+        <el-form-item label="所属区域" prop="areaId"  style="margin-top:6rem">
+          <el-select v-model="form.areaId" placeholder="请选择所属区域" >
+            <el-option
+              v-for="item in areaOptions"
+              :key="item.id"
+              :label="item.areaName"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="经纬度" prop="lnglat" style="margin-top:6rem">
+          <el-input v-model="form.lnglat" placeholder="请输入经纬度" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark" style="margin-top:6rem">
+          <el-input v-model="form.remark" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      </div>
+      <div style="float:left;height:60rem;width:100rem;margin-left:10rem;margin-top:5rem">
+           <mapdiv ref='mapv' :pointObj='pointArry' :isEdit='isEdit'></mapdiv>
+      </div>
+      </div>
+      <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>
 </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: "Location",
@@ -155,6 +199,8 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+
+      isEdit:'true',
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -165,15 +211,30 @@ export default {
       },
       // 表单参数
       form: {},
+
+      pointArry:{
+        locations:'',
+        type:''
+      },
       // 表单校验
       rules: {
       }
     };
   },
+   components:{
+      mapdiv
+    },
   created() {
     this.getList();
+    this.getAreaList();
   },
   methods: {
+    openMap(){
+       var locationArry =  this.form.lnglat ;
+       this.pointArry.locations = locationArry;
+       this.pointArry.type = 5
+       console.log(this.pointArry);
+    },
     /** 查询巡检点管理列表 */
     getList() {
       this.loading = true;
@@ -207,6 +268,11 @@ export default {
       };
       this.resetForm("form");
     },
+    getAreaList() {
+      listArea(this.areaQueryParams).then(response => {
+        this.areaOptions = response.rows;
+      });
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -237,6 +303,7 @@ export default {
         this.form = response.data;
         this.open = true;
         this.title = "修改巡检点管理";
+        this.openMap();
       });
     },
     /** 提交按钮 */
@@ -244,12 +311,16 @@ export default {
       this.$refs["form"].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
+              if(this.$refs.mapv.locations.length > 0){
+                  this.form.lnglat = this.$refs.mapv.locations.join(',');
+              }
             updateLocation(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
+              this.form.lnglat = this.$refs.mapv.locations.join(',');
             addLocation(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -282,6 +353,10 @@ export default {
              return "success-row";
         }
     },
+     deleteLocation(){
+      // this.$refs.mapv.draw.set
+       this.$refs.mapv.vector.getSource().clear()
+    }
   }
 };
 </script>

src/views/qdtl/video/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="app-container">
+      <div class='leftTree'>
+            <el-input
+                placeholder="输入关键字进行过滤"
+                v-model="filterText">
+            </el-input>
+            <el-tree
+                :data="videoData"
+                show-checkbox
+                node-key="id"
+                :default-expanded-keys="[2, 3]"
+                :default-checked-keys="[5]"
+                :props="defaultProps"
+                :filter-node-method="filterNode"
+                ref="tree"
+                @check-change = 'treeChange'
+                style="height:97rem;background-color:#04283C;color:#C5D0D4"
+                >
+            </el-tree>
+      </div>
+
+     <div style="float:left;margin-left:3rem;margin-top:1rem">
+           <mapdiv ref='mapv' style="height:100rem;width:115rem" ></mapdiv>
+      </div>
+
+  </div>
+</template>
+
+<script>
+import { listVideo } from "@/api/qdtl/video";
+import mapdiv from "@/components/map/index.vue"
+
+export default {
+    data() {
+      return {
+        videoData:[],
+        data: [{
+          id: 1,
+          label: '一级 1',
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+            children: [{
+              id: 9,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+          children: [{
+            id: 5,
+            label: '二级 2-1'
+          }, {
+            id: 6,
+            label: '二级 2-2'
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+          children: [{
+            id: 7,
+            label: '二级 3-1'
+          }, {
+            id: 8,
+            label: '二级 3-2'
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+        filterText:''
+      };
+    },
+    components:{
+      mapdiv
+    },
+    watch: {
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+    },
+    created() {
+        this.getList();
+    },
+    methods:{
+       getList() {
+            listVideo(this.queryParams).then(response => {
+                console.log(response);
+                this.videoData= response.data
+                 console.log(this.videoData);
+                 for(var index in this.videoData){
+                    var obj = this.videoData[index];
+                    obj.label = obj.areaName;
+                    obj.children = []
+                    for(var i in obj.monitors){
+                         var monitor = obj.monitors[i]
+                         monitor.data = monitor;
+                         monitor.label = monitor.name;
+                         obj.children.push(monitor);
+                    }
+                 }
+                 console.log(this.videoData);
+            });
+       },
+      filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+      },
+      treeChange(){
+          var arry = this.$refs.tree.getCheckedNodes()
+          var pontArry = this.$refs.mapdiv.pointArry;
+          for(var index in arry){
+                var obj = arry[index]
+                if(pontArry.get(obj.id) == null){
+                       this.$refs.mapdiv.pointArry();
+                }
+          }
+      }
+    }
+};
+</script>
+
+<style>
+     .leftTree{
+          float:left;
+          width:34rem;
+     }
+</style>
+