首页，产房信息 完成

src/assets/css/reset.scss

@@ -1,4 +1,5 @@
 /* 公用scss */
-div,h1,h2,h3,h4,h5,h3,body,html{margin: 0;padding: 0;}
+div,h1,h2,h3,h4,h5,h3,body,html,ul,li,p{margin: 0;padding: 0;}
 a{text-decoration: none;}
+li{list-style:none;} 
 /*css初始化完成*/

src/main.js

@@ -10,21 +10,20 @@ import vueModuleLoader from 'vue-module-loader'
 import localModule from './module'
 import './assets/css/reset.scss'
 
-// import echarts from "echarts";
-// Vue.prototype.$echarts = echarts;
+import echarts from "echarts";
+Vue.prototype.$echarts = echarts;
 
 /* 按需导入 */
-import echarts from 'echarts/lib/echarts'
- // 引入折线图/柱状图等组件
-import 'echarts/lib/chart/line'
-import 'echarts/lib/chart/bar'
-import 'echarts/lib/component/title'
-import 'echarts/lib/component/toolbox'
-import 'echarts/lib/component/markPoint' // 最值
-import 'echarts/lib/component/markLine' // 平均值
-import 'echarts/lib/component/legendScroll'
-
-Vue.prototype.$echarts = echarts
+// import echarts from 'echarts/lib/echarts'
+//  // 引入折线图/柱状图等组件
+// import 'echarts/lib/chart/line'
+// import 'echarts/lib/chart/bar'
+// import 'echarts/lib/component/title'
+// import 'echarts/lib/component/toolbox'
+// import 'echarts/lib/component/markPoint' // 最值
+// import 'echarts/lib/component/markLine' // 平均值
+// import 'echarts/lib/component/legendScroll'
+// Vue.prototype.$echarts = echarts
 
 
 

src/router/routes.js

@@ -1,6 +1,7 @@
 import Home from '../views/Home/Home.vue'
-/* 个体管理 UnityTrace */
-// import UnityTrace from '../views/unityManagement/UnityTrace.vue'
+/* 首页 UnityTrace */
+import Index from '@/views/index/Index.vue'
+import DeliveryRoom from '@/views/deliveryRoom/DeliveryRoom.vue'
 
 /* 群体管理 */
 import GroupRecord from '../views/groupManagment/GroupRecord.vue'
@@ -25,7 +26,18 @@ export default [
 		path: '/home',
 		component: Home,
 		children: [
-			// 个体管理
+			{
+				path: '/Index',
+				name: 'Index',
+				component: Index
+			},
+			// 产床管理
+			{
+				path: '/DeliveryRoom',
+				name: 'DeliveryRoom',
+				component: DeliveryRoom
+			},
+			// 个体管理 deliveryRoom
 			{
 				path: 'UnityTrace',
 				name: 'UnityTrace',

src/views/Home/mencCofig.js

@@ -1,42 +1,48 @@
 
 export const menuData = [
-    // 有子菜单 字菜单不分组的
     {
-        optionName: "档案管理",
+        optionName: "首页",
+        iconClassName: "el-icon-s-home",
+        routerName: "index",
+        index: '-1',
+        disabled: false
+    },
+    {
+        optionName: "产床管理",
         iconClassName: "el-icon-setting",
         index: '1',
         disabled: false, // 是否禁用
         childList: [
             {
-                optionName: '企业信息',
+                optionName: '产房信息',
                 index: '1-1',
-                routerName: "aa"
+                routerName: "DeliveryRoom"
             },
-            {
-                optionName: '牧场信息',
-                index: '1-2',
-                routerName: "aa"
-            },
-            {
-                optionName: '猪舍信息',
-                index: '1-3',
-                routerName: "aa"
-            },
-            {
-                optionName: '人员信息',
-                index: '1-4',
-                routerName: "aa"
-            }
-            
+            // {
+            //     optionName: '牧场信息',
+            //     index: '1-2',
+            //     routerName: "aa"
+            // },
+            // {
+            //     optionName: '猪舍信息',
+            //     index: '1-3',
+            //     routerName: "aa"
+            // },
+            // {
+            //     optionName: '人员信息',
+            //     index: '1-4',
+            //     routerName: "aa"
+            // }
+
         ]
     },
-    
+
     {
         optionName: "群体管理",
         iconClassName: "el-icon-s-flag",
         index: '2',
         disabled: false,
-        childList: [ 
+        childList: [
             {
                 optionName: '群体档案',
                 index: '2-1',
@@ -65,7 +71,7 @@ export const menuData = [
         iconClassName: "el-icon-message",
         index: '3',
         disabled: false,
-        childList: [ 
+        childList: [
             {
                 optionName: '种猪档案',
                 index: '3-1',
@@ -76,8 +82,8 @@ export const menuData = [
                 index: '3-2',
                 routerName: "UnityTrace"
             }
-            
-            
+
+
         ]
     },
     {
@@ -85,7 +91,7 @@ export const menuData = [
         iconClassName: "el-icon-coordinate",
         index: '4',
         disabled: false,
-        childList: [ 
+        childList: [
             {
                 optionName: '设备配置',
                 index: '4-1',
@@ -113,7 +119,7 @@ export const menuData = [
         iconClassName: "el-icon-monitor",
         index: '5',
         disabled: false, // 是否禁用
-        childList: [ 
+        childList: [
             {
                 optionName: '群体广播',
                 index: '5-1',
@@ -146,7 +152,7 @@ export const menuData = [
         iconClassName: "el-icon-menu",
         index: '100',
         disabled: false, // 是否禁用
-        childList: [ 
+        childList: [
             {
                 optionName: '模板 1',
                 index: '100-1',
@@ -177,10 +183,10 @@ export const menuData = [
                 index: '100-6',
                 routerName: "af"
             }
-            
+
         ]
     },
-    
+
 ]
 
 // export default {menuData}
@@ -243,7 +249,7 @@ const menuData描述 = [
         index: '3',
         disabled: false
     },
-    
+
     "导航四"
 ]
 

src/views/Login/Login.vue

@@ -111,7 +111,7 @@ export default {
             reqOrganizationId({orgId: id}).then(res => {
                 this.isShowDialog = false;
                     //导航到 正式页面
-                    this.$router.replace("/home/GroupRecord");
+                    this.$router.replace("/Index");
             }).catch(err => {
                 if (err.errMsg) this.$message.error(err.errMsg);
                     else this.$message.error("服务器发生异常");

src/views/deliveryRoom/DeliveryRoom.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="deliveryRoom">
+        <section class="section">
+            <ul class="ul">
+                <li class="li">
+                    <h5>产房001</h5>
+                    <img class="img" src="@/assets/deliveryRoom_2.png">
+                    <div class="info">
+                        <p class="p">
+                            <span class="title">母猪耳标：</span>
+                            <span class="content">16545</span>
+                        </p>
+                        <p class="p">
+                            <span class="title">入床时间：</span>
+                            <span class="content">2020-04-15</span>
+                        </p>
+                        <p class="p">
+                            <span class="title">预计产仔：</span>
+                            <span class="content">2020-04-15</span>
+                        </p>
+                    </div>
+                </li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+                <li class="li"></li>
+            </ul>
+        </section>
+    </div>
+</template>
+
+
+<script>
+export default {
+    name: "deliveryRoom",
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {
+        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>
+.deliveryRoom {
+    .section {
+        .ul {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            .li {
+                display: flex;
+                flex-direction: column;
+                width: 290px;
+                height: 350px;
+                margin: 10px;
+                border: 1px solid #00f;
+                h5{
+                    text-align: center;
+                    font-size: 30px;
+                    color: #424242;
+                    background-color: #199ED8;
+                }
+                .img{
+                    width: 100%;
+                }
+                .info{
+                    flex: 1;
+                    display: flex;
+                    padding-left: 20px;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    color: #555;
+                    .p{
+                        .title{}
+                        .content{}
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/index/Index.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="Index">
+        <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">9</span>
+                </li>
+                <li class="li">
+                    <span class="title">均断奶活仔数</span>
+                    <span class="content">21</span>
+                </li>
+                <li class="li">
+                    <span class="title">均断奶天数</span>
+                    <span class="content">14</span>
+                </li>
+                <li class="li">
+                    <span class="title">均断奶活存活率</span>
+                    <span class="content">99%</span>
+                </li>
+            </ul>
+        </section>
+        <footer class="footer">
+            <el-carousel height="150px" :interval="5000" direction="vertical" indicator-position="none">
+                <el-carousel-item>
+                    <div class="item item_1">
+                        <div class="left el-icon-mobile-phone"></div>
+                        <div class="right">
+                            <p class="top">消息警报</p>
+                            <p class="middle">1耳标457865号母猪产仔存活率低于70%</p>
+                            <span class="bottom">查看详情</span>
+                        </div>
+                    </div>
+                </el-carousel-item>
+                <el-carousel-item>
+                    <div class="item item_2">
+                        <div class="left el-icon-mobile-phone"></div>
+                        <div class="right">
+                            <p class="top">消息警报</p>
+                            <p class="middle">2耳标457865号母猪产仔存活率低于70%</p>
+                            <span class="bottom">查看详情</span>
+                        </div>
+                    </div>
+                </el-carousel-item>
+                <el-carousel-item>
+                    <div class="item item_3">
+                        <div class="left el-icon-mobile-phone"></div>
+                        <div class="right">
+                            <p class="top">消息警报</p>
+                            <p class="middle">3耳标457865号母猪产仔存活率低于70%</p>
+                            <span class="bottom">查看详情</span>
+                        </div>
+                    </div>
+                </el-carousel-item>
+            </el-carousel>
+        </footer>
+    </div>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import chart_a from "./charts/chart_a";
+import chart_b from "./charts/chart_b";
+
+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: 60px 0;
+        .ul {
+            display: flex;
+            justify-content: space-around;
+            padding: 0 8%;
+            .li {
+                height: 80px;
+                width: 170px;
+                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);
+                }
+            }
+        }
+    }
+    .footer {
+        .item{
+            height: 100%;
+            display: flex;
+            box-sizing: border-box;
+            align-items: center;
+            
+            .left{
+                font-size: 30px;
+                margin-left: 20px;
+                margin-right: 20px;
+            }
+            .right{
+                .top{
+                    font-size: 20px;
+                    font-weight: 600;
+                    color: #746363;
+                }
+                .middle{
+                    font-size: 16px;
+                    color: #999;
+                }
+                .bottom{
+                    font-size: 16px;
+                    color: rgb(48, 115, 240);
+                }
+            }
+        }
+        .item_1{
+            background-color: #EBF5FF;
+            .left{
+                color: #0079FE;
+            }
+        }
+        .item_2{
+            background-color: #E6FAF0;
+            .left{
+                color: #4BD863;
+            }
+        }
+        .item_3{
+            background-color: #FFEEE6;
+            .left{
+                color: #FF3B30;
+            }
+        }
+    }
+}
+</style>

src/views/index/charts/chart_a.vue

@@ -0,0 +1,115 @@
+<template>
+    <div class="hello">
+        <div id="chart_a" style="height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "HelloWorld",
+    props: ["tagId"],
+    data() {
+        return {
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("chart_a")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)"
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["已用产床", "未用产床", "待产", "已产","断奶","空产床"]
+                },
+                series: [
+                    {
+                        type: "pie",
+                        selectedMode: "single",
+                        radius: ["0", "40%"],
+
+                        label: {
+                            position: "inner"
+                        },
+                        labelLine: {
+                            show: true
+                        },
+                        data: [
+                            { value: 800, name: "已用产床" },
+                            { value: 200, name: "未用产床" }
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0
+                            },
+                            normal: {
+                                color: function(params) {
+                                    //自定义颜色 89,212,212
+                                    var colorList = [
+                                        "rgba(58,161,255,0.5)",
+                                        "rgba(54,203,203,0.7)",
+                                    ];
+                                    return colorList[params.dataIndex];
+                                }
+                            }
+                        }
+                    },
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["40%", "60%"],
+                        label: {
+                            formatter: "{d}%"
+                        },
+                        data: [
+                            { value: 300, name: "待产" },
+                            { value: 300, name: "已产" },
+                            { value: 200, name: "断奶" },
+                            { value: 200, name: "空产床" }
+                        ],
+                        itemStyle: {
+                            emphasis: {
+                                shadowBlur: 10,
+                                shadowOffsetX: 0
+                            },
+                            normal: {
+                                color: function(params) {
+                                    //自定义颜色  "rgb(255,0,0)",
+                                    var colorList = [
+                                        "rgb(0,238,255)",
+                                        "rgb(149,162,255)",
+                                        "rgb(58,186,255)",
+                                        "rgba(54,203,203,0.7)"
+                                    ];
+                                    return colorList[params.dataIndex];
+                                }
+                            }
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.hello {
+    .chart {
+        width: 100%;
+    }
+}
+</style>

src/views/index/charts/chart_b.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="chart_b">
+        <div id="chart_b" style="width: 100%;height:400px;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "chart_b",
+    props: {},
+    data() {
+        return {};
+    },
+    created() {},
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("chart_b")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                color: ["#3398DB"],
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        // 坐标轴指示器，坐标轴触发有效
+                        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+                    }
+                },
+                grid: {
+                    left: "10%",
+                    right: "10%",
+                    bottom: "3%",
+                    containLabel: true
+                },
+                yAxis: [
+                    {
+                        type: "category",
+                        data: ["断奶母猪", "已产母猪", "待产母猪", "未用产床", "已用产床", "产床总数"],
+                        axisTick: {
+                            alignWithLabel: true
+                        }
+                    }
+                ],
+                xAxis: [
+                    {
+                        type: "value"
+                    }
+                ],
+                series: [
+                    {
+                        name: "直接访问",
+                        type: "bar",
+                        barWidth: "60%",
+                        data: [52, 200, 334, 390, 330, 220],
+                        encode: {
+                            // Map the "amount" column to X axis.
+                            y: "amount",
+                            // Map the "product" column to Y axis
+                            x: "product"
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>