|
@@ -4,10 +4,11 @@
|
|
<div class="map-cont">
|
|
<div class="map-cont">
|
|
<a-row class="map-title" :getter="24">
|
|
<a-row class="map-title" :getter="24">
|
|
<span>智享亿家生活垃圾分类网点地图</span>
|
|
<span>智享亿家生活垃圾分类网点地图</span>
|
|
- <a-icon :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" type="fullscreen" />
|
|
|
|
- </a-row>
|
|
|
|
- <a-row id="container" :getter="24">
|
|
|
|
|
|
+ <a-icon @click="isFullscreenMap" :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" :type="isMapFull ?'fullscreen-exit':'fullscreen'" />
|
|
</a-row>
|
|
</a-row>
|
|
|
|
+ <!-- 地图容器 -->
|
|
|
|
+ <div id="container" :style="{height: mapHeight}">
|
|
|
|
+ </div>
|
|
<div class="map-footer">
|
|
<div class="map-footer">
|
|
<a-row :getter="[24,24]" >
|
|
<a-row :getter="[24,24]" >
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
@@ -31,14 +32,14 @@
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
<a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
<div class="map-data">
|
|
<div class="map-data">
|
|
<a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
<a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
- <span> 智能兑换机 144660 台</span>
|
|
|
|
|
|
+ <span> 智能兑换机 {{ machineTotal }} 台</span>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <div v-show="true" class="data-cont">
|
|
|
|
|
|
+ <div v-show="!isMapFull" class="data-cont">
|
|
<!-- 实时轮播数据 -->
|
|
<!-- 实时轮播数据 -->
|
|
<a-row :gutter="[24,24]">
|
|
<a-row :gutter="[24,24]">
|
|
<a-col
|
|
<a-col
|
|
@@ -46,37 +47,40 @@
|
|
:sm="24"
|
|
:sm="24"
|
|
:md="24"
|
|
:md="24"
|
|
:lg="24"
|
|
:lg="24"
|
|
- :xl="16"
|
|
|
|
|
|
+ :xl="24"
|
|
:xxl="16">
|
|
:xxl="16">
|
|
<div class="switper-cont">
|
|
<div class="switper-cont">
|
|
<div class="data-title">实时投递数据</div>
|
|
<div class="data-title">实时投递数据</div>
|
|
<div class="chart-box data-form">
|
|
<div class="chart-box data-form">
|
|
<div class="swipter-title">
|
|
<div class="swipter-title">
|
|
<a-row :gutter="0">
|
|
<a-row :gutter="0">
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="7">投递时间</a-col>
|
|
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="6">投递时间</a-col>
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="4">投递用户</a-col>
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="4">投递用户</a-col>
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="6">投递网点</a-col>
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="6">投递网点</a-col>
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="3">投递分类</a-col>
|
|
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="4">投递重量(g)</a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </div>
|
|
|
|
- <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="7">{{ item.deliveryTime }}</a-col>
|
|
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="4">{{ item.customerMobile }}</a-col>
|
|
|
|
- <a-col
|
|
|
|
- :title="item.stationName"
|
|
|
|
- style="padding: 0px 2px;text-align: center;white-space: nowrap;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- overflow: hidden;
|
|
|
|
- word-break: break-all;"
|
|
|
|
- :span="6">
|
|
|
|
- {{ item.stationName }}
|
|
|
|
- </a-col>
|
|
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="3">{{ item.rubbishTypeDictValue }}</a-col>
|
|
|
|
- <a-col style="padding: 0px 2px;text-align: center;" :span="4">{{ item.rubbishWeight }}</a-col>
|
|
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="5">投递分类</a-col>
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="3">投递重量(g)</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
|
|
+ <vue-seamless-scroll :data="deliveryLogData" :class-option="classOption" class="seamless-warp">
|
|
|
|
+ <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>
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="4">{{ item.customerMobile }}</a-col>
|
|
|
|
+ <a-col
|
|
|
|
+ :title="item.stationName"
|
|
|
|
+ style="padding: 0px 2px;text-align: center;white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ word-break: break-all;"
|
|
|
|
+ :span="6">
|
|
|
|
+ {{ item.stationName }}
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="5">{{ item.rubbishTypeDictValue }}</a-col>
|
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="3">{{ item.rubbishWeight }}</a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+ </div>
|
|
|
|
+ </vue-seamless-scroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -85,7 +89,7 @@
|
|
:sm="24"
|
|
:sm="24"
|
|
:md="24"
|
|
:md="24"
|
|
:lg="24"
|
|
:lg="24"
|
|
- :xl="8"
|
|
|
|
|
|
+ :xl="24"
|
|
:xxl="8">
|
|
:xxl="8">
|
|
<div class="switper-cont">
|
|
<div class="switper-cont">
|
|
<div class="data-title">实时新增用户</div>
|
|
<div class="data-title">实时新增用户</div>
|
|
@@ -96,13 +100,16 @@
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
|
|
<a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
</div>
|
|
</div>
|
|
- <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>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <vue-seamless-scroll :data="userLogData" :class-option="classOption" class="seamless-warp">
|
|
|
|
+ <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>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -144,6 +151,7 @@
|
|
:yMax="1000"
|
|
:yMax="1000"
|
|
yUnit="台"
|
|
yUnit="台"
|
|
:value="equipmentBarData"
|
|
:value="equipmentBarData"
|
|
|
|
+ :seriesData="equipmentBarSeriesData"
|
|
text="" />
|
|
text="" />
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -158,7 +166,7 @@
|
|
<div class="data-title">项目介绍</div>
|
|
<div class="data-title">项目介绍</div>
|
|
<div class="chart-box textCount">
|
|
<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个, 设置智能分类箱
|
|
全市共有党政机关、企事业单位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">8</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -166,31 +174,41 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
-</template>
|
|
|
|
|
|
+ </div></template>
|
|
<script>
|
|
<script>
|
|
import {
|
|
import {
|
|
ChartPie,
|
|
ChartPie,
|
|
ChartBar
|
|
ChartBar
|
|
} from '@/components/Echarts'
|
|
} from '@/components/Echarts'
|
|
|
|
+import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import {
|
|
import {
|
|
getUserTotal,
|
|
getUserTotal,
|
|
getDeviceTotal,
|
|
getDeviceTotal,
|
|
getOfficialPartnerTotal,
|
|
getOfficialPartnerTotal,
|
|
getDeliveryCarousel,
|
|
getDeliveryCarousel,
|
|
getCustomerCarousel,
|
|
getCustomerCarousel,
|
|
|
|
+ getExchangeMachineTotal,
|
|
getMapStation
|
|
getMapStation
|
|
} from '@/api/nodeMap.js'
|
|
} from '@/api/nodeMap.js'
|
|
export default {
|
|
export default {
|
|
name: 'NodeMap',
|
|
name: 'NodeMap',
|
|
components: {
|
|
components: {
|
|
ChartPie,
|
|
ChartPie,
|
|
- ChartBar
|
|
|
|
|
|
+ ChartBar,
|
|
|
|
+ vueSeamlessScroll
|
|
},
|
|
},
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
|
|
+ map: null, // 地图对象
|
|
|
|
+ markerLayer: null, // 地图点标记对象
|
|
|
|
+ infoWindow: null, // 地图信息窗口对象
|
|
|
|
+ isMapFull: false, // 地图是否全屏
|
|
userTotal: 0, // 用户总数
|
|
userTotal: 0, // 用户总数
|
|
deviceTotal: 0, // 设备总数
|
|
deviceTotal: 0, // 设备总数
|
|
sellerTotal: 0, // 兑换亭总数
|
|
sellerTotal: 0, // 兑换亭总数
|
|
|
|
+ machineTotal: 0, // 兑换机总数
|
|
|
|
+ deliverySpinning: true, // 实时投递数据loading
|
|
|
|
+ userLogSpinning: true, // 实时用户数据loading
|
|
deliveryLogData: [], // 实时投递数据
|
|
deliveryLogData: [], // 实时投递数据
|
|
userLogData: [], // 实时用户数据
|
|
userLogData: [], // 实时用户数据
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
@@ -215,11 +233,21 @@ export default {
|
|
],
|
|
],
|
|
equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
// 设备数量统计对比图数据
|
|
// 设备数量统计对比图数据
|
|
- equipmentBarData: {
|
|
|
|
- '智能分类箱': 0,
|
|
|
|
- '积分兑换亭': 0,
|
|
|
|
- '无人兑换机': 0
|
|
|
|
- }
|
|
|
|
|
|
+ equipmentBarData: [
|
|
|
|
+ {
|
|
|
|
+ name: '智能分类箱',
|
|
|
|
+ value: 0
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '积分兑换亭',
|
|
|
|
+ value: 0
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ name: '无人兑换机',
|
|
|
|
+ value: 0
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ equipmentBarSeriesData: ['0', '0', '0']
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -230,6 +258,21 @@ export default {
|
|
} else {
|
|
} else {
|
|
return 0
|
|
return 0
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ mapHeight () {
|
|
|
|
+ return this.isMapFull ? '80vh' : '30vh'
|
|
|
|
+ },
|
|
|
|
+ classOption () {
|
|
|
|
+ return {
|
|
|
|
+ step: 0.4, // 数值越大速度滚动越快
|
|
|
|
+ limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
|
+ hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
|
+ direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
|
+ openWatch: true, // 开启数据实时监控刷新dom
|
|
|
|
+ singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
|
+ singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
+ waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -253,71 +296,116 @@ export default {
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
var center = new TMap.LatLng(34.329828, 108.708344)
|
|
var center = new TMap.LatLng(34.329828, 108.708344)
|
|
// 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
// 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
- var map = new TMap.Map(document.getElementById('container'), {
|
|
|
|
|
|
+ this.map = new TMap.Map(document.getElementById('container'), {
|
|
center: center, // 设置地图中心点坐标
|
|
center: center, // 设置地图中心点坐标
|
|
zoom: 17.2, // 设置地图缩放级别
|
|
zoom: 17.2, // 设置地图缩放级别
|
|
pitch: 43.5, // 设置俯仰角
|
|
pitch: 43.5, // 设置俯仰角
|
|
rotation: 45 // 设置地图旋转角度
|
|
rotation: 45 // 设置地图旋转角度
|
|
})
|
|
})
|
|
- // 创建并初始化MultiMarker
|
|
|
|
- var markerLayer = new TMap.MultiMarker({
|
|
|
|
- map: map, // 指定地图容器
|
|
|
|
|
|
+ // 创建并初始化MultiMarker 点标记
|
|
|
|
+ this.markerLayer = new TMap.MultiMarker({
|
|
|
|
+ map: this.map, // 指定地图容器
|
|
// 样式定义
|
|
// 样式定义
|
|
styles: {
|
|
styles: {
|
|
// 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
// 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
'myStyle': new TMap.MarkerStyle({
|
|
'myStyle': new TMap.MarkerStyle({
|
|
'width': 25, // 点标记样式宽度(像素)
|
|
'width': 25, // 点标记样式宽度(像素)
|
|
- 'height': 35, // 点标记样式高度(像素)
|
|
|
|
- 'src': '../logo.png', // 图片路径
|
|
|
|
|
|
+ 'height': 25, // 点标记样式高度(像素)
|
|
|
|
+ 'src': '../mark.jpg', // 图片路径
|
|
// 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
// 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
'anchor': { x: 16, y: 32 }
|
|
'anchor': { x: 16, y: 32 }
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 点标记数据数组
|
|
// 点标记数据数组
|
|
- geometries: [{
|
|
|
|
- 'id': '1', // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
|
|
- 'styleId': 'myStyle', // 指定样式id
|
|
|
|
- 'position': new TMap.LatLng(34.329828, 108.708344), // 点标记坐标位置
|
|
|
|
- 'properties': {// 自定义属性
|
|
|
|
- 'title': '册书和幅度是'
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
|
|
+ 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)
|
|
|
|
+ },
|
|
|
|
+ // 获取地图点坐标
|
|
|
|
+ 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': {// 自定义属性
|
|
|
|
+ '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)// 设置信息窗内容
|
|
},
|
|
},
|
|
// 获取用户总数
|
|
// 获取用户总数
|
|
getUser () {
|
|
getUser () {
|
|
- getUserTotal({}).then(res => {
|
|
|
|
- this.userTotal = res.data || 0
|
|
|
|
- })
|
|
|
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
|
+ this.userTotal = res.data || 0
|
|
|
|
+ })
|
|
},
|
|
},
|
|
// 获取设备总数
|
|
// 获取设备总数
|
|
getDevice () {
|
|
getDevice () {
|
|
getDeviceTotal({}).then(res => {
|
|
getDeviceTotal({}).then(res => {
|
|
this.deviceTotal = res.data || 0
|
|
this.deviceTotal = res.data || 0
|
|
|
|
+ this.equipmentBarData[0].value = this.deviceTotal
|
|
|
|
+ console.log(this.equipmentBarData, 'this.equipmentBarData')
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取兑换亭总数
|
|
// 获取兑换亭总数
|
|
getSeller () {
|
|
getSeller () {
|
|
getOfficialPartnerTotal({}).then(res => {
|
|
getOfficialPartnerTotal({}).then(res => {
|
|
this.sellerTotal = res.data || 0
|
|
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
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取实时投递数据
|
|
// 获取实时投递数据
|
|
getDeliveryLog () {
|
|
getDeliveryLog () {
|
|
getDeliveryCarousel({}).then(res => {
|
|
getDeliveryCarousel({}).then(res => {
|
|
- this.deliveryLogData = res.data || []
|
|
|
|
|
|
+ this.deliveryLogData = res.data.list || []
|
|
|
|
+ // this.deliverySpinning = false
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 获取实时用户数据
|
|
// 获取实时用户数据
|
|
getUserLog () {
|
|
getUserLog () {
|
|
- getCustomerCarousel({}).then(res => {
|
|
|
|
- this.userLogData = res.data || 0
|
|
|
|
- })
|
|
|
|
|
|
+ getCustomerCarousel({}).then(res => {
|
|
|
|
+ this.userLogData = res.data.list || []
|
|
|
|
+ // this.userLogSpinning = false
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ // 地图是否全屏展示
|
|
|
|
+ isFullscreenMap () {
|
|
|
|
+ this.isMapFull = !this.isMapFull
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted () {
|
|
mounted () {
|
|
- this.initMap()
|
|
|
|
const that = this
|
|
const that = this
|
|
window.onresize = () => {
|
|
window.onresize = () => {
|
|
return (() => {
|
|
return (() => {
|
|
@@ -328,11 +416,23 @@ export default {
|
|
},
|
|
},
|
|
beforeRouteEnter (to, from, next) {
|
|
beforeRouteEnter (to, from, next) {
|
|
next(vm => {
|
|
next(vm => {
|
|
|
|
+ vm.initMap()
|
|
|
|
+ vm.deliverySpinning = true
|
|
|
|
+ vm.userLogSpinning = true
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ vm.deliverySpinning = false
|
|
|
|
+ vm.userLogSpinning = false
|
|
|
|
+ }, 1000)
|
|
|
|
+ vm.getMapMark()
|
|
vm.getUser()
|
|
vm.getUser()
|
|
vm.getDevice()
|
|
vm.getDevice()
|
|
vm.getSeller()
|
|
vm.getSeller()
|
|
|
|
+ vm.getMachine()
|
|
vm.getDeliveryLog()
|
|
vm.getDeliveryLog()
|
|
vm.getUserLog()
|
|
vm.getUserLog()
|
|
|
|
+ // 5分钟轮播
|
|
|
|
+ setInterval(() => vm.getDeliveryLog(), 1000 * 60 * 5)
|
|
|
|
+ setInterval(() => vm.getUserLog(), 1000 * 60 * 5)
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -343,11 +443,7 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
.map-cont {
|
|
.map-cont {
|
|
width: 100%;
|
|
width: 100%;
|
|
- // text-align: center;
|
|
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
- #container {
|
|
|
|
- height: 30vh;
|
|
|
|
- }
|
|
|
|
|
|
|
|
.map-title {
|
|
.map-title {
|
|
background-color: #5c9eff;
|
|
background-color: #5c9eff;
|
|
@@ -379,8 +475,18 @@ export default {
|
|
border-radius: 10px;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
padding: 10px;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .seamless-warp{
|
|
|
|
+ flex: 1;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
.swipter-data{
|
|
.swipter-data{
|
|
- padding: 5px 0px;
|
|
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ }
|
|
|
|
+ .loading{
|
|
|
|
+ margin-top: 50px;
|
|
}
|
|
}
|
|
.network-name{
|
|
.network-name{
|
|
white-space: nowrap;
|
|
white-space: nowrap;
|