x

docker/nginx/web/.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = ''
+VUE_APP_BASE_API = 'http://114.67.89.4:9090'
 

docker/nginx/web/build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./src/main/resources/static', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

docker/nginx/web/public/static/js/config.js

@@ -1,3 +1,4 @@
+
 window.baseUrl = "http://114.67.89.4:9090"
 
 // map组件全局参数, 注释此内容可以关闭地图功能

docker/nginx/web/src/api/device.js

@@ -5,7 +5,10 @@ import request from '@/utils/request'
 export function queryDeviceSyncStatus(deviceId) {
   return request({
     method: 'get',
-    url: `/api/device/query/${deviceId}/sync_status`
+    url: `/api/device/query/sync_status`,
+    params: {
+      deviceId: deviceId
+    }
   })
 }
 

docker/nginx/web/src/api/group.js

@@ -61,9 +61,3 @@ export function queryTree(params) {
     }
   })
 }
-export function sync() {
-  return request({
-    method: 'get',
-    url: `/api/group/sync`,
-  })
-}

docker/nginx/web/src/store/modules/group.js

@@ -64,16 +64,6 @@ const actions = {
         reject(error)
       })
     })
-  },
-  sync({ commit }) {
-    return new Promise((resolve, reject) => {
-      sync().then(response => {
-        const { data } = response
-        resolve(data)
-      }).catch(error => {
-        reject(error)
-      })
-    })
   }
 }
 

docker/nginx/web/src/store/modules/play.js

@@ -11,7 +11,7 @@ const actions = {
       })
     })
   },
-  stop({ commit }, [deviceId, channelId]) {
+  stop({ commit }, { deviceId, channelId }) {
     return new Promise((resolve, reject) => {
       stop(deviceId, channelId).then(response => {
         const { data } = response

docker/nginx/web/src/utils/request.js

@@ -46,10 +46,7 @@ service.interceptors.response.use(
     }
     const res = response.data
     if (res.code && res.code !== 0) {
-      Message.error({
+      throw res.msg
-        message: res.msg,
-        duration: 5 * 1000
-      })
     } else {
       return res
     }

docker/nginx/web/src/views/channel/index.vue

@@ -316,7 +316,15 @@ export default {
           setTimeout(() => {
             this.initData()
           }, 1000)
-        }).finally(() => {
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
+        .finally(() => {
           itemData.playLoading = false
         })
     },

docker/nginx/web/src/views/channel/region/index.vue

@@ -116,7 +116,7 @@
 </template>
 
 <script>
-import RegionTree from '../../common/RegionTree.vue'
+import RegionTree from '../..//common/RegionTree.vue'
 import GbChannelSelect from '../../dialog/GbChannelSelect.vue'
 import UnusualRegionChannelSelect from '../../dialog/UnusualRegionChannelSelect.vue'
 

docker/nginx/web/src/views/common/CommonChannelEdit.vue

@@ -30,11 +30,14 @@
         </el-form-item>
 
         <el-form-item label="行政区域">
-          <el-input v-model="form.gbCivilCode" placeholder="请输入行政区域">
+          <el-input v-model="form.gbCivilCode" placeholder="请输入行政区域" @change="getRegionPaths">
             <template v-slot:append>
               <el-button @click="chooseCivilCode()">选择</el-button>
             </template>
           </el-input>
+          <el-breadcrumb v-if="regionPath.length > 0" separator="/" style="display: block; margin-top: 8px; font-size: 14px;">
+            <el-breadcrumb-item v-for="key in regionPath" :key="key">{{ key }}</el-breadcrumb-item>
+          </el-breadcrumb>
         </el-form-item>
 
         <el-form-item label="安装地址">
@@ -246,11 +249,11 @@
 </template>
 
 <script>
-import channelCode from '../dialog/channelCode'
+import channelCode from './../dialog/channelCode'
 import ChooseCivilCode from '../dialog/chooseCivilCode.vue'
 import ChooseGroup from '../dialog/chooseGroup.vue'
 import diff from '../../utils/diff'
-import ResetChannel from '../dialog/resetChannel.vue'
+import ResetChannel from './../dialog/resetChannel.vue'
 
 export default {
   name: 'CommonChannelEdit',
@@ -274,6 +277,7 @@ export default {
       loading: false,
       modelList: [],
       parentPath: [],
+      regionPath: [],
       form: {}
     }
   },
@@ -329,7 +333,15 @@ export default {
                   message: '保存成功'
                 })
                 this.$emit('submitSuccess')
-              }).finally(() => {
+              })
+              .catch((error) => {
+                this.$message({
+                  showClose: true,
+                  message: error,
+                  type: 'error'
+                })
+              })
+              .finally(() => {
               this.loading = false
             })
           } else {
@@ -342,7 +354,15 @@ export default {
                 if (this.saveSuccess) {
                   this.saveSuccess()
                 }
-              }).finally(() => {
+              })
+              .catch((error) => {
+                this.$message({
+                  showClose: true,
+                  message: error,
+                  type: 'error'
+                })
+              })
+              .finally(() => {
               this.loading = false
             })
           }
@@ -367,9 +387,15 @@ export default {
               message: '重置成功 已保存'
             })
             this.getCommonChannel(this.form.gbId)
-          }).catch((error) => {
+          })
-            console.error(error)
+          .catch((error) => {
-          }).finally(() => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
+          .finally(() => {
             this.loading = false
           })
       }).catch(() => {
@@ -387,6 +413,14 @@ export default {
           this.form = data
           this.$set(this.form, 'enableBroadcastForBool', this.form.enableBroadcast === 1)
           this.getPaths()
+          this.getRegionPaths()
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
         .finally(() => {
           this.loading = false
@@ -400,6 +434,7 @@ export default {
     chooseCivilCode: function() {
       this.$refs.chooseCivilCode.openDialog(code => {
         this.form.gbCivilCode = code
+        this.getRegionPaths()
       })
     },
     chooseGroup: function() {
@@ -431,6 +466,20 @@ export default {
             this.parentPath = path
           })
       }
+    },
+    getRegionPaths: function() {
+      this.regionPath = []
+      if (this.form.gbCivilCode) {
+        this.$store.dispatch('region/queryPath', this.form.gbCivilCode)
+          .then(data => {
+            console.log(data)
+            const path = []
+            for (let i = 0; i < data.length; i++) {
+              path.push(data[i].name)
+            }
+            this.regionPath = path
+          })
+      }
     }
   }
 }

docker/nginx/web/src/views/common/GroupTree.vue

@@ -16,9 +16,8 @@
         type="info"
         style="text-align: left"
       />
-      <div v-if="edit" style="font-size: 14px;position: absolute;left: 270px;z-index: 100;" >
+      <div v-if="edit" style="margin-top: 10px; font-size: 14px;position: absolute;left: 270px;z-index: 100;" >
         显示编号： <el-checkbox v-model="showCode" />
-        <el-button type="text" style="margin-left: 10px" :loading="groupSyncLoading" @click="groupSync">同步</el-button>
       </div>
 
       <vue-easy-tree
@@ -122,8 +121,8 @@
 
 <script>
 import VueEasyTree from '@wchbrad/vue-easy-tree'
-import groupEdit from '../dialog/groupEdit'
+import groupEdit from './../dialog/groupEdit'
-import gbDeviceSelect from '../dialog/GbDeviceSelect'
+import gbDeviceSelect from './../dialog/GbDeviceSelect'
 import GbChannelSelect from '../dialog/GbChannelSelect.vue'
 
 export default {
@@ -149,8 +148,7 @@ export default {
       count: this.defaultCount | 15,
       total: 0,
       groupList: [],
-      channelList: [],
+      channelList: []
-      groupSyncLoading: false
     }
   },
   created() {
@@ -375,6 +373,13 @@ export default {
           node.parent.expand()
           this.$emit('onChannelChange', node.data.deviceId)
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
     },
     addChannelFormDevice: function(id, node) {
       this.$refs.gbDeviceSelect.openDialog((rows) => {
@@ -395,7 +400,15 @@ export default {
             this.$emit('onChannelChange', node.data.deviceId)
             node.loaded = false
             node.expand()
-          }).finally(() => {
+          })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
+          .finally(() => {
             this.loading = false
           })
       })
@@ -415,7 +428,15 @@ export default {
             this.$emit('onChannelChange', node.data.deviceId)
             node.loaded = false
             node.expand()
-          }).finally(() => {
+          })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
+          .finally(() => {
             this.loading = false
           })
       })
@@ -507,20 +528,6 @@ export default {
         id: data.gbId
       })
     },
-    groupSync: function() {
-      this.groupSyncLoading = true
-      this.$store.dispatch('group/sync').then(data => {
-        this.$message.success({
-          showClose: true,
-          message: '同步消息已经发送, 3秒后自动刷新'
-        })
-        setTimeout(() => {
-          this.refresh('')
-        }, 3000)
-      }).finally(() => {
-        this.groupSyncLoading = false
-      })
-    },
     contextmenuEventHandlerForLi(event, data) {
       console.log(data)
       const allMenuItem = []

docker/nginx/web/src/views/common/MapComponent.vue

@@ -73,6 +73,13 @@ export default {
           }
           this.initMap()
       })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
     },
     initMap(){
       let center = fromLonLat([116.41020, 39.915119])
@@ -97,8 +104,6 @@ export default {
             url: this.mapTileList[this.mapTileIndex].tilesUrl
           })
         })
-        console.log(4444)
-        console.log(this.mapTileList[this.mapTileIndex].tilesUrl)
       } else {
         tileLayer = new Tile({
           preload: 4,
@@ -150,11 +155,12 @@ export default {
       })
     },
     addVectorTileLayer(tileUrl, clickEvent, errorEvent){
+      tileUrl += `?geoCoordSys=${this.mapTileList[this.mapTileIndex].coordinateSystem}&accessToken=${this.$store.getters.token}`
       let source = new VectorTileSource({
         format: new MVT(),
+        tileSize: 256,
         url: tileUrl
       })
-
       let layer = new VectorTileLayer({
         source: source,
         style: function(feature) {
@@ -624,6 +630,7 @@ export default {
       let mapTileConfig = this.mapTileList[this.mapTileIndex]
       this.mapTileIndex = index
       window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
+      tileLayer.getSource().clear()
       tileLayer.getSource().setUrl(this.mapTileList[index].tilesUrl)
       if (mapTileConfig.coordinateSystem !== this.mapTileList[this.mapTileIndex].coordinateSystem) {
         // 发送通知

docker/nginx/web/src/views/common/RegionTree.vue

@@ -116,10 +116,9 @@
 
 <script>
 import VueEasyTree from '@wchbrad/vue-easy-tree'
-import regionEdit from '../dialog/regionEdit'
+import regionEdit from './../dialog/regionEdit'
-import gbDeviceSelect from '../dialog/GbDeviceSelect'
+import gbDeviceSelect from './../dialog/GbDeviceSelect'
 import GbChannelSelect from '../dialog/GbChannelSelect.vue'
-import chooseCivilCode from '@/views/dialog/chooseCivilCode.vue'
 
 export default {
   name: 'DeviceTree',
@@ -199,6 +198,7 @@ export default {
       })
     },
     loadNode: function(node, resolve) {
+      console.log(22222)
       if (node.level === 0) {
         resolve([{
           treeId: '',
@@ -364,8 +364,13 @@ export default {
           this.$emit('onChannelChange', node.data.deviceId)
           node.parent.loaded = false
           node.parent.expand()
-        }).catch(function(error) {
+        })
-          console.log(error)
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
     },
     addChannelFormDevice: function(id, node) {

docker/nginx/web/src/views/common/channelPlayer/index.vue

@@ -602,6 +602,13 @@ export default {
               this.startBroadcast(streamInfo.rtc)
             }
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       } else if (this.broadcastStatus === 1) {
         this.broadcastStatus = -1
         this.broadcastRtc.close()
@@ -690,6 +697,13 @@ export default {
       this.broadcastRtc.close()
       this.broadcastStatus = -1
       this.$store.dispatch('play/broadcastStop', [this.channelId])
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
     }
   }
 }

docker/nginx/web/src/views/device/channel/index.vue

@@ -422,7 +422,10 @@ export default {
       })
     },
     stopDevicePush: function(itemData) {
-      this.$store.dispatch('play/stop', [this.deviceId, itemData.deviceId]).then(data => {
+      this.$store.dispatch('play/stop', {
+        deviceId: this.deviceId,
+        channelId: itemData.deviceId
+      }).then(data => {
         this.initData()
       }).catch((error) => {
         if (error.response.status === 402) { // 已经停止过

docker/nginx/web/src/views/device/list.vue

@@ -236,7 +236,13 @@ export default {
       }).then((data) => {
         this.total = data.total
         this.deviceList = data.list
-      }).finally(() => {
+      }).catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        }).finally(() => {
         this.getDeviceListLoading = false
       })
     },
@@ -256,6 +262,13 @@ export default {
           .then((data) => {
             this.getDeviceList()
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       })
     },
     showChannelList: function(row) {
@@ -284,7 +297,15 @@ export default {
           this.$refs.syncChannelProgress.openDialog(itemData.deviceId, () => {
             this.getDeviceList()
           })
-        }).finally(() => {
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
+        .finally(() => {
           this.getDeviceList()
         })
     },

docker/nginx/web/src/views/dialog/channelMapInfobox.vue

@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import devicePlayer from './devicePlayer.vue'
+import devicePlayer from '../dialog/devicePlayer.vue'
 
 export default {
   name: "channelMapInfobox",

docker/nginx/web/src/views/dialog/shareChannelAdd.vue

@@ -45,16 +45,16 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button v-if="hasShare !=='true'" size="mini" type="primary" @click="add()">
+          <el-button v-if="hasShare !=='true'" size="mini" type="primary" :loading="addLoading" @click="add()">
             添加
           </el-button>
-          <el-button v-if="hasShare ==='true'" size="mini" type="danger" @click="remove()">
+          <el-button v-if="hasShare ==='true'" size="mini" type="danger" :loading="removeLoading" @click="remove()">
             移除
           </el-button>
-          <el-button v-if="hasShare !=='true'" size="mini" @click="addByDevice()">按设备添加</el-button>
+          <el-button v-if="hasShare !=='true'" size="mini" :loading="addByDeviceLoading" @click="addByDevice()">按设备添加</el-button>
-          <el-button v-if="hasShare ==='true'" size="mini" @click="removeByDevice()">按设备移除</el-button>
+          <el-button v-if="hasShare ==='true'" size="mini" :loading="removeByDeviceLoading" @click="removeByDevice()">按设备移除</el-button>
-          <el-button v-if="hasShare !=='true'" size="mini" @click="addAll()">全部添加</el-button>
+          <el-button v-if="hasShare !=='true'" size="mini" :loading="addAllLoading" @click="addAll()">全部添加</el-button>
-          <el-button v-if="hasShare ==='true'" size="mini" @click="removeAll()">全部移除</el-button>
+          <el-button v-if="hasShare ==='true'" size="mini" :loading="removeAllLoading" @click="removeAll()">全部移除</el-button>
         </el-form-item>
         <el-form-item style="float: right;">
           <el-button icon="el-icon-refresh-right" circle @click="getChannelList()" />
@@ -144,7 +144,13 @@ export default {
       total: 0,
       loading: false,
       loadSnap: {},
-      multipleSelection: []
+      multipleSelection: [],
+      addLoading: false,
+      addByDeviceLoading: false,
+      addAllLoading: false,
+      removeLoading: false,
+      removeByDeviceLoading: false,
+      removeAllLoading: false
     }
   },
 
@@ -212,7 +218,7 @@ export default {
         })
         return
       }
-      this.loading = true
+      this.addLoading = true
       this.$store.dispatch('platform/addChannel', {
         platformId: this.platformId,
         channelIds: channels
@@ -231,7 +237,7 @@ export default {
           })
         })
         .finally(() => {
-          this.loading = false
+          this.addLoading = false
         })
     },
     addAll: function(row) {
@@ -241,7 +247,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.loading = true
+        this.addAllLoading = true
         this.$store.dispatch('platform/addChannel', {
           platformId: this.platformId,
           all: true
@@ -260,7 +266,7 @@ export default {
             })
           })
           .finally(() => {
-            this.loading = false
+            this.addAllLoading = false
           })
       }).catch(() => {
       })
@@ -272,6 +278,7 @@ export default {
         for (let i = 0; i < rows.length; i++) {
           deviceIds.push(rows[i].id)
         }
+        this.addByDeviceLoading = true
         this.$store.dispatch('platform/addChannelByDevice', {
           platformId: this.platformId,
           deviceIds: deviceIds
@@ -290,7 +297,7 @@ export default {
             })
           })
           .finally(() => {
-            this.loading = false
+            this.addByDeviceLoading = false
           })
       })
     },
@@ -301,6 +308,7 @@ export default {
         for (let i = 0; i < rows.length; i++) {
           deviceIds.push(rows[i].id)
         }
+        this.removeByDeviceLoading = true
         this.$store.dispatch('platform/removeChannelByDevice', {
           platformId: this.platformId,
           deviceIds: deviceIds
@@ -319,7 +327,7 @@ export default {
             })
           })
           .finally(() => {
-            this.loading = false
+            this.removeByDeviceLoading = false
           })
       })
     },
@@ -335,7 +343,7 @@ export default {
         })
         return
       }
-      this.loading = true
+      this.removeLoading = true
       this.$store.dispatch('platform/removeChannel', {
         platformId: this.platformId,
         channelIds: channels
@@ -354,7 +362,7 @@ export default {
           })
         })
         .finally(() => {
-          this.loading = false
+          this.removeLoading = false
         })
     },
     removeAll: function(row) {
@@ -364,7 +372,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        this.loading = true
+        this.removeAllLoading = true
         this.$store.dispatch('platform/removeChannel', {
           platformId: this.platformId,
           all: true
@@ -383,7 +391,7 @@ export default {
             })
           })
           .finally(() => {
-            this.loading = false
+            this.removeAllLoading = false
           })
       }).catch(() => {
       })
@@ -403,6 +411,7 @@ export default {
             message: error
           })
         })
+
     },
     search: function() {
       this.currentPage = 1

docker/nginx/web/src/views/jtDevice/channel/edit.vue

@@ -63,8 +63,12 @@ export default {
             })
             this.jtChannel = data
           })
-          .catch(function(error) {
+          .catch((error) => {
-            console.log(error)
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
           })
       } else {
         this.$store.dispatch('jtDevice/addChannel', this.jtChannel)
@@ -76,8 +80,12 @@ export default {
             })
             this.jtChannel = data
           })
-          .catch(function(error) {
+          .catch((error) => {
-            console.log(error)
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
           })
       }
     },

docker/nginx/web/src/views/jtDevice/channel/index.vue

@@ -234,8 +234,12 @@ export default {
             this.initData()
           }, 1000)
         })
-        .catch(err => {
+        .catch((error) => {
-          console.error(err)
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
         .finally(() => {
           this.isLoging = false
@@ -266,8 +270,12 @@ export default {
         .then((data) => {
           this.initData()
         })
-        .catch(function(error) {
+        .catch((error) => {
-          console.error(error)
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
     },
     getSnap: function(row) {
@@ -302,8 +310,12 @@ export default {
     },
     updateChannel: function(row) {
       this.$store.dispatch('jtDevice/updateChannel', row)
-        .catch((e) => {
+        .catch((error) => {
-          console.log(e)
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
     },
     refresh: function() {

docker/nginx/web/src/views/jtDevice/list.vue

@@ -208,7 +208,7 @@ export default {
   },
   mounted() {
     this.initData()
-    this.updateLooper = setInterval(this.initData, 10000)
+    this.updateLooper = setInterval(this.getList, 10000)
   },
   destroyed() {
     this.$destroy('videojs')
@@ -216,6 +216,8 @@ export default {
   },
   methods: {
     initData: function() {
+      this.currentPage = 1
+      this.total = 0
       this.getList()
     },
     currentChange: function(val) {
@@ -254,6 +256,13 @@ export default {
           .then(data => {
             this.getList()
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       }).catch(() => {
 
       })
@@ -328,6 +337,13 @@ export default {
           this.serverId = data.addOn.serverId
           this.$refs.configInfo.openDialog(data, 'jt1078Config')
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
     },
     queryAttribute: function(itemData) {
       this.$store.dispatch('jtDevice/queryAttribute', itemData.phoneNumber)

docker/nginx/web/src/views/login/index.vue

@@ -116,9 +116,16 @@ export default {
           this.$store.dispatch('user/login', this.loginForm).then((re) => {
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
-          }).catch(() => {
+          }).catch((error) => {
-            this.loading = false
+              this.$message({
-          })
+                showClose: true,
+                message: error,
+                type: 'error'
+              })
+            })
+            .finally(() => {
+              this.loading = false
+            })
         } else {
           console.log('error submit!!')
           return false

docker/nginx/web/src/views/map/index.vue

@@ -160,7 +160,7 @@ export default {
       longitudeStr: 'longitude',
       latitudeStr: 'latitude',
       mapTileList: [],
-      diffPixels: 30,
+      diffPixels: 120,
       zoomValue: 10,
       showDrawThin: false,
       quicklyDrawThinLoading: false,
@@ -168,7 +168,7 @@ export default {
       drawThinId: null,
       drawThinLayer: null,
       saveDrawThinLoading: false,
-      layerType: 0,
+      layerType: 0
     }
   },
   created() {
@@ -198,6 +198,7 @@ export default {
     },
     refreshLayer(){
       this.closeInfoBox()
+
       // 刷新瓦片图层
       if (channelLayer) {
         this.$refs.mapComponent.refreshLayer(channelLayer)
@@ -241,6 +242,13 @@ export default {
                 .then(data => {
                   this.play(data)
                 })
+                .catch((error) => {
+                  this.$message({
+                    showClose: true,
+                    message: error,
+                    type: 'error'
+                  })
+                })
             }
           },
           {
@@ -252,6 +260,13 @@ export default {
                 .then(data => {
                   this.editPosition(data)
                 })
+                .catch((error) => {
+                  this.$message({
+                    showClose: true,
+                    message: error,
+                    type: 'error'
+                  })
+                })
             }
           },
           {
@@ -263,6 +278,13 @@ export default {
                 .then(data => {
                   this.edit(data)
                 })
+                .catch((error) => {
+                  this.$message({
+                    showClose: true,
+                    message: error,
+                    type: 'error'
+                  })
+                })
             }
           }
         ]
@@ -292,6 +314,7 @@ export default {
         return
       }
       this.$refs.mapComponent.changeMapTile(index)
+      this.changeLayerType(this.layerType)
     },
     clientEvent(data){
       this.closeInfoBox()
@@ -304,23 +327,22 @@ export default {
       })
     },
     changeLayerType: function (index) {
-      if (this.layerType === index) {
-        return
-      }
       this.layerType = index
       if (index === 0) {
         this.$refs.mapComponent.removeLayer(channelTileLayer)
         return
       }
+      if (channelTileLayer) {
+        this.$refs.mapComponent.removeLayer(channelTileLayer)
+      }
 
-      let geoCoordSys = this.$refs.mapComponent.getCoordSys()
       const baseUrl = window.baseUrl ? window.baseUrl : ''
       let baseApi = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl)
       let tileUrl = null
       if (index === 1) {
-        tileUrl = baseApi + `/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
+        tileUrl = baseApi + '/api/common/channel/map/tile/{z}/{x}/{y}'
       }else if (index === 2) {
-        tileUrl = baseApi + `/api/common/channel/map/thin/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
+        tileUrl = baseApi + '/api/common/channel/map/thin/tile/{z}/{x}/{y}'
       }
       channelTileLayer = this.$refs.mapComponent.addVectorTileLayer(tileUrl, this.clientEvent)
     },
@@ -344,7 +366,15 @@ export default {
             streamInfo: data,
             hasAudio: channel.hasAudio
           })
-        }).finally(() => {
+        })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
+        .finally(() => {
           loading.close()
         })
     },
@@ -443,23 +473,42 @@ export default {
           this.$refs.deviceTree.refresh('channel' + channel.gbId)
 
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
     },
     showDrawThinBox: function(show){
       this.showDrawThin = show
-      setTimeout(() => {
+      if (!show) {
-        if (!show) {
+        setTimeout(() => {
           // 关闭抽稀预览
           if (this.drawThinId !== null) {
             // 发送消息 清空抽稀结果
             this.$store.dispatch('commonChanel/clearThin', this.drawThinId)
+              .catch((error) => {
+                this.$message({
+                  showClose: true,
+                  message: error,
+                  type: 'error'
+                })
+              })
             this.drawThinId = null
           }
           if (this.drawThinLayer !== null) {
             this.$refs.mapComponent.removeLayer(this.drawThinLayer)
             this.drawThinLayer = null
           }
-        }
+          // 展示图层
-      }, 1)
+          if (this.layerType > 0) {
+            this.changeLayerType(this.layerType)
+          }
+        }, 1)
+      }
+
     },
     quicklyDrawThin: function (){
       if (channelLayer) {
@@ -490,6 +539,13 @@ export default {
             this.showDrawThinLayer(drawThinId)
           })
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
         .finally(() => {
           this.quicklyDrawThinLoading = false
         })
@@ -550,6 +606,13 @@ export default {
               this.showDrawThinLayer(drawThinId)
             })
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
           .finally(() => {
             this.boxDrawThinLoading = false
           })
@@ -584,6 +647,13 @@ export default {
           })
           this.showDrawThinBox(false)
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
         .finally(() => {
           this.saveDrawThinLoading = false
         })
@@ -601,6 +671,13 @@ export default {
               message: '数据还原成功'
             })
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       })
     }
   }

docker/nginx/web/src/views/map/index2.vue

@@ -1,989 +0,0 @@
-<template>
-    <div id="devicePosition" style="height: calc(100vh - 84px);width: 100%;">
-      <div style="height: 100%; display: grid; grid-template-columns: 360px auto">
-        <DeviceTree ref="deviceTree" @clickEvent="treeChannelClickEvent" :showPosition="true" :contextmenu="getContextmenu()"/>
-        <MapComponent ref="mapComponent" @loaded="initChannelLayer" @coordinateSystemChange="initChannelLayer" @zoomChange="zoomChange"></MapComponent>
-      </div>
-      <div class="map-tool-box-bottom-right">
-        <div class="map-tool-btn-group">
-          <div class="el-dropdown-link map-tool-btn" @click="addVectorTileLayer">
-            <i class="iconfont icon-mti-jutai"></i>
-          </div>
-        </div>
-        <div class="map-tool-btn-group" v-if="mapTileList.length > 0">
-          <el-dropdown placement="top"  @command="changeLayerStyle">
-            <div class="el-dropdown-link map-tool-btn">
-              <i class="iconfont icon-mti-jutai"></i>
-            </div>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item :command="0" >
-                <span v-if="layerStyle !== 0">图层关闭</span>
-                <span v-if="layerStyle === 0" style="color: rgb(64, 158, 255);">图层关闭</span>
-              </el-dropdown-item>
-              <el-dropdown-item :command="1" >
-                <span v-if="layerStyle !== 1">直接展示</span>
-                <span v-if="layerStyle === 1" style="color: rgb(64, 158, 255);">直接展示</span>
-              </el-dropdown-item>
-              <el-dropdown-item :command="2">
-                <span v-if="layerStyle !== 2">碰撞检测</span>
-                <span v-if="layerStyle === 2" style="color: rgb(64, 158, 255);">碰撞检测</span>
-              </el-dropdown-item>
-              <el-dropdown-item :command="3">
-                <span v-if="layerStyle !== 3">抽稀图层</span>
-                <span v-if="layerStyle === 3" style="color: rgb(64, 158, 255);">抽稀图层</span>
-              </el-dropdown-item>
-<!--              <el-dropdown-item :command="4">-->
-<!--                <span v-if="layerStyle !== 4">聚合图层</span>-->
-<!--                <span v-if="layerStyle === 4" style="color: rgb(64, 158, 255);">聚合图层</span>-->
-<!--              </el-dropdown-item>-->
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-        <div class="map-tool-btn-group" v-if="mapTileList && mapTileList.length > 1">
-          <el-dropdown placement="top"  @command="changeMapTile">
-            <div class="el-dropdown-link map-tool-btn">
-              <i class="iconfont icon-tuceng"></i>
-            </div>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item  v-for="(item,index) in mapTileList" :key="index" :command="index">{{item.name}}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </div>
-        <div class="map-tool-btn-group">
-          <div class="map-tool-btn" @click="refreshLayer">
-            <i class="iconfont icon-shuaxin3"></i>
-          </div>
-        </div>
-        <div class="map-tool-btn-group">
-          <div class="map-tool-btn" @click="zoomIn">
-            <i class="iconfont icon-plus1"></i>
-          </div>
-          <div class="map-tool-btn" @click="zoomOut">
-            <i class="iconfont icon-minus1"></i>
-          </div>
-        </div>
-      </div>
-      <div class="map-tool-box-top-left">
-        <div class="map-tool-btn-group">
-          <div class="map-tool-btn" title="图层抽稀" @click="showDrawThinBox(true)">
-            <i class="iconfont icon-mti-sandian"></i> <span>图层抽稀</span>
-          </div>
-        </div>
-      </div>
-      <transition name="el-zoom-in-top">
-        <div v-show="showDrawThin"  class="map-tool-draw-thin">
-          <div class="map-tool-draw-thin-density">
-            <span style="line-height: 36px; font-size: 15px">间隔： </span>
-            <el-slider v-model="diffPixels" show-input :min="10" :max="200" input-size="mini" ></el-slider>
-            <div style="margin-left: 10px; line-height: 38px;">
-              <el-button :loading="quicklyDrawThinLoading" @click="quicklyDrawThin" size="mini">快速抽稀</el-button>
-              <el-button size="mini" @click="boxDrawThin" >局部抽稀</el-button>
-              <el-button size="mini" @click="resetDrawThinData()">数据还原</el-button>
-              <el-button :loading="saveDrawThinLoading" type="primary" :disabled="!layerGroupSource" size="mini" @click="saveDrawThin()">保存</el-button>
-              <el-button type="warning" size="mini" @click="showDrawThinBox(false)">取消</el-button>
-            </div>
-          </div>
-        </div>
-      </transition>
-
-<!--      <div class="map-tool-box-top-right">-->
-<!--        <div class="map-tool-btn-group">-->
-<!--          <div class="map-tool-btn" title="抽稀">-->
-<!--            <i class="iconfont icon-mti-sandian"></i>-->
-<!--          </div>-->
-<!--          <div class="map-tool-btn" title="聚合">-->
-<!--            <i class="iconfont icon-mti-jutai"></i>-->
-<!--          </div>-->
-
-<!--        </div>-->
-<!--      </div>-->
-      <div ref="infobox">
-        <transition name="el-zoom-in-center">
-          <div class="infobox-content" v-if="channel">
-            <el-descriptions class="margin-top" :title="channel.gbName" :column="1" :colon="true" size="mini" :labelStyle="labelStyle" >
-              <el-descriptions-item label="编号" >{{channel.gbDeviceId}}</el-descriptions-item>
-              <el-descriptions-item label="生产厂商">{{channel.gbManufacture}}</el-descriptions-item>
-              <el-descriptions-item label="安装地址" >{{channel.gbAddress == null?'未知': channel.gbAddress}}</el-descriptions-item>
-            </el-descriptions>
-            <div style="padding-top: 10px; margin: 0 auto; width: fit-content;">
-              <el-button v-bind:disabled="channel.gbStatus !== 'ON'" type="primary" size="small" title="播放" icon="el-icon-video-play" @click="play(channel)">播放</el-button>
-              <el-button type="primary" size="small" title="编辑" icon="el-icon-edit" @click="edit(channel)">编辑</el-button>
-              <el-button type="primary" size="small" title="位置" icon="el-icon-coordinate" @click="editPosition(channel)">位置</el-button>
-<!--              <el-button type="primary" size="small" title="轨迹查询" icon="el-icon-map-location" @click="getTrace(channel)">轨迹</el-button>-->
-            </div>
-            <span class="infobox-close el-icon-close" @click="closeInfoBox"></span>
-          </div>
-        </transition>
-
-      </div>
-
-      <div ref="infoboxForEdit">
-        <transition name="el-zoom-in-center">
-          <div class="infobox-edit-content" v-if="dragChannel">
-            <div style="width: 100%; line-height: 1.5rem; font-size: 14px">{{dragChannel.gbName}}  ({{dragChannel.gbDeviceId}})</div>
-            <span style="font-size: 14px">经度:</span> <el-input v-model="dragChannel.gbLongitude" placeholder="请输入经度" style="width: 7rem; margin-right: 10px"></el-input>
-            <span style="font-size: 14px">纬度: </span> <el-input v-model="dragChannel.gbLatitude" placeholder="请输入纬度" style="width: 7rem; "></el-input>
-            <el-button icon="el-icon-close" size="medium" type="text" @click="cancelEdit(dragChannel)" style="margin-left: 1rem; font-size: 18px; color: #2b2f3a"></el-button>
-            <el-button icon="el-icon-check" size="medium" type="text" @click="submitEdit(dragChannel)" style="font-size: 18px; color: #0842e2"></el-button>
-          </div>
-        </transition>
-      </div>
-      <devicePlayer ref="devicePlayer" ></devicePlayer>
-      <queryTrace ref="queryTrace" ></queryTrace>
-      <CommonChannelEditDialog ref="commonChannelEditDialog" ></CommonChannelEditDialog>
-    </div>
-</template>
-
-<script>
-import DeviceTree from '../common/DeviceTree.vue'
-import queryTrace from './queryTrace.vue'
-import MapComponent from '../common/MapComponent.vue'
-import devicePlayer from '../common/channelPlayer/index.vue'
-import CommonChannelEditDialog from "@/views/dialog/commonChannelEditDialog.vue";
-
-let cameraListForSource = []
-let cameraList = []
-let cameraListForLevelMap = new Map()
-let cameraLayerExtent = []
-let channelLayer = null
-export default {
-  name: 'Map',
-  components: {
-    CommonChannelEditDialog,
-    DeviceTree,
-    devicePlayer,
-    queryTrace,
-    MapComponent
-  },
-  data() {
-    return {
-      layer: null,
-      channel: null,
-      dragChannel: {},
-      feature: null,
-      device: null,
-      infoBoxId: null,
-      labelStyle: {
-        width: '56px'
-      },
-      isLoging: false,
-      longitudeStr: 'longitude',
-      latitudeStr: 'latitude',
-      mapTileList: [],
-      diffPixels: 60,
-      zoomValue: 10,
-      showDrawThin: false,
-      quicklyDrawThinLoading: false,
-      saveDrawThinLoading: false,
-      layerStyle: 0,
-      drawThinLayer: null,
-      layerGroupSource: null
-    }
-  },
-  created() {
-
-  },
-  destroyed() {
-
-  },
-  methods: {
-    initChannelLayer: function () {
-
-      this.mapTileList = this.$refs.mapComponent.mapTileList
-      // 获取所有有位置的通道
-      this.closeInfoBox()
-      this.$store.dispatch('commonChanel/getAllForMap', {}).then(data => {
-        cameraListForSource = data
-        console.log(data.length)
-        let minLng = data[0].gbLongitude
-        let maxLng = data[0].gbLongitude
-        let minLat = data[0].gbLatitude
-        let maxLat = data[0].gbLatitude
-        for (let i = 1; i < data.length; i++) {
-          let item = data[i]
-          if (item.gbLongitude < minLng) {
-            minLng = item.gbLongitude
-          }
-          if (item.gbLongitude > maxLng) {
-            maxLng = item.gbLongitude
-          }
-          if (item.gbLatitude < minLat) {
-            minLat = item.gbLatitude
-          }
-          if (item.gbLatitude > maxLat) {
-            maxLat = item.gbLatitude
-          }
-          if (item.gbLongitude && item.gbLatitude) {
-            let position = [item.gbLongitude, item.gbLatitude]
-            let cameraData = {
-              id: item.gbId,
-              position: position,
-              status: item.gbStatus,
-              data: item,
-              image: {
-                anchor: [0.5, 1],
-                src: this.getImageByChannel(item)
-              }
-            }
-            cameraList.push(cameraData)
-            if (item.mapLevel) {
-              if (cameraListForLevelMap.has(item.mapLevel)) {
-                let list = cameraListForLevelMap.get(item.mapLevel)
-                list.push(cameraData)
-              }else {
-                cameraListForLevelMap.set(item.mapLevel, [cameraData])
-              }
-            }else {
-              cameraListForLevelMap.set(0, [cameraData])
-            }
-          }
-        }
-        cameraLayerExtent = [minLng, minLat, maxLng, maxLat]
-        this.updateChannelLayer()
-      })
-    },
-    refreshLayer(){
-      this.closeInfoBox()
-      this.$refs.mapComponent.clearLayer(channelLayer)
-      this.initChannelLayer()
-    },
-    treeChannelClickEvent: function (id) {
-      this.closeInfoBox()
-      this.$store.dispatch('commonChanel/queryOne', id)
-        .then(data => {
-          if (!data.gbLongitude || data.gbLongitude < 0 || !data.gbLatitude || data.gbLatitude < 0) {
-            this.$message.warning({
-              showClose: true,
-              message: '无位置信息'
-            })
-            return
-          }
-          let zoomExtent = this.$refs.mapComponent.getZoomExtent()
-          this.$refs.mapComponent.panTo([data.gbLongitude, data.gbLatitude], zoomExtent[1], () => {
-            this.showChannelInfo(data)
-          })
-        })
-    },
-    zoomIn: function() {
-      this.$refs.mapComponent.zoomIn()
-    },
-    zoomOut: function() {
-      this.$refs.mapComponent.zoomOut()
-    },
-    getContextmenu: function (event) {
-        return [
-          {
-            label: '播放通道',
-            icon: 'el-icon-video-play',
-            type: 1,
-            onClick: (event, data, node) => {
-              console.log(data)
-              this.$store.dispatch('commonChanel/queryOne', data.id)
-                .then(data => {
-                  this.play(data)
-                })
-            }
-          },
-          {
-            label: '编辑位置',
-            icon: 'el-icon-edit',
-            type: 1,
-            onClick: (event, data, node) => {
-              this.$store.dispatch('commonChanel/queryOne', data.id)
-                .then(data => {
-                  this.edit(data)
-                })
-            }
-          }
-          // ,
-          // {
-          //   label: '轨迹查询',
-          //   icon: 'el-icon-map-location',
-          //   type: 1,
-          //   onClick: (event, data, node) => {
-          //
-          //   }
-          // }
-        ]
-    },
-    showChannelInfo: function(data) {
-      this.channel = data
-      // 此时增加临时图标
-      let position = [data.gbLongitude, data.gbLatitude]
-      let cameraData = {
-        id: data.gbId,
-        position: position,
-        data: data,
-        status: data.gbStatus
-      }
-      if (!this.$refs.mapComponent.hasFeature(channelLayer, data.gbId)) {
-        this.$refs.mapComponent.addFeature(channelLayer, cameraData)
-      }
-      this.infoBoxId = this.$refs.mapComponent.openInfoBox(position, this.$refs.infobox, [0, -50])
-    },
-    zoomChange: function(zoom) {},
-
-    changeMapTile: function (index) {
-      if (this.showDrawThin) {
-        this.$message.warning({
-          showClose: true,
-          message: '抽稀操作进行中，禁止切换图层'
-        })
-        return
-      }
-      this.$refs.mapComponent.changeMapTile(index)
-    },
-    changeLayerStyle: function (index) {
-      if (this.layerStyle === index) {
-        return
-      }
-      this.layerStyle = index
-      this.$refs.mapComponent.removeLayer(channelLayer)
-      this.channelLayer = null
-      this.updateChannelLayer()
-    },
-    updateChannelLayer: function() {
-      let clientEvent = data => {
-        this.closeInfoBox()
-        this.$nextTick(() => {
-          if (data[0].edit) {
-            this.showEditInfo(data[0])
-          }else {
-            this.showChannelInfo(data[0])
-          }
-        })
-      }
-
-      switch (this.layerStyle) {
-        case 0:
-          channelLayer = this.$refs.mapComponent.addPointLayer([], clientEvent, null)
-
-          break
-        case 1:
-          console.log(22221112222)
-          console.log(channelLayer)
-          // 直接展示
-          if (channelLayer) {
-            channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
-          }else {
-            console.log(cameraList.length)
-            setTimeout(() => {
-              channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, null)
-            })
-          }
-          break
-        case 2:
-          // 碰撞检测
-          if (channelLayer) {
-            channelLayer = this.$refs.mapComponent.updatePointLayer(channelLayer, cameraList, true)
-          }else {
-            setTimeout(() => {
-              channelLayer = this.$refs.mapComponent.addPointLayer(cameraList, clientEvent, {
-                declutter: true
-              })
-            })
-          }
-          break
-        case 3:
-          // 抽稀图层
-          this.$refs.mapComponent.removeLayer(channelLayer)
-          channelLayer = this.$refs.mapComponent.addPointLayerGroup(cameraListForLevelMap, clientEvent)
-          break
-        // case 4:
-        //   // 聚合图层
-        //
-        //   break
-      }
-    },
-    getImageByChannel: function (channel) {
-      if (channel.gbStatus === 'ON') {
-        return 'static/images/gis/camera1.png'
-      } else {
-        return 'static/images/gis/camera1-offline.png'
-      }
-    },
-    closeInfoBox: function () {
-      if (this.infoBoxId !== null) {
-        this.$refs.mapComponent.closeInfoBox(this.infoBoxId)
-      }
-      this.channel = null
-      this.dragChannel = null
-    },
-    play: function (channel) {
-      const loading = this.$loading({
-        lock: true,
-        text: '正在请求视频',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      this.$store.dispatch('commonChanel/playChannel', channel.gbId)
-        .then((data) => {
-          this.$refs.devicePlayer.openDialog('media', channel.gbId, {
-            streamInfo: data,
-            hasAudio: channel.hasAudio
-          })
-        }).finally(() => {
-          loading.close()
-        })
-    },
-    edit: function (channel) {
-      this.$refs.commonChannelEditDialog.openDialog(channel.gbId)
-    },
-    editPosition: function (channel) {
-      this.closeInfoBox()
-      // 开启图标可拖动
-      this.$refs.mapComponent.dragInteraction.addFeatureId(channel.gbId,
-        {
-          startEvent: event => {
-            this.closeInfoBox()
-          },
-          endEvent: event => {
-            channel.gbLongitude = event.lonLat[0]
-            channel.gbLatitude = event.lonLat[1]
-            this.showEditInfo(channel)
-          }
-        }
-      )
-
-      let position = null
-      if (!!channel.gbLongitude && !!channel.gbLatitude && channel.gbLongitude > 0 && channel.gbLatitude > 0) {
-        position = [channel.gbLongitude, channel.gbLatitude]
-        channel['oldLongitude'] = channel.gbLongitude
-        channel['oldLatitude'] = channel.gbLatitude
-      }else {
-        position = this.$refs.mapComponent.getCenter()
-        channel['oldLongitude'] = channel.gbLongitude
-        channel['oldLatitude'] = channel.gbLatitude
-        channel.gbLongitude = position[0]
-        channel.gbLatitude = position[1]
-      }
-
-      channel['edit'] = true
-      if (!this.$refs.mapComponent.coordinateInView(position)) {
-        this.$refs.mapComponent.panTo(position, 16, () => {
-          this.showEditInfo(channel)
-        })
-      }else {
-        this.showEditInfo(channel)
-      }
-
-      // 标记可编辑图标为红色
-      this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
-        id: channel.gbId,
-        position: position,
-        data: channel,
-        status: 'checked'
-      })
-    },
-    showEditInfo: function(data) {
-      this.dragChannel = data
-      this.infoBoxId = this.$refs.mapComponent.openInfoBox([data.gbLongitude, data.gbLatitude], this.$refs.infoboxForEdit, [0, -50])
-    },
-    cancelEdit: function(channel) {
-      this.closeInfoBox()
-      this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
-      channel.gbLongitude = channel.oldLongitude
-      channel.gbLatitude = channel.oldLatitude
-      channel['edit'] = false
-      this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
-        id: channel.gbId,
-        position: [channel.gbLongitude, channel.gbLatitude],
-        data: channel,
-        status: channel.gbStatus
-      })
-    },
-    submitEdit: function(channel) {
-      let position = [channel.gbLongitude, channel.gbLatitude]
-      this.$store.dispatch('commonChanel/update', channel)
-        .then(data => {
-          this.$message.success({
-            showClose: true,
-            message: '保存成功'
-          })
-          this.closeInfoBox()
-          channel['edit'] = false
-          this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
-
-          this.$refs.mapComponent.setFeaturePositionById(channelLayer, channel.gbId, {
-            id: channel.gbId,
-            position: position,
-            data: channel,
-            status: channel.gbStatus
-          })
-          // 刷星树菜单
-          this.$refs.deviceTree.refresh('channel' + channel.gbId)
-
-        })
-    },
-    getTrace: function (data) {
-      this.clean()
-      this.$refs.queryTrace.openDialog(data, (channelPositions) => {
-        if (channelPositions.length === 0) {
-          this.$message.warning({
-            showClose: true,
-            message: '未查询到轨迹信息'
-          })
-        } else {
-          let positions = []
-          for (let i = 0; i < channelPositions.length; i++) {
-            if (channelPositions[i][this.longitudeStr] * channelPositions[i][this.latitudeStr] > 0) {
-              positions.push([channelPositions[i][this.longitudeStr], channelPositions[i][this.latitudeStr]])
-            }
-
-          }
-          if (positions.length === 0) {
-            this.$message.warning({
-              showClose: true,
-              message: '未查询到轨迹信息'
-            })
-            return
-          }
-        }
-      })
-    },
-    clean: function (){
-      if (this.infoBoxId !== null) {
-        this.$refs.mapComponent.closeInfoBox(this.infoBoxId)
-      }
-    },
-    testArray: function (){
-      this.$store.dispatch('commonChanel/test')
-    },
-    showDrawThinBox: function(show){
-      this.showDrawThin = show
-      setTimeout(() => {
-        if (!show) {
-          // 关闭抽稀预览
-          if (this.drawThinLayer !== null) {
-            this.$refs.mapComponent.removeLayer(this.drawThinLayer)
-            this.drawThinLayer = null
-          }
-          // 清空预览数据
-          this.layerGroupSource = null
-          this.updateChannelLayer()
-        }else {
-          //
-        }
-      }, 1)
-    },
-    quicklyDrawThin: function (){
-      if (this.channelLayer) {
-        this.$refs.mapComponent.removeLayer(channelLayer)
-      }
-      if (this.drawThinLayer !== null) {
-        this.$refs.mapComponent.removeLayer(this.drawThinLayer)
-        this.drawThinLayer = null
-      }
-      // 获取待抽稀数据
-      let cameraList = cameraListForSource.slice()
-
-      this.quicklyDrawThinLoading = true
-      setTimeout(() => {
-        this.drawThin(cameraList).then((layerGroupSource) => {
-          this.layerGroupSource = layerGroupSource
-          this.drawThinLayer = this.$refs.mapComponent.addPointLayerGroup(layerGroupSource, data => {
-            this.closeInfoBox()
-            // this.$nextTick(() => {
-            //   if (data[0].edit) {
-            //     this.showEditInfo(data[0])
-            //   }else {
-            //     this.showChannelInfo(data[0])
-            //   }
-            // })
-          })
-          this.quicklyDrawThinLoading = false
-          this.$message.success({
-            showClose: true,
-            message: '抽稀完成，请预览无误后保存抽稀结果'
-          })
-        })
-      })
-    },
-    boxDrawThin: function (){
-      this.$message.warning({
-        showClose: true,
-        message: '点击地图进行框选'
-      })
-      // 绘制框
-      this.$refs.mapComponent.startDrawBox((extent) => {
-
-        // 清理默认的摄像头图层
-        if (channelLayer) {
-          this.$refs.mapComponent.clearLayer(channelLayer)
-        }
-        this.$message.warning({
-          showClose: true,
-          message: '正在抽稀，请稍等'
-        })
-        setTimeout(() => {
-          let zoomExtent = this.$refs.mapComponent.getZoomExtent()
-          let cameraListInExtent = []
-          let cameraListOutExtent = []
-          if (this.layerGroupSource !== null) {
-            // 从当前预览的数据里，获取待抽稀的数据
-            let sourceCameraList = this.layerGroupSource.get(0)
-            console.log(sourceCameraList)
-            if (!sourceCameraList) {
-              this.$message.warning({
-                showClose: true,
-                message: '数据已经全部抽稀'
-              })
-              return
-            }
-            for (let i = 0; i < sourceCameraList.length; i++) {
-              let value = sourceCameraList[i]
-              if (!value.data.gbLongitude || !value.data.gbLatitude) {
-                continue
-              }
-              if (value.data.gbLongitude >= extent[0] && value.data.gbLongitude <= extent[2]
-                && value.data.gbLatitude >= extent[1] && value.data.gbLatitude <= extent[3]) {
-                cameraListInExtent.push(value.data)
-              }else {
-                cameraListOutExtent.push(value.data)
-              }
-            }
-          }else {
-            for (let i = 0; i < cameraListForSource.length; i++) {
-              let value = cameraListForSource[i]
-              if (!value.gbLongitude || !value.gbLatitude) {
-                continue
-              }
-              if (value.gbLongitude >= extent[0] && value.gbLongitude <= extent[2]
-                && value.gbLatitude >= extent[1] && value.gbLatitude <= extent[3]) {
-                cameraListInExtent.push(value)
-              }else {
-                cameraListOutExtent.push(value)
-              }
-            }
-          }
-          // 如果已经在预览，清理预览图层
-          if (this.drawThinLayer !== null) {
-            this.$refs.mapComponent.removeLayer(this.drawThinLayer)
-            this.drawThinLayer = null
-          }
-          this.drawThin(cameraListInExtent).then((layerGroupSource) => {
-            if (this.layerGroupSource !== null) {
-              let zoom = zoomExtent[0]
-              // 按照层级合并每次的抽稀结果
-              while (zoom < zoomExtent[1]) {
-                Array.prototype.push.apply(layerGroupSource.get(zoom), this.layerGroupSource.get(zoom))
-                zoom += 1
-              }
-            }
-            if (cameraListOutExtent.length > 0) {
-              let layerSourceForOutExtent = this.createZoomLayerSource(cameraListOutExtent, zoomExtent[0])
-              layerGroupSource.set(0, layerSourceForOutExtent)
-            }
-            this.layerGroupSource = layerGroupSource
-            this.drawThinLayer = this.$refs.mapComponent.addPointLayerGroup(layerGroupSource, data => {
-              this.closeInfoBox()
-              // this.$nextTick(() => {
-              //   if (data[0].edit) {
-              //     this.showEditInfo(data[0])
-              //   }else {
-              //     this.showChannelInfo(data[0])
-              //   }
-              // })
-            })
-            this.$message.success({
-              showClose: true,
-              message: '抽稀完成，请预览无误后保存抽稀结果,如需继续，请再次点击局部抽稀按钮'
-            })
-          })
-        }, 100)
-
-
-      })
-    },
-    drawThin: function (cameraListInExtent){
-      return new Promise((resolve, reject) => {
-        try {
-          let layerGroupSource = new Map()
-          // 获取全部层级
-          let zoomExtent = this.$refs.mapComponent.getZoomExtent()
-          let zoom = zoomExtent[0]
-          let zoomCameraMap = new Map()
-          let useCameraMap = new Map()
-
-          while (zoom < zoomExtent[1]) {
-            // 计算经纬度差值
-            let diff = this.$refs.mapComponent.computeDiff(this.diffPixels, zoom)
-            let cameraMapForZoom = new Map()
-            let useCameraMapForZoom = new Map()
-            let useCameraList = Array.from(useCameraMap.values())
-            for (let i = 0; i < useCameraList.length; i++) {
-              let value = useCameraList[i]
-              let lngGrid = Math.trunc(value.gbLongitude / diff)
-              let latGrid = Math.trunc(value.gbLatitude / diff)
-              let gridKey = latGrid + ':' + lngGrid
-              useCameraMapForZoom.set(gridKey, value)
-            }
-
-            for (let i = 0; i < cameraListInExtent.length; i++) {
-              let value = cameraListInExtent[i]
-              if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
-                continue
-              }
-              let lngGrid = Math.trunc(value.gbLongitude / diff)
-              let latGrid = Math.trunc(value.gbLatitude / diff)
-              let gridKey = latGrid + ':' + lngGrid
-              if (useCameraMapForZoom.has(gridKey)) {
-                continue
-              }
-              if (cameraMapForZoom.has(gridKey)) {
-                let oldValue = cameraMapForZoom.get(gridKey)
-                if (value.gbLongitude % diff < oldValue.gbLongitude % diff) {
-                  cameraMapForZoom.set(gridKey, value)
-                  useCameraMap.set(value.gbId, value)
-                  useCameraMap.delete(oldValue.gbId)
-                }
-              }else {
-                cameraMapForZoom.set(gridKey, value)
-                useCameraMap.set(value.gbId, value)
-              }
-            }
-
-            let cameraArray = Array.from(cameraMapForZoom.values())
-            zoomCameraMap.set(zoom, cameraArray)
-            let layerSource = this.createZoomLayerSource(cameraArray)
-            layerGroupSource.set(zoom - 1, layerSource)
-            zoom += 1
-          }
-          let cameraArray = []
-          for (let i = 0; i < cameraListInExtent.length; i++) {
-            let value = cameraListInExtent[i]
-            if (useCameraMap.has(value.gbId) || !value.gbLongitude || !value.gbLatitude) {
-              continue
-            }
-            cameraArray.push(value)
-          }
-          let layerSource = this.createZoomLayerSource(cameraArray)
-          layerGroupSource.set(zoomExtent[1] - 1, layerSource)
-
-          resolve(layerGroupSource)
-        }catch (error) {
-          reject(error)
-        }
-      })
-    },
-
-    createZoomLayerSource(cameraArray) {
-      let dataArray = []
-      for (let i = 0; i < cameraArray.length; i++) {
-        let item = cameraArray[i]
-        let position = [item.gbLongitude, item.gbLatitude]
-        dataArray.push({
-          id: item.gbId,
-          position: position,
-          data: item,
-          status: item.gbStatus,
-          image: {
-            anchor: [0.5, 1],
-            src: this.getImageByChannel(item)
-          }
-        })
-      }
-     return dataArray
-    },
-    saveDrawThin: function(){
-      if (!this.layerGroupSource) {
-        return
-      }
-      this.saveDrawThinLoading = true
-      let param = []
-      let keys = Array.from(this.layerGroupSource.keys())
-      for (let i = 0; i < keys.length; i++) {
-        let zoom = keys[i]
-        let values = this.layerGroupSource.get(zoom)
-        for (let j = 0; j < values.length; j++) {
-          let value = values[j]
-          if (zoom === 0) {
-            param.push({
-              gbId: value.id
-            })
-          }else {
-            param.push({
-              gbId: value.id,
-              mapLevel: zoom
-            })
-          }
-        }
-      }
-      this.$store.dispatch('commonChanel/saveLevel', param)
-        .then((data) => {
-          this.$message.success({
-            showClose: true,
-            message: '保存成功'
-          })
-          this.showDrawThin = false
-        })
-        .finally(() => {
-          this.saveDrawThinLoading = false
-        })
-
-    },
-    resetDrawThinData(){
-      this.$confirm('确定移除抽稀结果?', '操作提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('commonChanel/resetLevel')
-          .then(() => {
-            this.$message.success({
-              showClose: true,
-              message: '数据还原成功'
-            })
-          })
-      })
-    },
-    addVectorTileLayer() {
-      let geoCoordSys = this.$refs.mapComponent.getCoordSys()
-      const baseUrl = window.baseUrl ? window.baseUrl : ''
-      let tileUrl = ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl)
-        + `/api/common/channel/map/tile/{z}/{x}/{y}?geoCoordSys=${geoCoordSys}&accessToken=${this.$store.getters.token}`
-
-      let clientEvent = data => {
-        this.closeInfoBox()
-        this.$nextTick(() => {
-          this.showChannelInfo(data[0])
-          // if (data[0].edit) {
-          //   this.showEditInfo(data[0])
-          // }else {
-          //   this.showChannelInfo(data[0])
-          // }
-        })
-      }
-
-      let tileEvent = error => {
-        console.log(error)
-      }
-
-      let tileLayer = this.$refs.mapComponent.addVectorTileLayer(tileUrl, clientEvent, tileEvent)
-    }
-  }
-
-}
-</script>
-
-<style>
-.map-tool-box-bottom-right {
-  position: absolute;
-  right: 20px;
-  bottom: 20px;
-}
-.map-tool-box-top-right {
-  position: absolute;
-  right: 20px;
-  top: 20px;
-}
-.map-tool-box-top-left {
-  position: absolute;
-  left: 380px;
-  top: 20px;
-}
-.map-tool-btn-group {
-  background-color: #FFFFFF;
-  border-radius: 3px;
-  user-select: none;
-  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
-  margin-bottom: 10px;
-}
-.map-tool-box-top-left .map-tool-btn-group {
-  display: flex;
-}
-.map-tool-box-top-right .map-tool-btn-group {
-  display: flex;
-}
-.map-tool-box-top-left .map-tool-btn {
-  padding: 0 10px;
-}
-.map-tool-box-top-right .map-tool-btn {
-  padding: 0 10px;
-}
-.map-tool-btn {
-  border-bottom: 1px #dfdfdf solid;
-  border-right: 1px #dfdfdf solid;
-  width: fit-content;
-  min-width: 33px;
-  height: 36px;
-  cursor: pointer;
-  text-align: center;
-  line-height: 36px;
-  font-size: 14px;
-}
-.map-tool-btn i {
-  font-size: 14px;
-}
-.map-tool-btn-group:last-child {
-  border-bottom: none;
-  border-right: none;
-}
-.map-tool-draw-thin {
-  position: absolute;
-  top: 63px;
-  left: 380px;
-  border: 1px solid #dfdfdf;
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 0 10px;
-}
-.map-tool-draw-thin-density {
-  display: grid;
-  grid-template-columns: 50px 400px auto;
-  padding: 0;
-  margin: 0;
-}
-
-.infobox-content{
-  width: 270px;
-  background-color: #FFFFFF;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #868686;
-}
-
-.infobox-content::after {
-  position: absolute;
-  bottom: -11px;
-  left: calc(50% - 8px);
-  display: block;
-  content: "";
-  width: 16px;
-  height: 16px;
-  background: url('/static/images/arrow.png') no-repeat center;
-}
-
-.infobox-edit-content{
-  width: 400px;
-  background-color: #FFFFFF;
-  padding: 10px;
-  border-radius: 10px;
-  border: 1px solid #868686;
-}
-
-.infobox-edit-content::after {
-  position: absolute;
-  bottom: -11px;
-  left: calc(50% - 8px);
-  display: block;
-  content: "";
-  width: 16px;
-  height: 16px;
-  background: url('/static/images/arrow.png') no-repeat center;
-}
-.infobox-close {
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  color: #000000;
-  cursor:pointer
-}
-.el-descriptions__title {
-  font-size: 1rem;
-  font-weight: 700;
-  padding: 20px 20px 0px 23px;
-  text-align: center;
-  width: 100%;
-}
-</style>

docker/nginx/web/src/views/platform/index.vue

@@ -10,7 +10,7 @@
             placeholder="关键字"
             prefix-icon="el-icon-search"
             clearable
-            @input="getPlatformList"
+            @input="queryList"
           />
         </el-form-item>
         <el-form-item>
@@ -292,6 +292,11 @@ export default {
       this.count = val
       this.getPlatformList()
     },
+    queryList: function() {
+      this.currentPage = 1
+      this.total = 0
+      this.getPlatformList()
+    },
     getPlatformList: function() {
       this.$store.dispatch('platform/query', {
         count: this.count,

docker/nginx/web/src/views/recordPlan/index.vue

@@ -158,7 +158,11 @@ export default {
             this.initData()
           })
           .catch((error) => {
-            console.error(error)
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
           })
       }).catch(() => {
 

docker/nginx/web/src/views/streamProxy/index.vue

@@ -9,7 +9,7 @@
             placeholder="关键字"
             prefix-icon="el-icon-search"
             clearable
-            @input="getStreamProxyList"
+            @input="queryList"
           />
         </el-form-item>
         <el-form-item label="流媒体">
@@ -18,7 +18,7 @@
             style="margin-right: 1rem;"
             placeholder="请选择"
             default-first-option
-            @change="getStreamProxyList"
+            @change="queryList"
           >
             <el-option label="全部" value="" />
             <el-option
@@ -35,7 +35,7 @@
             style="margin-right: 1rem;"
             placeholder="请选择"
             default-first-option
-            @change="getStreamProxyList"
+            @change="queryList"
           >
             <el-option label="全部" value="" />
             <el-option label="正在拉流" value="true" />
@@ -189,6 +189,11 @@ export default {
       this.count = val
       this.getStreamProxyList()
     },
+    queryList: function() {
+      this.currentPage = 1
+      this.total = 0
+      this.getStreamProxyList()
+    },
     getStreamProxyList: function() {
       this.$store.dispatch('streamProxy/queryList', {
         page: this.currentPage,
@@ -238,7 +243,11 @@ export default {
           })
         })
         .catch((error) => {
-          console.log(error)
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
         .finally(() => {
           row.playLoading = false
@@ -253,7 +262,11 @@ export default {
           })
         })
         .catch((error) => {
-          console.log(error)
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
         })
     },
     queryCloudRecords: function(row) {
@@ -273,6 +286,13 @@ export default {
             })
             this.initData()
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       }).catch(() => {
       })
     },

docker/nginx/web/src/views/streamPush/index.vue

@@ -9,7 +9,7 @@
             placeholder="关键字"
             prefix-icon="el-icon-search"
             clearable
-            @input="getPushList"
+            @input="queryList"
           />
         </el-form-item>
         <el-form-item label="流媒体">
@@ -18,7 +18,7 @@
             style="margin-right: 1rem;"
             placeholder="请选择"
             default-first-option
-            @change="getPushList"
+            @change="queryList"
           >
             <el-option label="全部" value="" />
             <el-option
@@ -35,7 +35,7 @@
             style="margin-right: 1rem;"
             placeholder="请选择"
             default-first-option
-            @change="getPushList"
+            @change="queryList"
           >
             <el-option label="全部" value="" />
             <el-option label="推流中" value="true" />
@@ -206,6 +206,11 @@ export default {
       this.count = val
       this.getPushList()
     },
+    queryList: function() {
+      this.currentPage = 1
+      this.total = 0
+      this.getPushList()
+    },
     getPushList: function() {
       this.$store.dispatch('streamPush/queryList', {
         page: this.currentPage,
@@ -239,6 +244,13 @@ export default {
             hasAudio: true
           })
         })
+        .catch((error) => {
+          this.$message({
+            showClose: true,
+            message: error,
+            type: 'error'
+          })
+        })
         .finally(() => {
           row.playLoading = false
         })
@@ -258,6 +270,13 @@ export default {
             })
             this.initData()
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       }).catch(() => {
 
       })
@@ -294,6 +313,13 @@ export default {
             this.initData()
             this.$refs.pushListTable.clearSelection()
           })
+          .catch((error) => {
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
+          })
       }).catch(() => {
 
       })

docker/nginx/web/src/views/user/index.vue

@@ -145,7 +145,11 @@ export default {
             this.getUserList()
           })
           .catch((error) => {
-            console.error(error)
+            this.$message({
+              showClose: true,
+              message: error,
+              type: 'error'
+            })
           })
       }).catch(() => {