|
@@ -1,91 +1,312 @@
|
|
|
<template>
|
|
|
- <div class="nodeMap-contenter">
|
|
|
- <!-- 地图 -->
|
|
|
- <a-row class="map-cont" id="container" :getter="24">
|
|
|
+ <div class="nodeMap-contenter">
|
|
|
+ <!-- 地图 -->
|
|
|
+ <div class="map-cont">
|
|
|
+ <a-row class="map-title" :getter="24">
|
|
|
+ <span>智享亿家生活垃圾分类网点地图</span>
|
|
|
+ <a-icon :style="{fontSize:'30px',padding: '7px',float: 'right', cursor: 'pointer'}" type="fullscreen" />
|
|
|
+ </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>
|
|
|
|
|
|
- </a-row>
|
|
|
- <div v-show="true" class="data-cont">
|
|
|
- <!-- 实时轮播数据 -->
|
|
|
- <a-row :gutter="48" class="swipter" type="flex" justify="space-around">
|
|
|
- <a-col class="switper-cont" :span="11">
|
|
|
- </a-col>
|
|
|
- <a-col class="switper-cont" :span="11">
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <!-- 图表数据 -->
|
|
|
- <a-row :gutter="48" type="flex" justify="space-around">
|
|
|
- <a-col class="chart-cont" :span="7">
|
|
|
- </a-col>
|
|
|
- <a-col class="chart-cont" :span="7">
|
|
|
- </a-col>
|
|
|
- <a-col class="chart-cont" :span="7">
|
|
|
- </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-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>
|
|
|
+ </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>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <!-- 图表数据 -->
|
|
|
+ <a-row :gutter="48" 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="" />
|
|
|
+ </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="" />
|
|
|
+ </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吨。
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'NodeMap',
|
|
|
- data() {
|
|
|
- return {}
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initMap() {
|
|
|
- //定义地图中心点坐标
|
|
|
- var center = new TMap.LatLng(39.984120, 116.307484)
|
|
|
- //定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
|
- var map = new TMap.Map(document.getElementById('container'), {
|
|
|
- center: center, //设置地图中心点坐标
|
|
|
- zoom: 17.2, //设置地图缩放级别
|
|
|
- pitch: 43.5, //设置俯仰角
|
|
|
- rotation: 45 //设置地图旋转角度
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- mounted () {
|
|
|
- this.initMap()
|
|
|
- },
|
|
|
- beforeRouteEnter(to, from, next) {
|
|
|
- next(vm => {
|
|
|
- // vm.initMap()
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
+import {
|
|
|
+ ChartPie,
|
|
|
+ ChartBar,
|
|
|
+ ChartLine
|
|
|
+} from '@/components/Echarts'
|
|
|
+export default {
|
|
|
+ name: 'NodeMap',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ screenWidth: document.body.clientWidth, // 这里是给到了一个默认值
|
|
|
+ timer: false,
|
|
|
+ // 设备分布统计图
|
|
|
+ equipmentPieData: [{
|
|
|
+ name: '学校',
|
|
|
+ value: '14'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '居民小区',
|
|
|
+ value: '49'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '公共机构',
|
|
|
+ value: '32'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '企业',
|
|
|
+ value: '5'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ equipmentPieColor: ['#ffaa00', '#00ff00', '#00aaff', '#ff55ff', '#1dc5d4', '#8465c7', '#00ffff'],
|
|
|
+ // 设备数量统计对比图数据
|
|
|
+ equipmentBarData: {
|
|
|
+ '智能分类箱': 600,
|
|
|
+ '积分兑换亭': 400,
|
|
|
+ '无人兑换机': 200
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ChartPie,
|
|
|
+ ChartBar,
|
|
|
+ ChartLine
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ resize () {
|
|
|
+ console.log(this.screenWidth, 'this.screenWidth')
|
|
|
+ if (this.screenWidth < 1640) {
|
|
|
+ return 40
|
|
|
+ } else {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ screenWidth (val) {
|
|
|
+ // 为了避免频繁触发resize函数,使用定时器
|
|
|
+ if (!this.timer) {
|
|
|
+ this.screenWidth = val
|
|
|
+ this.timer = true
|
|
|
+ const that = this
|
|
|
+ setTimeout(function () {
|
|
|
+ // that.screenWidth = that.$store.state.canvasWidth
|
|
|
+ console.log(that.screenWidth)
|
|
|
+ that.timer = false
|
|
|
+ }, 400)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initMap () {
|
|
|
+ // 定义地图中心点坐标 默认定位在陕西省咸阳市
|
|
|
+ var center = new TMap.LatLng(34.329828, 108.708344)
|
|
|
+ // 定义map变量,调用 TMap.Map() 构造函数创建地图
|
|
|
+ var map = new TMap.Map(document.getElementById('container'), {
|
|
|
+ center: center, // 设置地图中心点坐标
|
|
|
+ zoom: 17.2, // 设置地图缩放级别
|
|
|
+ pitch: 43.5, // 设置俯仰角
|
|
|
+ rotation: 45 // 设置地图旋转角度
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.initMap()
|
|
|
+ const that = this
|
|
|
+ window.onresize = () => {
|
|
|
+ return (() => {
|
|
|
+ window.screenWidth = document.body.clientWidth
|
|
|
+ that.screenWidth = window.screenWidth
|
|
|
+ })()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeRouteEnter (to, from, next) {
|
|
|
+ next(vm => {})
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped="scoped">
|
|
|
.nodeMap-contenter {
|
|
|
width: 100%;
|
|
|
- min-height: 80vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
|
|
|
.map-cont {
|
|
|
width: 100%;
|
|
|
- flex: 1;
|
|
|
- margin-bottom: 20px;
|
|
|
+ text-align: center;
|
|
|
+ #container {
|
|
|
+ height: 30vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-title {
|
|
|
+ background-color: #5c9eff;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .map-footer {
|
|
|
+ background-color: #5c9eff;
|
|
|
+ padding: 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .map-data {
|
|
|
+ padding: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.swipter {
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin: 15px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-cont {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .data-cont{
|
|
|
+ .data-form{
|
|
|
+ text-align: center;
|
|
|
width: 100%;
|
|
|
+ border: 1px solid #d6d6d6;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 10px;
|
|
|
}
|
|
|
+
|
|
|
.switper-cont {
|
|
|
- height: 200px;
|
|
|
+ height: 300px;
|
|
|
+ // margin: 10px;
|
|
|
+ padding: 10px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 5px 5px 8px #888888;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
+ .data-title {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-title:before {
|
|
|
+ content: "";
|
|
|
+ border: 2px solid #5c9eff;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .chart-box{
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
.chart-cont {
|
|
|
- height: 300px;
|
|
|
+ padding: 10px;
|
|
|
+ height: 400px;
|
|
|
+ margin: 10px;
|
|
|
background-color: #fff;
|
|
|
border-radius: 20px;
|
|
|
box-shadow: 5px 5px 8px #888888;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .textCount{
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|