完成统计分许的存栏统计和 生产数据

src/router/routes.js

@@ -51,6 +51,11 @@ import environmentMonitoring from '@/views/device/environmentMonitoring.vue'
 import video from '@/views/device/video.vue'
 import deviceFault from '@/views/device/deviceFault.vue'
 
+/* 统计分析 */
+import existSstatistic from '@/views/statisticAnalysis/existSstatistic.vue'
+import productData from '@/views/statisticAnalysis/productData.vue'
+
+
 /* 销售管理 */
 import sellLog from '@/views/sell/sellLog.vue'
 
@@ -265,6 +270,17 @@ export default [
 				name: 'sellLog',
 				component: sellLog
 			},
+			/* 统计分析 */
+			{
+				path: 'existSstatistic',
+				name: 'existSstatistic',
+				component: existSstatistic
+			},
+			{
+				path: 'productData',
+				name: 'productData',
+				component: productData
+			},
 
 			// 模板
 			{

src/views/Home/mencCofig.js

@@ -250,6 +250,24 @@ export const menuData = [
         ]
     },
     {
+        optionName: "统计分析",
+        iconClassName: "el-icon-sell",
+        index: '9',
+        disabled: false,
+        childList: [
+            {
+                optionName: '存栏统计',
+                index: '9-1',
+                routerName: "existSstatistic"
+            },
+            {
+                optionName: '生产数据',
+                index: '9-2',
+                routerName: "productData"
+            }
+        ]
+    },
+    {
         optionName: "开发用模板",
         iconClassName: "el-icon-menu",
         index: '100',

src/views/statisticAnalysis/charts/EEveDis.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="container">
+        <div id="EEveDis" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EEveDis",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EEveDis")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "母羊分布情况",
+                    left: "center"
+                },
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)"
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: [
+                        "发情母羊",
+                        "已配种母羊",
+                        "怀孕母羊",
+                        "哺乳母羊",
+                        "休情母羊"
+                    ]
+                },
+                series: [
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["20%", "60%"],
+                        label: {
+                            formatter: "{d}%"
+                        },
+                        data: [
+                            { value: 300, name: "发情母羊" },
+                            { value: 300, name: "已配种母羊" },
+                            { value: 200, name: "怀孕母羊" },
+                            { value: 200, name: "哺乳母羊" },
+                            { value: 200, name: "休情母羊" }
+                        ],
+                        color: [
+                            "#FFB2FF",
+                            "#72DADA",
+                            "#3ABAFF",
+                            "#FF6A01",
+                            "#ff8295"
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0
+                            }
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/statisticAnalysis/charts/EEveLevelDis.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="container">
+        <div id="EEveLevelDis" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EEveLevelDis",
+    data() {
+        return {
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EEveLevelDis")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "种母羊等级分布情况",
+                    left: "center"
+                },
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)"
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["甲级", "乙级", "丙级", "丁级"]
+                },
+                series: [
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["20%", "60%"],
+                        label: {
+                            formatter: "{d}%"
+                        },
+                        data: [
+                            { value: 200, name: "甲级" },
+                            { value: 300, name: "乙级" },
+                            { value: 200, name: "丙级" },
+                            { value: 200, name: "丁级" }
+                        ],
+                        color: [
+                            "#3ABAFF",
+                            "#72DADA",
+                            "#d0b2ff",
+                            "#ff8295"
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0
+                            }
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/statisticAnalysis/charts/EGiveBirth.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="container">
+        <!-- EGiveBirth 出栏预测-->
+        <div id="EGiveBirth" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EGiveBirth",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EGiveBirth")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "分娩产仔分布",
+                    left: "center",
+                    bottom: 0
+                },
+                color: ["#5bf0b2", "#FFB2FF", "#3ABAFF", "#FF6A01", "#ff8295"],
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    left: "8%",
+                    right: "4%",
+                    bottom: "10%",
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        data: ["弱仔", "木乃伊", "死胎"],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: "value"
+                    }
+                ],
+                series: [
+                    {
+                        name: "数量",
+                        type: "bar",
+                        barWidth: "30%",
+                        data: [100, 36, 33],
+                        itemStyle: {
+                            normal: {
+                                color: function(params) {
+                                    var colorList = [
+                                        "#5d8299",
+                                        "#575c18",
+                                        "#bbb"
+                                    ];
+                                    return colorList[params.dataIndex];
+                                }
+                            }
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/statisticAnalysis/charts/EOutSheepfold.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="container">
+        <!-- EOutSheepfold 出栏预测-->
+        <div id="EOutSheepfold" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EOutSheepfold",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EOutSheepfold")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "出栏预测",
+                    left: "center",
+                    bottom: 0
+                },
+                color: ["#7c92f7"],
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    left: "8%",
+                    right: "4%",
+                    bottom: "10%",
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        data: ["七月", "八月", "十月", "十一月", "十二月", "一月", "二月"],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: "value"
+                    }
+                ],
+                series: [
+                    {
+                        name: "数量",
+                        type: "bar",
+                        barWidth: "60%",
+                        data: [10, 88, 200, 334, 390, 330, 220]
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/statisticAnalysis/existSstatistic.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="Index">
+        <!-- EEveDistribution  EEveDis-->
+        <!-- EEveLevelDistribution EEveLevelDis -->
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">存栏统计</h2>
+        <header class="header">
+            <div class="left">
+                <chart-a class="chart_a"></chart-a>
+            </div>
+            <div class="right">
+                <chart-b></chart-b>
+            </div>
+        </header>
+        <section class="section">
+            <ul class="ul">
+                <li class="li">
+                    <span class="title">总存栏数</span>
+                    <span class="content">2141</span>
+                </li>
+                <li class="li">
+                    <span class="title">种母羊存栏数</span>
+                    <span class="content">2035</span>
+                </li>
+                <li class="li">
+                    <span class="title">种公羊存栏数</span>
+                    <span class="content">48</span>
+                </li>
+                <li class="li">
+                    <span class="title">可配种母羊数</span>
+                    <span class="content">461</span>
+                </li>
+                
+            </ul>
+             <ul class="ul">
+                <li class="li">
+                    <span class="title">羔羊存栏数</span>
+                    <span class="content">14</span>
+                </li>
+                <li class="li">
+                    <span class="title">配种成功率</span>
+                    <span class="content">92%</span>
+                </li>
+                <li class="li">
+                    <span class="title">双羔率</span>
+                    <span class="content">75%</span>
+                </li>
+                <li class="li">
+                    <span class="title">羔羊断奶存活率</span>
+                    <span class="content">97%</span>
+                </li>
+            </ul>
+        </section>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import chart_a from "./charts/EEveDis";
+import chart_b from "./charts/EEveLevelDis";
+
+export default {
+    name: "Index",
+    components: {
+        "chart-a": chart_a,
+        "chart-b": chart_b
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.Index {
+    .header {
+        display: flex;
+        padding-right: 11%;
+        .left {
+            width: 50%;
+            height: 400px;
+        }
+        .right {
+            width: 50%;
+            height: 400px;
+        }
+    }
+    .section {
+        margin: 70px 0;
+        .ul {
+            display: flex;
+            justify-content: space-around;
+            padding: 0 8%;
+            margin: 50px;
+            .li {
+                height: 80px;
+                width: 180px;
+                background-color: #ddd;
+                border-radius: 10px;
+                padding: 10px 0;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+
+                .title {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: #444;
+                }
+                .content {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: rgb(48, 115, 240);
+                }
+            }
+        }
+    }
+}
+</style>

src/views/statisticAnalysis/productData.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="Index">
+        <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">生产统计</h2>
+        <header class="header">
+            <div class="left">
+                <chart-a class="chart_a"></chart-a>
+            </div>
+            <div class="right">
+                <chart-b></chart-b>
+            </div>
+        </header>
+        <section class="section">
+            <h2>生产数据</h2>
+            <ul class="ul">
+                <li class="li">
+                    <span class="title">本月出生数</span>
+                    <span class="content">681</span>
+                </li>
+                <li class="li">
+                    <span class="title">本月调入数</span>
+                    <span class="content">40</span>
+                </li>
+                <li class="li">
+                    <span class="title">本月调出数</span>
+                    <span class="content">886</span>
+                </li>
+                <li class="li">
+                    <span class="title">累计调入数</span>
+                    <span class="content">8258</span>
+                </li>
+                <li class="li">
+                    <span class="title">累计调出数</span>
+                    <span class="content">8530</span>
+                </li>
+            </ul>
+        </section>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import chart_a from "./charts/EOutSheepfold";
+import chart_b from "./charts/EGiveBirth";
+
+export default {
+    name: "Index",
+    components: {
+        "chart-a": chart_a,
+        "chart-b": chart_b
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        ...mapActions(["fetch"]),
+        get() {
+            this.fetch({
+                api: "aaa",
+                method: "GET",
+                data: {},
+                success: res => {
+                    console.log(res);
+                },
+                fail: err => {
+                    console.log(err);
+                    if (err.errMsg) this.$message.error(err.errMsg);
+                    else this.$message.error("服务器发生异常");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.Index {
+    .header {
+        display: flex;
+        padding-right: 11%;
+        .left {
+            width: 50%;
+            height: 400px;
+        }
+        .right {
+            width: 50%;
+            height: 400px;
+        }
+    }
+    .section {
+        margin: 50px 0;
+        padding: 10px 10px 10px 10px;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        h2{
+            color: #292929;
+        }
+        .ul {
+            display: flex;
+            justify-content: space-around;
+            padding: 40px 8% 80px 8%;
+            .li {
+                height: 80px;
+                width: 180px;
+                background-color: #ddd;
+                border-radius: 10px;
+                padding: 10px 0;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+
+                .title {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: #444;
+                }
+                .content {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: rgb(48, 115, 240);
+                }
+            }
+        }
+    }
+}
+</style>