first commit

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/App.vue

@@ -1,32 +1,9 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <router-view />
     </div>
-    <router-view/>
-  </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

src/assets/css/reset.scss

@@ -0,0 +1,11 @@
+/* 公用scss */
+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初始化完成*/
+html,body,#app{
+    // width: 100%;
+    // height: 100%;
+    width: 4670px;
+    height: 1751px;
+}

src/main.js

@@ -2,6 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import './assets/css/reset.scss'
+import echarts from "echarts";
+
+Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -11,17 +11,19 @@ const routes = [
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    path: '/lvShanXiang',
+    name: 'lvShanXiang',
+    component: () => import(/* webpackChunkName: "about" */ '@/views/LvShanXiang/LvShanXiang.vue')
+  },
+  {
+    path: '/yield',
+    name: 'yield',
+    component: () => import('@/views/Yield/Yield.vue')
+  },
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,19 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div class="home">
+		<router-link to="/yield">养殖</router-link>|
+        <router-link to="/lvShanXiang">吕山乡</router-link>
+    </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
 
 export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
+    name: "Home",
+};
 </script>
+
+<style lang="scss">
+	.home{
+		font-size: 50px;
+	}
+</style>

src/views/LvShanXiang/LvShanXiang.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="LvShanXiang">
+        <div class="left1">
+            <E-Left1 style="height: 100%"></E-Left1>
+        </div>
+        <div class="middle">2</div>
+        <div class="right1">3</div>
+        <div class="left2">
+            <E-Left2 style="height: 100%"></E-Left2>
+        </div>
+        <div class="right2">5</div>
+        <div class="left3">6</div>
+        <div class="left3">7</div>
+    </div>
+</template>
+
+<script>
+import ELeft1 from './charts/ELeft1'
+import ELeft2 from './charts/ELeft2'
+export default {
+    name: "LvShanXiang",
+    data() {
+        return {};
+    },
+    components: {
+        ELeft1,
+        ELeft2
+    },
+    created() {},
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.LvShanXiang {
+    // background-color: #0bb;
+    border: 1px solid #73717e;
+    box-sizing: border-box;
+    height: 100%;
+    display: grid;
+    grid-template-columns: 4fr 7fr 4fr;
+    grid-template-rows: 1.2fr repeat(2, 1fr);
+}
+.left1 {
+    border: 1px solid #8877dd;
+}
+.left2 {
+    border: 1px solid #77a0dd;
+}
+.left3 {
+    border: 1px solid #ddad77;
+}
+.middle {
+    border: 1px solid #8bdd77;
+    grid-row-start: 1;
+    grid-row-end: 4;
+    grid-column-start: 2;
+    grid-column-end: 3;
+}
+.right1 {
+    border: 1px solid #6e277c;
+}
+.right2 {
+    border: 1px solid #dd77bb;
+}
+.right3 {
+    border: 1px solid #7da359;
+}
+
+.left1,.right1{
+    margin-top: 8%;
+}
+</style>

src/views/LvShanXiang/charts/ELeft1.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="container">
+        <div id="ELeft1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft1",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ELeft1"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "羊存栏种类",
+                    left: "20%",
+                    top: "5%",
+                    textStyle: {
+                        fontSize: 30
+                    }
+                },
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)",
+                    textStyle: {
+                        fontSize: 20
+                    }
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["种母羊", "种公羊", "商品羊", "羔羊"],
+                    textStyle: {
+                        fontSize: 20
+                    }
+                },
+                series: [
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["20%", "60%"],
+                        label: {
+                            formatter: "{d}%"
+                        },
+                        data: [
+                            { value: 300, name: "种母羊" },
+                            { value: 300, name: "种公羊" },
+                            { value: 200, name: "商品羊" },
+                            { value: 200, name: "羔羊" }
+                        ],
+                        color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
+                        label: {
+                            fontSize: 20
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/LvShanXiang/charts/ELeft2.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="container">
+        <div id="ELeft2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft2",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ELeft2"));
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "羊存栏种类",
+                    left: "20%",
+                    top: "5%",
+                    textStyle: {
+                        fontSize: 30
+                    }
+                },
+                tooltip: {
+                    trigger: "item",
+                    formatter: "{b}: {c} ({d}%)",
+                    textStyle: {
+                        fontSize: 20
+                    }
+                },
+                legend: {
+                    orient: "horizontal",
+                    bottom: 10,
+                    data: ["种母羊", "种公羊", "商品羊", "羔羊"],
+                    textStyle: {
+                        fontSize: 20
+                    }
+                },
+                series: [
+                    {
+                        type: "pie",
+                        // 内外圈厚度
+                        radius: ["20%", "60%"],
+                        label: {
+                            formatter: "{d}%"
+                        },
+                        data: [
+                            { value: 300, name: "种母羊" },
+                            { value: 300, name: "种公羊" },
+                            { value: 200, name: "商品羊" },
+                            { value: 200, name: "羔羊" }
+                        ],
+                        color: ["#FFB2FF", "#72DADA", "#3ABAFF", "#FF6A01"],
+                        label: {
+                            fontSize: 20
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Yield/Yield.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="Yield">
+        <header>
+            <h1 class="title">湖羊全产业链数字化管理系统</h1>
+        </header>
+        <section>
+            <div class="left"></div>
+            <div class="center"></div>
+            <div class="right"></div>
+        </section>
+        <footer>
+            <div class="cell_one"></div>
+            <div class="cell_two"></div>
+            <div class="cell_three"></div>
+            <div class="cell_four"></div>
+        </footer>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Yield",
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.Yield {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > header {
+        border: 1px solid rgb(218, 99, 99);
+        height: 12.2%;
+        display: flex;
+        justify-content: center;
+        .title{
+            background-color: #0D1943;
+            width: 46%;
+            height: 100%;
+            font-size: 50px;
+            color: #FFF;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    > section {
+        border: 1px solid rgb(62, 58, 128);
+        height: 61%;
+        display: flex;
+        .left{
+            flex-grow: 1;
+            border: 1px solid rgb(218, 99, 99);
+        }
+        .center{
+            flex-grow: 1;
+            border: 1px solid rgb(163, 147, 58);
+        }
+        .right{
+            flex-grow: 1;
+            border: 1px solid rgb(23, 131, 116);
+        }
+    }
+    > footer {
+        border: 1px solid rgb(32, 60, 138);
+        flex-grow: 1;
+        display: flex;
+        .cell_one{
+            border: 1px solid rgb(126, 95, 38);
+            flex-grow: 1;
+        }
+        .cell_two{
+            border: 1px solid rgb(61, 90, 38);
+            flex-grow: 1;
+        }
+        .cell_three{
+            border: 1px solid rgb(176, 86, 204);
+            flex-grow: 1;
+        }
+        .cell_four{
+            border: 1px solid rgb(218, 99, 99);
+            flex-grow: 1;
+        }
+    }
+}
+</style>

src/views/Yield/charts/E-GiveBirth.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>