Przeglądaj źródła

首页地图修改

1004749546@qq.com 4 lat temu
rodzic
commit
d95eb5bcd1

+ 9 - 12
package-lock.json

@@ -5699,12 +5699,11 @@
       }
     },
     "echarts": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.0.0.tgz",
-      "integrity": "sha512-6SDcJbLVOcfQyjPg+spNU1+JVrkU1B9fzUa5tpbP/mMNUPyigCOJwcEIQAJSbp9jt5UP3EXvQR0vtYXIo9AjyA==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
       "requires": {
-        "tslib": "1.10.0",
-        "zrender": "5.0.1"
+        "zrender": "4.3.2"
       }
     },
     "editorconfig": {
@@ -16211,7 +16210,8 @@
     "tslib": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
+      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+      "dev": true
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -17572,12 +17572,9 @@
       }
     },
     "zrender": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.0.1.tgz",
-      "integrity": "sha512-i8FNCKAKfF0EfZFJ6w2p30umBrCyy481/PePFQqPdtNgCl5Hp5z7/dovqb7soEoFkhNvhjJ/J4W9zFALeae6yA==",
-      "requires": {
-        "tslib": "1.10.0"
-      }
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

+ 1 - 1
package.json

@@ -19,7 +19,7 @@
     "axios": "^0.19.0",
     "china-division": "^2.3.1",
     "core-js": "2.6.9",
-    "echarts": "^5.0.0",
+    "echarts": "^4.9.0",
     "enquire.js": "^2.1.6",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",

+ 1 - 1
public/index.html

@@ -30,4 +30,4 @@
     <!-- built files will be auto injected -->
   </body>
 </html>
-<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=KJTBZ-2BIAI-DUNGY-5WJXV-XLGN7-ZHFQ7"></script>
+<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EZHBZ-FWHWJ-MF4FO-K6DJF-4YNGQ-PJBYF"></script>

+ 7 - 1
src/components/Echarts/bar.vue

@@ -148,7 +148,13 @@ export default {
             },
             // interval: 2,
             position: 'left'
-          }
+          },
+		  grid: {
+			  left: '3%',
+			  right: '4%',
+			  bottom: '3%',
+			  containLabel: true
+		  }
         }
         if (this.value) {
           option.series = [{

+ 9 - 4
src/components/Echarts/pie.vue

@@ -38,7 +38,7 @@ export default {
     // 圆环中心金额
     total: {
       type: [Number, String],
-      default: 0
+      default: ''
     },
     // 圆环各类型颜色
     color: {
@@ -51,6 +51,11 @@ export default {
     xAxisRotate: {
       type: Number,
       default: 0
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: ''
     }
   },
   watch: {
@@ -102,7 +107,7 @@ export default {
           }],
           tooltip: {
             trigger: 'item',
-            formatter: '{b} : {c} ({d}%)'
+            formatter: `{b} : {c}${this.unit} ${this.unit == '%' ? '' : '({d}%)'}`
           },
           legend: {
             orient: 'horizontal',
@@ -123,10 +128,10 @@ export default {
                   formatter: params => {
                     return (
                       '{icon|●}{name|' + params.name + '}{value|' +
-                            this.formatNumber(params.value) + '}'
+                            this.formatNumber(params.value) + this.unit + '}'
                     )
                   },
-                  padding: [0, -100, 25, -130],
+                  padding: [0, -140, 25, -140],
                   rich: {
                     icon: {
                       fontSize: 12

+ 281 - 60
src/views/map/NodeMap.vue

@@ -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>&nbsp;&nbsp;用户总数 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>&nbsp;&nbsp;智能收集箱 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>&nbsp;&nbsp;智能兑换亭 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>&nbsp;&nbsp;智能兑换机 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>