首页

src/main/vue/src/pages/Admin.vue

@@ -277,9 +277,9 @@
             font-size: 20px;
             font-weight: 700;
             // background: fade(black, 20%);
-            padding-left: 20px;
+            padding-left: 15px;
             img {
-                height: 64px;
+                height: 36px;
             }
         }
 

src/main/vue/src/pages/Dashboard.vue

@@ -49,6 +49,7 @@
             if (!layout) {
                 layout = defaultLayout
             }
+            // layout = defaultLayout;
             this.layout = layout;
         },
         data() {
@@ -84,18 +85,13 @@
         components: {
             GridLayout,
             GridItem,
-            CowStructure:
-                () => import('../widgets/CowStructure'),
-            FarmNum:
-                () => import('../widgets/FarmNum'),
-            AverageLactation:
-                () => import('../widgets/AverageLactation'),
-            AreaLivestock:
-                () => import('../widgets/AreaLivestock'),
-            CowNum:
-                () => import('../widgets/CowNum'),
-            CowStockChange:
-                () => import('../widgets/CowStockChange')
+            CowStructure: () => import('../widgets/CowStructure'),
+            FarmNum: () => import('../widgets/FarmNum'),
+            AverageLactation: () => import('../widgets/AverageLactation'),
+            AreaLivestock: () => import('../widgets/AreaLivestock'),
+            CowNum: () => import('../widgets/CowNum'),
+            CowStockChange: () => import('../widgets/CowStockChange'),
+            CowDistribution: () => import('../widgets/CowDistribution')
         }
     }
 </script>

src/main/vue/src/pages/DashboardDefaultLayout.json

@@ -1,9 +1,9 @@
 [
     {
         "x": 0,
-        "y": 2,
-        "w": 4,
-        "h": 11,
+        "y": 18,
+        "w": 6,
+        "h": 9,
         "i": "4",
         "name": "CowStructure",
         "moved": false
@@ -19,18 +19,18 @@
     },
     {
         "x": 0,
-        "y": 13,
+        "y": 27,
         "w": 6,
-        "h": 10,
+        "h": 8,
         "i": "6",
         "name": "AverageLactation",
         "moved": false
     },
     {
         "x": 6,
-        "y": 13,
+        "y": 27,
         "w": 6,
-        "h": 10,
+        "h": 8,
         "i": "7",
         "name": "AreaLivestock",
         "moved": false
@@ -45,12 +45,21 @@
         "moved": false
     },
     {
-        "x": 4,
-        "y": 2,
-        "w": 8,
-        "h": 11,
+        "x": 6,
+        "y": 18,
+        "w": 6,
+        "h": 9,
         "i": "9",
         "name": "CowStockChange",
         "moved": false
+    },
+    {
+        "x": 0,
+        "y": 2,
+        "w": 12,
+        "h": 16,
+        "i": "10",
+        "name": "CowDistribution",
+        "moved": false
     }
 ]

src/main/vue/src/widgets/CowDistribution.vue

@@ -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>

src/main/vue/src/widgets/CowStockChange.vue

@@ -92,7 +92,6 @@
                         "数量": 4337
                     }
                 ];
-                console.log(JSON.stringify(data, 0, 4))
                 let chart = new G2.Chart({
                     container: this.$refs.chart,
                     forceFit: true,