2021-10-12

src/views/PdcData/Analysis.vue

@@ -40,7 +40,94 @@
     </board>
 
     <!-- 经营分析 -->
-    <board :title="title[3]"></board>
+    <board :title="title[3]">
+      <!-- 成本分析 -->
+      <div class="cost">
+        <div class="select">
+          <el-select size="small" v-model="costValue">
+            <el-option
+              v-for="item in costOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+        <div class="cost-content">
+          <div class="cost-left">
+            <cost-pie></cost-pie>
+          </div>
+          <div class="cost-right">
+            <cost-histogram></cost-histogram>
+          </div>
+        </div>
+        <h3 class="label">成本分析</h3>
+      </div>
+
+      <!-- 重要指标 -->
+      <div class="important">
+        <div class="condition">
+          <el-select 
+            size="small" 
+            v-model="importantValue"
+            style="margin-right: 20px">
+            <el-option
+              v-for="item in importantOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="importantDates"
+            size="small"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+        <div class="important-chart">
+          <important-line></important-line>
+        </div>
+      </div>
+
+      <!-- 销售情况 -->
+      <div class="sales">
+        <div class="sales-condition">
+          <x-form :formItems="salesFormItems" :day="salesDay" @setDay="salesSetDay" @onClickType="salesOnClickType"></x-form>
+        </div>
+        <div class="sales-content">
+          <div class="sales-left">
+            <div class="up">
+              <label>本周销售额</label>
+              <span>{{ weekSales }}元</span>
+              <div class="sales-change">
+                <div>
+                  <div class="triangle-change" :class="weekSalesChange>0? 'triangle-up': 'triangle-down'"></div>
+                  <span :class="weekSalesChange>0? 'color-up': 'color-down'">{{ weekSalesChange }}%</span>
+                  &nbsp;&nbsp;&nbsp;同比上周
+                  </div>
+              </div>
+            </div>
+            <div class="down">
+              <label>本周销售量</label>
+              <span>{{ weekSalesVolume }}元</span>
+              <div class="sales-change">
+                <div>
+                  <div class="triangle-change" :class="weekSalesVolumeChange>0? 'triangle-up': 'triangle-down'"></div>
+                  <span :class="weekSalesVolumeChange>0? 'color-up': 'color-down'">{{ weekSalesVolumeChange }}%</span>
+                  &nbsp;&nbsp;&nbsp;同比上周
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="sales-right">
+            <sales-chart></sales-chart>
+          </div>
+        </div>
+      </div>
+    </board>
 
     <!-- 应收排名 -->
     <board :title="title[4]">
@@ -89,11 +176,17 @@ import ChartInventoryLines from './analysis/ChartInventoryLines.vue'
 import InventoryItems from './analysis/InventoryItems.vue'
 import ProductionDonuts from './analysis/ProductionDonuts.vue'
 import ProductionItems from './analysis/ProductionItems.vue'
+import CostPie from './analysis/CostPie.vue'
+import CostHistogram from './analysis/CostHistogram.vue'
+import ImportantLine from './analysis/ImportantLine.vue'
+import XForm from "components/XForm";
+import SalesChart from './analysis/SalesChart.vue'
 import TableFooter from "../../components/TableFooter"
 
 import { tableItems, tableShows } from './analysis/table.config'
 import { yingshouTableItems, yingshouTableShows } from './analysis/yingshouTable.config'
 import { safetyTableItems, safetyTableShows } from './analysis/safetyTable.config'
+import { formItems } from './analysis/salesXForm.config'
 
 export default {
   name: "Analysis",
@@ -106,6 +199,11 @@ export default {
     InventoryItems,
     ProductionDonuts,
     ProductionItems,
+    CostPie,
+    CostHistogram,
+    ImportantLine,
+    XForm,
+    SalesChart,
     TableFooter
   },
   data() {
@@ -149,6 +247,20 @@ export default {
       tableShows: {},
       height: 300,
       tableData: [],
+      // 生产情况
+      costOptions: [],
+      costValue: '',
+      // 重要指标
+      importantOptions: [],
+      importantValue: '',
+      importantDates: [],
+      // 销售额
+      salesFormItems: [],
+      salesDay: 2, //默认选择本周
+      weekSales: 1545252,
+      weekSalesChange: 10,
+      weekSalesVolume: 1000,
+      weekSalesVolumeChange: -10,
       // 应收排名
       yingshouTableItems: [],
       yingshouTableShows: {},
@@ -165,6 +277,7 @@ export default {
     }
   },
   mounted() {
+    this.salesFormItems = formItems
     this.tableItems = tableItems
     this.tableShows = tableShows
     this.yingshouTableItems = yingshouTableItems
@@ -194,6 +307,14 @@ export default {
       }
       console.log(params)
       // 获取后端数据
+    },
+    // 销售额选中日期
+    salesSetDay(data) {
+      this.salesDay = data;
+    },
+    // 销售额选中日周月
+    salesOnClickType(data) {
+      console.log(data)
     }
   },
 }
@@ -209,4 +330,113 @@ export default {
 .table-content {
   padding: 10px 15px 12px;
 }
+
+/* 成本分析echarts图排列 */
+.cost {
+  border-bottom: 1px solid rgba(228, 228, 228, 1);
+  position: relative;
+}
+.cost>.select {
+  position: absolute;
+  right: 0;
+  margin: 20px;
+}
+.cost-content {
+  padding-top: 20px;
+  display: flex;
+}
+.cost-left {
+  flex: 1;
+}
+.cost-right {
+  flex: 1;
+}
+.cost>.label {
+  text-align: center;
+  font-weight: bold;
+  font-size: 18px;
+}
+/* 重要指标 */
+.important {
+  padding: 20px;
+  position: relative;
+  border-bottom: 1px solid rgba(228, 228, 228, 1);
+}
+.important>.condition {
+  position: absolute;
+  right: 0;
+  margin-right: 20px;
+}
+.important-chart {
+  margin-top: 20px;
+}
+/* 销售情况 */
+.sales {
+  padding: 20px;
+  padding-bottom: 0;
+}
+.sales-content {
+  padding-top: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around
+}
+.sales-left {
+  width: 15%;
+  line-height: 25px;
+  padding-top: 30px;
+}
+.sales-left>.up {
+  margin-bottom: 20px;
+}
+.sales-left>.up>label,
+.sales-left>.down>label {
+  display: block;
+  text-align: center;
+  font-size: 13px;
+  color: #999;
+}
+.sales-left>.up>span,
+.sales-left>.down>span {
+  display: block;
+  text-align: center;
+  font-size: 16px;
+  color: #333;
+}
+.sales-left>.up>.sales-change,
+.sales-left>.down>.sales-change {
+  display: flex;
+  justify-content: space-around;
+  font-size: 13px;
+}
+/* 三角形 */
+.triangle-change {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-style: solid;
+  border-width: 8px;
+  margin-right: 20px;
+}
+.triangle-up {
+  border-color: transparent transparent rgb(238, 16, 16) transparent;
+}
+.triangle-down {
+  border-color: rgb(2, 112, 2) transparent transparent transparent;
+  position: relative;
+  top: 7px;
+}
+.color-up {
+  color: rgb(238, 16, 16);
+}
+.color-down {
+  color: rgb(2, 112, 2);
+}
+/* 销售情况右侧 */
+.sales-right {
+  width: 85%;
+  border-left: 1px solid rgba(228, 228, 228, 1);
+  height: 300px;
+}
 </style>

src/views/PdcData/analysis/ChartInventoryLines.vue

@@ -14,7 +14,6 @@
 
 <script>
 export default {
-  name: "ChartWsd",
   data() {
     return {
       myChart: null

src/views/PdcData/analysis/ChartInventoryPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-30 15:46:57
- * @LastEditTime: 2021-10-11 15:13:02
+ * @LastEditTime: 2021-10-12 08:42:45
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryPie.vue

src/views/PdcData/analysis/CostHistogram.vue

@@ -0,0 +1,166 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 09:10:42
+ * @LastEditTime: 2021-10-12 10:13:30
+ * @LastEditors: Please set LastEditors
+ * @Description: 成本分析的柱状图
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
+-->
+<template>
+  <div class="cost-histogram">
+    <div id="costHistogram"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        // title: {
+        //   text: '存栏变动',
+        //   x: 10,
+        //   y: 0
+        // },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value',
+            name: '元',
+            boundaryGap: [0, 0.01],
+            axisPointer: {
+              type: 'shadow'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'category',
+            inverse: true
+            // axisLabel: {
+            //   // formatter: '{value} °C'
+            //   show: true
+            // },
+            // axisLine: {
+            //   show: true,
+            //   lineStyle: {
+            //     color: '#6e7079',
+            //   }
+            // },
+            // axisTick:{
+            //   show:false
+            // },
+            // splitLine:{
+            //   show:false
+            // }
+          },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        // dataset: [
+        //   {
+        //     dimensions: ['num'],
+        //     source: [
+        //       [32541],
+        //       [82467],
+        //       [54363],
+        //       [64642], 
+        //       [40257], 
+        //       [95422]
+        //     ]
+        //   },
+        //   {
+        //     transeform: {
+        //       type: 'sort',
+        //       config: {
+        //         dimension: 'num',
+        //         order: 'desc'
+        //       }
+        //     }
+        //   }
+        // ],
+        series: [
+          {
+            // name: '头',
+            type: 'bar',
+            data: [32541, 82467, 54363, 64642, 40257, 95422],
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
+                  return colorList[colors.dataIndex]
+                },
+                label: {
+                  show: true,
+                  position: 'right'
+                }
+              },
+              textStyle: {
+                show: true
+              },
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('costHistogram'));
+    this.init();
+  }
+}
+</script>
+<style scoped>
+.cost-histogram {
+  display: inline-block;
+  width: 90%;
+  height: 300px;
+}
+#costHistogram {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/PdcData/analysis/CostPie.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 08:39:43
+ * @LastEditTime: 2021-10-12 10:10:54
+ * @LastEditors: Please set LastEditors
+ * @Description: 成本分析扇形图
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostPie.vue
+-->
+<template>
+  <div class="cost-pie">
+    <div id="costPie"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        grid: {
+          x: 100
+        },
+        legend: {
+          top: '25%',
+          left: '75%',
+          orient: 'vertical',
+          icon: "circle",
+          selectedMode: false, // 取消右侧项选中
+          itemGap: 20, // 各项间隔
+          textStyle: {
+            fontSize: 15,
+            color: '#666'
+          },
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: '70%', // 半径
+            center: ['35%', '55%'],
+            avoidLabelOverlap: false,
+            labelLine: {
+              show: true
+            },
+            itemStyle: {
+              normal: {
+                color: function (colors) { // 颜色设置
+                  var colorList = ['rgb(112,182,3)', 'rgb(232,56,92)', 'rgb(123,0,255)', 'rgb(0,215,233)', 'rgb(255,255,160)', 'rgb(0,0,255)']
+                  return colorList[colors.dataIndex]
+                },
+                label: {
+                  formatter: '{b}: {c}%'
+                }
+              },
+              label: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  formatter: '{b}: {c}%',
+                  textStyle: {
+                    fontSize: '15',
+                  }
+                },
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+              },
+            },
+            data: [
+              { value: 8, name: '药品成本' },
+              { value: 26, name: '出生成本' },
+              { value: 12, name: '批次变动成本' },
+              { value: 12, name: '初始化成本' },
+              { value: 10, name: '公猪成本' },
+              { value: 52, name: '饲料成本' }
+            ]
+          }
+        ]
+      };
+
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('costPie'));
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.cost-pie {
+  display: inline-block;
+  width: 100%;
+  height: 300px;
+}
+#costPie {
+  width: 100%;
+  height: 100%;
+}
+</style>>

src/views/PdcData/analysis/ImportantLine.vue

@@ -0,0 +1,139 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 10:31:13
+ * @LastEditTime: 2021-10-12 10:42:49
+ * @LastEditors: Please set LastEditors
+ * @Description: 重要指标
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\ImportantLine.vue
+-->
+<template>
+  <div class="important-line">
+    <div id="importantLine"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let options = {
+        title: {
+          text: '重要指标',
+          x: 10,
+          y: 0
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // legend: {
+        //   data: ['头']
+        // },
+        color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
+        grid: {
+          top: '20%',
+          left: '10%',
+          bottom: '10%',
+          right: '10%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+            axisPointer: {
+              type: 'none'
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show: true
+            },
+          }
+        ],
+        yAxis: //[
+          {
+            type: 'value',
+            // name: '头',
+            // axisLabel: {
+            //   formatter: '{value} °C'
+            // },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+            splitLine:{
+              show:false
+            }
+          },
+          // {
+          //   type: 'value',
+          //   name: '湿度',
+          //   axisLabel: {
+          //     formatter: '{value} RH'
+          //   },
+          //   axisLine: {
+          //     show: false,
+          //     lineStyle: {
+          //       color: '#6e7079',
+          //     }
+          //   },
+          //   axisTick:{
+          //     show:false
+          //   },
+          //   // splitLine:{
+          //   //   show:false
+          //   // }
+          // }
+        //],
+        series: [
+          {
+            name: '头',
+            type: 'line',
+            smooth: false,
+            data: [300, 1000, 1600, 1300, 2300, 2450, 2400, 2000, 2200, 1700, 1800, 1500],
+            itemStyle: {
+              normal: {
+                color: 'rgb(251,222,107)',
+                lineStyle: {
+                  color: 'rgb(251,222,107)',
+                  width: 3
+                }
+              }
+            }
+          }
+        ]
+      }
+      this.myChart.setOption(options);
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('importantLine'));
+    this.init();
+  }
+}
+</script>
+
+<style scoped>
+.important-line {
+  /* display: inline-block; */
+  width: 100%;
+  height: 300px;
+}
+#importantLine {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/PdcData/analysis/SalesChart.vue

@@ -0,0 +1,156 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 13:45:04
+ * @LastEditTime: 2021-10-12 13:53:28
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\SalesChart.vue
+-->
+<template>
+  <div class="sales-chart">
+    <div id="salesChart"></div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+  name: "ChartWater",
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => '0'
+    },
+    dataValue: {
+      type: Array,
+      default: () => [100, 75, 120, 200, 110, 40, 60]
+    }
+  },
+  computed: {
+    ...mapState(['color'])
+  },
+  watch: {
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
+  },
+  methods: {
+    init() {
+      let dataAxis = ['07-01周六', '07-02周日', '07-03周一', '07-04周二', '07-05周三', '07-06周四', '07-07周五'];
+      let start = dataAxis.length - 12;
+      let end = dataAxis.length - 1;
+      let options = {
+        tooltip: {
+          trigger: 'axis',
+        },
+        color: [this.color],
+        dataZoom: [{
+          type: 'inside',
+          startValue: start,
+          endValue: end,
+          show: false
+          // zoomOnMouseWheel: false,
+          // zoomLock: true,
+        }],
+        // dataZoom: [
+        //
+        //   {
+        //     type: 'slider',
+        //     startValue: start,
+        //     endValue:end,
+        //     zoomOnMouseWheel: false,
+        //     zoomLock: true,
+        //   },
+        //   {
+        //     type: 'inside'
+        //   },
+        // ],
+        xAxis: [
+          {
+            type: 'category',
+            data: dataAxis,
+            axisPointer: {
+              type: 'none'
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show:false
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '近周销售情况',
+            axisLabel: {
+              // formatter: '{value} 头'
+              show: true
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#6e7079',
+              }
+            },
+            axisTick:{
+              show: false
+            },
+          }
+        ],
+        series: [
+          {
+            name: '水量',
+            type: 'line',
+            // stack: 'Total',
+            smooth: true,
+            areaStyle: {},
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle : {
+              color: this.color,
+              borderColor: this.color,
+              normal: {
+                label : {
+                  show: true,
+                  textStyle: {
+                    fontSize: 14
+                  }
+                }
+              }
+            },
+            data: this.dataValue
+          }
+        ]
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('salesChart'));
+    this.init()
+  }
+}
+</script>
+<style scoped>
+.sales-chart {
+  width: 100%;
+  height: 100%;
+}
+#salesChart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/PdcData/analysis/safetyTable.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-11 16:19:57
- * @LastEditTime: 2021-10-11 16:23:05
+ * @LastEditTime: 2021-10-12 09:27:29
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\safetyTable.config.js
@@ -38,6 +38,6 @@ export const safetyTableItems = [
   }
 ]
 
-export const safetyShows = {
+export const safetyTableShows = {
   showIndex: false, showSelect: true
 }

src/views/PdcData/analysis/salesXForm.config.js

@@ -0,0 +1,38 @@
+/*
+ * @Author: your name
+ * @Date: 2021-10-12 10:52:39
+ * @LastEditTime: 2021-10-12 10:52:40
+ * @LastEditors: Please set LastEditors
+ * @Description: 销售的时间
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\salesXForm.config.js
+ */
+export const formItems = [
+  {
+    id: 1,
+    type: 'text',
+    text: '今日',
+    value: 1,
+    col: 1
+  },
+  {
+    id: 2,
+    type: 'text',
+    text: '本周',
+    value: 2,
+    col: 1
+  },
+  {
+    id: 3,
+    type: 'text',
+    text: '本月',
+    value: 3,
+    col: 1
+  },
+  {
+    id: 4,
+    type: 'datepicker',
+    placeholder: [],
+    field: 'value1',
+    col: 6
+  }
+]