Commit c2faa8c3ce858a5c5cbb0712eda4ac2df0d60693
1 parent
dbe6ece6
显示效果优化
Showing
6 changed files
with
49 additions
and
11 deletions
web_src/src/components/DeviceList.vue
| @@ -56,7 +56,7 @@ | @@ -56,7 +56,7 @@ | ||
| 56 | @mouseover="getTooltipContent(scope.row.deviceId)">刷新 | 56 | @mouseover="getTooltipContent(scope.row.deviceId)">刷新 |
| 57 | </el-button> | 57 | </el-button> |
| 58 | <el-divider direction="vertical"></el-divider> | 58 | <el-divider direction="vertical"></el-divider> |
| 59 | - <el-button type="text" size="medium" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0" | 59 | + <el-button type="text" size="medium" icon="el-icon-video-camera" v-bind:disabled="scope.row.online==0" |
| 60 | @click="showChannelList(scope.row)">通道 | 60 | @click="showChannelList(scope.row)">通道 |
| 61 | </el-button> | 61 | </el-button> |
| 62 | <el-divider direction="vertical"></el-divider> | 62 | <el-divider direction="vertical"></el-divider> |
web_src/src/components/channelList.vue
| @@ -38,11 +38,11 @@ | @@ -38,11 +38,11 @@ | ||
| 38 | <el-table-column prop="name" label="通道名称" min-width="200"> | 38 | <el-table-column prop="name" label="通道名称" min-width="200"> |
| 39 | </el-table-column> | 39 | </el-table-column> |
| 40 | <el-table-column label="快照" min-width="120"> | 40 | <el-table-column label="快照" min-width="120"> |
| 41 | - <template slot-scope="scope"> | 41 | + <template v-slot:default="scope"> |
| 42 | <el-image | 42 | <el-image |
| 43 | :src="getSnap(scope.row)" | 43 | :src="getSnap(scope.row)" |
| 44 | :preview-src-list="getBigSnap(scope.row)" | 44 | :preview-src-list="getBigSnap(scope.row)" |
| 45 | - @error="getSnapErrorEvent(scope.row.deviceId, cope.row.channelId)" | 45 | + @error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)" |
| 46 | :fit="'contain'" | 46 | :fit="'contain'" |
| 47 | style="width: 60px"> | 47 | style="width: 60px"> |
| 48 | <div slot="error" class="image-slot"> | 48 | <div slot="error" class="image-slot"> |
| @@ -71,8 +71,8 @@ | @@ -71,8 +71,8 @@ | ||
| 71 | <el-table-column label="状态" min-width="120"> | 71 | <el-table-column label="状态" min-width="120"> |
| 72 | <template slot-scope="scope"> | 72 | <template slot-scope="scope"> |
| 73 | <div slot="reference" class="name-wrapper"> | 73 | <div slot="reference" class="name-wrapper"> |
| 74 | - <el-tag size="medium" v-if="scope.row.status == 1">在线</el-tag> | ||
| 75 | - <el-tag size="medium" type="info" v-if="scope.row.status == 0">离线</el-tag> | 74 | + <el-tag size="medium" v-if="scope.row.status === 1">在线</el-tag> |
| 75 | + <el-tag size="medium" type="info" v-if="scope.row.status === 0">离线</el-tag> | ||
| 76 | </div> | 76 | </div> |
| 77 | </template> | 77 | </template> |
| 78 | </el-table-column> | 78 | </el-table-column> |
| @@ -112,6 +112,8 @@ | @@ -112,6 +112,8 @@ | ||
| 112 | import devicePlayer from './dialog/devicePlayer.vue' | 112 | import devicePlayer from './dialog/devicePlayer.vue' |
| 113 | import uiHeader from '../layout/UiHeader.vue' | 113 | import uiHeader from '../layout/UiHeader.vue' |
| 114 | import moment from "moment"; | 114 | import moment from "moment"; |
| 115 | +import DviceService from "./service/DeviceService"; | ||
| 116 | +import DeviceService from "./service/DeviceService"; | ||
| 115 | 117 | ||
| 116 | export default { | 118 | export default { |
| 117 | name: 'channelList', | 119 | name: 'channelList', |
| @@ -121,6 +123,8 @@ export default { | @@ -121,6 +123,8 @@ export default { | ||
| 121 | }, | 123 | }, |
| 122 | data() { | 124 | data() { |
| 123 | return { | 125 | return { |
| 126 | + deviceService: new DeviceService(), | ||
| 127 | + device: null, | ||
| 124 | deviceId: this.$route.params.deviceId, | 128 | deviceId: this.$route.params.deviceId, |
| 125 | parentChannelId: this.$route.params.parentChannelId, | 129 | parentChannelId: this.$route.params.parentChannelId, |
| 126 | deviceChannelList: [], | 130 | deviceChannelList: [], |
| @@ -141,7 +145,17 @@ export default { | @@ -141,7 +145,17 @@ export default { | ||
| 141 | }, | 145 | }, |
| 142 | 146 | ||
| 143 | mounted() { | 147 | mounted() { |
| 148 | + if (this.deviceId) { | ||
| 149 | + this.deviceService.getDevice(this.deviceId, (result)=>{ | ||
| 150 | + this.device = result; | ||
| 151 | + | ||
| 152 | + }, (error)=>{ | ||
| 153 | + console.log("获取设备信息失败") | ||
| 154 | + console.error(error) | ||
| 155 | + }) | ||
| 156 | + } | ||
| 144 | this.initData(); | 157 | this.initData(); |
| 158 | + | ||
| 145 | }, | 159 | }, |
| 146 | destroyed() { | 160 | destroyed() { |
| 147 | this.$destroy('videojs'); | 161 | this.$destroy('videojs'); |
web_src/src/components/control.vue
| @@ -235,10 +235,8 @@ | @@ -235,10 +235,8 @@ | ||
| 235 | <el-table-column prop="local_ip" label="本地"></el-table-column> | 235 | <el-table-column prop="local_ip" label="本地"></el-table-column> |
| 236 | <el-table-column prop="typeid" label="类型"></el-table-column> | 236 | <el-table-column prop="typeid" label="类型"></el-table-column> |
| 237 | <el-table-column align="right"> | 237 | <el-table-column align="right"> |
| 238 | - <template slot="header" slot-scope="scope"> | ||
| 239 | - <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button> | ||
| 240 | - </template> | ||
| 241 | - <template slot-scope="scope"> | 238 | + <template v-slot:default="scope"> |
| 239 | + <el-button size="mini" icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button> | ||
| 242 | <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除 | 240 | <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除 |
| 243 | </el-button> | 241 | </el-button> |
| 244 | </template> | 242 | </template> |
web_src/src/components/dialog/deviceEdit.vue
| @@ -38,8 +38,8 @@ | @@ -38,8 +38,8 @@ | ||
| 38 | </el-form-item> | 38 | </el-form-item> |
| 39 | <el-form-item label="地理坐标系" prop="geoCoordSys" > | 39 | <el-form-item label="地理坐标系" prop="geoCoordSys" > |
| 40 | <el-select v-model="form.geoCoordSys" style="float: left; width: 100%" > | 40 | <el-select v-model="form.geoCoordSys" style="float: left; width: 100%" > |
| 41 | - <el-option key="GCJ02" label="GCJ02" value="GCJ02"></el-option> | ||
| 42 | <el-option key="WGS84" label="WGS84" value="WGS84"></el-option> | 41 | <el-option key="WGS84" label="WGS84" value="WGS84"></el-option> |
| 42 | + <el-option key="GCJ02" label="GCJ02" value="GCJ02"></el-option> | ||
| 43 | </el-select> | 43 | </el-select> |
| 44 | </el-form-item> | 44 | </el-form-item> |
| 45 | <el-form-item label="目录订阅" title="0为取消订阅" prop="subscribeCycleForCatalog" > | 45 | <el-form-item label="目录订阅" title="0为取消订阅" prop="subscribeCycleForCatalog" > |
web_src/src/components/map.vue
| @@ -266,7 +266,20 @@ export default { | @@ -266,7 +266,20 @@ export default { | ||
| 266 | this.channel = channels[0] | 266 | this.channel = channels[0] |
| 267 | } | 267 | } |
| 268 | this.$nextTick(() => { | 268 | this.$nextTick(() => { |
| 269 | - this.infoBoxId = this.$refs.map.openInfoBox([this.channel.longitude, this.channel.latitude], this.$refs.infobox, [0, -50]) | 269 | + let longitudeStr; |
| 270 | + let latitudeStr; | ||
| 271 | + if (window.mapParam.coordinateSystem == "GCJ-02") { | ||
| 272 | + longitudeStr = "longitudeGcj02"; | ||
| 273 | + latitudeStr = "latitudeGcj02"; | ||
| 274 | + }else if (window.mapParam.coordinateSystem == "WGS84") { | ||
| 275 | + longitudeStr = "longitudeWgs84"; | ||
| 276 | + latitudeStr = "latitudeWgs84"; | ||
| 277 | + }else { | ||
| 278 | + longitudeStr = "longitude"; | ||
| 279 | + latitudeStr = "latitude"; | ||
| 280 | + } | ||
| 281 | + let position = [this.channel[longitudeStr], this.channel[latitudeStr]]; | ||
| 282 | + this.infoBoxId = this.$refs.map.openInfoBox(position, this.$refs.infobox, [0, -50]) | ||
| 270 | }) | 283 | }) |
| 271 | }, | 284 | }, |
| 272 | closeInfoBox: function () { | 285 | closeInfoBox: function () { |
web_src/src/components/service/DeviceService.js
| @@ -21,6 +21,19 @@ class DeviceService{ | @@ -21,6 +21,19 @@ class DeviceService{ | ||
| 21 | if (typeof (errorCallback) == "function") errorCallback(error) | 21 | if (typeof (errorCallback) == "function") errorCallback(error) |
| 22 | }); | 22 | }); |
| 23 | } | 23 | } |
| 24 | + | ||
| 25 | + getDevice(deviceId, callback, errorCallback){ | ||
| 26 | + this.$axios({ | ||
| 27 | + method: 'get', | ||
| 28 | + url:`/api/device/query/devices/${deviceId}`, | ||
| 29 | + }).then((res) => { | ||
| 30 | + if (typeof (callback) == "function") callback(res.data) | ||
| 31 | + }).catch((error) => { | ||
| 32 | + console.log(error); | ||
| 33 | + if (typeof (errorCallback) == "function") errorCallback(error) | ||
| 34 | + }); | ||
| 35 | + } | ||
| 36 | + | ||
| 24 | getAllDeviceList(callback,endCallback, errorCallback) { | 37 | getAllDeviceList(callback,endCallback, errorCallback) { |
| 25 | let currentPage = 1; | 38 | let currentPage = 1; |
| 26 | let count = 100; | 39 | let count = 100; |