hyyfClient/src/views/PdcData/Analysis.vue

<template>
  <div class="analysis">
    <!-- 工作看板 -->
    <board :title="title[0]">
      <div>
        <work-infos :dataList="workInfos" @workInfoClick="handleWorkInfoClick"></work-infos>
        <div class="table-content">
          <table-content 
            :tableItems="tableItems" 
            :height="height" 
            :shows="tableShows"
            :listData="tableData">
          </table-content>
        </div>
      </div>
    </board>

    <!-- 存栏情况 -->
    <board :title="title[1]">
      <div>
        <div>
          <!-- 存栏结构 -->
          <chart-inventory-pie :data="inventoryPieData"></chart-inventory-pie>
          <!-- 存栏变动 -->
          <chart-inventory-lines :data="inventoryLinesData"></chart-inventory-lines>
        </div>
        <div>
          <!-- 存栏计数 -->
          <inventory-items :data="inventoryItemsData"></inventory-items>
        </div>
      </div>
    </board>

    <!-- 生产情况 -->
    <board :title="title[2]">
      <!-- 环形图 -->
      <production-donuts :data="productionPercents"></production-donuts>
      <!-- 8个格子 -->
      <production-items :data="productionItems"></production-items>
    </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 :data="costPieData"></cost-pie>
          </div>
          <div class="cost-right">
            <cost-histogram :data="costHisData"></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> -->
          <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">
            <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 :data="salesChartData"></sales-chart>
          </div>
        </div>
      </div>
    </board>

    <!-- 应收排名 -->
    <board :title="title[4]">
      <table-content 
        :tableItems="yingshouTableItems" 
        :height="height" 
        :shows="yingshouTableShows"
        :listData="yingshouTableData">
      </table-content>
    </board>

    <!-- 应付排名 -->
    <board :title="title[5]">
      <table-content 
        :tableItems="yingshouTableItems" 
        :height="height" 
        :shows="yingshouTableShows"
        :listData="yingfuTableData">
      </table-content>
    </board>

    <!-- 安全库存报警 -->
    <board :title="title[6]">
      <table-content 
        :tableItems="safetyTableItems" 
        :height="height" 
        :shows="safetyTableShows"
        :listData="safetyTableData">
      </table-content>
      <table-footer
        :totals="total"
        :size="size"
        @sizeChange="sizeChange"
        @pageChange="pageChange">
      </table-footer>
    </board>
  </div>
</template>

<script>
import Board from 'components/board/index.vue'
import WorkInfos from './analysis/WorkInfos.vue'
import TableContent from 'components/newTable/TableContent.vue'
import ChartInventoryPie from './analysis/ChartInventoryPie.vue'
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'

import { getInventoryLines, getInventoryAndProduct, getSalesChange, getSalesChart, getCosts, getYingShou, getYingFu } from 'utils/api'

export default {
  name: "Analysis",
  components: {
    Board,
    WorkInfos,
    TableContent,
    ChartInventoryPie,
    ChartInventoryLines,
    InventoryItems,
    ProductionDonuts,
    ProductionItems,
    CostPie,
    CostHistogram,
    ImportantLine,
    // XForm,
    SalesChart,
    TableFooter
  },
  data() {
    return {
      title: ['工作看板', '存栏情况', '生产情况', '经营分析', '应收排名', '应付排名', '安全库存报警'],
      workInfos: [
        {
          label: '预警信息',
          number: 10
        },
        {
          label: '断奶数量',
          number: 1150
        },
        {
          label: '配种数量',
          number: 1540
        },
        {
          label: '转舍计划',
          number: 108
        },
        {
          label: '分娩数量',
          number: 180
        },
        {
          label: '日常计划',
          number: 10
        },
        {
          label: '天才计划',
          number: 10
        },
        {
          label: '保健计划',
          number: 10
        }
      ],
      tableItems: [], 
      tableShows: {},
      height: 300,
      tableData: [],
      // 存栏情况
      inventoryLinesData: {}, // 折线图数据
      inventoryPieData: [], // 环形图数据
      inventoryItemsData: [], // 下面块图的数据
      // 生产情况
      productionPercents: [], // 百分比
      productionItems: [], // 下面块图的数据
      // 经营分析
      costOptions: [],
      costValue: '',
      costPieData: [], // 经营分析 - 成本分析环形图
      costHisData: [], // 经营分析 - 柱状图
      // 重要指标
      importantOptions: [],
      importantValue: '',
      importantDates: [],
      // 销售额
      // 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: {},
      yingshouTableData: [],
      // 应付排名
      yingfuTableData: [],
      // 安全库存报警
      safetyTableItems: [],
      safetyTableShows: {},
      safetyTableData: [],
      total: 0,
      size: 20,
      pageNum: 1,
    }
  },
  mounted() {
    // this.salesFormItems = formItems
    this.tableItems = tableItems
    this.tableShows = tableShows
    this.yingshouTableItems = yingshouTableItems
    this.yingshouTableShows = yingshouTableShows
    this.safetyTableItems = safetyTableItems
    this.safetyTableShows = safetyTableShows
    /** 获取网络请求数据 */
    this.initInventoryLines()
    this.initInventoryAndProduct()
    this.initSalesChange()
    this.initSalesChart()
    this.initCosts()
    this.initYingShou()
    this.initYingFu()
  },
  methods: {
    handleWorkInfoClick(item) {
      console.log(item)
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      this.init();
    },
    init() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.size,
        searchStr: this.keyword
      }
      console.log(params)
      // 获取后端数据
    },
    // 销售额选中日期
    salesSetDay(data) {
      this.salesDay = data;
      console.log(this.salesDay)
    },
    // 销售额选中日周月
    salesOnClickType(data) {
      console.log(data)
    },
    // 存栏情况 - 存栏变动折线图数据请求
    initInventoryLines() {
      getInventoryLines({}).then(res => {
        if (res.code === 10000) {
          this.inventoryLinesData = res.data
        } else {
          this.inventoryLinesData = {
            boarStock: [],
            fatpigStock: [],
            griceStock: [],
            month: [],
            pigletStock: [],
            sowStock: []
          }
        }
      })
    },
    // 存栏情况 + 生产情况
    initInventoryAndProduct() {
      getInventoryAndProduct({}).then(res => {
        if (res.code === 10000) {
          // this.inventoryLinesData = res.data
          console.log(res.data)
          this.inventoryPieData = res.data.slice(0, 6)
          this.inventoryItemsData = [res.data[1].stockQuantity, res.data[6].stockQuantity, res.data[7].stockQuantity, res.data[8].stockQuantity, res.data[2].stockQuantity, res.data[9].stockQuantity]
          this.productionPercents = [res.data[12].rate*100, res.data[13].rate*100, res.data[14].rate*100, res.data[15].rate*100, res.data[16].rate*100]
          this.productionItems = [res.data[17].stockQuantity, res.data[18].stockQuantity, res.data[19].stockQuantity, res.data[20].stockQuantity, res.data[21].stockQuantity, res.data[22].stockQuantity, res.data[23].stockQuantity, res.data[24].stockQuantity]
        } else {
          // this.inventoryLinesData = {
          //   boarStock: [],
          //   fatpigStock: [],
          //   griceStock: [],
          //   month: [],
          //   pigletStock: [],
          //   sowStock: []
          // }
        }
      })
    },
    // 经营分析 - 销售改变
    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>

<style scoped>
.analysis {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.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-condition {
  margin-left: 250px;
}
.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>