2021-10-22

src/components/XForm.vue

@@ -111,9 +111,13 @@ export default {
   methods: {
     // 拿到方法
     onSelectText(value) {
+      console.log('-------------------------')
+      console.log(value)
       this.$emit('setDay', value)
     },
     manage(value) {
+      console.log(value)
+      console.log('*************************')
       this.$emit('onClickType', value)
     }
   }

src/utils/api.js

@@ -394,7 +394,7 @@ export function getVideo(data) {
 // 存栏结构 - 存栏变动折线图
 export function getInventoryLines(data) {
   return axios({
-    url: '/env/prodStock/listStorage',
+    url: '/produce/prodStock/listStorage',
     method: 'get',
     params: data
   })
@@ -403,7 +403,53 @@ export function getInventoryLines(data) {
 // 存栏情况 + 生产情况
 export function getInventoryAndProduct(data) {
   return axios({
-    url: '/env/prodStock/listERP',
+    url: '/produce/prodStock/listERP',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 经营分析 */
+
+// 经营分析 - 成本分析
+export function getCosts(data) {
+  return axios({
+    url: '/produce/prodCost/listProdCost',
+    method: 'get',
+    params: data
+  })
+}
+
+// 经营分析 - 销售改变
+export function getSalesChange(data) {
+  return axios({
+    url: '/produce/prodSalesDetail/getSalesWeek',
+    method: 'get',
+    params: data
+  })
+}
+// 经营分析 - 销售情况图
+export function getSalesChart(data) {
+  return axios({
+    url: '/produce/prodSalesDetail/getSalesDetail',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 应收 */
+export function getYingShou(data) {
+  return axios({
+    url: '/produce/prodPayable/listReceivable',
+    method: 'get',
+    params: data
+  })
+}
+
+/** 应付 */
+export function getYingFu(data) {
+  return axios({
+    url: '/produce/prodPayable/listPayable',
     method: 'get',
     params: data
   })

src/views/PdcData/Analysis.vue

@@ -55,10 +55,10 @@
         </div>
         <div class="cost-content">
           <div class="cost-left">
-            <cost-pie></cost-pie>
+            <cost-pie :data="costPieData"></cost-pie>
           </div>
           <div class="cost-right">
-            <cost-histogram></cost-histogram>
+            <cost-histogram :data="costHisData"></cost-histogram>
           </div>
         </div>
         <h3 class="label">成本分析</h3>
@@ -95,7 +95,17 @@
       <!-- 销售情况 -->
       <div class="sales">
         <div class="sales-condition">
-          <x-form :formItems="salesFormItems" :day="salesDay" @setDay="salesSetDay" @onClickType="salesOnClickType"></x-form>
+          <!-- <x-form :formItems="salesFormItems" :day="salesDay" @setDay="salesSetDay" @onClickType="salesOnClickType"></x-form> -->
+          <el-date-picker
+            v-model="getSalesDates"
+            type="datetimerange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            align="right"
+            size="small">
+          </el-date-picker>
         </div>
         <div class="sales-content">
           <div class="sales-left">
@@ -123,7 +133,7 @@
             </div>
           </div>
           <div class="sales-right">
-            <sales-chart></sales-chart>
+            <sales-chart :data="salesChartData"></sales-chart>
           </div>
         </div>
       </div>
@@ -179,16 +189,16 @@ 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 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'
+// import { formItems } from './analysis/salesXForm.config'
 
-import { getInventoryLines, getInventoryAndProduct } from 'utils/api'
+import { getInventoryLines, getInventoryAndProduct, getSalesChange, getSalesChart, getCosts, getYingShou, getYingFu } from 'utils/api'
 
 export default {
   name: "Analysis",
@@ -204,7 +214,7 @@ export default {
     CostPie,
     CostHistogram,
     ImportantLine,
-    XForm,
+    // XForm,
     SalesChart,
     TableFooter
   },
@@ -259,17 +269,48 @@ export default {
       // 经营分析
       costOptions: [],
       costValue: '',
+      costPieData: [], // 经营分析 - 成本分析环形图
+      costHisData: [], // 经营分析 - 柱状图
       // 重要指标
       importantOptions: [],
       importantValue: '',
       importantDates: [],
       // 销售额
-      salesFormItems: [],
+      // salesFormItems: [],
       salesDay: 2, //默认选择本周
       weekSales: 1545252,
       weekSalesChange: 10,
       weekSalesVolume: 1000,
       weekSalesVolumeChange: -10,
+      getSalesDates: [], // 销售图的时间选择
+      pickerOptions: { // 快捷选项
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      salesChartData: {}, // 销售图的数据
       // 应收排名
       yingshouTableItems: [],
       yingshouTableShows: {},
@@ -286,7 +327,7 @@ export default {
     }
   },
   mounted() {
-    this.salesFormItems = formItems
+    // this.salesFormItems = formItems
     this.tableItems = tableItems
     this.tableShows = tableShows
     this.yingshouTableItems = yingshouTableItems
@@ -296,6 +337,11 @@ export default {
     /** 获取网络请求数据 */
     this.initInventoryLines()
     this.initInventoryAndProduct()
+    this.initSalesChange()
+    this.initSalesChart()
+    this.initCosts()
+    this.initYingShou()
+    this.initYingFu()
   },
   methods: {
     handleWorkInfoClick(item) {
@@ -323,6 +369,7 @@ export default {
     // 销售额选中日期
     salesSetDay(data) {
       this.salesDay = data;
+      console.log(this.salesDay)
     },
     // 销售额选中日周月
     salesOnClickType(data) {
@@ -366,8 +413,79 @@ export default {
           // }
         }
       })
+    },
+    // 经营分析 - 销售改变
+    initSalesChange() {
+      getSalesChange({}).then(res => {
+        if (res.code === 10000) {
+          this.weekSales = res.data.quantityAll
+          this.weekSalesChange = res.data.quantityType? res.data.quantityPercentage: -res.data.quantityPercentage
+          this.weekSalesVolume = res.data.saleAll
+          this.weekSalesVolumeChange = res.data.saleType? res.data.salePercentage: -res.data.salePercentage
+        } else {
+          this.weekSales = 0
+          this.weekSalesChange = 0
+          this.weekSalesVolume = 0
+          this.weekSalesVolumeChange = 0
+        }
+      })
+    },
+    // 经营分析 - 销售情况图
+    initSalesChart() {
+      const params = {
+        beginDate: this.getSalesDates[0] || '',
+        endDate: this.getSalesDates[1] || ''
+      }
+      console.log('我要放参数了', params)
+      getSalesChart(params).then(res => {
+        if (res.code === 10000) {
+          this.salesChartData = res.data
+        }
+      })
+    },
+    // 经营分析 - 成本分析
+    initCosts() {
+      getCosts({}).then(res => {
+        if (res.code === 10000) {
+          this.costPieData = []
+          res.data.forEach(item => {
+            this.costPieData.push({
+              name: item.costName,
+              value: item.costRate
+            })
+          })
+          this.costHisData = []
+          res.data.forEach(item => {
+            this.costHisData.push(item.costVal)
+          })
+        }
+      })
+    },
+    // 应收排名
+    initYingShou() {
+      getYingShou({}).then(res => {
+        console.log('应收', res)
+        if (res.code === 10000) {
+          this.yingshouTableData = res.data
+        }
+      })
+    },
+    // 应付排名
+    initYingFu() {
+      getYingFu({}).then(res => {
+        console.log('应付', res)
+        if (res.code === 10000) {
+          this.yingfuTableData = res.data
+        }
+      })
     }
   },
+  watch: {
+    getSalesDates(newValue) {
+      this.getSalesDates = newValue
+      this.initSalesChart()
+    }
+  }
 }
 </script>
 
@@ -426,6 +544,9 @@ export default {
   padding: 20px;
   padding-bottom: 0;
 }
+.sales-condition {
+  margin-left: 250px;
+}
 .sales-content {
   padding-top: 20px;
   width: 100%;

src/views/PdcData/analysis/CostHistogram.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 09:10:42
- * @LastEditTime: 2021-10-12 10:13:30
+ * @LastEditTime: 2021-10-22 15:49:54
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析的柱状图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
@@ -13,6 +13,12 @@
 </template>
 <script>
 export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       myChart: null
@@ -125,7 +131,7 @@ export default {
           {
             // name: '头',
             type: 'bar',
-            data: [32541, 82467, 54363, 64642, 40257, 95422],
+            data: this.data,
             itemStyle: {
               normal: {
                 color: function (colors) { // 颜色设置
@@ -149,7 +155,13 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById('costHistogram'));
-    this.init();
+    // this.init();
+  },
+  watch: {
+    data(value) {
+      console.log('成本分析柱状图数据', value)
+      this.init()
+    }
   }
 }
 </script>

src/views/PdcData/analysis/CostPie.vue

@@ -13,6 +13,12 @@
 </template>
 <script>
 export default {
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       myChart: null
@@ -74,14 +80,7 @@ export default {
                 }
               },
             },
-            data: [
-              { value: 8, name: '药品成本' },
-              { value: 26, name: '出生成本' },
-              { value: 12, name: '批次变动成本' },
-              { value: 12, name: '初始化成本' },
-              { value: 10, name: '公猪成本' },
-              { value: 52, name: '饲料成本' }
-            ]
+            data: this.data
           }
         ]
       };
@@ -91,7 +90,13 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById('costPie'));
-    this.init()
+    // this.init()
+  },
+  watch: {
+    data(value) {
+      console.log('成本分析环形图数据', value)
+      this.init()
+    }
   }
 }
 </script>

src/views/PdcData/analysis/SalesChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 13:45:04
- * @LastEditTime: 2021-10-12 13:56:08
+ * @LastEditTime: 2021-10-22 15:45:34
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\SalesChart.vue
@@ -25,25 +25,21 @@ export default {
       type: String,
       default: () => '0'
     },
-    dataValue: {
-      type: Array,
-      default: () => [100, 75, 120, 200, 110, 40, 60]
-    }
+    data: {
+      type: Object,
+      default: () => {}
+    },
+    // 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 dataAxis = this.data.sellDates
       let start = dataAxis.length - 12;
       let end = dataAxis.length - 1;
       let options = {
@@ -131,7 +127,7 @@ export default {
                 }
               }
             },
-            data: this.dataValue
+            data: this.data.quantitys
           }
         ]
       }
@@ -140,7 +136,19 @@ export default {
   },
   mounted() {
     this.myChart = this.$echarts.init(document.getElementById('salesChart'));
-    this.init()
+    // this.init()
+  },
+  watch: {
+    data(newValue) {
+      console.log(newValue)
+      this.init()
+    },
+    color(newVal) {
+      if(newVal) {
+        this.myChart.clear();
+        this.init()
+      }
+    }
   }
 }
 </script>

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-10-11 16:12:07
- * @LastEditTime: 2021-10-11 16:18:22
+ * @LastEditTime: 2021-10-22 16:45:21
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\yingshouTable.config.js
@@ -14,19 +14,19 @@ export const yingshouTableItems = [
     slotName: 'rank'
   },
   {
-    prop: 'name',
+    prop: 'company',
     label: '名称',
     minWidth: '300',
     slotName: 'name'
   },
   {
-    prop: 'number',
+    prop: 'money',
     label: '金额',
     minWidth: '150',
     slotName: 'number'
   },
   {
-    prop: 'person',
+    prop: 'linkman',
     label: '联系人',
     minWidth: '200',
     slotName: 'person'