Merge branch 'master' of http://115.238.57.190:3000/linan/hy.big_screen

src/assets/css/reset.scss

@@ -6,6 +6,7 @@ li{list-style:none;}
 html,body,#app{
     width: 100%;
     height: 100%;
-    width: 4670px;
-    height: 1751px;
+    // width: 4670px;
+    // height: 1751px;
+    overflow: hidden;
 }

src/router/index.js

@@ -13,13 +13,18 @@ const routes = [
   {
     path: '/lvShanXiang',
     name: 'lvShanXiang',
-    component: () => import(/* webpackChunkName: "about" */ '@/views/LvShanXiang/LvShanXiang.vue')
+    component: () => import('@/views/LvShanXiang/LvShanXiang.vue')
   },
   {
     path: '/yield',
     name: 'yield',
     component: () => import('@/views/Yield/Yield.vue')
   },
+  {
+    path: '/butcher',
+    name: 'butcher',
+    component: () => import('@/views/Butcher/Butcher.vue')
+  },
 ]
 
 const router = new VueRouter({

src/views/Butcher/Butcher.vue

@@ -0,0 +1,429 @@
+<template>
+    <div class="Butcher">
+        <header>
+            <h1 class="title">湖羊全产业链数字化管理系统</h1>
+        </header>
+        <section>
+            <aside class="left">
+                <article class="left_1">
+                    <h3>市场行情</h3>
+                    <table class="table">
+                        <tr>
+                            <th>产品</th>
+                            <th>价格</th>
+                            <th>市场</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item">
+                            <td>羊肉</td>
+                            <td>
+                                55元/公斤
+                                <b v-if="item % 2 == 0" style="color: #00ca01"
+                                    >▲</b
+                                >
+                                <b v-else style="color: red">▼</b>
+                            </td>
+                            <td>杭州市</td>
+                        </tr>
+                    </table>
+                </article>
+                <article class="left_2">
+                    <h3>市场行情</h3>
+                    <E-Left1 style="height: 100%"></E-Left1>
+                </article>
+                <article class="left_3">
+                    <h3>长兴县销售情况</h3>
+                    <E-Left2 style="height: 100%"></E-Left2>
+                </article>
+            </aside>
+            <div class="center">
+                <div class="top">
+                    <article class="upper">
+                        <div class="date">2020-10-12</div>
+                        <div class="title">首 页</div>
+                        <img class="icon" src="../../assets/chilun.png">
+                    </article>
+                    <article class="mid">
+                        <div class="warp">
+                            <div class="item">
+                                <div>
+                                    <span class="title">总存栏量：</span>
+                                    <span class="num">10534</span>
+                                    <span class="unit">只</span>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div>
+                                    <span class="title">昨日屠宰数：</span>
+                                    <span class="num">1534</span>
+                                    <span class="unit">只</span>
+                                </div>
+                            </div>
+                            <div class="item">
+                                <div>
+                                    <span class="title">检疫合格率：</span>
+                                    <span class="num">94.2</span>
+                                    <span class="unit">%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </article>
+                    <article class="lower">
+                        <div class="item_1">6465</div>
+                        <div class="item_2"></div>
+                        <div class="item_3"></div>
+                        <div class="item_4"></div>
+                        <div class="item_5"></div>
+                        <div class="item_6"></div>
+                        <div class="item_7"></div>
+                        <div class="item_8"></div>
+                        <span class="time_1">8月26</span>
+                        <span class="time_2">8月16</span>
+                        <span class="time_3">8月16</span>
+                        <span class="time_4">8月16</span>
+                        <span class="time_5">8月16</span>
+                        <span class="time_6">8月16</span>
+                        <span class="time_7">8月16</span>
+                        <span class="time_8">8月16</span>
+                    </article>
+                </div>
+                <div class="bottom">
+                    <article>
+                        <E-Bottom1 style="height: 100%"></E-Bottom1>
+                    </article>
+                    <article>
+                        <E-Bottom2 style="height: 100%"></E-Bottom2>
+                    </article>
+                    <article>
+                        <E-Bottom3 style="height: 100%"></E-Bottom3>
+                    </article>
+                </div>
+            </div>
+            <aside class="right">
+                <article class="right_1">
+                    <h3>产品运输任务</h3>
+                    <E-Right1 style="height: 100%"></E-Right1>
+                </article>
+                <article class="right_2">
+                    <h3>屠宰采购来源</h3>
+                    <!--  cellspacing="0px" -->
+                    <table class="table">
+                        <tr>
+                            <th>羊只</th>
+                            <th>来源地</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item" class="row">
+                            <td>12457</td>
+                            <td>湖州市长兴县吕山乡</td>
+                        </tr>
+                    </table>
+                </article>
+                <article class="right_3">
+                    <h3>屠宰销售去向</h3>
+                    <table class="table">
+                        <tr>
+                            <th>羊只</th>
+                            <th>去向</th>
+                        </tr>
+                        <tr v-for="item in 8" :key="item" class="row">
+                            <td>12457</td>
+                            <td>湖州市长兴县吕山乡</td>
+                        </tr>
+                    </table>
+                </article>
+            </aside>
+        </section>
+    </div>
+</template>
+
+<script>
+import ELeft1 from "./charts/ELeft1";
+import ELeft2 from "./charts/ELeft2";
+import ERight1 from "./charts/ERight1";
+import EBottom1 from "./charts/EBottom1";
+import EBottom2 from "./charts/EBottom2";
+import EBottom3 from "./charts/EBottom3";
+export default {
+    name: "Butcher",
+    components: {
+        ELeft1,
+        ELeft2,
+        ERight1,
+        EBottom1,
+        EBottom2,
+        EBottom3,
+    },
+    data() {
+        return {};
+    },
+    created() {},
+    methods: {},
+};
+</script>
+
+<style lang="scss" scope>
+.Butcher {
+    background-image: url(../../assets/bg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    > header {
+        height: 180px;
+        display: flex;
+        justify-content: center;
+        .title {
+            // border: 1px solid rgb(218, 99, 99);
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 80%;
+            height: 100%;
+            font-size: 50px;
+            line-height: 110px;
+            color: #fff;
+            display: flex;
+            justify-content: center;
+        }
+    }
+    > section {
+        flex-grow: 1;
+        height: 61%;
+        display: flex;
+        > aside {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            > article {
+                height: 31%;
+                background-image: url(../../assets/download.png);
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+                > h3 {
+                    color: #fff;
+                    font-size: 25px;
+                    margin-left: 12%;
+                    margin-top: 13px;
+                    display: flex;
+                    align-items: center;
+                    &:before {
+                        content: "";
+                        display: inline-block;
+                        height: 25px;
+                        width: 25px;
+                        margin-right: 50px;
+                        background-color: #fff;
+                    }
+                }
+            }
+        }
+        > .left {
+            width: 20%;
+            // border: 1px solid rgb(218, 99, 99);
+            display: flex;
+            flex-direction: column;
+            > .left_1 {
+                > .table {
+                    color: #fff;
+                    font-size: 30px;
+                    margin: 20px;
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+        }
+        > .center {
+            width: 60%;
+            // border: 1px solid rgb(163, 147, 58);
+            display: flex;
+            flex-direction: column;
+            > .top {
+                height: 72%;
+                // border: 1px solid rgb(62, 58, 128);
+                display: flex;
+                flex-direction: column;
+                .upper {
+                    font-size: 40px;
+                    color: #fff;
+                    display: flex;
+                    justify-content: space-around;
+                    margin: 20px 3%;
+                    // .date {}
+                    .title {
+                        flex-grow: 1;
+                        text-align: center;
+                        display: flex;
+                        align-items: center;
+                        &::before {
+                            content: "";
+                            border: 1px solid #4b81ec;
+                            height: 0px;
+                            flex-grow: 1;
+                            margin: 0 50px;
+                        }
+                        &::after {
+                            content: "";
+                            border: 1px solid #4b81ec;
+                            height: 0px;
+                            flex-grow: 1;
+                            margin: 0 50px;
+                        }
+                    }
+                    .icon {
+                        width: 50px;
+                        height: 50px;
+                    }
+                }
+                .mid {
+                    > .warp {
+                        display: flex;
+                        margin: 20px 5%;
+                        .item {
+                            border-radius: 20px;
+                            height: 90px;
+                            border: 4px solid #53bafd;
+                            box-sizing: border-box;
+                            flex: 1 0 20%;
+                            margin: 20px 80px;
+                            padding: 10px 10px 10px 10px;
+                            font-size: 35px;
+                            font-weight: 600;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            .title {
+                                color: #fff;
+                            }
+                            .num {
+                                color: #53bafd;
+                                font-size: 1.2em;
+                            }
+                            .unit {
+                                color: #53bafd;
+                                font-size: 20px;
+                                margin-left: 15px;
+                            }
+                        }
+                    }
+                }
+                .lower {
+                    // border: 1px solid rgb(163, 147, 58);
+                    flex-grow: 1;
+                    background: url(../../assets/bg_main.png) no-repeat;
+                    background-size: 100% 100%;
+                    margin: 0 3% 1.5% 3%;
+                    color: #fff;
+                    font-size: 30px;
+                    font-weight: 600;
+                    position: relative;
+                    > div {
+                        border: 1px solid rgb(243, 14, 14);
+                        display: inline-block;
+                        width: 15.1%;
+                        height: 17.4%;
+                        box-sizing: border-box;
+                        position: absolute;
+                    }
+                    > .item_1{
+                        left: 59.1%;
+                        top: 18.7%;
+                    }
+                    > .item_2{
+                        left: 81.4%;
+                        top: 18%;
+                    }
+                    > .item_3{
+                        left: 0.8%;
+                        top: 42.3%;
+                    }
+                    > .item_4{
+                        left: 27.3%;
+                        top: 42.3%;
+                    }
+                    > .item_5{
+                        left: 64.3%;
+                        top: 42.3%;
+                    }
+                    > .item_6{
+                        left: 13.2%;
+                        top: 80.8%;
+                    }
+                    > .item_7{
+                        left: 40.5%;
+                        top: 80.8%;
+                    }
+                    > .item_8{
+                        left: 79.9%;
+                        top: 80.8%;
+                    }
+
+                    > span {
+                        font-size: 35px;
+                        position: absolute;
+                    }
+                    > .time_1 {
+                        left: 64.8%;
+                        top: 0%;
+                    }
+                    > .time_2 {
+                        left: 87%;
+                        top: 0%;
+                    }
+                    > .time_3 {
+                        left: 19%;
+                        top: 61%;
+                    }
+                    > .time_4 {
+                        left: 46%;
+                        top: 61%;
+                    }
+                    > .time_5 {
+                        left: 85.4%;
+                        top: 61%;
+                    }
+                    > .time_6 {
+                        left: 6.4%;
+                        top: 74%;
+                    }
+                    > .time_7 {
+                        left: 33%;
+                        top: 74%;
+                    }
+                    > .time_8 {
+                        left: 70%;
+                        top: 74%;
+                    }
+                }
+            }
+            > .bottom {
+                height: 28%;
+                // border: 1px solid rgb(23, 131, 116);
+                display: flex;
+                justify-content: space-between;
+                > article {
+                    width: 33%;
+                }
+            }
+        }
+        > .right {
+            width: 20%;
+            // border: 1px solid rgb(61, 197, 179);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            > .right_2,
+            > .right_3 {
+                > .table {
+                    color: #fff;
+                    font-size: 30px;
+                    margin: 20px;
+                    width: 96%;
+                    text-align: center;
+                    .row {
+                        background-color: #006666ee;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/Butcher/charts/EBottom1.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="container">
+        <div id="EBottom1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom1",
+    data() {
+        return {
+            data1: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
+            data2: [28, 28, 18.2, 25.6, 28.8, 35.6, 30.6],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom1")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                // backgroundColor: "#0D1943",
+                title: {
+                    text: "销售占比",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "22%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff"
+                    }
+                },
+                legend: {
+                    data: ["胴体", "种羊"],
+                    top: 10,
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    data: [
+                        "9-24",
+                        "9-25",
+                        "9-26",
+                        "9-27",
+                        "9-28",
+                        "9-29",
+                        "9-30",
+                    ],
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                },
+                yAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        itemStyle: {
+                            color: "#147CE3",
+                            barBorderRadius: 3,
+                        },
+                        barWidth: '50%',
+                        label: {
+                            show: true, //开启显示
+                            position: "top", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                color: "#42EFF5",
+                                fontSize: 20,
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.data1,
+                    },
+                    {
+                        //真实数据所在
+                        name: "种羊",
+                        type: "bar",
+                        itemStyle: {
+                            color: "#28A757ee",
+                            barBorderRadius: 3,
+                        },
+                        barGap: "-100%",
+                        barWidth: '50%',
+                        label: {
+                            show: true, //开启显示
+                            position: "top", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                color: "#1BF538",
+                                fontSize: 20,
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.data2,
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/EBottom2.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="container">
+        <div id="EBottom2" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom2",
+    data() {
+        return {
+            X: [1500, 1858, 1955, 2485, 3857],
+            Y: ["和平镇", "泗安镇", "水口乡", "林城镇", "吕山乡"],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "来源地排行",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "15%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    // formatter(val) {
+                    //     console.log(val)
+                    // },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                yAxis: {
+                    data: this.Y,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        barWidth: "60%",
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: "#10303F",
+                                    },
+                                    {
+                                        offset: 0.4,
+                                        color: "#16AFB8",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16AFB8",
+                                    },
+                                ]
+                            ),
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        label: {
+                            show: true, //开启显示
+                            position: "right", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                fontSize: 20,
+                                color: '#7CF5E9'
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.X,
+                    },
+                    {
+                        type: "bar",
+                        itemStyle: {
+                            color: "#052E3D",
+                            barBorderRadius: 3,
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        barGap: "-100%",
+                        barWidth: "60%",
+                        z: -1,
+                        data: [...this.X].fill(
+                            Math.ceil(Math.max(...this.X) / 1000) * 1000
+                        ),
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/EBottom3.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="container">
+        <div id="EBottom3" style="height: 100%"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "EBottom3",
+    data() {
+        return {
+            X: [1500, 1858, 1955, 2485, 3857],
+            Y: ["其他", "江苏", "上海", "福建", "浙江"],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("EBottom3")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                title: {
+                    text: "销售地排行",
+                    left: "4%",
+                    top: "4%",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "15%",
+                    x2: "8%",
+                    y2: "5%",
+                    containLabel: true,
+                },
+                tooltip: {
+                    trigger: "axis",
+                    // formatter(val) {
+                    //     console.log(val)
+                    // },
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                yAxis: {
+                    data: this.Y,
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    splitLine: { show: false },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    // name: "(万元)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                },
+                series: [
+                    {
+                        //真实数据所在
+                        name: "胴体",
+                        type: "bar",
+                        barWidth: "60%",
+                        itemStyle: {
+                            color: new this.$echarts.graphic.LinearGradient(
+                                0,
+                                0,
+                                1,
+                                0,
+                                [
+                                    {
+                                        offset: 0,
+                                        color: "#10303F",
+                                    },
+                                    {
+                                        offset: 0.4,
+                                        color: "#16AFB8",
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: "#16AFB8",
+                                    },
+                                ]
+                            ),
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        label: {
+                            show: true, //开启显示
+                            position: "right", //在上方显示
+                            textStyle: {
+                                //数值样式
+                                fontSize: 20,
+                                color: '#7CF5E9'
+                            },
+                            formatter: "{c}",
+                        },
+                        data: this.X,
+                    },
+                    {
+                        type: "bar",
+                        itemStyle: {
+                            color: "#052E3D",
+                            barBorderRadius: 3,
+                            barBorderRadius: [0, 100, 100, 0],
+                        },
+                        barGap: "-100%",
+                        barWidth: "60%",
+                        z: -1,
+                        data: [...this.X].fill(
+                            Math.ceil(Math.max(...this.X) / 1000) * 1000
+                        ),
+                    },
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ELeft1.vue

@@ -0,0 +1,108 @@
+<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 = {
+                color: ["#01D7EF"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "10%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                calculable: true,
+                xAxis: {
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "category",
+                    data: ["四月", "五月", "六月", "七月", "九月"],
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                },
+
+                yAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: "#fff",
+                            width: 2,
+                        },
+                    },
+                    scale: true,
+                    min(val) {
+                        return Number((val.min*0.7).toFixed(0))
+                    }
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "line",
+                        barWidth: "30%",
+                        data: [1289, 1345, 1277, 1388, 1327],
+                        markLine: {
+                            data: [{ type: "average", name: "平均值", label: {fontSize: 20} }],
+                        },
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ELeft2.vue

@@ -0,0 +1,199 @@
+<template>
+    <div class="container">
+        <div id="ELeft2" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ELeft2",
+    data() {
+        return {
+            data: [40, 38.5, 48.2, 43.6, 42.8, 55.6, 44.6],
+        };
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(
+                document.getElementById("ELeft2")
+            );
+            // 指定图表的配置项和数据
+            let option = {
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 25,
+                        color: "#fff",
+                    },
+                },
+                grid: {
+                    x: "5%",
+                    y: "18%",
+                    x2: "8%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {},
+                    },
+                },
+                legend: {
+                    data: ["种羊", "肉羊"],
+                    top: 10,
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                },
+                xAxis: {
+                    type: "category",
+                    boundaryGap: false,
+                    name: "(时间)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "solid",
+                            color: "#fff", //左边线的颜色
+                            width: "2", //坐标线的宽度
+                        },
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "#fff",
+                            fontSize: 20,
+                        },
+                    },
+                    data: [
+                        "08-01",
+                        "08-02",
+                        "08-03",
+                        "08-04",
+                        "08-05",
+                        "08-06",
+                        "08-07",
+                    ],
+                },
+                yAxis: [
+                    {
+                        type: "value",
+                        name: "(元)",
+                        nameTextStyle: {
+                            fontSize: 20,
+                        },
+                        axisLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "solid",
+                                color: "#fff", //左边线的颜色
+                                width: "2", //坐标线的宽度
+                            },
+                        },
+                        axisLabel: {
+                            formatter: "{value} ",
+                            textStyle: {
+                                color: "#fff",
+                                fontSize: 20,
+                            },
+                        },
+                    },
+                ],
+                series: [
+                    {
+                        name: "肉羊",
+                        type: "line",
+                        lineStyle: {
+                            color: "#01d7ef",
+                            width: 2,
+                        },
+                        areaStyle: {
+                            //区域填充样式
+                            normal: {
+                                //线性渐变
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#01d7ef", // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "#0d1943", // 100% 处的颜色
+                                        },
+                                    ],
+                                    false
+                                ),
+                            },
+                        },
+                        itemStyle: {
+                            //borderWidth: 3,
+                            //borderColor: 'yellow',
+                            color: "#01d7ef",
+                        },
+                        smooth:true,
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [14800, 11570, 12339, 8670, 9850, 13547, 17548],
+                    },
+                    {
+                        name: "种羊",
+                        type: "line",
+                        lineStyle: {
+                            color: "#AE3A4B",
+                            width: 2,
+                        },
+                        areaStyle: {
+                            //区域填充样式
+                            normal: {
+                                //线性渐变
+                                color: new this.$echarts.graphic.LinearGradient(
+                                    0,
+                                    0,
+                                    0,
+                                    1,
+                                    [
+                                        {
+                                            offset: 0,
+                                            color: "#AE3A4B", // 0% 处的颜色
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: "#0d1943", // 100% 处的颜色
+                                        },
+                                    ],
+                                    false
+                                ),
+                            },
+                        },
+                        itemStyle: {
+                            //borderWidth: 3,
+                            //borderColor: 'yellow',
+                            color: "#AE3A4B",
+                        },
+                        smooth:true,
+                        symbol: "circle",
+                        symbolSize: 15, //折线点的大小
+                        data: [8678, 12457, 17542, 13548, 14956, 13578, 14754],
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Butcher/charts/ERight1.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="container">
+        <div id="ERight1" style="height:100%;"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ERight1",
+    data() {
+        return {};
+    },
+    mounted() {
+        this.drawChart();
+    },
+    methods: {
+        drawChart() {
+            // 基于准备好的dom，初始化echarts实例
+            let myChart = this.$echarts.init(document.getElementById("ERight1"));
+            // 指定图表的配置项和数据
+            let option = {
+                color: ["#147CE3"],
+                tooltip: {
+                    trigger: "axis",
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff"
+                    }
+                },
+                grid: {
+                    x: "5%",
+                    y: "5%",
+                    x2: "8%",
+                    y2: "13%",
+                    containLabel: true,
+                },
+                calculable: true,
+                yAxis: {
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "category",
+                    data: ["运输中", "已收货", "未收货"],
+                    textStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+
+                xAxis: {
+                    name: "(数量)",
+                    nameTextStyle: {
+                        fontSize: 20,
+                        color: "#fff",
+                    },
+                    type: "value",
+                    axisLabel: {
+                        textStyle: {
+                            fontSize: 20,
+                            color: "#fff"
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "公羊",
+                        type: "bar",
+                        barWidth: "50%",
+                        data: [155, 126, 328]
+                    }
+                ],
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="home">
 		<router-link to="/yield">养殖</router-link>|
+		<router-link to="/butcher">屠宰</router-link>|
         <router-link to="/lvShanXiang">吕山乡</router-link>
     </div>
 </template>

src/views/LvShanXiang/LvShanXiang.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="LvShanXiang">
         <div class="left1">
-            <E-Left1 style="height: 100%;"></E-Left1>
+            <E-Left1 style="height: 100%"></E-Left1>
         </div>
         <div class="middle">
-            <header class="header">湖羊全产业链数字化管理系统</header>
+            <header class="header">吕山乡牧场综合管理平台</header>
             <section class="section">
                 <div class="warp">
                     <div class="item">
@@ -53,7 +53,30 @@
                     </div>
                 </div>
             </section>
-            <footer class="footer"></footer>
+            <footer class="footer">
+                <img src="../../assets/u922.png" />
+                <div class="point p1">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+                <div class="point p2">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+                <div class="point p3">
+                    <i class="warp">
+                        <i class="middle">
+                            <i class="center"></i>
+                        </i>
+                    </i>
+                </div>
+            </footer>
         </div>
         <div class="right1">
             <E-Right1 style="height: 100%"></E-Right1>
@@ -104,7 +127,6 @@ export default {
     background-image: url(../../assets/bg.png);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    border: 1px solid #73717e;
     box-sizing: border-box;
     height: 100%;
     display: grid;
@@ -115,13 +137,16 @@ export default {
         flex-direction: column;
         align-items: center;
         > .header {
-            border: 1px solid #8877dd;
-            width: 80%;
-            height: 150px;
-            line-height: 80px;
-            font-size: 60px;
+            // border: 1px solid #8877dd;
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 171%;
+            height: 180px;
+            line-height: 110px;
+            font-size: 50px;
             font-weight: 600;
-            color: #69f8fe;
+            // color: #69f8fe;
+            color: #FFF;
             text-align: center;
             margin-bottom: 40px;
         }
@@ -157,38 +182,122 @@ export default {
             }
         }
         > .footer {
-            border: 1px solid #8877dd;
+            // border: 1px solid #8877dd;
             width: 92%;
             flex-grow: 1;
             margin: 80px 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            > img {
+                height: 80%;
+            }
+            .point {
+                position: absolute;
+                > .warp {
+                    flex-basis: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    border: 6px solid #2793D1;
+                    border-radius: 50%;
+                    box-sizing: border-box;
+                    animation: animation_warp 2s 0.2s infinite alternate;
+                    .middle {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        position: absolute;
+                        box-sizing: border-box;
+                        border: 6px solid #2793D1;
+                        border-radius: 50%;
+                        animation: animation_middle 2s 0.2s infinite alternate;
+                        .center {
+                            position: absolute;
+                            display: inline-block;
+                            width: 20px;
+                            height: 20px;
+                            box-sizing: border-box;
+                            background-color: #2793D1;
+                            border-radius: 50%;
+                            animation: animation_center 2s 0.2s infinite
+                        }
+                    }
+                }
+
+                @keyframes animation_warp {
+                    0% {
+                        width: 140px;
+                        height: 140px;
+                    }
+                    100% {
+                        width: 50px;
+                        height: 50px;
+                        transform: translate(45px, 45px);
+                        border: 6px solid transparent;
+                    }
+                }
+                @keyframes animation_middle {
+                    0% {
+                        width: 50px;
+                        height: 50px;
+                        border: 6px solid transparent;
+                    }
+                    100% {
+                        width: 140px;
+                        height: 140px;
+                    }
+                }
+                @keyframes animation_center {
+                    0% {
+                        background-color: transparent;
+                    }
+                    100% {
+                        background-color: #2793D1;
+                    }
+                }
+            }
+            > .p1 {
+                left: 50%;
+                top: 25%;
+            }
+            > .p2 {
+                left: 60%;
+                top: 45%;
+            }
+            > .p3 {
+                left: 35%;
+                top: 60%;
+            }
         }
     }
 }
-.left1 {
-    border: 1px solid #8877dd;
-}
-.left2 {
-    border: 1px solid #77a0dd;
-}
-.left3 {
-    border: 1px solid #ddad77;
-}
+// .left1 {
+//     border: 1px solid #8877dd;
+// }
+// .left2 {
+//     border: 1px solid #77a0dd;
+// }
+// .left3 {
+//     border: 1px solid #ddad77;
+// }
 .middle {
-    border: 1px solid #8bdd77;
+    // 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;
-}
+// .right1 {
+//     border: 1px solid #6e277c;
+// }
+// .right2 {
+//     border: 1px solid #dd77bb;
+// }
+// .right3 {
+//     border: 1px solid #7da359;
+// }
 
 .left1,
 .right1 {

src/views/LvShanXiang/charts/ERight1.vue

@@ -150,7 +150,7 @@ export default {
                         symbolSize: [57, 6],
                         symbolMargin: 3,
                         z: -10,
-                        data: [...this.data].fill(Math.max(...this.data)),
+                        data: [...this.data].fill(Math.ceil(Math.max(...this.data)/10)*10),
                     },
                 ],
             };

src/views/Yield/Yield.vue

@@ -142,27 +142,29 @@ export default {
     display: flex;
     flex-direction: column;
     > header {
-        border: 1px solid rgb(218, 99, 99);
-        height: 12.2%;
+        height: 180px;
         display: flex;
         justify-content: center;
         .title {
-            border: 1px solid rgb(218, 99, 99);
-            width: 46%;
+            // border: 1px solid rgb(218, 99, 99);
+            background: url(../../assets/bg_header.png) no-repeat;
+            background-size: 100% 100%;
+            width: 80%;
             height: 100%;
             font-size: 50px;
+            line-height: 110px;
             color: #fff;
             display: flex;
             justify-content: center;
         }
     }
     > section {
-        border: 1px solid rgb(62, 58, 128);
+        // border: 1px solid rgb(62, 58, 128);
         height: 61%;
         display: flex;
         > .left {
             width: 32%;
-            border: 1px solid rgb(218, 99, 99);
+            // border: 1px solid rgb(218, 99, 99);
             display: flex;
             flex-direction: column;
             .top {
@@ -203,11 +205,11 @@ export default {
         }
         > .center {
             width: 36%;
-            border: 1px solid rgb(163, 147, 58);
+            // border: 1px solid rgb(163, 147, 58);
         }
         > .right {
             width: 32%;
-            border: 1px solid rgb(23, 131, 116);
+            // border: 1px solid rgb(23, 131, 116);
             display: flex;
             flex-direction: column;
             justify-content: space-between;
@@ -231,23 +233,23 @@ export default {
         }
     }
     > footer {
-        border: 1px solid rgb(32, 60, 138);
         flex-grow: 1;
         display: flex;
+        // > div {}
         .cell_one {
-            border: 1px solid rgb(126, 95, 38);
+            // border: 1px solid rgb(126, 95, 38);
             width: 25%;
         }
         .cell_two {
-            border: 1px solid rgb(61, 90, 38);
+            // border: 1px solid rgb(61, 90, 38);
             width: 25%;
         }
         .cell_three {
-            border: 1px solid rgb(176, 86, 204);
+            // border: 1px solid rgb(176, 86, 204);
             width: 25%;
         }
         .cell_four {
-            border: 1px solid rgb(218, 99, 99);
+            // border: 1px solid rgb(218, 99, 99);
             width: 25%;
         }
     }

src/views/Yield/charts/EMiddleMap.vue

@@ -217,7 +217,8 @@ export default {
                         },
                         viewControl: {
                             autoRotate: false, // 自动旋转
-                            distance: 115,
+                            // distance: 115,
+                            distance: 140,
                         },
                     },
                 ],

vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    publicPath: './', // 相对于 HTML 页面（目录相同）
+}