修改

src/api/data/qdtl.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 查询区域列表
+export function areaList(query) {
+  return request({
+    url: '/qdtl/area/list',
+    method: 'get',
+    params: query
+  })
+}

src/assets/styles/ruoyi.scss

@@ -117,6 +117,7 @@
 .pagination-container .el-pagination {
 	right: 0;
 	position: absolute;
+	color:#3DFFEA 
 }
 
 @media ( max-width : 768px) {
@@ -271,3 +272,108 @@
 	position: relative;
 	float: right;
 }
+
+.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;
+}
+
+.el-dialog__header{
+	 background: #026F70;
+	 color:#ffffff;
+	 font-size: 1.6rem;
+	 height:4.8rem;
+	 padding-top:1.5rem;
+	 padding-left:2.3rem
+}
+
+.el-dialog__title{
+	 color:#ffffff;
+	 font-size: 1.6rem
+}
+
+.el-dialog__body{
+	background: #041824 84%
+}
+
+.el-dialog__footer{
+	background: #041824 84%
+}
+
+.el-input__inner{
+   background: #041824 84%
+}
+
+.el-textarea__inner{
+	background: #041824 84%
+}
+
+.el-form-item__label{
+	 color:#C5D0D4
+}
+
+.el-icon-arrow-up:before{
+	 color:#23FFFC
+}

src/assets/styles/variables.scss

@@ -9,9 +9,9 @@ $yellow:#FEC171;
 $panGreen: #30B08F;
 
 // 默认菜单主题风格
-$base-menu-color:#bfcbd9;
+$base-menu-color:#ffffff;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-background:#04283C;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);
@@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
 $base-sub-menu-hover:#001528;
 */
 
-$base-sidebar-width: 200px;
+$base-sidebar-width: 32.2rem;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/components/Pagination/index.vue

@@ -5,7 +5,6 @@
       :current-page.sync="currentPage"
       :page-size.sync="pageSize"
       :layout="layout"
-      :page-sizes="pageSizes"
       :pager-count="pagerCount"
       :total="total"
       v-bind="$attrs"
@@ -98,10 +97,12 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
   padding: 32px 16px;
 }
 .pagination-container.hidden {
   display: none;
 }
 </style>
+
+<style>
+</style>

src/components/map/index.vue

@@ -23,36 +23,50 @@ 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} from "ol/source";
-import {Tile} from "ol/layer";
+import {XYZ, Vector as VectorSource} from "ol/source";
+import {Tile,Vector as VectorLayer} 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 {get} from 'ol/proj';
+import { Feature } from "ol";
 
 
 
 // import {Vector as SourceVec} from "ol/source";
 // import {Feature} from "ol";
-// import {LineString, Point} from "ol/geom";
+import {LineString, Point} from "ol/geom";
 // import {Icon, Stroke, Style} from "ol/style";
 // import {Vector as LayerVec} from "ol/layer";
 
 
 export default {
   props: {
-
+      point:String
   },
   data() {
     return {
       map: null,
+      typeSelect:'Point',
+      source:null,
+      draw:null,
+      snap:null,
+      locations:[]
     };
   },
   mounted() {
+  //  console.log(this.point)
+    var point =JSON.parse(this.point);
 
     this.initdev();
+    this.addpoint(point);
 
 
 
     this.map.on("click", function (e) {
 
-
     });
 
 
@@ -159,12 +173,34 @@ export default {
       url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
     })
   })
+
+this.source = new VectorSource();
+const vector = new VectorLayer({
+  source: this.source,
+  style: new Style({
+    fill: new Fill({
+      color: 'rgba(255, 255, 255, 0.2)',
+    }),
+    stroke: new Stroke({
+      color: '#ffcc33',
+      width: 2,
+    }),
+    image: new CircleStyle({
+      radius: 7,
+      fill: new Fill({
+        color: '#ffcc33',
+      }),
+    }),
+  }),
+});
+
   // 创建地图
   const map = new Map({
     target: 'map',
     layers: [ // 图层放置（类似有卫星图层，街道图层等）
       satellite,
-      street
+      street,
+      vector 
     ],
     view: new View({
       zoom: 11, // 当前缩放
@@ -176,10 +212,16 @@ export default {
   })
 
   street.setVisible(false)
-    satellite.setVisible(true)
+  satellite.setVisible(true)
+
+    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.addInteractions();
+      var that = this;
+  
       //  map.getView().setCenter(
       //     [118.642876, 31.970445]
       // );
@@ -188,7 +230,68 @@ export default {
       // ], 0)[0]);
       // map.getView().setZoom(13);
     },
-
+    addInteractions() {
+      var that = this
+         let draw = new Draw({
+          source: this.source,
+          type: this.typeSelect,
+        });
+        console.log(draw);
+        draw.on('drawend',that.getLocation,this);
+        this.draw = draw;
+        this.map.addInteraction(draw);
+        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;
+      },
+      changeAddInteractions() {
+         this.map.removeInteraction(this.draw);
+         this.map.removeInteraction(this.snap);
+         this.addInteractions();
+      },
+      addPointArry(){
+        console.log(1111);
+      },
+      addpoint(addrArry) {
+        console.log(addrArry);
+        //  addpoint: function(addrArry, data, img, type) {
+            // var lnglat = this.transpoints(addrArry, 0)[0];
+
+            let tamarker = new Feature({
+                tadata: {
+                    sectionId: "point",
+                    towerNumber: 22,
+                    // data: data,
+                    // type: type
+                }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+                geometry: new Point(addrArry) //这里是点坐标的位置，这里要注意fromLonLat
+            });
+            console.log(tamarker);
+            tamarker.setStyle(
+                new Style({
+                    image: new Icon({
+                        color: "#eee",
+                        crossOrigin: "anonymous",
+                        src: require("../../assets/images/组件1.png") //本地的样式
+                    })
+                })
+            ); //这里是样式
+            var markerta = new VectorLayer({
+                source: new VectorSource({
+                    features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+                })
+            });
+            console.log(markerta);
+            this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
+        }
   }
 };
 </script>

src/components/zhgl/index.vue

@@ -0,0 +1,58 @@
+<template>
+ <div style="height:100%;width:100%">
+ <div class="left-content">
+       <sidebar class="sidebar-container" style="margin-top:5rem"/>
+ </div>
+ <div class='right-content'>   
+     <div :class="{hasTagsView:needTagsView}" class="main-container">
+      <div :class="{'fixed-header':fixedHeader}">
+        <!-- <navbar /> -->
+        <!-- <tags-view v-if="needTagsView" /> -->
+      </div>
+      <app-main />
+      <right-panel>
+        <settings />
+      </right-panel>
+    </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from '@/layout/components'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'xjTable',
+  components: {
+    'sidebar':Sidebar,
+    AppMain
+  },
+  computed: {
+    ...mapState({
+      sideTheme: state => state.settings.sideTheme,
+      sidebar: state => state.app.sidebar,
+    }),
+  },
+  methods: {
+   
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+     .left-content{
+          
+          // height:100%;
+          // width:33.2rem;
+          // background: #04283C;
+          float:left;
+     }
+
+     .right-content{
+          height:100%;
+          width:155.8rem;
+          float: left;
+     }
+  
+</style>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,5 @@
 <template>
     <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-        <logo v-if="showLogo" :collapse="isCollapse" />
         <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
             <el-menu
                 :default-active="activeMenu"
@@ -8,11 +7,11 @@
                 :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                 :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                 :unique-opened="true"
-                :active-text-color="settings.theme"
+                active-text-color="#00F1DE"
                 :collapse-transition="false"
                 mode="vertical"
             >
-                <sidebar-item
+                <SidebarItem
                     v-for="(route, index) in sidebarRouters"
                     :key="route.path  + index"
                     :item="route"
@@ -55,3 +54,40 @@ export default {
     }
 };
 </script>
+
+<style>
+.el-submenu__title{
+     background: linear-gradient(
+95deg, rgba(0, 255, 216, 0.26), rgba(0, 255, 216, 0.02));
+    /* opacity: 0.26; */
+}
+
+.is-opened{
+ background: linear-gradient(
+95deg, #00FFD8, rgba(0, 255, 216, 0.02));
+    opacity: 0.86;
+}
+
+.el-submenu span{
+    opacity:1
+}
+
+
+/* .el-submenu::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+95deg, #00FFD8, rgba(0, 255, 216, 0.02));
+    opacity: 0.86;
+} */
+
+
+/* li.el-submenu{
+        position: relative;
+} */
+</style>

src/layout/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> -->
     <sidebar class="sidebar-container"/>
     <div :class="{hasTagsView:needTagsView}" class="main-container">
       <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
-        <tags-view v-if="needTagsView" />
+        <!-- <navbar /> -->
+        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
       <app-main />
       <right-panel>

src/views/qdtl/area/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+     <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>
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="6.8rem">
       <el-form-item label="编号" prop="areaCode">
         <el-input
           v-model="queryParams.areaCode"
@@ -38,20 +39,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:area: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:area: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:area:remove']"
@@ -71,7 +72,10 @@
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="areaList" @selection-change="handleSelectionChange">
+    <el-table v-loading="loading" :data="areaList" @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="areaCode" />
       <el-table-column label="名称" align="center" prop="areaName" />
@@ -105,48 +109,57 @@
     </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"
     />
 
     <!-- 添加或修改区域管理对话框 -->
-    <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="areaCode">
-          <el-input v-model="form.areaCode" placeholder="请输入编号" />
+    <el-dialog :title="addtitle" :visible.sync="open" width="150rem" append-to-body @open="openMap">
+      <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="areaCode" style="margin-top:2rem">
+          <el-input v-model="form.areaCode" placeholder="请输入编号" style="width:17rem"/>
         </el-form-item>
-        <el-form-item label="名称" prop="areaName">
-          <el-input v-model="form.areaName" placeholder="请输入名称" />
+        <el-form-item label="区域名称" prop="areaName" style="margin-top:6rem">
+          <el-input v-model="form.areaName" placeholder="请输入名称" style="width:17rem"/>
         </el-form-item>
-        <el-form-item label="区域类型" prop="areaType">
-          <el-select v-model="form.areaType" placeholder="请选择区域类型">
+        <el-form-item label="区域类型" prop="areaType" style="margin-top:6rem">
+          <el-select v-model="form.areaType" placeholder="请选择区域类型" style="width:17rem" @change="areaTypeChange">
             <el-option
               v-for="dict in dict.type.tl_area_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="detail">
-          <el-input v-model="form.detail" type="textarea" placeholder="请输入内容" />
+        <el-form-item label="区域描述" prop="detail" style="margin-top:6rem">
+          <el-input v-model="form.detail" type="textarea" placeholder="请输入内容" style="width:17rem"/>
         </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        <el-form-item label="备注" prop="remark" style="margin-top:6rem">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" style="width:17rem"/>
         </el-form-item>
-        <el-form-item label="电子围栏" prop="fence">
-          <el-input v-model="form.fence" type="textarea" placeholder="请输入内容" />
+        <el-form-item label="电子围栏" prop="fence" style="margin-top:6rem">
+          <el-input v-model="form.fence" type="textarea" placeholder="请输入内容" style="width:17rem"/>
         </el-form-item>
-        <el-form-item label="经纬度" prop="lnglat">
-          <el-input v-model="form.lnglat" placeholder="请输入经纬度" />
+        <el-form-item label="经纬度" prop="lnglat" style="margin-top:6rem">
+          <el-input v-model="form.lnglat" placeholder="请输入经纬度" style="width:17rem"/>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
+      </div>
+      <div style="float:left;height:60rem;width:100rem;margin-left:10rem;margin-top:5rem">
+           <mapdiv ref='mapv' :point='pointArry'></mapdiv>
+      </div>
+      </div>
+      <div slot="footer" class="dialog-footer" style="text-align:center">
         <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
   </div>
@@ -154,6 +167,7 @@
 
 <script>
 import { listArea, getArea, delArea, addArea, updateArea } from "@/api/qdtl/area";
+import mapdiv from "@/components/map/index.vue"
 
 export default {
   name: "Area",
@@ -175,9 +189,13 @@ export default {
       // 区域管理表格数据
       areaList: [],
       // 弹出层标题
-      title: "",
+      title: "区域管理",
       // 是否显示弹出层
       open: false,
+      //分页器类型
+      layout:"total, prev, pager, next,jumper",
+
+      addtitle:"新增区域",
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -186,6 +204,7 @@ export default {
         areaName: null,
         areaType: null,
       },
+      pointArry:null,
       // 表单参数
       form: {},
       // 表单校验
@@ -202,10 +221,43 @@ export default {
       }
     };
   },
+    components:{
+      mapdiv
+    },
   created() {
     this.getList();
   },
   methods: {
+    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)
+//     },
+    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();
+      } 
+            // this.$refs.mapv.typeSelect="";
+    },
+    tableRowClassName({ row, rowIndex }) {
+        if ((rowIndex + 1) % 2 === 0) {
+             return "warning-row"; 
+        } else {
+             return "success-row";
+        }
+    },
     /** 查询区域管理列表 */
     getList() {
       this.loading = true;
@@ -260,16 +312,17 @@ export default {
     handleAdd() {
       this.reset();
       this.open = true;
-      this.title = "添加区域管理";
+      this.addtitle = "新增区域";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
+      const that = this;
       getArea(id).then(response => {
         this.form = response.data;
         this.open = true;
-        this.title = "修改区域管理";
+        this.addtitle = "修改区域管理";
       });
     },
     /** 提交按钮 */
@@ -283,6 +336,16 @@ export default {
               this.getList();
             });
           } else {
+            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;
+            }
+            console.log(this.form.fence);
+            console.log(this.form.lnglat);
             addArea(this.form).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
@@ -311,3 +374,15 @@ export default {
   }
 };
 </script>
+
+<style>
+ .title{
+          background: url("~@/assets/images/title2@2x.png") no-repeat;
+          background-size: 100% 100%;
+          width:100%;
+          height:3.9rem
+       }
+
+
+</style>
+