完善下线统计 工位节拍 工位JPH的功能

src/lang/en-US.js

@@ -385,6 +385,82 @@ export default {
     isQualified: 'Qualified',
     noData: 'No data'
   },
+  offLinePartCount: {
+    productionTimeLabel: 'Production Time:',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    dateRangeSeparator: '~',
+    orderNumberLabel: 'Order No.',
+    orderNumberPlaceholder: 'Please enter order number',
+    productModelLabel: 'Product Model:',
+    selectProductModel: 'Please select product model',
+    trendGranularityLabel: 'Trend Granularity:',
+    byDay: 'By Day',
+    byHour: 'By Hour',
+    search: 'Search',
+    export: 'Export',
+    exporting: 'Exporting....',
+    sequence: 'No.',
+    orderNumber: 'Order No.',
+    productNumber: 'Product No.',
+    productModel: 'Product Model',
+    offlineTime: 'Offline Time',
+    trendTitle: 'Offline Output Trend Analysis',
+    saveAsImage: 'Save as Image',
+    dateAxis: 'Date',
+    hourAxis: 'Hour',
+    offlineQuantityAxis: 'Offline Engine Qty',
+    offlineQuantitySeries: 'Offline Qty',
+    selectDateRange: 'Please select start date and end date!',
+    noData: 'No data'
+  },
+  stationBeat: {
+    productionTimeLabel: 'Production Time:',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    dateRangeSeparator: '~',
+    stationLabel: 'Station:',
+    selectStation: 'Please select station',
+    orderNumberLabel: 'Order No.',
+    orderNumberPlaceholder: 'Please enter order number',
+    productModelLabel: 'Product Model:',
+    selectProductModel: 'Please select product model',
+    search: 'Search',
+    excel: 'Excel',
+    sequence: 'No.',
+    station: 'Station',
+    totalAverageBeat: 'Total Avg Beat (s)',
+    totalAverageBeatChartTitle: 'Total Average Beat Bar Chart',
+    totalAverageBeatAxis: 'Total Avg Beat (s)',
+    totalAverageBeatSeries: 'Total Avg Beat',
+    saveAsImage: 'Save as Image',
+    noData: 'No data'
+  },
+  stationJph: {
+    productionTimeLabel: 'Production Time:',
+    startDate: 'Start Date',
+    endDate: 'End Date',
+    dateRangeSeparator: '~',
+    stationLabel: 'Station:',
+    selectStation: 'Please select station',
+    orderNumberLabel: 'Work Order',
+    orderNumberPlaceholder: 'Please enter work order',
+    productModelLabel: 'Product Model:',
+    selectProductModel: 'Please select product model',
+    search: 'Search',
+    export: 'Export',
+    realtimeTab: 'Realtime Today',
+    historyTab: 'History',
+    realtimeChartTitle: 'Realtime Hourly Output by Station',
+    historyChartTitle: 'Historical Hourly Output by Station',
+    saveAsImage: 'Save as Image',
+    sequence: 'No.',
+    date: 'Date',
+    station: 'Station',
+    hourSlot: 'Hour Slot',
+    outputQty: 'Output Qty',
+    noData: 'No data'
+  },
   materialDataQuery: {
     stationNumberLabel: 'Station No.:',
     selectStationNumber: 'Please select station number',
@@ -524,6 +600,9 @@ export default {
     '过站信息查询': 'Station Pass',
     '分线质量查询': 'Line Quality',
     '分线物料查询': 'Line Material',
+    '下线统计': 'Offline Count',
+    '工位节拍': 'Station Beat',
+    '工位JPH': 'Station JPH',
     '生产计划订单完工': 'Order Complete',
     'SPC分析': 'SPC Analysis',
     '基本趋势图': 'Trend Chart',

src/lang/zh-CN.js

@@ -385,6 +385,82 @@ export default {
     isQualified: '是否合格',
     noData: '暂无数据'
   },
+  offLinePartCount: {
+    productionTimeLabel: '生产时间：',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    dateRangeSeparator: '～',
+    orderNumberLabel: '订单号',
+    orderNumberPlaceholder: '请输入订单号',
+    productModelLabel: '产品型号：',
+    selectProductModel: '请选择产品型号',
+    trendGranularityLabel: '趋势粒度：',
+    byDay: '按天',
+    byHour: '按小时',
+    search: '查询',
+    export: '导出',
+    exporting: '正在导出....',
+    sequence: '序号',
+    orderNumber: '订单号',
+    productNumber: '产品编号',
+    productModel: '产品型号',
+    offlineTime: '下线时间',
+    trendTitle: '下线产量趋势分析',
+    saveAsImage: '保存为图片',
+    dateAxis: '日期',
+    hourAxis: '小时',
+    offlineQuantityAxis: '下线发动机数量',
+    offlineQuantitySeries: '下线数量',
+    selectDateRange: '请选择开始时间与结束时间！',
+    noData: '暂无数据'
+  },
+  stationBeat: {
+    productionTimeLabel: '生产时间：',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    dateRangeSeparator: '～',
+    stationLabel: '工位：',
+    selectStation: '请选择工位',
+    orderNumberLabel: '订单号',
+    orderNumberPlaceholder: '请输入订单号',
+    productModelLabel: '产品型号：',
+    selectProductModel: '请选择产品型号',
+    search: '查询',
+    excel: 'Excel',
+    sequence: '序号',
+    station: '工位',
+    totalAverageBeat: '总平均节拍(秒)',
+    totalAverageBeatChartTitle: '总平均节拍横向柱状图',
+    totalAverageBeatAxis: '总平均节拍(秒)',
+    totalAverageBeatSeries: '总平均节拍',
+    saveAsImage: '保存为图片',
+    noData: '暂无数据'
+  },
+  stationJph: {
+    productionTimeLabel: '生产时间：',
+    startDate: '开始日期',
+    endDate: '结束日期',
+    dateRangeSeparator: '～',
+    stationLabel: '工位：',
+    selectStation: '请选择工位',
+    orderNumberLabel: '工单号',
+    orderNumberPlaceholder: '请输入工单号',
+    productModelLabel: '产品型号：',
+    selectProductModel: '请选择产品型号',
+    search: '查询',
+    export: '导出',
+    realtimeTab: '今日实时',
+    historyTab: '历史',
+    realtimeChartTitle: '工位每小时实时产量',
+    historyChartTitle: '工位每小时历史产量',
+    saveAsImage: '保存为图片',
+    sequence: '序号',
+    date: '日期',
+    station: '工位',
+    hourSlot: '小时段',
+    outputQty: '产量',
+    noData: '暂无数据'
+  },
   materialDataQuery: {
     stationNumberLabel: '工位号：',
     selectStationNumber: '请选择工位号',
@@ -524,6 +600,9 @@ export default {
     '过站信息查询': '过站信息查询',
     '分线质量查询': '分线质量查询',
     '分线物料查询': '分线物料查询',
+    '下线统计': '下线统计',
+    '工位节拍': '工位节拍',
+    '工位JPH': '工位JPH',
     '生产计划订单完工': '生产计划订单完工',
     'SPC分析': 'SPC分析',
     '基本趋势图': '基本趋势图',

src/views/QualityAssurance/OffLinePartCount/index.vue

@@ -1,32 +1,32 @@
 <template>
   <el-card class="topCard">
     <el-row class="toolbarRow">
-      <span class="promptText">生产时间:</span>
+      <span class="promptText">{{ $t('offLinePartCount.productionTimeLabel') }}</span>
       <el-date-picker
         v-model="dateTime"
         :clearable="false"
         align="center"
-        end-placeholder="结束日期"
+        :end-placeholder="$t('offLinePartCount.endDate')"
         format="yyyy-MM-dd"
-        range-separator="～"
+        :range-separator="$t('offLinePartCount.dateRangeSeparator')"
         size="small"
-        start-placeholder="开始日期"
+        :start-placeholder="$t('offLinePartCount.startDate')"
         style="width: 240px"
         type="daterange"
         value-format="yyyy-MM-dd"
       />
-      <span style="margin-left: 10px">订单号</span>
+      <span style="margin-left: 10px">{{ $t('offLinePartCount.orderNumberLabel') }}</span>
       <el-input
         v-model="orderNumberValue"
-        placeholder="请输入订单号"
+        :placeholder="$t('offLinePartCount.orderNumberPlaceholder')"
         clearable
         size="small"
         style="width: 150px"
       />
-      <span class="promptText">产品型号:</span>
+      <span class="promptText">{{ $t('offLinePartCount.productModelLabel') }}</span>
       <el-select
         v-model="engineTypeValue"
-        placeholder="请选择产品型号"
+        :placeholder="$t('offLinePartCount.selectProductModel')"
         filterable
         clearable
         size="small"
@@ -40,10 +40,10 @@
           size="mini"
         />
       </el-select>
-      <span class="promptText">趋势粒度:</span>
+      <span class="promptText">{{ $t('offLinePartCount.trendGranularityLabel') }}</span>
       <el-radio-group v-model="trendMode" size="small">
-        <el-radio-button label="day">按天</el-radio-button>
-        <el-radio-button label="hour">按小时</el-radio-button>
+        <el-radio-button label="day">{{ $t('offLinePartCount.byDay') }}</el-radio-button>
+        <el-radio-button label="hour">{{ $t('offLinePartCount.byHour') }}</el-radio-button>
       </el-radio-group>
       <el-button
         class="functionButton"
@@ -52,7 +52,7 @@
         icon="el-icon-search"
         plain
         @click="searchTable(true)"
-      >查询</el-button>
+      >{{ $t('offLinePartCount.search') }}</el-button>
       <el-button
         type="info"
         style="margin-left: 0"
@@ -60,8 +60,8 @@
         size="small"
         plain
         @click="exportExcel()"
-      >导出</el-button>
-      <span v-show="isExporting" style="color: #16a188">正在导出....</span>
+      >{{ $t('offLinePartCount.export') }}</el-button>
+      <span v-show="isExporting" style="color: #16a188">{{ $t('offLinePartCount.exporting') }}</span>
     </el-row>
 
     <el-row>
@@ -85,25 +85,25 @@
           <el-table-column
             type="index"
             align="center"
-            label="序号"
+            :label="$t('offLinePartCount.sequence')"
             width="90px"
           />
-          <el-table-column width="200px" label="订单号" align="center">
+          <el-table-column width="200px" :label="$t('offLinePartCount.orderNumber')" align="center">
             <template slot-scope="scope">
               {{ scope.row.订单号 }}
             </template>
           </el-table-column>
-          <el-table-column min-width="240px" label="产品编号" align="center">
+          <el-table-column min-width="240px" :label="$t('offLinePartCount.productNumber')" align="center">
             <template slot-scope="scope">
               {{ scope.row.发动机号 }}
             </template>
           </el-table-column>
-          <el-table-column label="产品型号" width="200px" align="center">
+          <el-table-column :label="$t('offLinePartCount.productModel')" width="200px" align="center">
             <template slot-scope="scope">
               {{ scope.row.机型 }}
             </template>
           </el-table-column>
-          <el-table-column label="下线时间" width="250px" align="center">
+          <el-table-column :label="$t('offLinePartCount.offlineTime')" width="250px" align="center">
             <template slot-scope="scope">
               {{ scope.row.离开时间 }}
             </template>
@@ -282,7 +282,7 @@ export default {
       }
       this.trendChart.setOption({
         title: {
-          text: '下线产量趋势分析',
+          text: this.$t('offLinePartCount.trendTitle'),
           left: 'center'
         },
         tooltip: {
@@ -298,14 +298,14 @@ export default {
           show: true,
           feature: {
             saveAsImage: {
-              title: '保存为图片',
+              title: this.$t('offLinePartCount.saveAsImage'),
               type: 'png'
             }
           }
         },
         xAxis: {
           type: 'category',
-          name: this.trendMode === 'day' ? '日期' : '小时',
+          name: this.trendMode === 'day' ? this.$t('offLinePartCount.dateAxis') : this.$t('offLinePartCount.hourAxis'),
           data: this.trendXAxis,
           axisLabel: {
             interval: 0,
@@ -314,11 +314,11 @@ export default {
         },
         yAxis: {
           type: 'value',
-          name: '下线发动机数量',
+          name: this.$t('offLinePartCount.offlineQuantityAxis'),
           minInterval: 1
         },
         series: [{
-          name: '下线数量',
+          name: this.$t('offLinePartCount.offlineQuantitySeries'),
           type: 'bar',
           barMaxWidth: 40,
           data: this.trendSeries,
@@ -344,7 +344,7 @@ export default {
         this.dateTime && this.dateTime.length === 2 ? dateTimeCheck = 1 : dateTimeCheck = 0
         if (dateTimeCheck === 0) {
           this.$message({
-            message: '请选择开始时间与结束时间！',
+            message: this.$t('offLinePartCount.selectDateRange'),
             type: 'error'
           })
           return
@@ -368,7 +368,7 @@ export default {
           this.isExporting = false
         })
       } else {
-        this.$message.warning('暂无数据')
+        this.$message.warning(this.$t('offLinePartCount.noData'))
       }
     },
     handleSizeChanges(val) {
@@ -382,6 +382,9 @@ export default {
     }
   },
   watch: {
+    '$i18n.locale'() {
+      this.renderTrendChart()
+    },
     trendMode() {
       this.getTrendData()
     }

src/views/QualityAssurance/StationBeat/index.vue

@@ -1,24 +1,31 @@
 <template>
-     <el-card class="topCard">
-    <el-row>
-      <span class="promptText">
-        时间范围:
-      </span>
+  <el-card class="topCard">
+    <el-row class="toolbarRow">
+      <span class="promptText">{{ $t('stationBeat.productionTimeLabel') }}</span>
       <el-date-picker
-        v-model="timeFrame"
-        :picker-options="pickerOptions"
-        type="datetimerange"
-        class="functionButton"
-        value-format="yyyy-MM-dd HH:mm:ss"
-        format="yyyy-MM-dd HH:mm:ss"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        align="right"/>
-      <span class="promptText">
-        工位:
-      </span>
-      <el-select v-model="station" class="functionButton" multiple collapse-tags placeholder="请选择" @change="select1()">
+        v-model="dateTime"
+        :clearable="false"
+        align="center"
+        :end-placeholder="$t('stationBeat.endDate')"
+        format="yyyy-MM-dd"
+        :range-separator="$t('stationBeat.dateRangeSeparator')"
+        size="small"
+        :start-placeholder="$t('stationBeat.startDate')"
+        style="width: 240px"
+        type="daterange"
+        value-format="yyyy-MM-dd"
+      />
+      <span class="promptText">{{ $t('stationBeat.stationLabel') }}</span>
+      <el-select
+        v-model="stationValues"
+        :placeholder="$t('stationBeat.selectStation')"
+        clearable
+        filterable
+        collapse-tags
+        multiple
+        size="small"
+        style="width: 320px"
+      >
         <el-option
           v-for="item in stationOptions"
           :key="item.value"
@@ -26,339 +33,346 @@
           :value="item.value"
         />
       </el-select>
-      <el-button class="functionButton" type="success" icon="el-icon-search" plain @click="searchTable()">查询</el-button>
-      <el-button class="functionButton" style="margin-left: 0" type="success" icon="el-icon-document" plain @click="exportExcel()">导出</el-button>
-      <span v-show="isExporting" style="color: #16a188">正在导出....</span>
+      <span style="margin-left: 10px">{{ $t('stationBeat.orderNumberLabel') }}</span>
+      <el-input
+        v-model="orderNumberValue"
+        :placeholder="$t('stationBeat.orderNumberPlaceholder')"
+        clearable
+        size="small"
+        style="width: 150px"
+      />
+      <span class="promptText">{{ $t('stationBeat.productModelLabel') }}</span>
+      <el-select
+        v-model="engineTypeValue"
+        :placeholder="$t('stationBeat.selectProductModel')"
+        filterable
+        clearable
+        size="small"
+        style="width: 150px"
+      >
+        <el-option
+          v-for="item in engineType"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-button
+        class="functionButton"
+        type="primary"
+        size="small"
+        icon="el-icon-search"
+        plain
+        @click="searchTable()"
+      >{{ $t('stationBeat.search') }}</el-button>
+      <el-button
+        type="info"
+        size="small"
+        icon="el-icon-download"
+        plain
+        @click="exportExcel()"
+      >{{ $t('stationBeat.excel') }}</el-button>
     </el-row>
+
     <el-row>
-      <el-col :span="13">
-        <div>
-          <el-table
-            v-loading="loading"
-            ref="tableDataBeat"
-            :data="tableData"
-            highlight-current-row
-            border
-            stripe
-            class="tableCustomization"
-            height="730px"
-            @sort-change="sortChange">
-            <el-table-column type="index" align="center" label="序号" width="70px"/>
-            <el-table-column width="80px" label="工位" prop="StationName" align="center" sortable>
-              <template slot-scope="scope">
-                {{ scope.row.StationName }}
-              </template>
-            </el-table-column>
-            <el-table-column width="160px" label="总平均节拍(s)" prop="AB" align="center" sortable>
-              <template slot-scope="scope">
-                {{ scope.row.AB }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-for="(item, index) in tableHeader"
-              :key="index"
-              :label="item.时间"
-              min-width="111px"
-              align="center">
-              <template slot-scope="scope">
-                {{ scope.row[item.时间] }}
-              </template>
-            </el-table-column>
-          </el-table>
-          <!--<div class="block" style="margin-top: 10px;">
-            <el-pagination
-              :current-page="pageCurrent"
-              :page-sizes="[10, 20, 30, 40, 100]"
-              :page-size="pageSize"
-              :total="total"
-              layout="total, sizes, prev, pager, next, jumper"
-              @size-change="handleSizeChanges"
-              @current-change="handleCurrentChanges"/>
-          </div>-->
-        </div>
-      </el-col>
-      <el-col :span="11">
-        <div style="margin-top: 26px;">
-          <div id="dashboardOne" style="height: 730px;width: 800px;border: 1px solid #9f9f9f"/>
-        </div>
-      </el-col>
+      <div class="chartCard">
+        <div id="stationBeatChart" class="chartDom" />
+      </div>
+    </el-row>
+
+    <el-row>
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        stripe
+        class="tableCustomization"
+        height="650px"
+        style="width: 100%"
+      >
+        <el-table-column type="index" align="center" :label="$t('stationBeat.sequence')" width="80" />
+        <el-table-column prop="工位" :label="$t('stationBeat.station')" align="center" min-width="140" />
+        <el-table-column prop="总平均节拍" :label="$t('stationBeat.totalAverageBeat')" align="center" min-width="140" />
+        <el-table-column
+          v-for="item in dynamicDateColumns"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          align="center"
+          min-width="130"
+        />
+      </el-table>
     </el-row>
   </el-card>
 </template>
 
 <script>
-import echarts from 'echarts'
+import { getNowShotTime } from '../../../utils/tool'
+
 export default {
   data() {
     return {
-      isExporting: false,
-      dataZoomStart: 0,
-      dataZoomEnd: 50,
-      chartDom1: null,
-      myChart1X: [],
-      myChart1Y: [],
-      // 时间范围
-      timeFrame: '',
-      tableHeader: [],
-      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])
-          }
-        }]
-      },
-      // 两个复选框
-      alarmNameOptions: [],
+      dateTime: [],
+      stationValues: [],
       stationOptions: [],
-      station: [],
-      stationString: '',
-      alarmCode: [],
-      alarmCodeString: '',
-      // 表格
+      orderNumberValue: '',
+      engineTypeValue: '',
+      engineType: [],
       tableData: [],
       loading: false,
-      // 分页
-      pageCurrent: 1, // 分页当前页
-      pageSize: 10, // 分页每页显示条数
-      total: 0 // 分页总数
+      dynamicDateColumns: [],
+      isExporting: false,
+      chartDom: null
     }
   },
-  activated() {
-    this.getStation()
-    this.initCharDom()
+  created() {
+    this.dateTime = [getNowShotTime(), getNowShotTime()]
+    this.getStationOptions()
+    this.getEngineType()
+    this.searchTable()
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+      window.addEventListener('resize', this.handleResize)
+    })
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.chartDom) {
+      this.chartDom.dispose()
+      this.chartDom = null
+    }
+  },
+  watch: {
+    '$i18n.locale'() {
+      this.renderChart()
+    }
   },
   methods: {
-    sortChange({ column, prop, order }) {
-      this.myChart1X = []
-      this.myChart1Y = []
-      for (let i = 0; i < this.$refs.tableDataBeat.tableData.length; i++) {
-        this.myChart1X.push(this.$refs.tableDataBeat.tableData[i].StationName)
-        this.myChart1Y.push(this.$refs.tableDataBeat.tableData[i].AB)
-      }
-      this.drawDashboardOne()
-    },
-    initCharDom() {
-      this.chartDom1 = echarts.init(document.getElementById('dashboardOne'))
-    },
-    select1() {
-      this.stationString = ''
-      if (this.station.length > 0) {
-        this.stationString = "'" + this.station[0] + "'"
-        for (let i = 1; i < this.station.length; i++) {
-          this.stationString = this.stationString + ",'" + this.station[i] + "'"
-        }
-      }
-      if (this.station.length <= 25 && this.station.length !== 0) { this.dataZoomEnd = 100 } else { this.dataZoomEnd = 50 }
-    },
-    getStation() {
+    getStationOptions() {
       this.stationOptions = []
-      const Data = this.CreateData('11', 'SP_Station_Query')
+      const param = []
+      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
       this.ExecDatabase(Data).then(response => {
-        for (let i = 0; i < response.data.length; i++) {
-          this.stationOptions.push({
-            label: response.data[i].StationName,
-            value: response.data[i].StationName
-          })
-        }
+        const source = response.data || []
+        this.stationOptions = source.map(item => ({
+          label: item.工位名称 ? `【${item.工位号}】${item.工位名称}` : item.工位号,
+          value: item.工位号
+        }))
+      })
+    },
+    getEngineType() {
+      this.engineType = []
+      const param = []
+      const Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        const source = response.data || []
+        this.engineType = source.map(item => ({
+          label: item.发动机型号 + '-' + item.标识字符,
+          value: item.发动机机型标志
+        }))
       })
     },
     searchTable() {
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+
       this.loading = true
-      this.myChart1X = []
-      this.myChart1Y = []
-      let timeFrame_check, Station_check
-      this.timeFrame ? timeFrame_check = 1 : timeFrame_check = 0
-      this.stationString ? Station_check = 1 : Station_check = 0
-      if (timeFrame_check === 0) {
-        this.$message({
-          message: '请选择开始时间与结束时间！',
-          type: 'error'
-        })
-        return
-      }
-      this.tableData = []
       const param = []
-      param[0] = ['timeFrame_check', timeFrame_check]
-      param[1] = ['QueryStartTime', this.timeFrame[0]]
-      param[2] = ['QueryEndTime', this.timeFrame[1]]
-      param[3] = ['Station_check', Station_check]
-      param[4] = ['Station', this.stationString]
-      const Data = this.CreateData('11', 'SP_His_StationBeat_TableHeaderQuery', param)
+      param[0] = ['开始时间', this.dateTime[0]]
+      param[1] = ['结束时间', this.dateTime[1]]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      const Data = this.CreateData('11', '质量数据查询_测量数据发动机在线状态_工位节拍统计', param)
       this.ExecDatabase(Data).then(response => {
-        if (response.data.length > 0) {
-          this.tableHeader = response.data
-          // 查询表的信息
-          const param1 = []
-          param1[0] = ['Station_check', Station_check]
-          param1[1] = ['Station', this.stationString]
-          const Data1 = this.CreateData('11', 'SP_His_StationBeat_Query', param1)
-          this.ExecDatabase(Data1).then(response => {
-            this.tableData = response.data
-            for (let i = 0; i < this.tableData.length; i++) {
-              this.myChart1X.push(this.tableData[i].StationName)
-              this.myChart1Y.push(this.tableData[i].AB)
-            }
-            if (this.tableData.length <= 25 && this.tableData.length !== 0) { this.dataZoomEnd = 100 } else { this.dataZoomEnd = 30 }
-            this.total = response.data.length
-            this.loading = false
-            this.drawDashboardOne()
-          })
-        } else {
-          this.$message({
-            message: '选择的该时间段没有数据！',
-            type: 'error'
-          })
-          this.loading = false
-          this.drawDashboardOne()
-        }
+        const source = response.data || []
+        this.buildDynamicTable(source)
+        this.renderChart()
+        this.loading = false
+      }).catch(() => {
+        this.tableData = []
+        this.dynamicDateColumns = []
+        this.renderChart()
+        this.loading = false
       })
     },
-    drawDashboardOne() {
-      this.chartDom1.setOption({
+    buildDynamicTable(source) {
+      const dateMap = {}
+      const rowMap = {}
+
+      source.forEach(item => {
+        if (!dateMap[item.日期]) {
+          dateMap[item.日期] = true
+        }
+        if (!rowMap[item.工位]) {
+          rowMap[item.工位] = {
+            工位: item.工位,
+            总平均节拍: item.总平均节拍
+          }
+        }
+        rowMap[item.工位][item.日期] = item.当日平均节拍
+        rowMap[item.工位].总平均节拍 = item.总平均节拍
+      })
+
+      const dates = Object.keys(dateMap).sort()
+      this.dynamicDateColumns = dates.map(date => ({
+        label: date,
+        prop: date
+      }))
+
+      this.tableData = Object.keys(rowMap).map(key => {
+        const row = rowMap[key]
+        dates.forEach(date => {
+          if (typeof row[date] === 'undefined') {
+            row[date] = ''
+          }
+        })
+        return row
+      })
+    },
+    initChart() {
+      const dom = document.getElementById('stationBeatChart')
+      if (!dom) {
+        return
+      }
+      this.chartDom = this.$echarts.getInstanceByDom(dom)
+      if (!this.chartDom) {
+        this.chartDom = this.$echarts.init(dom)
+      }
+      this.renderChart()
+    },
+    renderChart() {
+      if (!this.chartDom) {
+        this.initChart()
+      }
+      if (!this.chartDom) {
+        return
+      }
+      const chartData = [...this.tableData]
+        .map(item => ({
+          station: item.工位,
+          beat: Number(item.总平均节拍 || 0)
+        }))
+        .sort((a, b) => b.beat - a.beat)
+
+      this.chartDom.setOption({
         title: {
-          text: '工位平均节拍统计',
+          text: this.$t('stationBeat.totalAverageBeatChartTitle'),
           left: 'center'
         },
-        grid: [
-          {
-            left: '8%',
-            top: '10%',
-            right: '8%',
-            bottom: '10%'
-          }
-        ],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
             type: 'shadow'
           }
         },
-        dataZoom: [
-          {
-            type: 'slider', // slider表示有滑动块的，inside表示内置的
-            show: true,
-            xAxisIndex: [0],
-            start: this.dataZoomStart,
-            end: this.dataZoomEnd
-          }
-        ],
-        xAxis: {
-          name: '工位号',
-          type: 'category',
-          data: this.myChart1X,
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#000'
+        grid: {
+          left: '6%',
+          right: '6%',
+          bottom: '8%',
+          containLabel: true
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {
+              title: this.$t('stationBeat.saveAsImage'),
+              type: 'png'
             }
-          },
-          splitLine: {
-            show: false
           }
         },
+        xAxis: {
+          type: 'value',
+          name: this.$t('stationBeat.totalAverageBeatAxis')
+        },
         yAxis: {
-          type: 'value',
-          name: '平均节拍',
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#000'
-            }
-          },
-          splitLine: {
-            show: false
-          }
+          type: 'category',
+          data: chartData.map(item => item.station),
+          name: this.$t('stationBeat.station')
         },
-        series: [
-          {
-            name: '平均节拍',
-            data: this.myChart1Y,
-            type: 'bar',
-            itemStyle: '#209de2',
-            label: {
-              show: true,
-              color: '#000',
-              formatter: '{c}',
-              position: 'top'
-            }
+        series: [{
+          name: this.$t('stationBeat.totalAverageBeatSeries'),
+          type: 'bar',
+          data: chartData.map(item => item.beat),
+          barMaxWidth: 28,
+          itemStyle: {
+            color: '#67C23A'
+          },
+          label: {
+            show: true,
+            position: 'right',
+            color: '#333'
           }
-        ]
-      })
+        }]
+      }, true)
     },
-    exportExcel() {
-      if (this.tableData.length !== 0) {
-        let timeFrame_check, Station_check
-        this.timeFrame ? timeFrame_check = 1 : timeFrame_check = 0
-        this.stationString ? Station_check = 1 : Station_check = 0
-        if (timeFrame_check === 0) {
-          this.$message({
-            message: '请选择开始时间与结束时间！',
-            type: 'error'
-          })
-          return
-        }
-        const param = []
-        param[0] = ['timeFrame_check', timeFrame_check]
-        param[1] = ['QueryStartTime', this.timeFrame[0]]
-        param[2] = ['QueryEndTime', this.timeFrame[1]]
-        param[3] = ['Station_check', Station_check]
-        param[4] = ['Station', this.stationString]
-        const Data = this.CreateData('11', 'SP_His_StationBeat_TableHeaderQuery', param)
-        this.ExecDatabase(Data).then(response => {
-          if (response.data.length > 0) {
-            this.isExporting = true
-            const param1 = []
-            param1[0] = ['Station_check', Station_check]
-            param1[1] = ['Station', this.stationString]
-            const Data1 = this.CreateData('2003', 'SP_His_StationBeat_ExportExcel', param1)
-            const blob = 'data:image/gif;base64,R0lGODlhCQACAIAAAMzMzP///yH5BAEAAAEALAAAAAAJAAIAAAIEjI9pUAA7'
-            this.exportExcel_NPOI(Data1, blob).then(res => {
-              this.isExporting = false
-            })
-          } else {
-            this.$message({
-              message: '选择的该时间段没有数据！',
-              type: 'error'
-            })
-          }
-        })
-      } else {
-        this.$message.warning('暂无数据')
+    handleResize() {
+      if (this.chartDom) {
+        this.chartDom.resize()
       }
     },
-    handleSizeChanges(val) {
-      this.pageCurrent = 1
-      this.pageSize = val
-      this.searchTable()
-    },
-    handleCurrentChanges(val) {
-      this.pageCurrent = val
-      this.searchTable()
+    exportExcel() {
+      if (this.tableData.length === 0) {
+        this.$message.warning(this.$t('stationBeat.noData'))
+        return
+      }
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+
+      this.isExporting = true
+      const param = []
+      param[0] = ['开始时间', this.dateTime[0]]
+      param[1] = ['结束时间', this.dateTime[1]]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      const Data = this.CreateData('2001', '质量数据查询_测量数据发动机在线状态_工位节拍统计_导出', param)
+      this.exportExcel_NPOI(Data).then(() => {
+        this.isExporting = false
+      }).catch(() => {
+        this.isExporting = false
+      })
     }
   }
 }
 </script>
 
 <style scoped>
+.topCard {
+  margin: 5px;
+}
 
+.toolbarRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 0;
+  margin-bottom: 12px;
+}
+
+.chartCard {
+  width: 100%;
+  margin: 0 0 12px;
+  padding: 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.chartDom {
+  width: 100%;
+  height: 360px;
+}
 </style>

src/views/QualityAssurance/StationJPH/index.vue

@@ -1,39 +1,39 @@
 <template>
-  <div class="app-container">
-        <el-card class="topCard">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="各区JPH完成统计" name="first">
-        <div style="height: 780px;overflow: auto;width: 1500px">
-          <el-row v-for="item in JPHDataList" :key="item" style="margin: 5px">
-            <div style="height: 500px;border: 1px solid #868686">
-              <div style="position: absolute;right: 5%;top: 2%;font-size: 1.5rem">
-                <div style="padding: 12px 20px;line-height: 1;border: 2px solid #00893d;">
-                  <span>当班产量：</span>
-                  <span style="font-weight: bolder">{{ currentBeatCount.get(item) }}</span>
-                </div>
-              </div>
-              <el-button type="text" icon="el-icon-refresh" style="position: absolute;right: 2%;top: 2%;font-size: 1.5rem" @click="searchChartData4_opPlanCount"/>
-              <div :id="item + '_big'" style="width: 1400px;height: 500px;margin: 5px"/>
-            </div>
-          </el-row>
+  <el-card class="topCard">
+    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
+      <el-tab-pane :label="$t('stationJph.realtimeTab')" name="realtime">
+        <div class="chartCard">
+          <div id="stationJphRealtimeChart" class="chartDom" />
         </div>
       </el-tab-pane>
-      <el-tab-pane label="工位JPH查询" name="second">
-        <el-row>
-          <span class="promptText">日期范围:</span>
+
+      <el-tab-pane :label="$t('stationJph.historyTab')" name="history">
+        <el-row class="toolbarRow">
+          <span class="promptText">{{ $t('stationJph.productionTimeLabel') }}</span>
           <el-date-picker
-            v-model="timeFrame"
-            :picker-options="pickerOptions"
-            type="daterange"
-            class="functionButton"
-            value-format="yyyy-MM-dd"
+            v-model="dateTime"
+            :clearable="false"
+            align="center"
+            :end-placeholder="$t('stationJph.endDate')"
             format="yyyy-MM-dd"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            align="right"/>
-          <span class="promptText">工位:</span>
-          <el-select v-model="station" class="functionButton" placeholder="请选择">
+            :range-separator="$t('stationJph.dateRangeSeparator')"
+            size="small"
+            :start-placeholder="$t('stationJph.startDate')"
+            style="width: 240px"
+            type="daterange"
+            value-format="yyyy-MM-dd"
+          />
+          <span class="promptText">{{ $t('stationJph.stationLabel') }}</span>
+          <el-select
+            v-model="stationValues"
+            :placeholder="$t('stationJph.selectStation')"
+            clearable
+            filterable
+            collapse-tags
+            multiple
+            size="small"
+            style="width: 320px"
+          >
             <el-option
               v-for="item in stationOptions"
               :key="item.value"
@@ -41,484 +41,443 @@
               :value="item.value"
             />
           </el-select>
-          <el-button class="functionButton" type="success" icon="el-icon-search" plain @click="searchTable()">查询</el-button>
-          <el-button class="functionButton" style="margin-left: 0" type="success" icon="el-icon-document" plain @click="exportExcel()">导出</el-button>
-          <span v-show="isExporting" style="color: #16a188">正在导出....</span>
-          <div style="height: 50px;line-height: 50px">
-            <span>
-              小时范围:
-            </span>
-            <div style="display: inline-block;width: 1000px">
-              <el-slider
-                v-model="timeRange"
-                :max="23"
-                :marks="marks"
-                range
-                @change="changeHourRange" />
-            </div>
-          </div>
-        </el-row>
-        <el-row>
-          <el-table v-loading="loading" :data="tableData" :cell-style="set_cell_style" highlight-current-row border stripe class="tableCustomization" height="730px">
-            <el-table-column width="50px" label="ID" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.ID }}
-              </template>
-            </el-table-column>
-            <el-table-column width="105px" label="日期" align="center">
-              <template slot-scope="scope">
-                {{ scope.row.日期 }}
-              </template>
-            </el-table-column>
-            <el-table-column
-              v-for="(item, index) in JPHHeaderF"
-              :key="index"
-              :label="item"
-              :width="calculateCellWidth(item)"
-              align="center">
-              <template slot-scope="scope">
-                {{ scope.row[item] }}
-              </template>
-            </el-table-column>
-          </el-table>
+          <span style="margin-left: 10px">{{ $t('stationJph.orderNumberLabel') }}</span>
+          <el-input
+            v-model="orderNumberValue"
+            :placeholder="$t('stationJph.orderNumberPlaceholder')"
+            clearable
+            size="small"
+            style="width: 150px"
+          />
+          <span class="promptText">{{ $t('stationJph.productModelLabel') }}</span>
+          <el-select
+            v-model="engineTypeValue"
+            :placeholder="$t('stationJph.selectProductModel')"
+            filterable
+            clearable
+            size="small"
+            style="width: 150px"
+          >
+            <el-option
+              v-for="item in engineType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+          <el-button
+            class="functionButton"
+            type="primary"
+            size="small"
+            icon="el-icon-search"
+            plain
+            @click="handleSearch()"
+          >{{ $t('stationJph.search') }}</el-button>
+          <el-button
+            type="info"
+            size="small"
+            icon="el-icon-download"
+            plain
+            @click="exportExcel()"
+          >{{ $t('stationJph.export') }}</el-button>
         </el-row>
+
+        <div class="chartCard">
+          <div id="stationJphHistoryChart" class="chartDom" />
+        </div>
+        <el-table
+          v-loading="historyLoading"
+          :data="historyTableData"
+          border
+          stripe
+          height="560px"
+          style="width: 100%"
+        >
+          <el-table-column type="index" align="center" :label="$t('stationJph.sequence')" width="80" />
+          <el-table-column prop="日期" :label="$t('stationJph.date')" align="center" min-width="120" />
+          <el-table-column prop="小时段" :label="$t('stationJph.hourSlot')" align="center" min-width="120" />
+          <el-table-column prop="产量" :label="$t('stationJph.outputQty')" align="center" min-width="100" />
+        </el-table>
       </el-tab-pane>
     </el-tabs>
-     </el-card>
-  </div>
+  </el-card>
 </template>
 
 <script>
-import echarts from 'echarts'
+import { getNowShotTime } from '../../../utils/tool'
+
 export default {
   data() {
     return {
-      timer: null,
-      currentBeatCount: new Map(),
-      JPHData: new Map(),
-      JPHData_PlanCount: new Map(),
-      JPHDataList: [],
-      activeName: 'first',
-      isExporting: false,
-      timeRange: [0, 23],
-      marks: {
-        '0': '00',
-        '1': '01',
-        '2': '02',
-        '3': '03',
-        '4': '04',
-        '5': '05',
-        '6': '06',
-        '7': '07',
-        '8': '08',
-        '9': '09',
-        '10': '10',
-        '11': '11',
-        '12': '12',
-        '13': '13',
-        '14': '14',
-        '15': '15',
-        '16': '16',
-        '17': '17',
-        '18': '18',
-        '19': '19',
-        '20': '20',
-        '21': '21',
-        '22': '22',
-        '23': '23'
-      },
-      JPHHeader: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
-      JPHHeader2: ['结果'],
-      JPHHeaderF: [],
-      // 时间范围
-      timeFrame: '',
-      tableHeader: [],
-      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])
-          }
-        }]
-      },
-      // 两个复选框
-      alarmNameOptions: [],
+      activeTab: 'realtime',
+      dateTime: [],
+      stationValues: [],
       stationOptions: [],
-      station: '',
-      alarmCode: [],
-      alarmCodeString: '',
-      // 表格
-      tableData: [],
-      loading: false,
-      // 分页
-      pageCurrent: 1, // 分页当前页
-      pageSize: 10, // 分页每页显示条数
-      total: 0 // 分页总数
+      orderNumberValue: '',
+      engineTypeValue: '',
+      engineType: [],
+      historyTableData: [],
+      realtimeLoading: false,
+      historyLoading: false,
+      realtimeChart: null,
+      historyChart: null,
+      realtimeSource: [],
+      historySource: [],
+      realtimeTimer: null
     }
   },
-  computed: {
-  },
   created() {
-    this.JPHHeaderF = [...this.JPHHeader, ...this.JPHHeader2]
-    this.getStation()
-    // this.searchChartData4_opPlanCount()
-    this.searchTable56()
+    this.dateTime = [getNowShotTime(), getNowShotTime()]
+    this.getStationOptions()
+    this.getEngineType()
+    this.getRealtimeData()
+    this.getHistoryData()
   },
   mounted() {
-    this.timer = setInterval(() => {
-      // this.searchChartData4_opPlanCount()
-    }, 1000 * 60)
+    this.$nextTick(() => {
+      this.initRealtimeChart()
+      this.initHistoryChart()
+      if (this.activeTab === 'realtime') {
+        this.startRealtimePolling()
+      }
+      window.addEventListener('resize', this.handleResize)
+    })
   },
   beforeDestroy() {
-    clearInterval(this.timer)
+    this.stopRealtimePolling()
+    window.removeEventListener('resize', this.handleResize)
+    if (this.realtimeChart) {
+      this.realtimeChart.dispose()
+      this.realtimeChart = null
+    }
+    if (this.historyChart) {
+      this.historyChart.dispose()
+      this.historyChart = null
+    }
+  },
+  watch: {
+    '$i18n.locale'() {
+      this.renderRealtimeChart()
+      this.renderHistoryChart()
+    }
   },
   methods: {
-    getStation() {
-      this.stationOptions = []
-      const Data = this.CreateData('11', 'SP_Station_Query')
+    getStationOptions() {
+      const param = []
+      const Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
       this.ExecDatabase(Data).then(response => {
-        for (let i = 0; i < response.data.length; i++) {
-          this.stationOptions.push({
-            label: response.data[i].StationName,
-            value: response.data[i].StationName
-          })
-        }
-        this.station = this.stationOptions[0].value
+        const source = response.data || []
+        this.stationOptions = source.map(item => ({
+          label: item.工位名称 ? `【${item.工位号}】${item.工位名称}` : item.工位号,
+          value: item.工位号
+        }))
       })
     },
-    changeHourRange(value) {
-      const newArray = this.JPHHeader.slice(value[0], value[1] + 1)
-      this.JPHHeaderF = [...newArray, ...this.JPHHeader2]
-      console.log(newArray)
-      for (let i = 1; i < this.tableData.length; i++) {
-        const tempData = this.tableData[i]
-        let tempDataResultOkCount = 0
-        let tempDataResultAll = 0
-        for (const responseKey in tempData) {
-          if (newArray.indexOf(responseKey) !== -1) {
-            tempDataResultAll += 1
-            if (tempData[responseKey + '_result']) {
-              tempDataResultOkCount += 1
-            }
-            tempData['结果'] = `${tempDataResultOkCount} / ${tempDataResultAll}`
-          }
+    getEngineType() {
+      const param = []
+      const Data = this.CreateData('11', 'MES_基本变量_机型代码_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        const source = response.data || []
+        this.engineType = source.map(item => ({
+          label: item.发动机型号 + '-' + item.标识字符,
+          value: item.发动机机型标志
+        }))
+      })
+    },
+    buildParams(type) {
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+
+      const param = []
+      param[0] = ['开始时间', this.dateTime[0]]
+      param[1] = ['结束时间', this.dateTime[1]]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      return this.CreateData(type, '', param)
+    },
+    handleSearch() {
+      this.getHistoryData()
+    },
+    handleTabChange() {
+      if (this.activeTab === 'realtime') {
+        this.getRealtimeData()
+        this.startRealtimePolling()
+      } else {
+        this.stopRealtimePolling()
+      }
+      this.$nextTick(() => {
+        this.handleResize()
+      })
+    },
+    getRealtimeData() {
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+      this.realtimeLoading = true
+      const param = []
+      param[0] = ['开始时间', getNowShotTime()]
+      param[1] = ['结束时间', getNowShotTime()]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      const Data = this.CreateData('11', '质量数据查询_测量数据发动机在线状态_工位JPH_实时', param)
+      this.ExecDatabase(Data).then(response => {
+        this.realtimeSource = response.data || []
+        this.renderRealtimeChart()
+        this.realtimeLoading = false
+      }).catch(() => {
+        this.realtimeSource = []
+        this.renderRealtimeChart()
+        this.realtimeLoading = false
+      })
+    },
+    startRealtimePolling() {
+      this.stopRealtimePolling()
+      this.realtimeTimer = setInterval(() => {
+        if (this.activeTab === 'realtime') {
+          this.getRealtimeData()
         }
+      }, 30000)
+    },
+    stopRealtimePolling() {
+      if (this.realtimeTimer) {
+        clearInterval(this.realtimeTimer)
+        this.realtimeTimer = null
       }
     },
-    // 设置单元格颜色
-    set_cell_style({ row, column, rowIndex, columnIndex }) {
-      if (row.日期 !== '目标产量') {
-        if (this.JPHHeader.indexOf(column.label) !== -1) {
-          if (row[column.label + '_result']) {
-            return {
-              'background': '#00893d',
-              'color': 'white'
-            }
-          } else {
-            return {
-              'background': '#fcb3bb',
-              'color': 'white'
-            }
-          }
-        } else {
-          return ''
-        }
-      }
+    getHistoryData() {
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+      this.historyLoading = true
+      const param = []
+      param[0] = ['开始时间', this.dateTime[0]]
+      param[1] = ['结束时间', this.dateTime[1]]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      const Data = this.CreateData('11', '质量数据查询_测量数据发动机在线状态_工位JPH_历史', param)
+      this.ExecDatabase(Data).then(response => {
+        this.historySource = response.data || []
+        this.historyTableData = this.historySource
+        this.renderHistoryChart()
+        this.historyLoading = false
+      }).catch(() => {
+        this.historySource = []
+        this.historyTableData = []
+        this.renderHistoryChart()
+        this.historyLoading = false
+      })
     },
-    searchTable() {
-      if (this.timeFrame === null || this.timeFrame === '' || this.timeFrame[0] === '') {
-        this.$message.error('请选择日期范围')
-        this.loading = false
+    initRealtimeChart() {
+      const dom = document.getElementById('stationJphRealtimeChart')
+      if (!dom) {
         return
       }
-      // 查询表的信息
-      this.loading = true
-      this.tableData = []
-      const param = []
-      let tableDataTemp = []
-      const Data = this.CreateData('11', 'SP_His_StationJPH_TableHeaderQuery', param)
-      this.ExecDatabase(Data).then(response => {
-        if (response.data.length > 0) {
-          tableDataTemp = response.data
-          const param1 = []
-          param1[0] = ['QueryStartDate', this.timeFrame[0]]
-          param1[1] = ['QueryEndDate', this.timeFrame[1]]
-          param1[2] = ['Station', this.station]
-          const Data1 = this.CreateData('11', 'SP_His_StationJPH_Query', param1)
-          this.ExecDatabase(Data1).then(response => {
-            if (response.data.length > 0) {
-              for (let i = 0; i < response.data.length; i++) {
-                const tempData = response.data[i]
-                let tempDataResult = false
-                let tempDataResultOkCount = 0
-                let tempDataResultAll = 0
-                for (const responseKey in tempData) {
-                  if (this.JPHHeader.indexOf(responseKey) !== -1) {
-                    tempDataResultAll += 1
-                    if (tempData[responseKey] > tableDataTemp[0][responseKey]) {
-                      tempDataResult = true
-                      tempDataResultOkCount += 1
-                    } else {
-                      tempDataResult = false
-                    }
-                    tempData[responseKey + '_result'] = tempDataResult
-                    tempData['结果'] = `${tempDataResultOkCount} / ${tempDataResultAll}`
-                  }
-                }
-                tableDataTemp.push(tempData)
-              }
+      this.realtimeChart = this.$echarts.getInstanceByDom(dom)
+      if (!this.realtimeChart) {
+        this.realtimeChart = this.$echarts.init(dom)
+      }
+      this.renderRealtimeChart()
+    },
+    initHistoryChart() {
+      const dom = document.getElementById('stationJphHistoryChart')
+      if (!dom) {
+        return
+      }
+      this.historyChart = this.$echarts.getInstanceByDom(dom)
+      if (!this.historyChart) {
+        this.historyChart = this.$echarts.init(dom)
+      }
+      this.renderHistoryChart()
+    },
+    renderRealtimeChart() {
+      if (!this.realtimeChart) {
+        this.initRealtimeChart()
+      }
+      if (!this.realtimeChart) {
+        return
+      }
+      const xAxis = this.realtimeSource.map(item => item.小时段)
+      const series = this.realtimeSource.map(item => Number(item.产量 || 0))
+      this.realtimeChart.setOption({
+        title: {
+          text: this.$t('stationJph.realtimeChartTitle'),
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          bottom: '12%',
+          containLabel: true
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {
+              title: this.$t('stationJph.saveAsImage'),
+              type: 'png'
             }
-            this.tableData = tableDataTemp
-            this.loading = false
-          })
-        } else {
-          this.$message({
-            message: '选择的该时间段没有数据！',
-            type: 'error'
-          })
-          this.loading = false
-        }
-      })
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxis,
+          axisLabel: {
+            interval: 0,
+            rotate: 35
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.$t('stationJph.outputQty')
+        },
+        series: [{
+          name: this.$t('stationJph.outputQty'),
+          type: 'bar',
+          barMaxWidth: 28,
+          data: series,
+          itemStyle: {
+            color: '#409EFF'
+          },
+          label: {
+            show: true,
+            position: 'top',
+            color: '#333'
+          }
+        }]
+      }, true)
+    },
+    renderHistoryChart() {
+      if (!this.historyChart) {
+        this.initHistoryChart()
+      }
+      if (!this.historyChart) {
+        return
+      }
+      const xAxis = this.historySource.map(item => `${item.日期} ${item.小时段}`)
+      const series = this.historySource.map(item => Number(item.产量 || 0))
+      this.historyChart.setOption({
+        title: {
+          text: this.$t('stationJph.historyChartTitle'),
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '4%',
+          right: '4%',
+          bottom: '14%',
+          containLabel: true
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {
+              title: this.$t('stationJph.saveAsImage'),
+              type: 'png'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: xAxis,
+          axisLabel: {
+            interval: 0,
+            rotate: 40
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name: this.$t('stationJph.outputQty')
+        },
+        series: [{
+          name: this.$t('stationJph.outputQty'),
+          type: 'bar',
+          barMaxWidth: 28,
+          data: series,
+          itemStyle: {
+            color: '#67C23A'
+          }
+        }]
+      }, true)
+    },
+    handleResize() {
+      if (this.realtimeChart) {
+        this.realtimeChart.resize()
+      }
+      if (this.historyChart) {
+        this.historyChart.resize()
+      }
     },
     exportExcel() {
-      if (this.tableData.length === 0) {
-        this.$message.warning('请查询要导出的内容')
+      if (this.historyTableData.length === 0) {
+        this.$message.warning(this.$t('stationJph.noData'))
         return
       }
-      if (this.tableData.length) {
-        this.isExporting = false
-        const newTable = []
-        for (let i = 0; i < this.tableData.length; i++) {
-          newTable.push({
-            'ID': this.tableData[i]['ID'],
-            '日期': this.tableData[i]['日期'],
-            '00': this.tableData[i]['00'] ? this.tableData[i]['00'] : 0,
-            '01': this.tableData[i]['01'] ? this.tableData[i]['01'] : 0,
-            '02': this.tableData[i]['02'] ? this.tableData[i]['02'] : 0,
-            '03': this.tableData[i]['03'] ? this.tableData[i]['03'] : 0,
-            '04': this.tableData[i]['04'] ? this.tableData[i]['04'] : 0,
-            '05': this.tableData[i]['05'] ? this.tableData[i]['05'] : 0,
-            '06': this.tableData[i]['06'] ? this.tableData[i]['06'] : 0,
-            '07': this.tableData[i]['07'] ? this.tableData[i]['07'] : 0,
-            '08': this.tableData[i]['08'] ? this.tableData[i]['08'] : 0,
-            '09': this.tableData[i]['09'] ? this.tableData[i]['09'] : 0,
-            '10': this.tableData[i]['10'] ? this.tableData[i]['10'] : 0,
-            '11': this.tableData[i]['11'] ? this.tableData[i]['11'] : 0,
-            '12': this.tableData[i]['12'] ? this.tableData[i]['12'] : 0,
-            '13': this.tableData[i]['13'] ? this.tableData[i]['13'] : 0,
-            '14': this.tableData[i]['14'] ? this.tableData[i]['14'] : 0,
-            '15': this.tableData[i]['15'] ? this.tableData[i]['15'] : 0,
-            '16': this.tableData[i]['16'] ? this.tableData[i]['16'] : 0,
-            '17': this.tableData[i]['17'] ? this.tableData[i]['17'] : 0,
-            '18': this.tableData[i]['18'] ? this.tableData[i]['18'] : 0,
-            '19': this.tableData[i]['19'] ? this.tableData[i]['19'] : 0,
-            '20': this.tableData[i]['20'] ? this.tableData[i]['20'] : 0,
-            '21': this.tableData[i]['21'] ? this.tableData[i]['21'] : 0,
-            '22': this.tableData[i]['22'] ? this.tableData[i]['22'] : 0,
-            '23': this.tableData[i]['23'] ? this.tableData[i]['23'] : 0,
-            '结果': this.tableData[i]['结果'] ? this.tableData[i]['结果'] : ''
-          })
-        }
-          import('@/vendor/Export2Excel').then(excel => {
-            const dataGroup = []
-            const filterVal = ['ID', '日期', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '结果']
-            const data = newTable.map(v => filterVal.map(j => v[j]))
-            dataGroup.push(data)
-            // 这个导出可以指定多个sheet表即使你只导出一个，你也要把 headerGroup定义为二维数组！！！！！！
-            const headerGroup = [['ID', '日期', '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '结果']]
-            const sheetGroup = ['工位JPH']
-            excel.export_json_to_excel({
-              headerGroup: headerGroup,
-              dataGroup: dataGroup,
-              sheetGroup: sheetGroup,
-              filename: '工位JPH',
-              autoWidth: true,
-              bookType: 'xlsx'
-            })
-            this.isExporting = false
-          })
-      } else {
-        this.$message.warning('请查询要导出的内容')
-      }
-    },
-    calculateCellWidth(rowName) {
-      if (rowName === '结果') {
-        return '80px'
-      } else {
-        return '40px'
-      }
-    },
-    // JPH查询
-    searchChartData4() {
-      const scope = this
-      this.JPHData = new Map()
-      var param4 = []
-      var Data4 = this.CreateData('11', 'Visualization_HoursOutput_Query', param4)
-      this.ExecDatabase(Data4).then(response => {
-        if (response.data.length !== 0) {
-          const list = []
-          for (const argument of response.data) {
-            const temp = this.JPHData.get(argument.StationName)
-            if (temp) {
-              temp['HH'].push(argument['HH'])
-              temp['DataCount'].push(argument['DataCount'])
-            } else {
-              list.push(argument.StationName)
-              this.JPHData.set(argument.StationName, {
-                HH: [argument['HH']],
-                DataCount: [argument['DataCount']],
-                StationName: argument.StationName,
-                PlanCount: this.JPHData_PlanCount.get(argument.StationName)
-              })
-            }
-          }
-          scope.JPHDataList = list
-          this.$nextTick(() => {
-            this.drawDashboardTwo(this.JPHData)
-          })
-        }
-      })
-    },
-    drawDashboardTwo(JPHData) {
-      JPHData.forEach(function(value, key) {
-        let chartsDom1 = echarts.getInstanceByDom(document.getElementById(key.toString() + '_big'))
-        if (chartsDom1 == null) {
-          chartsDom1 = echarts.init(document.getElementById(key.toString() + '_big'))
-        }
-        chartsDom1.setOption({
-          title: {
-            show: true,
-            text: key,
-            left: 'center',
-            textStyle: {
-              color: '#ffaa13'
-            }
-          },
-          grid: [
-            {
-              top: '15%',
-              left: '3%',
-              right: '4%',
-              bottom: '3%',
-              containLabel: true
-            }
-          ],
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          xAxis: {
-            name: 'H',
-            type: 'category',
-            data: value['HH'],
-            axisLine: {
-              lineStyle: {
-                color: '#6c6c6c'
-              }
-            },
-            splitLine: {
-              show: false
-            },
-            axisLabel: {
-              color: '#6c6c6c'
-            }
-          },
-          yAxis: {
-            name: '台',
-            type: 'value',
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#6c6c6c'
-              }
-            },
-            splitLine: {
-              show: false
-            }
-          },
-          series: [
-            {
-              name: '下线台数',
-              data: value['DataCount'],
-              type: 'bar',
-              itemStyle: {
-                color: '#209de2'
-              },
-              label: {
-                show: true,
-                color: '#050505',
-                position: 'top'
-              },
-              markLine: {
-                symbol: 'none',
-                data: [
-                  {
-                    name: '计划产量',
-                    yAxis: value['PlanCount']
-                  }
-                ],
-                lineStyle: {
-                  color: '#ffbe00'
-                },
-                label: {
-                  show: true,
-                  color: '#020202',
-                  fontSize: '2rem',
-                  position: 'end',
-                  formatter: '{c} 台'
-                }
-              }
-            }
-          ]
-        })
-      })
-    },
-    searchChartData4_opPlanCount() {
-      var param4 = []
-      var Data4 = this.CreateData('11', 'SP_Config_BeatCountOpName_Query', param4)
-      this.ExecDatabase(Data4).then(response => {
-        if (response.data.length !== 0) {
-          for (let i = 0; i < response.data.length; i++) {
-            this.JPHData_PlanCount.set(response.data[i].StationName, response.data[i].PlanCount)
-          }
-        }
-        this.searchChartData4()
-      })
-    },
-    searchTable56() {
+      let stationCheck, orderCheck, engineTypeCheck
+      this.stationValues.length > 0 ? stationCheck = 1 : stationCheck = 0
+      this.orderNumberValue ? orderCheck = 1 : orderCheck = 0
+      this.engineTypeValue ? engineTypeCheck = 1 : engineTypeCheck = 0
+
       const param = []
-      const Data = this.CreateData('11', 'Visualization_JPH_FiveOp_Query', param)
-      this.ExecDatabase(Data).then(response => {
-        for (let i = 0; i < response.data.length; i++) {
-          this.currentBeatCount.set(response.data[i].StationName, response.data[i].NumCount)
-        }
-      })
+      param[0] = ['开始时间', this.dateTime[0]]
+      param[1] = ['结束时间', this.dateTime[1]]
+      param[2] = ['工位_check', stationCheck]
+      param[3] = ['工位列表', this.stationValues.join(',')]
+      param[4] = ['订单号_check', orderCheck]
+      param[5] = ['订单号', this.orderNumberValue]
+      param[6] = ['产品型号代码_check', engineTypeCheck]
+      param[7] = ['产品型号代码', this.engineTypeValue]
+      const Data = this.CreateData('2001', '质量数据查询_测量数据发动机在线状态_工位JPH_历史_导出', param)
+      this.exportExcel_NPOI(Data)
     }
   }
 }
 </script>
 
 <style scoped>
+.topCard {
+  margin: 5px;
+}
 
+.toolbarRow {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 0;
+  margin-bottom: 12px;
+}
+
+.chartCard {
+  width: 100%;
+  margin: 0 0 12px;
+  padding: 12px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  background: #fff;
+}
+
+.chartDom {
+  width: 100%;
+  height: 360px;
+}
 </style>