产出统计初步布局修改

src/views/productionStatis/apis.js

@@ -7,3 +7,9 @@ export function getDataDetails(params) {
     params
   })
 }
+export function getProDetails(params) {
+  return request({
+    url: '/datamonitor/getStatisticsForProduce/' + '?beginDate=' + params.beginDate + '&endDate=' + params.endDate + '&type=' + params.type,
+    method: 'get'
+  })
+}

src/views/productionStatis/produceStatistics.vue

 <template>
-  <div>产出统计</div>
+  <div class="RepairStatistics_module">
+    <div class="search">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="计划开工时间">
+          <div slot="label" class="labelClass">
+            <div>开始时间</div>
+          </div>
+          <el-date-picker
+            v-model="queryParams.startDate"
+            :picker-options="start_date "
+            type="datetime"
+            placeholder="选择日期"
+            popper-class="date_picker"
+            :editable="false"
+            :clearable="false"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            style="width: 220px"
+            :default-time="'00:00:00'"
+            @change="changeTime"
+          />
+          <span>-</span>
+          <el-date-picker
+            v-model="queryParams.endDate"
+            :picker-options="end_date"
+            type="datetime"
+            popper-class="date_picker"
+            placeholder="选择日期"
+            :editable="false"
+            :clearable="false"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            style="width: 220px"
+            :default-time="'23:59:59'"
+            @change="changeTime"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-divider />
+    <div class="search_btn">
+      <el-button
+        v-for="(item,index) in btnList"
+        :key="index"
+        class="setupBtn"
+        :class="{activeBtn:choseType === item.dictValue}"
+        @click="choseBtn(item)"
+      >
+        {{ item.dictLabel }}
+        <img v-if="choseType === item.dictValue" :src="logo" class="chose-icon">
+      </el-button>
+    </div>
+    <div class="homePageIndex-body">
+      <el-card class="box-card">
+        <div class="heightLine">
+          <!--          <div style="margin-left: 7px" class="span_middle">生产线投入产出统计</div>-->
+        </div>
+        <div id="echarts-proLineMonitor" class="span_1">
+          <div id="dataCharts_proLineMonitor" ref="chart_stay" :data="HistoricalInvestigation" style="height: 40vh" />
+        </div>
+      </el-card>
+      <el-row>
+        <el-col :span="8">
+          <el-card class="box-card-small">
+            <div class="heightLine">
+              <div style="margin-left: 7px" class="span_middle">统计占比</div>
+            </div>
+            <div id="echarts-statistics" class="span_1">
+              <div id="dataCharts_statistics" ref="chart_stay" :data="HistoricalInvestigation" style="height: 40vh" />
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <div style="border-top: 14px solid #f4f4f4; padding: 20px">
+        <el-table
+          border
+          :data="dataList"
+        >
+          <el-table-column type="index" label="序号" width="50" />
+          <el-table-column align="center" prop="type" :show-overflow-tooltip="true">
+            <template #header>
+              <div>统计日期</div>
+              <div>Statistical Date</div>
+            </template>
+            <template slot-scope="scope">
+              {{ scope.row.type || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="defectQty" :show-overflow-tooltip="true">
+            <template slot="header">
+              <div>计划生产数量</div>
+              <div>Planned output</div>
+            </template>
+            <template slot-scope="scope">
+              {{ scope.row.plannedOutput || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="inPut" :show-overflow-tooltip="true">
+            <template #header>
+              <div>实际生产数量</div>
+              <div>InPut</div>
+            </template>
+            <template slot-scope="scope">
+              {{ scope.row.inPut || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="failureRate" :show-overflow-tooltip="true">
+            <template slot="header">
+              <div>良率</div>
+              <div>goodRate</div>
+            </template>
+            <template slot-scope="scope">
+              {{ scope.row.goodRate + '%' || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="failureProportion" :show-overflow-tooltip="true">
+            <template #header>
+              <div>统计占比</div>
+              <div>InPut Proportion</div>
+            </template>
+            <template slot-scope="scope">
+              {{ scope.row.inPutProportion + '%' || '-' }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import moment from 'moment'
+import * as echarts from 'echarts'
+import { getProDetails } from './apis'
+
 export default {
-name: "produceStatistics"
+  name: 'ProduceStatistics',
+  data() {
+    return {
+      // 开始时间范围限定
+      start_date: {
+        disabledDate: time => {
+          if (this.queryParams.endDate) {
+            return time.getTime() > new Date(this.queryParams.endDate).getTime()
+          }
+        }
+      },
+      // 结束时间范围限定
+      end_date: {
+        disabledDate: time => {
+          if (this.queryParams.startDate) {
+            return time.getTime() >= new Date(moment(new Date()).format('YYYY-MM-DD')).getTime() ||
+              time.getTime() < new Date(moment(this.queryParams.startDate).format('YYYY-MM-DD')).getTime()
+          }
+        }
+      },
+      // 搜索框数据
+      queryParams: {
+        startDate: moment(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 6)).format('YYYY-MM-DD') + ' 00:00:00',
+        endDate: moment(new Date()).format('YYYY-MM-DD') + ' 23:59:59'
+      },
+      HistoricalInvestigation: [],
+      logo: require('@/assets/image/btnChose.png'),
+      choseType: 'day',
+      dataList: [],
+      btnList: [
+        { dictLabel: '日报', dictValue: 'day' },
+        { dictLabel: '周报', dictValue: 'week' },
+        { dictLabel: '月报', dictValue: 'month' },
+        { dictLabel: '按班次统计', dictValue: 'Shift' },
+        { dictLabel: '按线体统计', dictValue: 'Line' },
+        { dictLabel: '按工单统计', dictValue: 'Working Order' },
+        { dictLabel: '按追溯号统计', dictValue: 'Batch Number' },
+        { dictLabel: '按PO号统计', dictValue: 'PO Number' },
+        { dictLabel: '按项目统计', dictValue: 'Project' },
+        { dictLabel: '按成品料号统计', dictValue: 'ParNumber' }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.getRepairStats() // 获取页面数据
+    // 通过监听内容部分的宽度让图表resize
+    const elementResizeDetectorMaker = require('element-resize-detector')
+    const erd = elementResizeDetectorMaker()
+    const that = this
+    erd.listenTo(document.getElementById('echarts-proLineMonitor'), function(element) {
+      const width = element.offsetWidth
+      const height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_proLineMonitor')).resize()
+      })
+    })
+    erd.listenTo(document.getElementById('echarts-statistics'), function(element) {
+      const width = element.offsetWidth
+      const height = element.offsetHeight
+      self.tableHeight = height // 将监听到的宽高进行赋值
+      self.tableWidth = width
+      that.$nextTick(function() {
+        console.log('Size: ' + width + 'x' + height)
+        // 使echarts尺寸重置
+        echarts.init(document.getElementById('dataCharts_statistics')).resize()
+      })
+    })
+  },
+  methods: {
+    /** 获取页面数据*/
+    getRepairStats() {
+      const params = {
+        beginDate: this.queryParams.startDate,
+        endDate: this.queryParams.endDate,
+        type: this.choseType
+      }
+      getProDetails(params).then(res => {
+        this.dataList = res.data
+        this.getProLineMonitor()
+        this.getStatistics()
+      })
+    },
+    /** 更改筛选时间*/
+    changeTime() {
+      const params = {
+        beginDate: this.queryParams.startDate,
+        endDate: this.queryParams.endDate,
+        type: this.choseType
+      }
+      getProDetails(params).then(res => {
+        this.dataList = res.data
+        this.getProLineMonitor()
+        this.getStatistics()
+      })
+    },
+    /** 选择按钮类型*/
+    choseBtn(item) {
+      this.choseType = item.dictValue
+      const params = {
+        beginDate: this.queryParams.startDate,
+        endDate: this.queryParams.endDate,
+        type: this.choseType
+      }
+      getProDetails(params).then(res => {
+        this.dataList = res.data
+        this.getProLineMonitor()
+        this.getStatistics()
+      })
+    },
+    /** 统计占比echarts*/
+    getStatistics() {
+      const myChartAge = echarts.init(document.getElementById('dataCharts_statistics'))
+      const statisticsData = []
+      this.dataList.forEach(item => {
+        const row = {
+          value: item.inPutProportion, name: item.type
+        }
+        statisticsData.push(row)
+      })
+      const option = {
+        tooltip: {
+          trigger: 'item',
+          // formatter: '{a} <br/>{b} : {c}% ({d}%)'
+        },
+        series: [
+          {
+            name: '统计占比',
+            type: 'pie',
+            radius: '50%',
+            data: statisticsData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+      myChartAge.setOption(option)
+    },
+    /** 生产线监控*/
+    getProLineMonitor() {
+      const myChartAge = echarts.init(document.getElementById('dataCharts_proLineMonitor'))
+      const colors = ['#209DFF', '#BC2C29', '#FF8919']
+      const xData = [] // x轴显示
+      const proOutput = [] // y计划生产数量
+      const inputData = [] // y实际生产数量
+      const goodRate = [] // 良率
+      let dataTemp = []
+      let maxNum1 = 0
+      this.dataList.forEach(item => {
+        xData.push(item.type)
+        proOutput.push(item.plannedOutput)
+        inputData.push(item.inPut)
+        goodRate.push(item.goodRate)
+      })
+      dataTemp = proOutput.concat(inputData)
+      maxNum1 = Math.max(...dataTemp) // y计划生产和实际生产的最大值
+      const option = {
+        color: colors,
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          }
+        },
+        grid: {
+          right: '20%'
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              alignWithLabel: true
+            },
+            // prettier-ignore
+            data: xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            position: 'left',
+            min: 0,
+            max: maxNum1,
+            interval: Math.ceil(maxNum1 / 5),
+            alignTicks: true,
+            axisLine: {
+              show: true
+            },
+            axisLabel: {
+              formatter: '{value}'
+            }
+          },
+          {
+            name: ' ',
+            type: 'value',
+            position: 'right',
+            alignTicks: true,
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLine: {
+              show: true
+            },
+            axisLabel: {
+              formatter: '{value} %'
+            }
+          }
+
+        ],
+        series: [
+          {
+            name: '计划生产数量',
+            type: 'bar',
+            barWidth: 18,
+            barGap: 0,
+            data: proOutput
+          },
+          {
+            name: '实际生产数量',
+            type: 'bar',
+            barWidth: 18,
+            barGap: 0,
+            data: inputData
+          },
+          {
+            name: '良率',
+            type: 'line',
+            yAxisIndex: 1,
+            data: goodRate,
+            tooltip: {
+              valueFormatter: function(value) {
+                return value + ' %'
+              }
+            }
+          }
+        ]
+      }
+      myChartAge.setOption(option)
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+.RepairStatistics_module{
+  .search{
+    padding: 0 20px;
+  }
+  .el-divider--horizontal{
+    margin: 10px 0;
+  }
+  .search_btn{
+    border-bottom: 14px solid rgb(244, 244, 244);
+    //display: flex;
+    .chose-icon{
+      width: 15px;
+      position: absolute;
+      right: -1px;
+      top: -1px;
+    }
+    .setupBtn{
+      font-size: 16px;
+      color: #333333;
+      position: relative;
+      border-radius: 5px;
+      margin: 10px;
+      height: 32px;
+    }
+    .activeBtn{
+      border-radius: 5px;
+      height: 32px;
+      border: 1px solid #D20A10;
+      background-color: white;
+      color: #D20A10;
+    }
+  }
+  .homePageIndex-body{
+    .box-card-small{
 
+    }
+    ::v-deep .el-table th .cell{
+      display: inline-block!important;
+    }
+    .table-drop{
+      vertical-align: 2px;
+      //line-height: 20px;
+      margin-left: 15px
+    }
+  }
+}
 </style>