|
@@ -10,7 +10,7 @@
|
|
|
<div id="container" :style="{height: mapHeight}">
|
|
|
</div>
|
|
|
<div class="map-footer">
|
|
|
- <a-row :getter="[24,24]" >
|
|
|
+ <a-row :getter="[24,24]">
|
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
<div class="map-data">
|
|
|
<a-icon type="team" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
@@ -62,7 +62,7 @@
|
|
|
</a-row>
|
|
|
</div>
|
|
|
<vue-seamless-scroll :data="deliveryLogData" :class-option="classOption" class="seamless-warp">
|
|
|
- <a-spin class="loading" :spinning="deliverySpinning" tip="Loading..."/>
|
|
|
+ <a-spin class="loading" :spinning="deliverySpinning" tip="Loading..." />
|
|
|
<div class="swipter-data" v-for="item in deliveryLogData" :key="item.id">
|
|
|
<a-row :gutter="0">
|
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="6">{{ item.deliveryTime }}</a-col>
|
|
@@ -101,14 +101,15 @@
|
|
|
</a-row>
|
|
|
</div>
|
|
|
<vue-seamless-scroll :data="userLogData" :class-option="classOption" class="seamless-warp">
|
|
|
- <a-spin class="loading" :spinning="userLogSpinning" tip="Loading..."/>
|
|
|
+ <a-spin class="loading" :spinning="userLogSpinning" tip="Loading..." />
|
|
|
<div class="swipter-data" v-for="item in userLogData" :key="item.id">
|
|
|
<a-row :gutter="0">
|
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="16">{{ item.registerTime }}</a-col>
|
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="8">{{ item.mobile }}</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
- </vue-seamless-scroll></div>
|
|
|
+ </vue-seamless-scroll>
|
|
|
+ </div>
|
|
|
</vue-seamless-scroll>
|
|
|
</div>
|
|
|
</a-col>
|
|
@@ -165,8 +166,13 @@
|
|
|
<div class="chart-cont">
|
|
|
<div class="data-title">项目介绍</div>
|
|
|
<div class="chart-box textCount">
|
|
|
- 全市共有党政机关、企事业单位827个,职工人数16655人。其中,市级单位334个,秦都区297个,渭城区196个;居民小区1010个(两区居民小区994个,保障房小区16个), 物业管理小区770个(两区754个,保障房小区16个)。其中,市本级保障房小区12个,物业管理小区12个。秦都区654个(含保障房小区3个),物业管理小区584个。渭城区 344个(含保障房小区1个),物业管理174个(含保障房小区1个);学校(中小学、幼儿园)200所,其中,秦都区139所(中小学53所、幼儿园86所)。渭城区61所(中小 学27所、幼儿园34所)。截止目前,城区已建成试点单位67个, 设置智能分类箱
|
|
|
- <span class="blue">{{ deviceTotal }}</span>组, 积分兑换亭<span class="blue">{{ sellerTotal }}</span>个, 无人兑换机<span class="blue">{{ machineTotal }}</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
|
|
|
+ 全市共有党政机关、企事业单位827个,职工人数16655人。其中,市级单位334个,秦都区297个,渭城区196个;居民小区1010个(两区居民小区994个,保障房小区16个),
|
|
|
+ 物业管理小区770个(两区754个,保障房小区16个)。其中,市本级保障房小区12个,物业管理小区12个。秦都区654个(含保障房小区3个),物业管理小区584个。渭城区
|
|
|
+ 344个(含保障房小区1个),物业管理174个(含保障房小区1个);学校(中小学、幼儿园)200所,其中,秦都区139所(中小学53所、幼儿园86所)。渭城区61所(中小
|
|
|
+ 学27所、幼儿园34所)。截止目前,城区已建成试点单位67个, 设置智能分类箱
|
|
|
+ <span class="blue">{{ deviceTotal }}</span>组, 积分兑换亭<span class="blue">{{ sellerTotal }}</span>个, 无人兑换机<span
|
|
|
+ class="blue">{{ machineTotal }}</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人,
|
|
|
+ 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-col>
|
|
@@ -174,7 +180,8 @@
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
- </div></template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
import {
|
|
|
ChartPie,
|
|
@@ -200,20 +207,20 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
map: null, // 地图对象
|
|
|
- markerLayer: null, // 地图点标记对象
|
|
|
- infoWindow: null, // 地图信息窗口对象
|
|
|
+ markerLayer: null, // 地图点标记对象
|
|
|
+ infoWindow: null, // 地图信息窗口对象
|
|
|
isMapFull: false, // 地图是否全屏
|
|
|
userTotal: 0, // 用户总数
|
|
|
deviceTotal: 0, // 设备总数
|
|
|
sellerTotal: 0, // 兑换亭总数
|
|
|
- machineTotal: 0, // 兑换机总数
|
|
|
+ machineTotal: 0, // 兑换机总数
|
|
|
deliverySpinning: true, // 实时投递数据loading
|
|
|
- userLogSpinning: true, // 实时用户数据loading
|
|
|
+ userLogSpinning: true, // 实时用户数据loading
|
|
|
deliveryLogData: [], // 实时投递数据
|
|
|
userLogData: [], // 实时用户数据
|
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
|
timer: false,
|
|
|
- // 设备分布统计图
|
|
|
+ // 设备分布统计图
|
|
|
equipmentPieData: [{
|
|
|
name: '学校',
|
|
|
value: '14'
|
|
@@ -232,22 +239,21 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
- // 设备数量统计对比图数据
|
|
|
- equipmentBarData: [
|
|
|
- {
|
|
|
- name: '智能分类箱',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '积分兑换亭',
|
|
|
- value: 0
|
|
|
- },
|
|
|
- {
|
|
|
- name: '无人兑换机',
|
|
|
- value: 0
|
|
|
- }
|
|
|
- ],
|
|
|
- equipmentBarSeriesData: ['0', '0', '0']
|
|
|
+ // 设备数量统计对比图数据
|
|
|
+ equipmentBarData: [{
|
|
|
+ name: '智能分类箱',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '积分兑换亭',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '无人兑换机',
|
|
|
+ value: 0
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ equipmentBarSeriesData: ['0', '0', '0']
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -291,7 +297,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- // 初始化地图
|
|
|
+ // 初始化地图
|
|
|
initMap () {
|
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
|
var center = new TMap.LatLng(34.329828, 108.708344)
|
|
@@ -302,102 +308,106 @@ export default {
|
|
|
pitch: 43.5, // 设置俯仰角
|
|
|
rotation: 45 // 设置地图旋转角度
|
|
|
})
|
|
|
- // 创建并初始化MultiMarker 点标记
|
|
|
- this.markerLayer = new TMap.MultiMarker({
|
|
|
- map: this.map, // 指定地图容器
|
|
|
- // 样式定义
|
|
|
- styles: {
|
|
|
- // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
|
- 'myStyle': new TMap.MarkerStyle({
|
|
|
- 'width': 25, // 点标记样式宽度(像素)
|
|
|
- 'height': 25, // 点标记样式高度(像素)
|
|
|
- 'src': '../mark.png', // 图片路径
|
|
|
- // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
|
- 'anchor': { x: 16, y: 32 }
|
|
|
- })
|
|
|
- },
|
|
|
- // 点标记数据数组
|
|
|
- geometries: []
|
|
|
- })
|
|
|
- // 初始化infoWindow
|
|
|
- this.infoWindow = new TMap.InfoWindow({
|
|
|
- map: this.map,
|
|
|
- position: new TMap.LatLng(39.984104, 116.307503),
|
|
|
- offset: { x: 0, y: -32 } // 设置信息窗相对position偏移像素
|
|
|
- })
|
|
|
- this.infoWindow.close()// 初始关闭信息窗关闭
|
|
|
- this.markerLayer.on('mousemove', this.showMarkTitle)
|
|
|
- // 监听地图加载完成
|
|
|
- this.map.on('tilesloaded', this.getMapMark)
|
|
|
+ // 创建并初始化MultiMarker 点标记
|
|
|
+ this.markerLayer = new TMap.MultiMarker({
|
|
|
+ map: this.map, // 指定地图容器
|
|
|
+ // 样式定义
|
|
|
+ styles: {
|
|
|
+ // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
|
+ 'myStyle': new TMap.MarkerStyle({
|
|
|
+ 'width': 25, // 点标记样式宽度(像素)
|
|
|
+ 'height': 25, // 点标记样式高度(像素)
|
|
|
+ 'src': '../mark.png', // 图片路径
|
|
|
+ // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
|
+ 'anchor': {
|
|
|
+ x: 16,
|
|
|
+ y: 32
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点标记数据数组
|
|
|
+ geometries: []
|
|
|
+ })
|
|
|
+ // 初始化infoWindow
|
|
|
+ this.infoWindow = new TMap.InfoWindow({
|
|
|
+ map: this.map,
|
|
|
+ position: new TMap.LatLng(39.984104, 116.307503),
|
|
|
+ offset: {
|
|
|
+ x: 0,
|
|
|
+ y: -32
|
|
|
+ } // 设置信息窗相对position偏移像素
|
|
|
+ })
|
|
|
+ this.infoWindow.close() // 初始关闭信息窗关闭
|
|
|
+ this.markerLayer.on('mousemove', this.showMarkTitle)
|
|
|
+ // 监听地图加载完成
|
|
|
+ this.map.on('tilesloaded', this.getMapMark)
|
|
|
},
|
|
|
// 获取地图点坐标
|
|
|
getMapMark () {
|
|
|
getMapStation({}).then(res => {
|
|
|
const list = res.data || []
|
|
|
- console.log(list, 'lllllll')
|
|
|
const data = []
|
|
|
list.map((item, index) => {
|
|
|
if (item.lat <= 85.051128 && item.lat >= -85.051128) {
|
|
|
const p = {
|
|
|
- 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
|
- 'styleId': 'myStyle', // 指定样式id
|
|
|
- 'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
|
|
|
- 'properties': {// 自定义属性
|
|
|
+ 'id': item.id, // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
|
+ 'styleId': 'myStyle', // 指定样式id
|
|
|
+ 'position': new TMap.LatLng(Number(item.lat), Number(item.lng)), // 点标记坐标位置
|
|
|
+ 'properties': { // 自定义属性
|
|
|
'title': item.name
|
|
|
- }
|
|
|
+ }
|
|
|
}
|
|
|
data.push(p)
|
|
|
}
|
|
|
})
|
|
|
- console.log(data, 'lllllll222222')
|
|
|
// 增加点标记
|
|
|
this.markerLayer.add(data)
|
|
|
})
|
|
|
},
|
|
|
// 显示地图标记点名称
|
|
|
showMarkTitle (evt) {
|
|
|
- this.infoWindow.open() // 打开信息窗
|
|
|
- this.infoWindow.setPosition(evt.geometry.position)// 设置信息窗位置
|
|
|
- this.infoWindow.setContent(evt.geometry.properties.title)// 设置信息窗内容
|
|
|
+ this.infoWindow.open() // 打开信息窗
|
|
|
+ this.infoWindow.setPosition(evt.geometry.position) // 设置信息窗位置
|
|
|
+ this.infoWindow.setContent(evt.geometry.properties.title) // 设置信息窗内容
|
|
|
},
|
|
|
// 获取用户总数
|
|
|
getUser () {
|
|
|
- getUserTotal({}).then(res => {
|
|
|
- this.userTotal = res.data || 0
|
|
|
- })
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
+ this.userTotal = res.data || 0
|
|
|
+ })
|
|
|
},
|
|
|
// 获取设备总数
|
|
|
getDevice () {
|
|
|
- getDeviceTotal({}).then(res => {
|
|
|
- this.deviceTotal = res.data || 0
|
|
|
+ getDeviceTotal({}).then(res => {
|
|
|
+ this.deviceTotal = res.data || 0
|
|
|
this.equipmentBarData[0].value = this.deviceTotal
|
|
|
console.log(this.equipmentBarData, 'this.equipmentBarData')
|
|
|
- })
|
|
|
+ })
|
|
|
},
|
|
|
// 获取兑换亭总数
|
|
|
getSeller () {
|
|
|
- getOfficialPartnerTotal({}).then(res => {
|
|
|
- this.sellerTotal = res.data || 0
|
|
|
+ getOfficialPartnerTotal({}).then(res => {
|
|
|
+ this.sellerTotal = res.data || 0
|
|
|
this.equipmentBarData[1].value = this.sellerTotal
|
|
|
- })
|
|
|
+ })
|
|
|
},
|
|
|
// 获取兑换机总数
|
|
|
getMachine () {
|
|
|
- getExchangeMachineTotal({}).then(res => {
|
|
|
- this.machineTotal = res.data || 0
|
|
|
- this.equipmentBarData[2].value = this.machineTotal
|
|
|
- })
|
|
|
+ getExchangeMachineTotal({}).then(res => {
|
|
|
+ this.machineTotal = res.data || 0
|
|
|
+ this.equipmentBarData[2].value = this.machineTotal
|
|
|
+ })
|
|
|
},
|
|
|
// 获取实时投递数据
|
|
|
getDeliveryLog () {
|
|
|
- getDeliveryCarousel({}).then(res => {
|
|
|
- this.deliveryLogData = res.data.list || []
|
|
|
- })
|
|
|
+ getDeliveryCarousel({}).then(res => {
|
|
|
+ this.deliveryLogData = res.data.list || []
|
|
|
+ })
|
|
|
},
|
|
|
// 获取实时用户数据
|
|
|
getUserLog () {
|
|
|
getCustomerCarousel({}).then(res => {
|
|
|
- this.userLogData = res.data.list || []
|
|
|
+ this.userLogData = res.data.list || []
|
|
|
})
|
|
|
},
|
|
|
// 地图是否全屏展示
|
|
@@ -417,22 +427,21 @@ export default {
|
|
|
beforeRouteEnter (to, from, next) {
|
|
|
next(vm => {
|
|
|
vm.initMap()
|
|
|
- vm.deliverySpinning = true
|
|
|
- vm.userLogSpinning = true
|
|
|
- setTimeout(() => {
|
|
|
+ vm.deliverySpinning = true
|
|
|
+ vm.userLogSpinning = true
|
|
|
+ setTimeout(() => {
|
|
|
vm.deliverySpinning = false
|
|
|
vm.userLogSpinning = false
|
|
|
- }, 1000)
|
|
|
-
|
|
|
+ }, 2000)
|
|
|
vm.getUser()
|
|
|
vm.getDevice()
|
|
|
vm.getSeller()
|
|
|
- vm.getMachine()
|
|
|
+ vm.getMachine()
|
|
|
vm.getDeliveryLog()
|
|
|
vm.getUserLog()
|
|
|
- // 5分钟轮播
|
|
|
- setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
|
|
|
- setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
|
|
|
+ // 5分钟轮播
|
|
|
+ setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
|
|
|
+ setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
@@ -441,6 +450,7 @@ export default {
|
|
|
<style lang="less" scoped="scoped">
|
|
|
.nodeMap-contenter {
|
|
|
width: 100%;
|
|
|
+
|
|
|
.map-cont {
|
|
|
width: 100%;
|
|
|
margin-bottom: 20px;
|
|
@@ -459,6 +469,7 @@ export default {
|
|
|
padding: 5px;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
+
|
|
|
.map-data {
|
|
|
padding: 3px;
|
|
|
}
|
|
@@ -468,7 +479,8 @@ export default {
|
|
|
.data-cont {
|
|
|
width: 100%;
|
|
|
}
|
|
|
- .data-form{
|
|
|
+
|
|
|
+ .data-form {
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
border: 1px solid #d6d6d6;
|
|
@@ -477,18 +489,22 @@ export default {
|
|
|
overflow: hidden;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .seamless-warp{
|
|
|
+
|
|
|
+ .seamless-warp {
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
- .swipter-data{
|
|
|
+
|
|
|
+ .swipter-data {
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
- .loading{
|
|
|
+
|
|
|
+ .loading {
|
|
|
margin-top: 50px;
|
|
|
}
|
|
|
- .network-name{
|
|
|
+
|
|
|
+ .network-name {
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
@@ -515,11 +531,13 @@ export default {
|
|
|
border: 2px solid #5c9eff;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
- .chart-box{
|
|
|
+
|
|
|
+ .chart-box {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
margin-top: 10px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
.chart-cont {
|
|
|
padding: 20px;
|
|
|
height: 400px;
|
|
@@ -528,13 +546,15 @@ export default {
|
|
|
box-shadow: 5px 5px 8px #888888;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- .textCount{
|
|
|
- text-indent: 2em;
|
|
|
- .blue{
|
|
|
- color: #5c9eff;
|
|
|
- padding: 0px 2px;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .textCount {
|
|
|
+ text-indent: 2em;
|
|
|
+
|
|
|
+ .blue {
|
|
|
+ color: #5c9eff;
|
|
|
+ padding: 0px 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|