Merge remote-tracking branch 'origin/server_yn_4.8'

# Conflicts:
#	src/main.js
#	src/router/index.js

package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@riophae/vue-treeselect": "0.4.0",
+    "@types/echarts": "^4.9.22",
     "axios": "0.24.0",
     "clipboard": "2.0.8",
     "core-js": "3.25.3",

src/api/system/fence.js

@@ -0,0 +1,77 @@
+import request from "@/utils/request";
+import fence from "@/views/system/fence/index.vue";
+
+/**
+ * 围栏列表
+ * @param data
+ * @returns {*}
+ */
+export function fenceList(data) {
+  return request({
+    url: '/corpor/fenceList',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 新增围栏
+ * @param data
+ * @returns {*}
+ */
+export function fenceAdd(data) {
+  return request({
+    url: '/corpor/fenceAdd',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除围栏
+ * @param fenceId
+ * @returns {*}
+ */
+export function fenceDelete(fenceId) {
+  return request({
+    url: '/corpor/fenceDelete/'+fenceId,
+    method: 'post'
+  })
+}
+
+
+/**
+ * 修改围栏
+ * @param data
+ * @returns {*}
+ */
+export function fenceUpdate(data) {
+  return request({
+    url: '/corpor/fenceUpdate',
+    method: 'post',
+    data
+  })
+}
+
+
+/**
+ * 保存围栏
+ */
+export function saveFence(data) {
+  return request({
+    url: '/corpor/saveFence',
+    method: 'post',
+    data
+  })
+}
+
+
+/**
+ * 标识列表
+ */
+export function identificationList() {
+  return request({
+    url: '/corpor/identificationList',
+    method: 'post'
+  })
+}

src/api/system/record.js

@@ -0,0 +1,9 @@
+import request from "@/utils/request";
+
+export function recordList(data) {
+  return request({
+    url: '/corpor/recordList',
+    method: 'post',
+    data
+  })
+}

src/main.js

@@ -88,10 +88,11 @@ new Vue({
   render: h => h(App)
 })
 
+
 AMapLoader.load({
-  'key':'bf67e6b110fda0875d19dcd528f2ee10',
+  'key': 'fcd296bbfa904e3bf49d7316882a11bf',
-   'version': '2.0',//
+  'version': '2.0',   // 指定要加载的 JSAPI 的版本，缺少时默认为 1.4.15
-    'plugins':['AMap.Scale','AMap.GeoJSON'],
+  'plugins': ['AMap.Scale','AMap.GeoJSON']           // 需要使用的的插件列表，如比例尺'AMap.Scale'等，更多插件请看官方文档
-}).then((AMap)=>{
+}).then((AMap) => {
   Vue.use(AMap)
 })

src/router/index.js

@@ -3,9 +3,6 @@ import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 
-
-
-
 Vue.use(Router)
 
 /**
@@ -30,9 +27,6 @@ Vue.use(Router)
   }
  */
 
-
-
-
 // 公共路由
 export const constantRoutes = [
   {
@@ -79,34 +73,6 @@ export const constantRoutes = [
       }
     ]
   },
-  //   {
-  //   path: '/car',
-  //   component: Layout,
-  //   redirect: 'index',
-  //   children: [
-  //     {
-  //       path: 'index',
-  //       component: () => import('@/views/system/car/index'),
-  //       name: 'Index',
-  //       meta: {title: '车辆管理', icon: 'dashboard', affix: true}
-  //     }
-  //   ]
-  // },
-
-  // {
-  //   path: '/car',
-  //   component: Layout,
-  //   redirect: 'index',
-  //   children: [
-  //     {
-  //       path: 'map',
-  //       component: () => import('@/views/system/car/map'),
-  //       name: 'Index',
-  //       meta: {title: '地图页面！', icon: 'dashboard', affix: true}
-  //     }
-  //   ]
-  // },
-
   {
     path: '/user',
     component: Layout,
@@ -197,9 +163,6 @@ export const dynamicRoutes = [
   }
 ]
 
-
-
-
 // 防止连续点击多次路由报错
 let routerPush = Router.prototype.push;
 let routerReplace = Router.prototype.replace;
@@ -212,12 +175,8 @@ Router.prototype.replace = function push(location) {
   return routerReplace.call(this, location).catch(err => err)
 }
 
-
-
-
 export default new Router({
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({y: 0}),
-  routes: constantRoutes,
+  routes: constantRoutes
-
 })

src/views/system/fence/index.vue

@@ -0,0 +1,518 @@
+<template>
+  <div>
+
+
+    <div v-if="showMapp">
+      <el-form :inline="true" :model="fence" class="demo-form-inline">
+
+        <el-form-item label="围栏名称">
+          <el-input v-model="fence.fenceName" placeholder="模糊查询围栏名称"></el-input>
+        </el-form-item>
+
+
+        <el-form-item label="围栏类型">
+          <el-select v-model="fence.fenceType" placeholder="请选择围栏类型">
+            <el-option label="驶出" value="1">驶出</el-option>
+            <el-option label="驶入" value="2">驶入</el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="围栏状态">
+          <el-select v-model="fence.fenceState" placeholder="请选择围栏状态">
+            <el-option label="正常" value="1">正常</el-option>
+            <el-option label="停用" value="2">停用</el-option>
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+        </el-form-item>
+      </el-form>
+
+
+
+      <el-button type="primary" plain icon="el-icon-plus" @click="fencadd">新增</el-button>
+
+
+
+      <el-table :data="tableData" style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
+
+
+        <el-table-column
+          type="selection"
+          width="55">
+        </el-table-column>
+
+        <el-table-column
+          label="围栏ID"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.fenceId }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="围栏名称"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.fenceName }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="围栏类型"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px" v-if="scope.row.fenceType==1">驶出</span>
+            <span style="margin-left: 10px" v-if="scope.row.fenceType==2">驶入</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="围栏状态"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px" v-if="scope.row.fenceState==1"><el-tag>正常</el-tag></span>
+            <span style="margin-left: 10px" v-if="scope.row.fenceState==2"><el-tag>停用</el-tag></span>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="经纬度信息"
+          width="180">
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.fenceMessage }}</span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="操作">
+          <template slot-scope="scope">
+            <el-link type="primary" icon="el-icon-map-location" @click="handleWdit(scope.row)">编辑围栏</el-link>
+
+            <el-link type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-link>
+
+            <el-link type="primary" icon="el-icon-delete"  @click="handleDelete(scope.row.fenceId)">删除</el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+
+
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="fence.pageNum"
+        :page-sizes="[1, 3, 5, 10]"
+        :page-size="fence.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+
+
+
+
+      <!--    围栏添加-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible">
+
+        <el-form :model="fencesw">
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth">
+            <el-input v-model="fencesw.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth">
+            <el-select v-model="fencesw.fenceType" placeholder="请选择活动区域">
+              <el-option label="驶出" value="1">驶出</el-option>
+              <el-option label="驶入" value="2">驶入</el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="围栏状态" :label-width="formLabelWidth">
+            <template>
+              <el-radio v-model="fencesw.fenceState" label="1">正常</el-radio>
+              <el-radio v-model="fencesw.fenceState" label="2">停用</el-radio>
+            </template>
+          </el-form-item>
+
+          <el-form-item label="标识名称" :label-width="formLabelWidth">
+          <el-checkbox-group v-model="fencesw.identificationId">
+            <el-checkbox
+              v-for="item in ident"
+              :key="item.identificationId"
+              :label="item.identificationId"
+              :value="item.identificationId">
+              {{ item.identificationLog }}
+            </el-checkbox>
+          </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="addAll">新增</el-button>
+        </div>
+      </el-dialog>
+
+
+      <!--    修改电子围栏-->
+      <el-dialog :title="title" :visible.sync="dialogFormVisible1">
+
+        <el-form :model="fences">
+
+          <el-form-item label="围栏ID" :label-width="formLabelWidth1">
+            <el-input v-model="fences.fenceId" autocomplete="off"></el-input>
+          </el-form-item>
+
+          <el-form-item label="围栏名称" :label-width="formLabelWidth1">
+            <el-input v-model="fences.fenceName" autocomplete="off"></el-input>
+          </el-form-item>
+
+
+          <el-form-item label="围栏类型" :label-width="formLabelWidth1">
+            <el-select v-model="fences.fenceType" placeholder="请选择活动区域">
+              <el-option label="驶出" value="1">驶出</el-option>
+              <el-option label="驶入" value="2">驶入</el-option>
+            </el-select>
+          </el-form-item>
+
+
+          <el-form-item label="围栏状态">
+            <el-radio-group v-model="fences.fenceState" :label-width="formLabelWidth1">
+              <el-radio :label="1">正常</el-radio>
+              <el-radio :label="2">停用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+
+
+        </el-form>
+
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="dialogFormVisible = false">取 消</el-button>
+          <el-button type="primary" @click="updateAll">修 改</el-button>
+        </div>
+      </el-dialog>
+
+    </div>
+
+
+    <el-button @click="drawPolygon">绘制围栏</el-button>
+    <el-button @click="saveFenceData">保存围栏</el-button>
+    <el-button @click="cleanFence">清除围栏</el-button>
+    <div id="container" v-if="showMap">
+
+    </div>
+
+
+
+  </div>
+
+</template>
+
+<script>
+import AMapLoader from '@amap/amap-jsapi-loader';
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import {fenceAdd, fenceDelete, fenceList, fenceUpdate, identificationList, saveFence} from "@/api/system/fence";
+import mouseTool from "quill";
+export default {
+  name: "map-view",
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+    this.initAMap();
+    isMapPage:false
+  },
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      tableData:[],
+      fence:{
+        pageNum:1,
+        pageSize:3,
+        fenceName:'',
+      },
+      total:0,
+      dialogFormVisible:false,
+      formLabelWidth:'120px',
+      fencesw:{
+        fenceName:'',
+        fenceType:'',
+        fenceState:'',
+        identificationId:[]
+      },
+      fences:{
+      fenceId:'',
+      fenceName:'',
+      fenceType:'',
+      fenceState:'',
+      identificationId:[],
+      },
+      title:'',
+      dialogFormVisible1:false,
+      formLabelWidth1:'120px',
+      mouseTool:null,
+      map:null,
+      Amap:null,
+
+      //跳转地图页面
+      showMap:false,
+      showMapp:true,
+
+
+      //保存围栏
+      mapRequest:{
+        fenceId:0,
+        jwd: []
+      },
+
+      //标识表
+      ident:[],
+
+
+
+
+
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+
+  unmounted(){
+    this.map?.destroy()
+  },
+  //方法集合",
+  methods: {
+
+    //围栏列表
+    list() {
+      fenceList(this.fence).then(
+        res => {
+          this.tableData = res.data.list
+          this.total = res.data.total
+          console.log(this.tableData);
+          console.log(res)
+        }
+      )
+    },
+
+    // //复选框
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+
+
+    // 搜索框
+    onSubmit() {
+      this.list()
+    },
+
+    //分页查询
+    handleSizeChange(val) {
+      this.fence.pageSize = val
+      this.list()
+    },
+
+    //分页查询
+    handleCurrentChange(val) {
+      this.fence.pageNum = val
+      this.list()
+    },
+
+
+    //新增
+    fencadd() {
+      this.fences = {}
+      this.dialogFormVisible = true
+      this.title = '新增页面'
+    },
+
+
+    addAll() {
+      fenceAdd(this.fencesw).then(
+        res => {
+          this.$message.success(res.msg)
+          this.list()
+        }
+      )
+      this.dialogFormVisible = false
+    },
+
+
+    //删除电子围栏
+    handleDelete(fenceId){
+      fenceDelete(fenceId,'deleted').then(
+        res=>{
+          this.$message.success(res.msg)
+          this.list()
+        }
+      ).catch(error=>{
+        console.error("逻辑删除失败",error);
+        this.$message.success("逻辑删除失败，请重试")
+      })
+    },
+
+    //修改电子围栏
+    handleEdit(obj) {
+      this.dialogFormVisible1 = true
+      this.fences = obj
+      this.title = '修改电子围栏'
+    },
+
+
+    updateAll() {
+      fenceUpdate(this.fences).then(
+        res => {
+          this.$message.success(res.msg)
+          this.list()
+        }
+      )
+      this.dialogFormVisible1=false;
+    },
+
+
+
+    //编辑围栏
+    handleWdit(ojb) {
+      this.showMap=true
+      this.showMapp=false
+      this.mapRequest.fenceId=ojb.fenceId
+      this.initAMap();
+    },
+
+
+    //初始化地图
+    initAMap(){
+
+
+      AMapLoader.load({
+
+        key:"fcd296bbfa904e3bf49d7316882a11bf",
+        version:"2.0",
+        plugins:["AMap.Scale","AMap.MouseTool"],
+      })
+        .then((AMap)=>{
+          this._Amap=AMap;
+          this.map=new AMap.Map("container",{
+            //设置地图容器ID
+            viewMode:"3D",
+            zoom:11,
+            center: [116.397428, 39.90923],
+          });
+          this.mouseTool=new AMap.MouseTool(this.map);
+          this.mouseTool.on('draw', this.drawReady)
+        })
+        .catch((e)=>{
+          console.log(e);
+        });
+    },
+
+    drawPolygon () {
+      this.mouseTool.polygon({
+        strokeColor: "#FF33FF",
+        strokeOpacity: 1,
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillColor: '#1791fc',
+        fillOpacity: 0.4,
+        // 线样式还支持 'dashed'
+        strokeStyle: "solid",
+        // strokeStyle是dashed时有效
+        strokeDasharray: [30,10],
+      })
+    },
+
+    // 在 drawReady 方法中获取绘制的围栏的经纬度信息
+    drawReady(event){
+      console.log(event)
+      console.log(event.obj.getPath())
+      this.mapRequest.jwd=event.obj.getPath();
+      console.info('覆盖物对象绘制完成')
+      // 获取绘制的围栏经纬度信息
+      const path =event.obj.getPath()
+      // 将经纬度信息保存到 scope.row.fenceMessage 中
+      this.tableData.forEach(item=>{
+        if(item.fenceId === event.obj.fenceId){ // 假设 fenceId 是围栏的唯一标识符
+          item.fenceMessage = path.toString();  // 这里使用 toString() 方法将路径转换为字符串形式
+        }
+      })
+    },
+
+
+    //清除围栏
+    cleanFence(){
+      this.mouseTool.close(true)
+    },
+
+    //保存围栏
+    saveFenceData(){
+      console.log(this.mapRequest.jwd)
+      saveFence(this.mapRequest).then(response=>{
+        this.$modal.msgSuccess("保存成功")
+      })
+      this.showMap=false
+      this.showMapp=true
+    },
+
+
+    //标识列表
+    identificationList(){
+      identificationList().then(res=>{
+        this.ident=res
+        console.log(this.ident)
+      })
+    },
+
+
+
+
+  },
+
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.list()
+    this.identificationList();
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style lang="scss" scoped>
+.dashboard{
+  &-container{
+    margin: 30px;
+  }
+  &-text{
+    font-size:30px;
+    line-height:46px;
+  }
+}
+#container{
+
+  padding:0px;
+  margin:0px;
+  width:100%;
+  height:800px;
+}
+</style>

src/views/system/record/index.vue

@@ -0,0 +1,222 @@
+<template>
+  <div>
+
+    <h1>车辆记录管理</h1>
+
+
+
+<!--    条件查询-->
+    <el-form :inline="true" :model="record" class="demo-form-inline">
+
+      <el-form-item label="VIN">
+        <el-input v-model="record.recordName" placeholder="审批人"></el-input>
+      </el-form-item>
+
+      <el-form-item label="开始时间">
+        <el-date-picker
+          v-model="record.recordDateStart"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="结束时间">
+        <el-date-picker
+          v-model="record.recordDateEnd"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          type="datetime"
+          placeholder="选择日期时间">
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
+        <el-button @click="reset" icon="el-icon-refresh-left">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
+
+<!--    记录车辆列表-->
+    <el-table :data="tableData" style="width: 100%">
+
+      <el-table-column
+        label="车辆记录ID"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordId }}</span>
+        </template>
+      </el-table-column>
+
+
+
+      <el-table-column
+        label="VIN"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordName }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="开始时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordDateStart }}</span>
+        </template>
+      </el-table-column>
+
+      <el-table-column
+        label="结束时间"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.recordDateEnd }}</span>
+        </template>
+      </el-table-column>
+
+
+
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-link type="primary" icon="el-icon-map-location" @click="historicaltrack">历史轨迹</el-link>
+          <el-link type="primary" icon="el-icon-delete" @click="del">删除</el-link>
+        </template>
+      </el-table-column>
+    </el-table>
+
+
+
+<!--    分页查询-->
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="record.pageNum"
+      :page-sizes="[1, 3, 10, 20]"
+      :page-size="record.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+
+  </div>
+</template>
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import axios from "axios";
+import {recordList} from "@/api/system/record";
+import {resetForm} from "@/utils/muyu";
+  export default {
+    //import引入的组件需要注入到对象中才能使用"
+    components: {axios},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+
+        tableData:[],
+        record:{
+          recordName:'',
+          recordDateStart:'',
+          recordDateEnd:'',
+          pageNum:1,
+          pageSize:5
+        },
+        total:0,
+
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      resetForm,
+
+      /**
+       * 车辆记录列表
+       */
+      list(){
+        recordList(this.record).then(
+          res=>{
+            this.tableData=res.data.list
+            this.total=res.data.total
+            console.log(this.tableData)
+            console.log(res)
+          }
+        )
+      },
+
+
+      /**
+       * 条件查询
+       */
+      onSubmit(){
+        this.list()
+      },
+
+      /**
+       * 条件重置
+       */
+      reset(){
+        //重置表单
+        this.record.recordName=''
+        this.record.recordDateStart=''
+        this.record.recordDateEnd=''
+        this.list()
+      },
+
+      /**
+       * 分页查询
+       */
+      handleSizeChange(val){
+        this.record.pageSize=val
+        this.list()
+      },
+      handleCurrentChange(val){
+        this.record.pageNum=val
+        this.list()
+      },
+
+
+      /**
+       * 历史轨迹
+       */
+
+
+
+      /**
+       * 删除
+       */
+
+
+
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.list()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>