|
|
@@ -0,0 +1,265 @@
|
|
|
+<template>
|
|
|
+ <el-card shadow="hover" :body-style="[bodyStyle]" class="farm-map-container">
|
|
|
+ <template slot="header">
|
|
|
+ 牧场分布
|
|
|
+ </template>
|
|
|
+ <remote-js src="https://webapi.amap.com/loca?key=bf91055058a47a7dc387e40ab6256a5f"
|
|
|
+ @load="jsFlag|=0x01"></remote-js>
|
|
|
+ <remote-js src="https://a.amap.com/Loca/static/mock/districts.js"
|
|
|
+ @load="jsFlag|=0x11"></remote-js>
|
|
|
+ <div class="map" id="cow-distribution-map"></div>
|
|
|
+ <div class="chart-container" ref="charts">
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <div class="title">牛群状态分布</div>
|
|
|
+ <div class="chart" ref="chart1"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <div class="title">繁殖状态分布</div>
|
|
|
+ <div class="chart" ref="chart2"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-wrapper">
|
|
|
+ <div class="title">胎次状态分布</div>
|
|
|
+ <div class="chart" ref="chart3"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {mapState} from 'vuex'
|
|
|
+ import axios from 'axios'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ mounted() {
|
|
|
+ require.ensure(['@antv/g2'], require => {
|
|
|
+ const G2 = require('@antv/g2');
|
|
|
+ this.drawChart(G2);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ myChart: null,
|
|
|
+ bodyStyle: {
|
|
|
+ flexGrow: 1,
|
|
|
+ alignItems: 'center',
|
|
|
+ padding: 0,
|
|
|
+ display: 'flex',
|
|
|
+ height: '100%'
|
|
|
+ },
|
|
|
+ chartData: [],
|
|
|
+ jsFlag: 0x00
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['farmName'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ var map = Loca.create('cow-distribution-map', {
|
|
|
+ mapStyle: 'amap://styles/twilight',
|
|
|
+ zoom: 4,
|
|
|
+ center: [107.4976, 32.1697],
|
|
|
+ features: ['bg', 'road']
|
|
|
+ });
|
|
|
+
|
|
|
+ var layer = Loca.visualLayer({
|
|
|
+ container: map,
|
|
|
+ // 指定数据类型
|
|
|
+ type: 'point',
|
|
|
+ // 展示形状
|
|
|
+ shape: 'circle'
|
|
|
+ });
|
|
|
+
|
|
|
+ layer.setData(districts, {
|
|
|
+ // 指定经纬度所在字段
|
|
|
+ lnglat: 'center'
|
|
|
+ });
|
|
|
+
|
|
|
+ layer.setOptions({
|
|
|
+ style: {
|
|
|
+ // 圆形半径
|
|
|
+ radius: 13,
|
|
|
+ // 填充颜色
|
|
|
+ fill: '#f3ad6a',
|
|
|
+ // 透明度
|
|
|
+ opacity: 0.9,
|
|
|
+ // 阴影虚化半径
|
|
|
+ shadowBlur: 4,
|
|
|
+ // 阴影颜色
|
|
|
+ shadowColor: '#000000'
|
|
|
+ }
|
|
|
+ });
|
|
|
+ layer.render();
|
|
|
+ },
|
|
|
+ drawChart(G2) {
|
|
|
+ let data1 = [{
|
|
|
+ "类型": '哺乳犊牛',
|
|
|
+ "数量": 50
|
|
|
+ }, {
|
|
|
+ "类型": '哺乳公牛',
|
|
|
+ "数量": 60
|
|
|
+ }, {
|
|
|
+ "类型": '哺乳母牛',
|
|
|
+ "数量": 130
|
|
|
+ }, {
|
|
|
+ "类型": '育成牛',
|
|
|
+ "数量": 800
|
|
|
+ }, {
|
|
|
+ "类型": '青年牛',
|
|
|
+ "数量": 900
|
|
|
+ }, {
|
|
|
+ "类型": '成母牛',
|
|
|
+ "数量": 1000
|
|
|
+ }];
|
|
|
+ let chart1 = new G2.Chart({
|
|
|
+ container: this.$refs.chart1,
|
|
|
+ forceFit: true,
|
|
|
+ height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
|
|
|
+ padding: 'auto',
|
|
|
+ options: {
|
|
|
+ legends: {
|
|
|
+ position: 'bottom',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chart1.source(data1);
|
|
|
+ chart1.interval().position('类型*数量');
|
|
|
+ chart1.render();
|
|
|
+
|
|
|
+ let data2 = [{
|
|
|
+ "类型": '尚未配种',
|
|
|
+ "数量": 50
|
|
|
+ }, {
|
|
|
+ "类型": '已配未检',
|
|
|
+ "数量": 60
|
|
|
+ }, {
|
|
|
+ "类型": '初检已孕',
|
|
|
+ "数量": 130
|
|
|
+ }, {
|
|
|
+ "类型": '初检未孕',
|
|
|
+ "数量": 800
|
|
|
+ }];
|
|
|
+ let chart2 = new G2.Chart({
|
|
|
+ container: this.$refs.chart2,
|
|
|
+ forceFit: true,
|
|
|
+ height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
|
|
|
+ padding: 'auto',
|
|
|
+ options: {
|
|
|
+ legends: {
|
|
|
+ position: 'bottom',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chart2.source(data2);
|
|
|
+ chart2.interval().position('类型*数量');
|
|
|
+ chart2.render();
|
|
|
+
|
|
|
+ let data3 = [{
|
|
|
+ "类型": '0',
|
|
|
+ "数量": 1000
|
|
|
+ }, {
|
|
|
+ "类型": '1',
|
|
|
+ "数量": 800
|
|
|
+ }, {
|
|
|
+ "类型": '2',
|
|
|
+ "数量": 700
|
|
|
+ }, {
|
|
|
+ "类型": '3',
|
|
|
+ "数量": 600
|
|
|
+ }, {
|
|
|
+ "类型": '4',
|
|
|
+ "数量": 500
|
|
|
+ }, {
|
|
|
+ "类型": '5',
|
|
|
+ "数量": 400
|
|
|
+ }, {
|
|
|
+ "类型": '6',
|
|
|
+ "数量": 300
|
|
|
+ }, {
|
|
|
+ "类型": '7',
|
|
|
+ "数量": 100
|
|
|
+ }];
|
|
|
+ let chart3 = new G2.Chart({
|
|
|
+ container: this.$refs.chart3,
|
|
|
+ forceFit: true,
|
|
|
+ height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
|
|
|
+ padding: 'auto',
|
|
|
+ options: {
|
|
|
+ legends: {
|
|
|
+ position: 'bottom',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ chart3.source(data3);
|
|
|
+ chart3.interval().position('类型*数量');
|
|
|
+ chart3.render();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ jsFlag(val) {
|
|
|
+ if (val === 0x11) {
|
|
|
+ let i = setInterval(() => {
|
|
|
+ if (window.Loca) {
|
|
|
+ clearInterval(i);
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ 'remote-js': {
|
|
|
+ render(createElement) {
|
|
|
+ let node = createElement('script', {
|
|
|
+ attrs: {
|
|
|
+ type: 'text/javascript',
|
|
|
+ src: this.src
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return node;
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ src: {
|
|
|
+ type: String,
|
|
|
+ required: true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$el.onload = () => {
|
|
|
+ this.$emit('load')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+ .farm-map-container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ .map {
|
|
|
+ height: 100%;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ .chart-container {
|
|
|
+ width: 500px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .chart-wrapper {
|
|
|
+ flex-grow: 1;
|
|
|
+ .title {
|
|
|
+ height: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .chart {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
