diff --git a/packages/bigscreen/dv/AppMonitorMapDv.vue b/packages/bigscreen/dv/AppMonitorMapDv.vue index 3eff2cdc..88ae3115 100644 --- a/packages/bigscreen/dv/AppMonitorMapDv.vue +++ b/packages/bigscreen/dv/AppMonitorMapDv.vue @@ -6,7 +6,7 @@
-
+
{{ formatName(info.name) }}

{{ info.name }}

@@ -37,7 +37,7 @@

人员信息

- {{ userStatus }} + {{ userStatus }}
@@ -84,22 +84,11 @@ export default { return { map: null, community: '', - isShowLeft: true, - isImageMap: false, isShowInfo: false, info: {}, - defaultExpandAll: false, satellite: null, zoom: 11, choosedId: '', - defaultProps: { - children: 'childrenArea', - label: 'areaName' - }, - search: { - status: '3', - name: '' - }, testItem: [{ name: '体温', icon: 'icontiwen', @@ -117,28 +106,13 @@ export default { icon: 'iconxueyang', color: '#FF5656' }], - defaultExpanded: [], testData: [], - treeData: [], center: [] } }, computed: { ...mapState(['user']), - options () { - return [{ - value: '3', - label: '全部' - }, { - value: '1', - label: '在线' - }, { - value: '0', - label: '离线' - }] - }, - userStatus () { if (this.info.abnormalStatus === '2') { return '求助' @@ -157,43 +131,50 @@ export default { userStatusColor () { if (this.info.abnormalStatus === '2') { - return '#F46159' + return { + color: '#FF69DD', + border: '1px solid #FF69DD' + } } if (this.info.abnormalStatus === '1') { - return '#FFAA44' + return { + color: '#FF6969', + border: '1px solid #FF6969' + } } - if (this.info.abnormalStatus === '0') { - return '#0F8F64' + return { + color: '#22FF81', + border: '1px solid #22FF81' } - - return '#0F8F64' }, - percentage () { - if (!this.treeData.length) { - return 0 + userStyle () { + if (this.info.abnormalStatus === '2') { + return { + background: 'rgba(96,8,102,0.80)', + border: '1px solid #FF69DD', + boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #C312CA' + } } - if (this.treeData[0].deviceCount == 0 || this.treeData[0].onlineCount == 0) { - return 0 + if (this.info.abnormalStatus === '1') { + return { + background: 'rgba(79,14,7,0.80)', + border: '1px solid #FF6969', + boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #C60E0E' + } } - return Number((this.treeData[0].onlineCount / this.treeData[0].deviceCount).toFixed(2)) * 100 + return { + background: 'rgba(8,73,35,0.80)', + border: '1px solid #22FF81', + boxShadow: '0 4px 4px 0 #000000, inset 0 0 8px 4px #15BE55' + } } }, - watch: { - 'search.name' (val) { - this.$refs.tree.filter(val) - } - }, - - created() { - this.getTree() - }, - mounted() { this.getCorpLocation() }, @@ -266,80 +247,6 @@ export default { }) }, - filterNode(value, data) { - if (!value) return true - - return data.areaName.indexOf(value) !== -1 || (data.deviceName && data.deviceName.indexOf(value) !== -1) - }, - - onTreeChange (e) { - if (e.type === '1') { - this.map.setZoomAndCenter(16, [e.lng, e.lat], false, 300) - this.getInfo(e.deviceId) - this.choosedId = e.deviceId - } - }, - - getTree(){ - this.instance.post(`/app/appintelligentguardianshipdevice/queryTree?areaId=${this.user.info.areaId}`).then(res=>{ - if (res.code === 0) { - this.treeData = this.formatList([res.data]) - - this.$nextTick(() => { - this.defaultExpanded = [res.data.parentId] - this.$refs.tree.setCurrentKey(res.data.parentId) - }) - } - }) - }, - - formatList (list) { - var arr = [] - var i = 0 - for (let item of list) { - if (!item.parentId) { - item.parentId = 0 - } else { - item.parentId = `${item.parentId}-${i}` - } - i = i + 1 - if (item.childrenDevice && item.childrenDevice.length) { - let userList = JSON.parse(JSON.stringify(item.childrenDevice)) - - if (this.search.status !== '3') { - userList = userList.filter(v => { - if (this.search.status === v.deviceOnlineStatus) { - this.defaultExpanded.push(item.parentId) - return true - } - - return false - }) - } - - if (item.childrenArea) { - item.childrenArea = [ - ...item.childrenArea, - ...userList, - ] - } else { - item.childrenArea = [ - ...userList - ] - } - delete item.childrenDevice - } - - if (item.childrenArea && item.childrenArea.length) { - this.formatList(item.childrenArea) - } - - arr.push(item) - } - - return arr - }, - changeZoom(isAdd) { const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1 this.map.setZoom(zoom, false, 600) @@ -392,35 +299,13 @@ export default { }) }, - getColor (data) { - if (data.id === this.choosedId) { - return '#2266FF' - } - - if (data.abnormalStatus === '2') { - return '#F46159' - } - - if (data.abnormalStatus === '1') { - return '#FFAA44' - } - - if (data.onlineStatus === '0') { - return '#0F8F64' - } - - return '#0F8F64' - }, - renderMarker(context) { const buildId = context.data[0].id - let el = `
+ let el = `
- ${context.data[0].areaName}   ${context.data[0].name}
-
` context.marker.setContent(el); @@ -434,11 +319,9 @@ export default { this.getInfo(e.target.id) context.marker.setContent(el); document.querySelectorAll('.mark').forEach(el => { - el.style['background-color'] = el.getAttribute('data-color') - el.querySelector('.arrow').style['border-top-color'] = el.getAttribute('data-color') + el.classList.remove('mark-active') }) - document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF' - document.querySelector(`#buildId-${e.target.id}`).querySelector('.arrow').style['border-top-color'] = '#2266FF' + document.querySelector(`#buildId-${e.target.id}`).add('mark-active') this.map.setZoomAndCenter(this.map.getZoom() + 0.000000001, e.target.lnglat, false, 300) }) }, @@ -460,16 +343,6 @@ export default { }) }, - switchLayer(flag) { - if (flag) { - this.map.addLayer(this.satellite) - } else { - this.map.removeLayer(this.satellite) - } - - this.isImageMap = flag - }, - initMap({lng,lat}) { this.center = [lng,lat]; AMapLoader.load({ @@ -497,980 +370,512 @@ export default {