添加优化后的地图页面，完全一处百度地图相关的api

web_src/src/components/dialog/channelMapInfobox.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="channelMapInfobox" style="display: none">
+    <div >
+      <el-descriptions class="margin-top" title="channel.name" :column="4" direction="vertical">
+        <el-descriptions-item label="生产厂商">{{channel.manufacture}}</el-descriptions-item>
+        <el-descriptions-item label="型号">{{channel.model}}</el-descriptions-item>
+        <el-descriptions-item label="设备归属" >{{channel.owner}}</el-descriptions-item>
+        <el-descriptions-item label="行政区域" >{{channel.civilCode}}</el-descriptions-item>
+        <el-descriptions-item label="安装地址" >{{channel.address}}</el-descriptions-item>
+        <el-descriptions-item label="云台类型" >{{channel.ptztypeText}}</el-descriptions-item>
+        <el-descriptions-item label="经纬度" >{{channel.longitude}},{{channel.latitude}}</el-descriptions-item>
+        <el-descriptions-item label="状态">
+          <el-tag size="small" v-if="channel.status === 1">在线</el-tag>
+          <el-tag size="small" v-if="channel.status === 0">离线</el-tag>
+        </el-descriptions-item>
+      </el-descriptions>
+    </div>
+
+    <devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
+  </div>
+</template>
+
+<script>
+import devicePlayer from '../dialog/devicePlayer.vue'
+
+export default {
+  name: "channelMapInfobox",
+  props: ['channel'],
+  computed: {devicePlayer},
+  created() {},
+  data() {
+    return {
+      showDialog: false,
+      isLoging: false
+    };
+  },
+  methods: {
+
+    play: function (){
+      let deviceId = this.channel.deviceId;
+      this.isLoging = true;
+      let channelId = this.channel.channelId;
+      console.log("通知设备推流1：" + deviceId + " : " + channelId);
+      let that = this;
+      this.$axios({
+        method: 'get',
+        url: '/api/play/start/' + deviceId + '/' + channelId
+      }).then(function (res) {
+        that.isLoging = false;
+        if (res.data.code === 0) {
+          that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
+            streamInfo: res.data.data,
+            hasAudio: this.channel.hasAudio
+          });
+        } else {
+          that.$message.error(res.data.msg);
+        }
+      }).catch(function (e) {
+      });
+    },
+    close: function () {
+    },
+  },
+};
+</script>

web_src/src/components/dialog/queryTrace.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="queryTrace" >
+    <el-dialog
+      title="查询轨迹"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div v-loading="isLoging">
+        <el-date-picker v-model="searchFrom" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
+        <el-date-picker v-model="searchTo" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00" size="mini" style="width: 11rem;" align="right" :picker-options="pickerOptions"></el-date-picker>
+        <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">查询</el-button>
+      </div>
+
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import DeviceService from '../service/DeviceService'
+
+export default {
+  name: "deviceEdit",
+  props: [],
+  computed: {},
+  created() {},
+  data() {
+    return {
+      deviceService: new DeviceService(),
+      pickerOptions: {
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            picker.$emit('pick', new Date());
+          }
+        }, {
+          text: '昨天',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24);
+            picker.$emit('pick', date);
+          }
+        }, {
+          text: '一周前',
+          onClick(picker) {
+            const date = new Date();
+            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', date);
+          }
+        }]
+      },
+      searchFrom: null,
+      searchTo: null,
+      listChangeCallback: null,
+      showDialog: false,
+      isLoging: false,
+      channel: null,
+      callback: null,
+    };
+  },
+  methods: {
+    openDialog: function (channel, callback) {
+      console.log(channel)
+      this.showDialog = true;
+      this.callback = callback;
+      this.channel = channel;
+    },
+
+    onSubmit: function () {
+      console.log("onSubmit");
+      this.isLoging = true;
+      this.$axios.get(`/api/position/history/${this.channel.deviceId}/${this.channel.channelId}`, {
+      }).then((res)=> {
+        this.isLoging = false;
+        if (typeof this.callback == "function") {
+          if (res.data.code == 0) {
+            this.callback(res.data.data)
+            this.close()
+          }else {
+            this.$message.error(res.data.msg);
+          }
+
+        }
+      }).catch(function (error) {
+          this.isLoging = false;
+          console.error(error);
+        })
+    },
+    close: function () {
+      this.showDialog = false;
+      this.isLoging = false;
+      this.callback = null;
+      this.channel = null;
+    },
+  },
+};
+</script>