成本核算 完成

src/views/slaughterManagment/costAccounting.vue

@@ -1,26 +1,107 @@
 <template>
-    <div class="costAccounting">
+    <div class="Index">
         <h2 style="margin-bottom: 20px;padding-bottom:7px;border-bottom:2px solid #ddd">成本核算</h2>
-        <E-Cost></E-Cost>
+        <header class="header">
+            <div class="left">
+                <E-Cost></E-Cost>
+            </div>
+            <div class="right">
+                <E-Profit></E-Profit>
+            </div>
+        </header>
+        <section class="section">
+            <h2>批次数据</h2>
+            <ul class="ul">
+                <li class="li">
+                    <span class="title">出肉率</span>
+                    <span class="content">67.8%</span>
+                </li>
+                <li class="li">
+                    <span class="title">排酸损耗</span>
+                    <span class="content">1.52%</span>
+                </li>
+                <li class="li">
+                    <span class="title">总销售额</span>
+                    <span class="content">68653.18元</span>
+                </li>
+                <li class="li">
+                    <span class="title">利润率</span>
+                    <span class="content">19.68%</span>
+                </li>
+            </ul>
+        </section>
     </div>
 </template>
 
 <script>
 import ECost from './cost_echarts/E-Cost'
+import EProfit from "./cost_echarts/E-Profit";
 
 export default {
-    name: 'costAccounting',
+    name: "Index",
+    components: {
+        EProfit,
+        ECost
+    },
     data() {
         return {};
     },
-    components: {
-        'E-Cost': ECost
-    },
     created() {},
-    methods: {}
+    methods: {
+        
+    }
 };
 </script>
 
 <style lang="scss" scoped>
+.Index {
+    .header {
+        display: flex;
+        padding-right: 11%;
+        .left {
+            width: 50%;
+            height: 400px;
+        }
+        .right {
+            width: 50%;
+            height: 400px;
+        }
+    }
+    .section {
+        margin: 110px 0 0 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;
 
-</style>
+                .title {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: #444;
+                }
+                .content {
+                    font-size: 22px;
+                    font-weight: 600;
+                    color: rgb(48, 115, 240);
+                }
+            }
+        }
+    }
+}
+</style>

src/views/slaughterManagment/cost_echarts/E-Cost.vue

@@ -20,13 +20,23 @@ export default {
             let myChart = this.$echarts.init(document.getElementById("E-Cost"));
             // 指定图表的配置项和数据
             let option = {
+                title: {
+                    text: "成本比例分析",
+                    left: "center",
+                    bottom: 0
+                },
+                grid: {
+                    left: "8%",
+                    right: "4%",
+                    containLabel: true
+                },
                 tooltip: {
                     trigger: "item",
                     formatter: "{b}: {c} ({d}%)"
                 },
                 legend: {
                     orient: "horizontal",
-                    bottom: 10,
+                    bottom: 30,
                     textStyle: {
                         fontSize: 15
                     },
@@ -57,7 +67,7 @@ export default {
                     {
                         type: "pie",
                         // 内外圈厚度
-                        radius: ["0%", "60%"],
+                        radius: ["0%", "58%"],
                         label: {
                             formatter: "{bStyle|{b}：}{c}  ({d}%)  ",
                             fontSize: 15,

src/views/slaughterManagment/cost_echarts/E-Profit.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="container">
+        <!-- E-Profit 利润-->
+        <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 = [
+                                        "#FF9900",
+                                        "#999966",
+                                        "#0099FF"
+                                    ];
+                                    return colorList[params.dataIndex];
+                                }
+                            }
+                        }
+                    }
+                ]
+            };
+            // 使用刚指定的配置项和数据显示图表。
+            myChart.setOption(option);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>