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></chart-inventory-pie>
          <!-- 存栏变动 -->
          <chart-inventory-lines></chart-inventory-lines>
        </div>
        <div>
          <!-- 存栏计数 -->
          <inventory-items></inventory-items>
        </div>
      </div>
    </board>

    <!-- 生产情况 -->
    <board :title="title[2]">
      <!-- 环形图 -->
      <production-donuts></production-donuts>
      <!-- 8个格子 -->
      <production-items></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></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]">
      <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'

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: [],
      // 生产情况
      costOptions: [],
      costValue: '',
      // 重要指标
      importantOptions: [],
      importantValue: '',
      importantDates: [],
      // 销售额
      salesFormItems: [],
      salesDay: 2, //默认选择本周
      weekSales: 1545252,
      weekSalesChange: 10,
      weekSalesVolume: 1000,
      weekSalesVolumeChange: -10,
      // 应收排名
      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
  },
  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;
    },
    // 销售额选中日周月
    salesOnClickType(data) {
      console.log(data)
    }
  },
}
</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-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>