1、设备事故登记表以及三不放过原则分析报表导出及批量打印功能 2、调整首页看板及图表样式

zhaowei

19 小时以前 a892616db370b2185bc546a11c873df1137cc7e0

1、设备事故登记表以及三不放过原则分析报表导出及批量打印功能
2、调整首页看板及图表样式

 src/components/page/GlobalFooter.vue

@@ -9,7 +9,7 @@
    <!--<a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/">Vue Antd</a>-->
    <!--</div>-->
    <div class="copyright"
         :style="{background:$route.meta.title==='首页'?'#fff':''}">
         :style="{background:$route.meta.title==='首页'?'#FEFEFE':''}">
      Copyright
      <a-icon type="copyright"/>
      2024 <span>2015-2025 çµç§€æ™ºèƒ½</span>

 src/components/page/GlobalLayout.vue

@@ -70,7 +70,7 @@

      <!-- layout content -->
      <a-layout-content
        :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#fff':''}">
        :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' ,background: $route.meta.title=='首页'?'#FEFEFE':''}">
        <slot></slot>
      </a-layout-content>


 src/views/dashboard/IndexSignage.vue

@@ -213,25 +213,37 @@
            if (res.success && res.result) {
              this.techConditionData = [
                {
                  value: res.result.jszt.find(item => item.code === 'QUALIFIED').value,
                  value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'QUALIFIED').value : 0,
                  name: '合格',
                  technologyStatus: 'QUALIFIED'
                },
                {
                  value: res.result.jszt.find(item => item.code === 'PROHIBITED').value,
                  value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'PROHIBITED').value : 0,
                  name: '禁用',
                  technologyStatus: 'PROHIBITED'
                },
                {
                  value: res.result.jszt.find(item => item.code === 'RESTRICTED').value,
                  value: res.result.jszt.length > 0 ? res.result.jszt.find(item => item.code === 'RESTRICTED').value : 0,
                  name: '限用',
                  technologyStatus: 'RESTRICTED'
                }
              ]
              this.warrantyMalfunctionData = [
                { value: res.result.bxqk.find(item => item.code === 'bx').value, name: '报修', code: 'bx' },
                { value: res.result.bxqk.find(item => item.code === 'stop').value, name: '停机', code: 'stop' },
                { value: res.result.bxqk.find(item => item.code === 'run').value, name: '运行', code: 'run' }
                {
                  value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'bx').value : 0,
                  name: '报修',
                  code: 'bx'
                },
                {
                  value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'stop').value : 0,
                  name: '停机',
                  code: 'stop'
                },
                {
                  value: res.result.bxqk.length > 0 ? res.result.bxqk.find(item => item.code === 'run').value : 0,
                  name: '运行',
                  code: 'run'
                }
              ]
              this.techConditionChartRequireFinished = true
              this.warrantyMalfunctionChartRequireFinished = true
@@ -341,7 +353,7 @@
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              color: 'rgba(0,0,0,.45)',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
@@ -360,13 +372,13 @@
              color: [
                '#686869',
                '#AA6349',
                '#EAEA7C',
                '#FFFF88',
                '#5D975D'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                color: 'rgba(0,0,0,.45)',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
@@ -379,7 +391,10 @@
              labelLine: {
                show: true,
                length2: 10,
                length: 10
                length: 10,
                lineStyle: {
                  color: 'rgba(0,0,0,.45)'
                }
              },
              data: this.runningStateData
            }
@@ -400,31 +415,20 @@
      drawEfficiencyChart() {
        const colorArray = [
          {
            top: '#79CEAA',
            bottom: '#79CEAA'
            top: '#EA967B',
            bottom: '#F8E18B'
          },
          {
            top: '#F589A2',
            bottom: '#F589A2'
            top: '#62AC75',
            bottom: '#A8D07C'
          },
          {
            top: '#6FBF9D',
            bottom: '#6FBF9D'
            top: '#32ACBF',
            bottom: '#7BCAC5'
          },
          {
            top: '#66DFE2',
            bottom: '#66DFE2'
          }, {
            top: '#A7F0C1',
            bottom: '#A7F0C1'
          },
          {
            top: '#FAE893',
            bottom: '#FAE893'
          },
          {
            top: '#F7B7A0',
            bottom: '#F7B7A0'
            top: '#7196CE',
            bottom: '#8DCCEF'
          }
        ]
        const data = this.efficiencyData
@@ -629,7 +633,7 @@
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              color: 'rgba(0,0,0,.45)',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
@@ -652,7 +656,7 @@
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                color: 'rgba(0,0,0,.45)',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
@@ -665,7 +669,10 @@
              labelLine: {
                show: true,
                length2: 10,
                length: 10
                length: 10,
                lineStyle: {
                  color: 'rgba(0,0,0,.45)'
                }
              },
              data: this.techConditionData
            }
@@ -715,7 +722,7 @@
            icon: 'roundRect',
            itemGap: 15,
            textStyle: {
              color: 'inherit',
              color: 'rgba(0,0,0,.45)',
              fontSize: 14,
              padding: [0, 0, 0, 0]
            },
@@ -733,12 +740,12 @@
              color: [
                '#00CED1',
                '#B85B38',
                '#EAEA7C'
                '#FFFF88'
              ],
              label: {
                position: 'outside',
                show: true,
                color: 'inherit',
                color: 'rgba(0,0,0,.45)',
                // textBorderColor: 'inherit',
                // textBorderWidth: 1,
                fontSize: 16,
@@ -751,7 +758,10 @@
              labelLine: {
                show: true,
                length2: 10,
                length: 10
                length: 10,
                lineStyle: {
                  color: 'rgba(0,0,0,.45)'
                }
              },
              data: this.warrantyMalfunctionData
            }
@@ -773,9 +783,9 @@
        this.maintenanceConfig = {
          indexHeader: '序号',
          header: ['车间', '日期', '内容'],
          headerBGC: '#266C86',
          oddRowBGC: '#003B51',
          evenRowBGC: '#0A2732',
          headerBGC: '#46B7E3',
          oddRowBGC: '#0383AF',
          evenRowBGC: '#0395C9',
          data: this.twoMaintenanceChartData,
          index: true,
          columnWidth: [100, 300, 300, 300],
@@ -785,7 +795,6 @@

      /* ç»˜åˆ¶å•æŸ±å›¾ */
      drawBarChart() {
        const colorArray = ['#79CEAA', '#F589A2', '#6FBF9D', '#66DFE2', '#A7F0C1', '#FAE893', '#F7B7A0']
        const defaultData = []
        const dataMax = this.barChartData.length > 0 ? +this.barChartData.sort((x, y) => +y.value - +x.value)[0].value : 0
        let yAxisMax
@@ -793,6 +802,9 @@
        else yAxisMax = Math.ceil(dataMax / 5) * 5 // è®¾ç½®æŸ±å›¾èƒŒæ™¯é˜´å½±é»˜è®¤å€¼ï¼Œæ€è·¯ä¸ºæ•°æ®æœ€å¤§å€¼æœ€æŽ¥è¿‘的能被5整除的数字
        const yAxisInterval = yAxisMax / 5 // åŒæ—¶å°†åˆ»åº¦å€¼åˆ†æˆ5份
        this.barChartData.forEach(item => defaultData.push(yAxisMax))
        console.log('bar', this.barChartData)
        let barTopColor = ['#EA967B', '#62AC75', '#32ACBF', '#7196CE']
        let barBottomColor = ['#F8E18B', '#A8D07C', '#7BCAC5', '#8DCCEF']
        const option = {
          title: {
            show: true, // æ˜¯å¦æ˜¾ç¤ºæ ‡é¢˜ï¼Œé»˜è®¤ä¸ºtrue
@@ -814,149 +826,124 @@
            formatter: function(params) {
              return '<span style="font-weight:bolder;">' + params[0].name + '</span><br/>' +
                '<span style="display:inline-block; width:10px; height:10px; border-radius:100px; margin-right:5px; background:' + params[0].color + '"></span>' + ' OEE: ' + params[0].value + '%'
            },
            // backgroundColor: 'rgba(9, 24, 48, 0.5)',
            borderColor: 'rgba(75, 253, 238, 0.4)',
            textStyle: {
              // color: '#CFE3FC'
            },
            borderWidth: 1
            }
          },
          grid: {
            top: '15%',
            left: '10%'
          },
          xAxis: [{
            name: '',
            nameLocation: 'middle',
            nameGap: 40, // xè½´name与横坐标轴线的间距
            type: 'category',
            data: this.barChartData.map(item => item.productionId),
          xAxis: {
            data: this.barChartData.map(item => item.name),
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.45)'
              }
            },
            axisLabel: {
              show: true, // æ˜¯å¦æ˜¾ç¤ºåˆ»åº¦æ ‡ç­¾ï¼Œé»˜è®¤æ˜¾ç¤º
              interval: 0, // åæ ‡è½´åˆ»åº¦æ ‡ç­¾çš„显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: this.barChartData.length >= 6 ? -30 : 0, // åˆ»åº¦æ ‡ç­¾æ—‹è½¬çš„角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // åˆ»åº¦æ ‡ç­¾æ˜¯å¦æœå†…，默认朝外
              margin: 10, // åˆ»åº¦æ ‡ç­¾ä¸Žè½´çº¿ä¹‹é—´çš„距离
              formatter: value => {
                return `${this.barChartData.find(item => item.productionId === value).name}`
              },
              fontSize: 14
            },
            axisTick: {
              show: true,
              alignWithLabel: true
            }
          }],
          yAxis: [{
              rotate: 20,
              margin: 25,
              textStyle: {
                fontSize: 14,
                color: 'rgba(0,0,0,.45)',
                align: 'center'
              }
            },
            interval: 0
          },
          yAxis: {
            name: '%',
            min: 0,
            max: yAxisMax,
            interval: yAxisInterval,
            axisLabel: {
              formatter: '{value}',
              fontSize: 14
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              show: true,
              lineStyle: {
                color: 'rgba(0,0,0,.45)'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: 'rgba(0,0,0,.45)'
              }
            }
          }],
          },
          series: [
            {
              type: 'bar',
              data: this.barChartData,
              barWidth: this.barChartData.length > 5 ? '40%' : 30,
              type: 'pictorialBar',
              symbolSize: [26, 10],
              symbolOffset: [0, -5],
              z: 12,
              itemStyle: {
                color: function(params) {
                  let num = colorArray.length
                  return colorArray[params.dataIndex % num]
                  return barBottomColor[params.dataIndex % barBottomColor.length]
                }
                // color: new echarts.graphic.LinearGradient(
                //   0, 0, 0, 1, [{
                //     offset: 0,
                //     color: '#83bff6'
                //   },
                //     {
                //       offset: 0.5,
                //       color: '#188df0'
                //     },
                //     {
                //       offset: 1,
                //       color: '#188df0'
                //     }
                //   ]
                // )
              },
              zlevel: 1,
              label: {
                show: false,
                lineHeight: 10,
                formatter: params => {
                  if (+params.value === 0) return ''
                  else return params.value
                },
                show: true,
                position: 'top',
                textStyle: {
                  color: '#fff',
                  fontSize: 16
                }
              }
                fontSize: 12,
                color: 'rgba(0,0,0,.45)'
              },
              symbolPosition: 'end',
              data: this.barChartData
            },
            {
              name: '背景',
              type: 'bar',
              barWidth: this.barChartData.length > 5 ? '40%' : 30,
              barGap: '-100%',
              data: defaultData,
              type: 'pictorialBar',
              symbolSize: [26, 10],
              symbolOffset: [0, 5],
              z: 12,
              itemStyle: {
                color: 'rgba(0,0,0,.05)'
              }
                color: function(params) {
                  return barTopColor[params.dataIndex % barTopColor.length]
                }
              },
              data: this.barChartData
            },
            {
              type: 'bar',
              itemStyle: {
                color: function(params) {
                  return new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 1,
                      color: barTopColor[params.dataIndex % barTopColor.length]
                    },
                      {
                        offset: 0,
                        color: barBottomColor[params.dataIndex % barBottomColor.length]
                      }
                    ]
                  )
                },
                opacity: .9
              },
              z: 16,
              barWidth: 26,
              barGap: '-100%',
              data: this.barChartData
            }]
          // aria: {
          //   enabled: true,
          //   decal: {
          //     show: true,
          //     decals: [
          //       {
          //         color: 'rgba(0,0,0,.2)',
          //         dashArrayX: [20, 0],
          //         dashArrayY: [1, 2],
          //         symbol: 'rect',
          //         rotation: Math.PI / 4
          //       },
          //       {
          //         symbol: 'none'
          //       }
          //     ]
          //   }
          // }
        }

        option.title.text = moment().subtract(1, 'months').format('M月') + `OEE`
        this.barChart.setOption(option, true)
        this.barChart.hideLoading()

        this.barChart.on('click', params => {
          let productionId
          // ç‚¹å‡»çš„是柱体的值，否则点击的为柱体背景阴影
          if (params.seriesIndex === 0) productionId = params.data.productionId
          else productionId = params.name
          console.log('params', params)
          productionId = params.data.productionId

          this.$router.push({
            name: 'mdc-base-OEEAnalysis',
@@ -968,7 +955,7 @@
      /* ç»˜åˆ¶åŒæŸ±å›¾ */
      drawDoubleBarChart() {
        const option = {
          color: ['#4992FF', '#4DC0B1'],
          color: ['#1890FF', '#2EC35C'],
          tooltip: {
            confine: true,
            formatter: function(params) {
@@ -1077,30 +1064,32 @@
          series: [{
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: { barBorderRadius: 4 },
            name: 'OEE',
            data: this.doubleBarChartData.oeeList,
            label: {
              show: false,
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
                else return params.value
              },
              position: 'inside',
              position: 'top',
              textStyle: {
                color: '#fff',
                fontSize: 12
                color: 'rgba(0,0,0,.45)',
                fontSize: 10
              }
            }
          }, {
            type: 'bar',
            barWidth: 20,
            barGap: '0%',
            itemStyle: { barBorderRadius: 4 },
            name: 'TEEP',
            data: this.doubleBarChartData.utilizationList,
            label: {
              show: false,
              show: true,
              lineHeight: 10,
              formatter: params => {
                if (+params.value === 0) return ''
@@ -1108,8 +1097,8 @@
              },
              position: 'inside',
              textStyle: {
                color: '#fff',
                fontSize: 12
                color: 'rgba(0,0,0,.45)',
                fontSize: 10
              }
            }
          }
@@ -1124,13 +1113,13 @@
        this.problemConfig = {
          indexHeader: '序号',
          header: ['时间', '问题内容'],
          headerBGC: '#83B883',
          oddRowBGC: '#556955',
          evenRowBGC: '#556955',
          headerBGC: '#A5CCE6',
          oddRowBGC: '#6B9FCD',
          evenRowBGC: '#5A7D9A',
          data: this.workshopProblemChartData,
          index: true,
          columnWidth: [100, 200, 300],
          align: ['center']
          align: ['center', 'center', 'center']
        }
      },

@@ -1152,7 +1141,6 @@
        } else {
          this.pieChartRadius = this.normalPieChartRadius.map(item => item = (+item.slice(0, -1) * (clientWidth / this.firstEnterClientWidth)) + '%')
        }
        console.log('pieChartRadius', this.pieChartRadius)
        this.$nextTick(() => {
          if (this.runningStateChartDataRequireFinished) this.drawRunningStateChart(this.currentPageProductionId)
          if (this.techConditionChartRequireFinished) this.drawTechConditionChart()

 src/views/eam/repair/EamReportAccidentsRegisterList.vue

@@ -26,9 +26,22 @@
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleBatchPrint" type="primary" icon="monitor" :disabled="selectedRowKeys.length===0">批量预览
      </a-button>
    </div>

    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
      <i class="anticon anticon-info-circle ant-alert-icon"></i> å·²é€‰æ‹© <a style="font-weight: 600">{{
      selectedRowKeys.length }}</a>项
      <a style="margin-left: 24px" @click="onClearSelected">清空</a>
    </div>

    <!-- table区域-begin -->
    <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
             :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" @change="handleTableChange">
             :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}" @change="handleTableChange"
             :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">

      <!--是否有设备操作证-->
      <template slot="operationCertificate" slot-scope="text">
@@ -89,6 +102,9 @@
    <!--审批窗口-->
    <report-accidents-register-approval-modal ref="reportAccidentsRegisterApprovalModal"
                                              :selectShenpiData="selectedRowData"/>

    <!--批量打印窗口-->
    <eam-accidents-register-batch-print-modal ref="batchPrintModal"/>
  </a-card>
</template>

@@ -99,11 +115,13 @@
  import { getAction } from '@/api/manage'
  import ReportAccidentsRegisterApprovalModal
    from '../../flowable/workflow/repairOrder/ReportAccidentsRegisterApprovalModal'
  import EamAccidentsRegisterBatchPrintModal from './modules/EamAccidentsRegisterBatchPrintModal'

  export default {
    name: 'EamReportAccidentsRegisterList',
    mixins: [JeecgListMixin],
    components: {
      EamAccidentsRegisterBatchPrintModal,
      ReportAccidentsRegisterApprovalModal,
      LxSearchEquipmentSelect,
      EamReportAccidentsRegisterModal
@@ -202,19 +220,19 @@
            title: '事故现象',
            align: 'center',
            dataIndex: 'accidentPhenomenon',
            scopedSlots: {customRender: 'accidentPhenomenon'},
            scopedSlots: { customRender: 'accidentPhenomenon' }
          },
          {
            title: '采取措施',
            align: 'center',
            dataIndex: 'measure',
            scopedSlots: {customRender: 'measure'},
            scopedSlots: { customRender: 'measure' }
          },
          {
            title: '造成结果',
            align: 'center',
            dataIndex: 'causingResults',
            scopedSlots: {customRender: 'causingResults'},
            scopedSlots: { customRender: 'causingResults' }
          },
          {
            title: '操作工',
@@ -409,6 +427,11 @@
          })
      },

      // æ‰¹é‡æ‰“印
      handleBatchPrint() {
        this.$refs.batchPrintModal.handlePreview(this.selectedRowKeys.join())
      },

      /**
       * ç‚¹å‡»è¯¦æƒ…时触发时触发
       * @param record

 src/views/eam/repair/EamReportThreeNoSpareList.vue

@@ -12,25 +12,26 @@
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="状态">
              <j-dict-select-tag dict-code="report_three_no_spare_submit_status"  placeholder="请选择状态" v-model="queryParam.submitStatus"/>
              <j-dict-select-tag dict-code="report_three_no_spare_submit_status" placeholder="请选择状态"
                                 v-model="queryParam.submitStatus"/>
            </a-form-item>
          </a-col>
        <template v-if="toggleSearchStatus">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="原因分析">
              <a-input placeholder="请输入原因分析" v-model="queryParam.causeAnalysis"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="培训形式">
              <a-input placeholder="请输入培训形式" v-model="queryParam.trainingFormat"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="培训内容">
              <a-input placeholder="请输入培训内容" v-model="queryParam.trainingContent"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="原因分析">
                <a-input placeholder="请输入原因分析" v-model="queryParam.causeAnalysis"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="培训形式">
                <a-input placeholder="请输入培训形式" v-model="queryParam.trainingFormat"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="培训内容">
                <a-input placeholder="请输入培训内容" v-model="queryParam.trainingContent"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
@@ -49,27 +50,23 @@

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button @click="handleBatchPrint" type="primary" icon="monitor" :disabled="selectedRowKeys.length===0">批量预览
      </a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{x:'max-content'}"
        @change="handleTableChange">
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
               :pagination="ipagination" :loading="loading" :scroll="{x:'max-content'}"
               :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
               @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <template>
             <a v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" @click="handleFillIn(record)">填报</a>
             <a-divider  v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" type="vertical"/>
             <a-popconfirm  v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" title="确定提交吗?" @confirm="() => handleSubmit(record.id)">
             <a v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'"
                @click="handleFillIn(record)">填报</a>
             <a-divider v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" type="vertical"/>
             <a-popconfirm v-if="record.submitStatus=='PENDING_SUBMIT'||record.submitStatus=='REJECTED'" title="确定提交吗?"
                           @confirm="() => handleSubmit(record.id)">
               <a>提交</a>
             </a-popconfirm>
          </template>
@@ -112,12 +109,13 @@
    <!-- table区域-end -->

    <!-- è¡¨å•åŒºåŸŸ -->
    <eamReportThreeNoSpare-modal ref="modalForm" @ok="modalFormOk"></eamReportThreeNoSpare-modal>
    <eamReportThreeNoSpare-modal ref="modalForm" @ok="modalFormOk"/>

    <!--审批窗口-->
    <report-threeNo-spare-approval-modal ref="reportThreeNoSpareApprovalModal"
                                     :selectShenpiData="selectedRowData"/>
    <report-threeNo-spare-approval-modal ref="reportThreeNoSpareApprovalModal" :selectShenpiData="selectedRowData"/>

    <!--批量打印弹窗-->
    <eam-three-no-spare-analysis-batch-print-modal ref="batchPrintModal"/>
  </a-card>
</template>

@@ -125,15 +123,17 @@
  import '@/assets/less/TableExpand.less'
  import EamReportThreeNoSpareModal from './modules/EamReportThreeNoSpareModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {getAction} from "@api/manage";
  import LxSearchEquipmentSelect from "@views/eam/equipment/modules/LxSearchEquipmentSelect.vue";
  import { getAction } from '@api/manage'
  import LxSearchEquipmentSelect from '@views/eam/equipment/modules/LxSearchEquipmentSelect.vue'
  import ReportThreeNoSpareApprovalModal
    from '../../flowable/workflow/repairOrder/ReportThreeNoSpareApprovalModal'
  import EamThreeNoSpareAnalysisBatchPrintModal from './modules/EamThreeNoSpareAnalysisBatchPrintModal'

  export default {
    name: "EamReportThreeNoSpareList",
    mixins:[JeecgListMixin],
    name: 'EamReportThreeNoSpareList',
    mixins: [JeecgListMixin],
    components: {
      EamThreeNoSpareAnalysisBatchPrintModal,
      ReportThreeNoSpareApprovalModal,
      LxSearchEquipmentSelect,
      EamReportThreeNoSpareModal
@@ -147,7 +147,7 @@
        type: Object
      }
    },
    data () {
    data() {
      return {
        description: '“三不放过的原则”分析表管理页面',
        disableMixinCreated: true,
@@ -187,96 +187,97 @@
            title: '状态',
            align: 'center',
            dataIndex: 'submitStatus_dictText',
            fixed: 'left'
          },
          {
            title: '事故现象',
            align: 'center',
            dataIndex: 'accidentPhenomenon',
            scopedSlots: {customRender: 'accidentPhenomenon'},
            scopedSlots: { customRender: 'accidentPhenomenon' }
          },
          {
            title: '采取措施',
            align: 'center',
            dataIndex: 'measure',
            scopedSlots: {customRender: 'measure'},
            scopedSlots: { customRender: 'measure' }
          },
          {
            title: '造成结果',
            align: 'center',
            dataIndex: 'causingResults',
            scopedSlots: {customRender: 'causingResults'},
            scopedSlots: { customRender: 'causingResults' }
          },
              {
          {
            title: '原因分析',
            align:"center",
            align: 'center',
            dataIndex: 'causeAnalysis',
            scopedSlots: {customRender: 'causeAnalysis'},
            scopedSlots: { customRender: 'causeAnalysis' }
          },
          {
            title: '预防措施',
            align: 'center',
            dataIndex: 'preventionMeasures',
            scopedSlots: {customRender: 'preventionMeasures'},
            scopedSlots: { customRender: 'preventionMeasures' }
          },
          {
            title: '培训教育',
            align:"center",
            dataIndex: 'isTrainingEducation_dictText',
            align: 'center',
            dataIndex: 'isTrainingEducation_dictText'
          },
          {
            title: '培训形式',
            align:"center",
            align: 'center',
            dataIndex: 'trainingFormat',
            scopedSlots: {customRender: 'trainingFormat'},
            scopedSlots: { customRender: 'trainingFormat' }
          },
          {
            title: '培训内容',
            align:"center",
            align: 'center',
            dataIndex: 'trainingContent',
            scopedSlots: {customRender: 'trainingContent'},
            scopedSlots: { customRender: 'trainingContent' }
          },
              {
          {
            title: '培训人',
            align:"center",
            align: 'center',
            dataIndex: 'trainingUser_dictText'
          },
              {
          {
            title: '培训时间',
            align:"center",
            align: 'center',
            dataIndex: 'trainingUserTime'
          },
              {
          {
            title: '单位领导',
            align:"center",
            align: 'center',
            dataIndex: 'unitLeader_dictText'
          },
              {
          {
            title: '领导意见',
            align:"center",
            align: 'center',
            dataIndex: 'leaderOpinion'
          },
              {
          {
            title: '领导确认时间',
            align:"center",
            align: 'center',
            dataIndex: 'leaderConfirmTime'
          },
          {
            title: 'HF编码',
            align: 'center',
            dataIndex: 'hfCode'
          },
          }
        ],
        selectedRowData: {},
        url: {
          list: "/eam/eamReportThreeNoSpare/list",
          delete: "/eam/eamReportThreeNoSpare/delete",
          deleteBatch: "/eam/eamReportThreeNoSpare/deleteBatch",
          exportXlsUrl: "eam/eamReportThreeNoSpare/exportXls",
          importExcelUrl: "eam/eamReportThreeNoSpare/importExcel",
          submit:"eam/eamReportThreeNoSpare/submit"
        },
    }
  },
          list: '/eam/eamReportThreeNoSpare/list',
          delete: '/eam/eamReportThreeNoSpare/delete',
          deleteBatch: '/eam/eamReportThreeNoSpare/deleteBatch',
          exportXlsUrl: 'eam/eamReportThreeNoSpare/exportXls',
          importExcelUrl: 'eam/eamReportThreeNoSpare/importExcel',
          submit: 'eam/eamReportThreeNoSpare/submit'
        }
      }
    },
    created() {
      if (!this.isDisplayOperation) this.queryParam = Object.assign({}, this.propsQueryParam)
      else {
@@ -293,6 +294,11 @@
      this.loadData(1)
    },
    methods: {
      // æ‰¹é‡æ‰“印
      handleBatchPrint() {
        this.$refs.batchPrintModal.handlePreview(this.selectedRowKeys.join())
      },

      /**
       * ç‚¹å‡»å¡«æŠ¥æ—¶è§¦å‘
       * @param record
@@ -330,7 +336,7 @@
       * @param record è¡¨æ ¼è¡Œä¿¡æ¯
       */
      handleDetail(record) {
        this.selectRepairOrderData = Object.assign({}, record)
        this.selectedRowData = Object.assign({}, record)
        this.$refs.reportThreeNoSpareApprovalModal.visible = true
        this.$refs.reportThreeNoSpareApprovalModal.title = '详情'
        this.$refs.reportThreeNoSpareApprovalModal.disableSubmit = true

 src/views/eam/repair/modules/EamAccidentsRegisterBatchPrintModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,273 @@
<template>
  <j-modal title="预览（仅可预览已完成工单）" :width="948" :visible="visible" switchFullscreen centered
           :mask-closable="false" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="spinning" style="height: 100%">
      <div id="dataTable">
        <div v-for="dataItem in dataSource" class="table-container">
          <div style="page-break-before:always"></div>

          <table class="import-table" :id="dataItem.equipmentCode">
            <thead>
            <tr>
              <td colspan="6" style="border: none">
                <div style="text-align: right">{{dataItem.hfCode}}</div>
              </td>
            </tr>
            </thead>

            <tbody>
            <tr style="height: 48px;">
              <th colspan="6" style="border: none;font-size: 20px">设备事故登记表</th>
            </tr>

            <tr>
              <td>生产单位</td>
              <td>{{dataItem.factoryName}}</td>
              <td>事故发生时间</td>
              <td>{{dataItem.faultStartTime}}</td>
              <td>操作工</td>
              <td>{{dataItem.confirmer_dictText}}</td>
            </tr>

            <tr>
              <td>统一编号</td>
              <td>{{dataItem.equipmentCode}}</td>
              <td>设备名称</td>
              <td>{{dataItem.equipmentName}}</td>
              <td>设备型号</td>
              <td>{{dataItem.equipmentModel}}</td>
            </tr>

            <tr>
              <td>废品件号</td>
              <td>{{dataItem.scrapPartNumber}}</td>
              <td>废品件数</td>
              <td>{{dataItem.scrapPartQuantity}}</td>
              <td>废品价值</td>
              <td>{{dataItem.scrapPartValue}}</td>
            </tr>

            <tr>
              <td colspan="6" style="padding: 5px">
                <div style="text-align: left">操作者填写事故发生经过：</div>
                <div style="text-align: left">1.是否有设备操作证：{{+dataItem.operationCertificate===1?'有（√）无（）':'有（）无（√）'}}
                </div>
                <div style="text-align: left">2.事故发生后设备是否断电重启：{{+dataItem.powerOffRestart===1?'是（√）否（）':'是（）否（√）'}}
                </div>
                <div style="text-align: left">3.加工零件是否为批次首件：{{+dataItem.batchFirstPiece===1?'是（√）否（）':'是（）否（√）'}}</div>
                <div style="text-align: left">
                  4.加工过程中的变动因素（填写是或否）：刀具更换（{{setValueYesOrNot(dataItem,'tool_replacement')}}）工艺更改（{{setValueYesOrNot(dataItem,'process_change')}}）加工程序更改（{{setValueYesOrNot(dataItem,'processing_program_update')}}）刀具补偿值更改（{{setValueYesOrNot(dataItem,'tool_compensation_adjustment')}}）零点偏置值更改（{{setValueYesOrNot(dataItem,'zero_point_offset_value_change')}}）参数修改（{{setValueYesOrNot(dataItem,'parameter_modification')}}）其他因素（{{setValueYesOrNot(dataItem,'other_factors')}}）
                </div>
                <br/>
                <div style="text-align: left">具体更改内容：</div>
                <div style="text-align: left">5.发生事故时所执行的程序：{{dataItem.executeNc}}</div>
                <div style="text-align: left">6.设备发生事故时的现象：</div>
                <div style="text-align: left" v-html="dataItem.accidentPhenomenon.replace(/\n/g,'<br/>')"></div>
                <br/>
                <div style="text-align: left">7.操作工采取了哪些措施（按顺序填写）：</div>
                <div style="text-align: left" v-html="dataItem.measure.replace(/\n/g,'<br/>')"></div>
                <div style="text-align: left">8.事故所造成的结果：</div>
                <div style="text-align: left" v-html="dataItem.causingResults.replace(/\n/g,'<br/>')"></div>
                <br/>
                <div style="text-align: right">操作工：{{dataItem.confirmer_dictText}}</div>
                <div style="text-align: right">{{dataItem.confirmTime.split('-')[0]}}&nbsp;å¹´&nbsp;{{dataItem.confirmTime.split('-')[1]}}&nbsp;月&nbsp;{{dataItem.confirmTime.split('-')[2]}}&nbsp;日</div>
              </td>
            </tr>

            <tr style="height: 35px;">
              <td>区长</td>
              <td colspan="2">{{dataItem.district_dictText}}</td>
              <td>中心主任</td>
              <td colspan="2">{{dataItem.centerDirector_dictText}}</td>
            </tr>

            <tr>
              <td colspan="6" style="padding: 5px">
                <div style="text-align: left">维修人员进行事故分析：</div>
                <div style="text-align: left">
                  1.开始检查的时间：{{dataItem.reportStartTime.split('-')[0]}}å¹´{{dataItem.reportStartTime.split('-')[1]}}月{{dataItem.reportStartTime.split('-')[2]}}日
                </div>
                <div style="text-align: left">2.发生事故后设备的状态：{{dataItem.equipmentStatus}}</div>
                <div style="text-align: left">3.维修人员对事故原因的分析：</div>
                <div style="text-align: left" v-html="dataItem.causeAnalysis.replace(/\n/g,'<br/>')"></div>
                <br/>
                <div style="text-align: left">4.检查的结果：{{dataItem.inspectionResults}}</div>
                <div style="text-align: left">5.事故原因分析过程中所采取的相关行为：</div>
                <div style="text-align: left">{{dataItem.takeSteps}}</div>
                <br/>
                <div style="text-align: left">
                  6.建议采取的措施及时间节点：{{dataItem.suggestionTakeStepsTime.split('-')[0]}}å¹´{{dataItem.suggestionTakeStepsTime.split('-')[1]}}月{{dataItem.suggestionTakeStepsTime.split('-')[2]}}日
                </div>
                <div style="text-align: left" v-html="dataItem.suggestionTakeSteps.replace(/\n/g,'<br/>')"></div>
                <br/>
                <div style="text-align: right">维修人员：{{dataItem.repairConfirm_dictText}}</div>
                <div style="text-align: right">{{dataItem.repairConfirmTime.split('-')[0]}}&nbsp;å¹´&nbsp;{{dataItem.repairConfirmTime.split('-')[1]}}&nbsp;月&nbsp;{{dataItem.repairConfirmTime.split('-')[2]}}&nbsp;日</div>
              </td>
            </tr>

            <tr style="height: 35px;">
              <td>维修负责人(组长)</td>
              <td colspan="2">{{dataItem.repairGroupLeader_dictText}}</td>
              <td>维修负责人(区长)</td>
              <td colspan="2">{{dataItem.repairDistrict_dictText}}</td>
            </tr>

            <tr>
              <td colspan="6" style="padding: 5px">
                <div style="text-align: left">设备技术专家意见：</div>
                <div style="text-align: left">1.事故发生原因分析的核对：{{+dataItem.checkAgree===1?'同意（√）不同意（）':'同意（）不同意（√）'}}</div>
                <div style="text-align: left">不同意的原因及分析：{{!dataItem.disagreeReason?'无':dataItem.disagreeReason}}</div>
                <br/>
                <div style="text-align: left">2.整改措施：{{dataItem.rectificationMeasures}}</div>
                <br/>
                <div style="text-align: left">3.事故结论：{{dataItem.accidentConclusion}}</div>
                <br/>
                <div style="text-align: right">技术负责人：{{dataItem.technicalDirector_dictText}}</div>
                <div style="text-align: right">{{dataItem.technicalDirectorTime.split('-')[0]}}&nbsp;å¹´&nbsp;{{dataItem.technicalDirectorTime.split('-')[1]}}&nbsp;月&nbsp;{{dataItem.technicalDirectorTime.split('-')[2]}}&nbsp;日</div>
              </td>
            </tr>

            <tr style="height: 35px;">
              <td>技术主管室级领导</td>
              <td colspan="2">{{dataItem.technicalDirectorLeader_dictText}}</td>
              <td>主管部级领导</td>
              <td colspan="2">{{dataItem.technicalDirectorPart_dictText}}</td>
            </tr>

            <tr>
              <td colspan="6" style="border: none">
                å¡«å†™è¯´æ˜Žï¼šå¦‚设备事故未造成产品质量问题，则废品件号、废品件数、废品价值栏填写“/”。
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleExportToExcel">导出</a-button>
      <a-button type="primary" v-print="'#dataTable'">打印</a-button>
    </template>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'

  export default {
    name: 'EamAccidentsRegisterBatchPrintModal',
    data() {
      return {
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/eamReportAccidentsRegister/batchExport'
        }
      }
    },
    methods: {
      /**
       * æ‰¹é‡é¢„览
       * @param ids String ä¸»é¡µé¢åˆ—表勾选ids
       */
      handlePreview(ids) {
        this.visible = true
        this.spinning = true
        this.dataSource = []
        const that = this
        getAction(this.url.list, { ids })
          .then(res => {
            if (res.success) that.dataSource = res.result
          })
          .finally(() => {
            that.spinning = false
          })
      },

      // å¯¼å‡ºåˆ°Excel
      handleExportToExcel() {
        document.querySelectorAll('table.import-table').forEach(element => {
          console.log('element', element.id)
          $(element).table2excel({
            exclude: '.noExl',
            name: 'Excel Document Name',
            filename: '设备事故登记表-' + element.id,
            exclude_img: true,
            fileext: '.xls',
            exclude_links: true,
            exclude_inputs: false
          })
        })
      },

      /**
       * è®¾ç½®å˜åŠ¨å› ç´ å€¼
       * @param dataItem å¯¹åº”对象
       * @param value å­—典值
       * @returns {string} æ˜¯/否
       */
      setValueYesOrNot(dataItem, value) {
        return dataItem.variableFactorsValue !== value ? '否' : '是'
      },

      handleCancel() {
        this.close()
      },

      close() {
        this.$emit('close')
        this.visible = false
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }
  }
</script>

<style scoped lang="less">
  /deep/ .ant-modal {
    height: 90%;
    overflow: hidden;

    .ant-modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .ant-modal-body {
        flex: 1;
        overflow: auto;
      }
    }
  }

  .table-container:not(:last-child) {
    margin-bottom: 20px;
  }

  table {
    width: 100%;
    text-align: center;
    table-layout: fixed;

    td, th {
      border: 1px solid #000;
    }

    td.vertical-display {
      writing-mode: vertical-lr;
      letter-spacing: 5px;
      padding: 5px 0;
    }
  }
</style>

 src/views/eam/repair/modules/EamThreeNoSpareAnalysisBatchPrintModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<template>
  <j-modal title="预览（仅可预览已完成工单）" :width="948" :visible="visible" switchFullscreen centered
           :mask-closable="false" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="spinning" style="height: 100%">
      <div id="dataTable">

        <div v-for="dataItem in dataSource" class="table-container">
          <div style="page-break-before:always"></div>

          <table class="import-table">
            <thead>
            <tr>
              <td colspan="10" style="border: none;">
                <div style="text-align: right">{{dataItem.hfCode}}</div>
              </td>
            </tr>
            </thead>

            <tbody>
            <tr style="height: 48px;">
              <th colspan="10" style="border: none;font-size: 20px">“三不放过的原则”分析表</th>
            </tr>

            <tr>
              <th colspan="10" style="border: none;font-size: 20px;">
                <div style="text-align: left">“三不放过的原则”分析：</div>
                <div style="text-align: left">1、事故原因分析不清不放过。</div>
                <div style="text-align: left">2、责任者和群众未受到教育不放过。</div>
                <div style="text-align: left">3、没有防范措施不放过。</div>
              </th>
            </tr>

            <tr style="height: 35px">
              <td colspan="10">
                <div style="text-align: left">事故原因分析：{{dataItem.causeAnalysis}}</div>
              </td>
            </tr>

            <tr>
              <td colspan="10" style="padding: 5px">
                <div style="text-align: left">
                  æ˜¯å¦å¯¹æ“ä½œè€…及相关责任人进行培训教育：{{+dataItem.isTrainingEducation===1?'是（√）否（）':'是（）否（√）'}}
                </div>
                <div style="text-align: left">培训形式：{{dataItem.trainingFormat}}</div>
                <div style="text-align: left">培训内容包括：</div>
                <div style="text-align: left" v-html="dataItem.trainingContent.replace(/\n/g,'<br/>')"></div>
                <template v-for="item in 5-dataItem.trainingContent.split('\n').length"><br/></template>
                <div style="text-align: left">接受培训人员签字：{{dataItem.trainingUser_dictText}}</div>
              </td>
            </tr>

            <tr>
              <td colspan="10" style="padding: 5px">
                <div style="text-align: left">目前已实施（）预计实施（）的预防措施</div>
                <div style="text-align: left" v-html="dataItem.preventionMeasures.replace(/\n/g,'<br/>')"></div>
                <template v-for="item in 5-dataItem.preventionMeasures.split('\n').length"><br/></template>
              </td>
            </tr>

            <tr>
              <td colspan="5" style="border: none">
                <div style="text-align: left">填写人：{{dataItem.createBy_dictText}}</div>
              </td>
              <td colspan="5" style="border: none">
                <div style="text-align: right">单位领导：{{dataItem.unitLeader_dictText}}</div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </a-spin>

    <template slot="footer">
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleExportToExcel">导出</a-button>
      <a-button type="primary" v-print="'#dataTable'">打印</a-button>
    </template>
  </j-modal>
</template>

<script>
  import { getAction } from '@/api/manage'
  import $ from 'jquery'
  import '@/components/table2excel/table2excel'

  export default {
    name: 'EamThreeNoSpareAnalysisBatchPrintModal',
    data() {
      return {
        visible: false,
        spinning: false,
        dataSource: [],
        url: {
          list: '/eam/eamReportThreeNoSpare/batchExport'
        }
      }
    },
    methods: {
      /**
       * æ‰¹é‡é¢„览
       * @param ids String ä¸»é¡µé¢åˆ—表勾选ids
       */
      handlePreview(ids) {
        this.visible = true
        this.spinning = true
        this.dataSource = []
        const that = this
        getAction(this.url.list, { ids })
          .then(res => {
            if (res.success) that.dataSource = res.result
          })
          .finally(() => {
            that.spinning = false
          })
      },

      // å¯¼å‡ºåˆ°Excel
      handleExportToExcel() {
        document.querySelectorAll('table.import-table').forEach(item => {
          $(item).table2excel({
            exclude: '.noExl',
            name: 'Excel Document Name',
            filename: '“三不放过的原则”分析表-',
            exclude_img: true,
            fileext: '.xls',
            exclude_links: true,
            exclude_inputs: false
          })
        })

      },

      handleCancel() {
        this.close()
      },

      close() {
        this.$emit('close')
        this.visible = false
        if (this.$refs.form) this.$refs.form.clearValidate()
      }
    }
  }
</script>

<style scoped lang="less">
  /deep/ .ant-modal {
    height: 90%;
    overflow: hidden;

    .ant-modal-content {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .ant-modal-body {
        flex: 1;
        overflow: auto;
      }
    }
  }

  .table-container:not(:last-child) {
    margin-bottom: 20px;
  }

  table {
    width: 100%;
    text-align: center;
    table-layout: fixed;

    td, th {
      border: 1px solid #000;
    }

    td.vertical-display {
      transform: rotate(360deg);
      writing-mode: vertical-lr;
      letter-spacing: 5px;
      padding: 10px 0;
    }
  }
</style>