|
@@ -8,116 +8,158 @@
|
|
|
</a-row>
|
|
|
<a-row id="container" :getter="24">
|
|
|
</a-row>
|
|
|
- <a-row class="map-footer" :getter="24" type="flex" align="middle" justify="space-between">
|
|
|
- <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
- <a-icon type="team" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
- <span> 用户总数 144660 个</span>
|
|
|
- </a-col>
|
|
|
- <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
- <a-icon type="rest" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
- <span> 智能收集箱 144660 台</span>
|
|
|
- </a-col>
|
|
|
- <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
- <a-icon type="shop" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
- <span> 智能兑换亭 144660 台</span>
|
|
|
- </a-col>
|
|
|
- <a-col class="map-data" :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
- <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
- <span> 智能兑换机 144660 台</span>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
+ <div class="map-footer">
|
|
|
+ <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'}" />
|
|
|
+ <span> 用户总数 {{ userTotal }} 个</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
+ <div class="map-data">
|
|
|
+ <a-icon type="rest" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
+ <span> 智能收集箱 {{ deviceTotal }} 台</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
+ <div class="map-data">
|
|
|
+ <a-icon type="shop" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
+ <span> 智能兑换亭 {{ sellerTotal }} 台</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
+ <div class="map-data">
|
|
|
+ <a-icon type="hdd" :style="{color:'#83ace1',fontSize:'20px',padding:'5px',backgroundColor:'#FFF',borderRadius:'8px'}" />
|
|
|
+ <span> 智能兑换机 144660 台</span>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<div v-show="true" class="data-cont">
|
|
|
<!-- 实时轮播数据 -->
|
|
|
- <a-row :gutter="24" class="swipter" type="flex" justify="space-between">
|
|
|
+ <a-row :gutter="[24,24]">
|
|
|
<a-col
|
|
|
- class="switper-cont"
|
|
|
:xs="24"
|
|
|
:sm="24"
|
|
|
- :md="23"
|
|
|
- :lg="23"
|
|
|
- :xl="23"
|
|
|
- :xxl="12">
|
|
|
- <div class="data-title">实时投递数据</div>
|
|
|
- <div class="chart-box data-form">
|
|
|
- <a-row :gutter="0">
|
|
|
- <a-col style="padding: 10px;text-align: center;" :span="6">投递时间</a-col>
|
|
|
- <a-col style="padding: 10px;text-align: center;" :span="4">投递用户</a-col>
|
|
|
- <a-col style="padding: 10px;text-align: center;" :span="6">投递网点</a-col>
|
|
|
- <a-col style="padding: 10px;text-align: center;" :span="4">投递分类</a-col>
|
|
|
- <a-col style="padding: 10px;text-align: center;" :span="4">投递重量(g)</a-col>
|
|
|
- </a-row>
|
|
|
- <a-row :gutter="0">
|
|
|
- <a-col style="padding: 3px;text-align: center;" :span="6">2020-12-26 12:10:00</a-col>
|
|
|
- <a-col style="padding: 3px;text-align: center;" :span="4">187****1236</a-col>
|
|
|
- <a-col style="padding: 3px;text-align: center;" :span="6">咸阳市会觉得很舒服很多时间回复</a-col>
|
|
|
- <a-col style="padding: 3px;text-align: center;" :span="4">废旧衣物</a-col>
|
|
|
- <a-col style="padding: 3px;text-align: center;" :span="4">1526</a-col>
|
|
|
- </a-row>
|
|
|
+ :md="24"
|
|
|
+ :lg="24"
|
|
|
+ :xl="16"
|
|
|
+ :xxl="16">
|
|
|
+ <div class="switper-cont">
|
|
|
+ <div class="data-title">实时投递数据</div>
|
|
|
+ <div class="chart-box data-form">
|
|
|
+ <div class="swipter-title">
|
|
|
+ <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="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="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-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
<a-col
|
|
|
- class="switper-cont"
|
|
|
:xs="24"
|
|
|
:sm="24"
|
|
|
- :md="23"
|
|
|
- :lg="23"
|
|
|
- :xl="23"
|
|
|
- :xxl="12">
|
|
|
- <div class="data-title">实时新增用户</div>
|
|
|
+ :md="24"
|
|
|
+ :lg="24"
|
|
|
+ :xl="8"
|
|
|
+ :xxl="8">
|
|
|
+ <div class="switper-cont">
|
|
|
+ <div class="data-title">实时新增用户</div>
|
|
|
+ <div class="chart-box data-form">
|
|
|
+ <div class="swipter-title">
|
|
|
+ <a-row :gutter="0">
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="16">注册时间</a-col>
|
|
|
+ <a-col style="padding: 0px 2px;text-align: center;" :span="8">用户手机</a-col>
|
|
|
+ </a-row>
|
|
|
+ </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>
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<!-- 图表数据 -->
|
|
|
- <a-row :gutter="48" type="flex" justify="space-between">
|
|
|
+ <a-row :gutter="[24,24]" type="flex" justify="space-between">
|
|
|
<a-col
|
|
|
- class="chart-cont"
|
|
|
:xs="24"
|
|
|
:sm="20"
|
|
|
- :md="11"
|
|
|
- :lg="11"
|
|
|
- :xl="11"
|
|
|
- :xxl="7">
|
|
|
- <div class="data-title">设备分布统计图</div>
|
|
|
- <chart-pie
|
|
|
- ref="chartPie"
|
|
|
- class="chart-box"
|
|
|
- :value="equipmentPieData"
|
|
|
- title=""
|
|
|
- unit="%"
|
|
|
- :color="equipmentPieColor"
|
|
|
- :xAxisRotate="resize"
|
|
|
- text="" />
|
|
|
+ :md="12"
|
|
|
+ :lg="12"
|
|
|
+ :xl="12"
|
|
|
+ :xxl="8">
|
|
|
+ <div class="chart-cont">
|
|
|
+ <div class="data-title">设备分布统计图</div>
|
|
|
+ <chart-pie
|
|
|
+ ref="chartPie"
|
|
|
+ class="chart-box"
|
|
|
+ :value="equipmentPieData"
|
|
|
+ title=""
|
|
|
+ unit="%"
|
|
|
+ :color="equipmentPieColor"
|
|
|
+ :xAxisRotate="resize"
|
|
|
+ text="" />
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
<a-col
|
|
|
- class="chart-cont"
|
|
|
xs="24"
|
|
|
:sm="20"
|
|
|
- :md="11"
|
|
|
- :lg="11"
|
|
|
- :xl="11"
|
|
|
- :xxl="7">
|
|
|
- <div class="data-title">设备数量统计对比图</div>
|
|
|
- <chart-bar
|
|
|
- ref="ChartBar"
|
|
|
- class="chart-box"
|
|
|
- color="#0000fe"
|
|
|
- :yMax="1000"
|
|
|
- yUnit="台"
|
|
|
- :value="equipmentBarData"
|
|
|
- text="" />
|
|
|
+ :md="12"
|
|
|
+ :lg="12"
|
|
|
+ :xl="12"
|
|
|
+ :xxl="8">
|
|
|
+ <div class="chart-cont">
|
|
|
+ <div class="data-title">设备数量统计对比图</div>
|
|
|
+ <chart-bar
|
|
|
+ ref="ChartBar"
|
|
|
+ class="chart-box"
|
|
|
+ color="#0000fe"
|
|
|
+ :yMax="1000"
|
|
|
+ yUnit="台"
|
|
|
+ :value="equipmentBarData"
|
|
|
+ text="" />
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
<a-col
|
|
|
- class="chart-cont"
|
|
|
xs="24"
|
|
|
:sm="20"
|
|
|
:md="16"
|
|
|
- :lg="11"
|
|
|
- :xl="11"
|
|
|
- :xxl="7">
|
|
|
- <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个, 设置智能分类箱669组, 积分兑换亭25个, 无人兑换机8个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数145609人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
|
|
|
+ :lg="12"
|
|
|
+ :xl="12"
|
|
|
+ :xxl="8">
|
|
|
+ <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">8</span>个, 覆盖28处办公场所的177个机关事业单位,居民小区29个,企业2个,学校8个。 软件注册人数<span class="blue">{{ userTotal }}</span>人, 周回收有害垃圾5.646公斤、 可回收物9.26吨, 日处理厨余垃圾106吨。
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -128,13 +170,29 @@
|
|
|
<script>
|
|
|
import {
|
|
|
ChartPie,
|
|
|
- ChartBar,
|
|
|
- ChartLine
|
|
|
+ ChartBar
|
|
|
} from '@/components/Echarts'
|
|
|
+import {
|
|
|
+ getUserTotal,
|
|
|
+ getDeviceTotal,
|
|
|
+ getOfficialPartnerTotal,
|
|
|
+ getDeliveryCarousel,
|
|
|
+ getCustomerCarousel,
|
|
|
+ getMapStation
|
|
|
+} from '@/api/nodeMap.js'
|
|
|
export default {
|
|
|
name: 'NodeMap',
|
|
|
+ components: {
|
|
|
+ ChartPie,
|
|
|
+ ChartBar
|
|
|
+ },
|
|
|
data () {
|
|
|
return {
|
|
|
+ userTotal: 0, // 用户总数
|
|
|
+ deviceTotal: 0, // 设备总数
|
|
|
+ sellerTotal: 0, // 兑换亭总数
|
|
|
+ deliveryLogData: [], // 实时投递数据
|
|
|
+ userLogData: [], // 实时用户数据
|
|
|
screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
|
timer: false,
|
|
|
// 设备分布统计图
|
|
@@ -158,17 +216,12 @@ export default {
|
|
|
equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
// 设备数量统计对比图数据
|
|
|
equipmentBarData: {
|
|
|
- '智能分类箱': 600,
|
|
|
- '积分兑换亭': 400,
|
|
|
- '无人兑换机': 200
|
|
|
+ '智能分类箱': 0,
|
|
|
+ '积分兑换亭': 0,
|
|
|
+ '无人兑换机': 0
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- components: {
|
|
|
- ChartPie,
|
|
|
- ChartBar,
|
|
|
- ChartLine
|
|
|
- },
|
|
|
computed: {
|
|
|
resize () {
|
|
|
console.log(this.screenWidth, 'this.screenWidth')
|
|
@@ -195,6 +248,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 初始化地图
|
|
|
initMap () {
|
|
|
// 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
|
var center = new TMap.LatLng(34.329828, 108.708344)
|
|
@@ -205,6 +259,61 @@ export default {
|
|
|
pitch: 43.5, // 设置俯仰角
|
|
|
rotation: 45 // 设置地图旋转角度
|
|
|
})
|
|
|
+ // 创建并初始化MultiMarker
|
|
|
+ var markerLayer = new TMap.MultiMarker({
|
|
|
+ map: map, // 指定地图容器
|
|
|
+ // 样式定义
|
|
|
+ styles: {
|
|
|
+ // 创建一个styleId为"myStyle"的样式(styles的子属性名即为styleId)
|
|
|
+ 'myStyle': new TMap.MarkerStyle({
|
|
|
+ 'width': 25, // 点标记样式宽度(像素)
|
|
|
+ 'height': 35, // 点标记样式高度(像素)
|
|
|
+ 'src': '../logo.png', // 图片路径
|
|
|
+ // 焦点在图片中的像素位置,一般大头针类似形式的图片以针尖位置做为焦点,圆形点以圆心位置为焦点
|
|
|
+ 'anchor': { x: 16, y: 32 }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点标记数据数组
|
|
|
+ geometries: [{
|
|
|
+ 'id': '1', // 点标记唯一标识,后续如果有删除、修改位置等操作,都需要此id
|
|
|
+ 'styleId': 'myStyle', // 指定样式id
|
|
|
+ 'position': new TMap.LatLng(34.329828, 108.708344), // 点标记坐标位置
|
|
|
+ 'properties': {// 自定义属性
|
|
|
+ 'title': '册书和幅度是'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取用户总数
|
|
|
+ getUser () {
|
|
|
+ getUserTotal({}).then(res => {
|
|
|
+ this.userTotal = res.data || 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取设备总数
|
|
|
+ getDevice () {
|
|
|
+ getDeviceTotal({}).then(res => {
|
|
|
+ this.deviceTotal = res.data || 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取兑换亭总数
|
|
|
+ getSeller () {
|
|
|
+ getOfficialPartnerTotal({}).then(res => {
|
|
|
+ this.sellerTotal = res.data || 0
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取实时投递数据
|
|
|
+ getDeliveryLog () {
|
|
|
+ getDeliveryCarousel({}).then(res => {
|
|
|
+ this.deliveryLogData = res.data || []
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取实时用户数据
|
|
|
+ getUserLog () {
|
|
|
+ getCustomerCarousel({}).then(res => {
|
|
|
+ this.userLogData = res.data || 0
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
@@ -218,7 +327,13 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
beforeRouteEnter (to, from, next) {
|
|
|
- next(vm => {})
|
|
|
+ next(vm => {
|
|
|
+ vm.getUser()
|
|
|
+ vm.getDevice()
|
|
|
+ vm.getSeller()
|
|
|
+ vm.getDeliveryLog()
|
|
|
+ vm.getUserLog()
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -226,10 +341,10 @@ export default {
|
|
|
<style lang="less" scoped="scoped">
|
|
|
.nodeMap-contenter {
|
|
|
width: 100%;
|
|
|
-
|
|
|
.map-cont {
|
|
|
width: 100%;
|
|
|
- text-align: center;
|
|
|
+ // text-align: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
#container {
|
|
|
height: 30vh;
|
|
|
}
|
|
@@ -248,17 +363,12 @@ export default {
|
|
|
padding: 5px;
|
|
|
color: #fff;
|
|
|
font-size: 16px;
|
|
|
-
|
|
|
.map-data {
|
|
|
padding: 3px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .swipter {
|
|
|
- margin: 15px 0px;
|
|
|
- }
|
|
|
-
|
|
|
.data-cont {
|
|
|
width: 100%;
|
|
|
}
|
|
@@ -268,12 +378,21 @@ export default {
|
|
|
border: 1px solid #d6d6d6;
|
|
|
border-radius: 10px;
|
|
|
padding: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ .swipter-data{
|
|
|
+ padding: 5px 0px;
|
|
|
+ }
|
|
|
+ .network-name{
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.switper-cont {
|
|
|
height: 300px;
|
|
|
- // margin: 10px;
|
|
|
- padding: 10px;
|
|
|
+ padding: 20px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 5px 5px 8px #888888;
|
|
@@ -296,9 +415,8 @@ export default {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
.chart-cont {
|
|
|
- padding: 10px;
|
|
|
+ padding: 20px;
|
|
|
height: 400px;
|
|
|
- margin: 10px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20px;
|
|
|
box-shadow: 5px 5px 8px #888888;
|
|
@@ -306,6 +424,10 @@ export default {
|
|
|
flex-direction: column;
|
|
|
.textCount{
|
|
|
text-indent: 2em;
|
|
|
+ .blue{
|
|
|
+ color: #5c9eff;
|
|
|
+ padding: 0px 2px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|