优化

src/api/report/application-form.js

@@ -0,0 +1,35 @@
+import { axios } from '@/utils/request'
+import { stringify } from 'qs'
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getMonthReportBig24 (parameter) {
+  return axios({
+    url: '/report/repair?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * export file
+ * parameter: { }
+ * @param parameter :
+  * @returns {*}
+ */
+export function exportMonthReportBig24 (parameter) {
+  return axios({
+    url: '/report/repair/export?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
+}

src/api/report/check-job.js

@@ -0,0 +1,35 @@
+import { axios } from '@/utils/request'
+import { stringify } from 'qs'
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getMonthReport(parameter) {
+  return axios({
+    url: '/report/check/jobs?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * export file
+ * parameter: { }
+ * @param parameter :
+  * @returns {*}
+ */
+export function exportMonthReport (parameter) {
+  return axios({
+    url: '/report/check/jobs?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
+}

src/router/generator-platform-routers.js

@@ -320,7 +320,8 @@ const constantRouterComponents = {
   'SpareBackFormDZ': () => import('@/views/dz/SpareBackFormDZ'), // 退库登记单
 
   // 报表
-  'CheckJobReport': () => import('@/views/dashboard/CheckJobReport')// 保养任务完成率报表
+  'CheckJobReport': () => import('@/views/dashboard/CheckJobReport'), // 保养任务完成率报表
+  'RepairReport': () => import('@/views/dashboard/RepairReport')// >24小时停机次数按月统计
 }
 
 // 前端未找到页面路由（固定不用改）

src/views/dashboard/CheckJobReport.vue

@@ -1,136 +1,222 @@
 <template>
   <div class="page-header-index-wide">
-    <a-row :gutter="24">
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月任务总数" total="￥126,560">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o" />
-          </a-tooltip>
-          <div>
-          </div>
-        </chart-card>
-      </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月完成数" :total="8846 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o" />
-          </a-tooltip>
-        </chart-card>
-      </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月未完成数" :total="6560 | NumberFormat">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o" />
-          </a-tooltip>
-        </chart-card>
-      </a-col>
-      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
-        <chart-card :loading="loading" title="本月完成率" total="78%">
-          <a-tooltip title="指标说明" slot="action">
-            <a-icon type="info-circle-o" />
-          </a-tooltip>
-        </chart-card>
-      </a-col>
-    </a-row>
-
-    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
+    <a-card title="保养任务月统计报表" :loading="loading" v-show="visible" :bordered="false" :body-style="{padding: '0'}">
       <div class="salesCard">
         <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
           <div class="extra-wrapper" slot="tabBarExtraContent">
-            <div class="extra-item">
-              <a>9月</a>
-            </div>
-            <a-range-picker :style="{width: '256px'}" />
+            <a-button type="primary" icon="printer" @click="handlePrint()">打印</a-button>
+            <a-button style="margin-left: 8px" type="primary" @click="doExport()">导出</a-button>
+            <a-select style="margin-left: 8px" @change="changeYear" v-model="queryParam.year" placeholder="请选择">
+              <a-select-option
+                v-for="item in years"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">{{ item.label }}
+              </a-select-option>
+            </a-select>
           </div>
-          <a-tab-pane loading="true" tab="月统计" key="1">
+          <a-tab-pane loading="true" tab="图形统计" key="1">
+            <a-row>
+              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                <div style="padding: 10px">
+                  <div id="container"></div>
+                </div>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane loading="true" tab="表格统计" key="2">
             <a-row>
               <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
-                <g2-chart></g2-chart>
+                <div style="padding: 10px">
+                  <a-table
+                    bordered
+                    :data-source="chartsData"
+                    :columns="columns"
+                    tableLayout="auto"
+                    :scroll="{x: 1, y: BaseTool.Constant.scrollY }"
+                    rowKey="month">
+                  </a-table>
+                </div>
               </a-col>
             </a-row>
           </a-tab-pane>
         </a-tabs>
       </div>
     </a-card>
+    <print-in-check-job-report ref="basePrintModal" @ok="handleOk"/>
   </div>
 </template>
 
 <script>
-import moment from 'moment'
-import { ChartCard, G2Chart } from '@/components'
+import { getMonthReport, exportMonthReport } from '@/api/report/check-job'
+import { Chart } from '@antv/g2'
+import PrintInCheckJobReport from '@/views/dashboard/modules/PrintInCheckJobReport'
 
 export default {
   name: 'Analysis',
   components: {
-    ChartCard,
-    G2Chart
+    PrintInCheckJobReport,
+    Chart
   },
   data () {
     return {
-      loading: true,
-      serverData: []
+      loading: false,
+      serverData: [],
+      queryParam: {
+        year: 2021
+      },
+      years: [],
+      visible: true,
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      // 表头
+      columns: [
+        {
+          title: '月份',
+          width: 180,
+          dataIndex: 'month'
+        },
+        {
+          title: '数量',
+          width: 120,
+          dataIndex: 'totalNum'
+        },
+        {
+          title: '完成数量',
+          width: 120,
+          dataIndex: 'totalFinishNum'
+        },
+        {
+          title: '未完成数量',
+          width: 120,
+          dataIndex: 'totalWaitNum'
+        },
+        {
+          title: '完成率',
+          width: 120,
+          dataIndex: 'finishRate'
+        }
+      ]
     }
   },
   created () {
-    setTimeout(() => {
-      this.loading = !this.loading
-    }, 1000)
+    this.initSelectYear()
+  },
+  mounted () {
+    this.changeYear(this.queryParam.year)
   },
   methods: {
-    getData () {
-      this.serverData =
-        [{ 'mzkId': 112, 'strftime': '2017-01-11', 'value': 9275501 }, // 测试数据，根据自己需求自己设置数据
-          { 'mzkId': 112, 'strftime': '2017-01-12', 'value': 9281904 },
-          { 'mzkId': 112, 'strftime': '2017-01-13', 'value': 9290777 },
-          { 'mzkId': 112, 'strftime': '2017-01-14', 'value': 9297913 },
-          { 'mzkId': 112, 'strftime': '2017-01-15', 'value': 9306918 },
-          { 'mzkId': 112, 'strftime': '2017-01-16', 'value': 9315641 }]
+    initSelectYear () {
+      var myDate = new Date()
+      this.queryParam.year = myDate.getFullYear()// 获取当前年
+      this.years = []
+      for (let i = 0; i < 5; i++) {
+        this.years.push({ value: (this.queryParam.year - i), label: (this.queryParam.year - i) + '年' })
+      }
+    },
+    changeYear (value) {
+      this.queryParam.year = value
+      getMonthReport(this.queryParam)
+        .then(res => {
+          this.chartsData = res.data
+
+          // 需要将数据分组：总数，完成数
+          const groupData = []
+          this.chartsData.forEach(function (data) {
+            groupData.push({ name: '总数', month: data.month, num: data.totalNum })
+            groupData.push({ name: '完成数', month: data.month, num: data.totalFinishNum })
+          })
+          this.getCharts('container', groupData)// 调用统计图
+        })
+    },
+    getCharts (id, data) {
+      this.chart && this.chart.destroy()// 防止点击搜索按钮新增一个
+      this.chart = new Chart({
+        container: 'container',
+        autoFit: true,
+        height: 400
+      })
+      this.chart.data(data)
+      this.chart.scale('num', {
+        nice: true
+      })
+      this.chart.tooltip({
+        showMarkers: false,
+        shared: true
+      })
+      this.chart.interval().position('month*num').color('name').adjust([
+        {
+          type: 'dodge',
+          marginRatio: 0
+        }
+      ])
+      this.chart.interaction('active-region')
+      this.chart.legend({
+        position: 'bottom'
+      })
+      this.chart.render()
+    },
+    doExport () {
+      const parameter = {
+        ...this.queryParam
+      }
+      exportMonthReport(parameter).then(file => {
+        this.BaseTool.UPLOAD.downLoadExportExcel(file)
+      })
+    },
+    handlePrint (record) {
+      const modal = this.$refs.basePrintModal
+      this.visible = false
+      modal.base({ year: this.queryParam.year, data: this.chartsData })
+    },
+    handleOk () {
+      this.visible = true
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
-  .extra-wrapper {
-    line-height: 55px;
-    padding-right: 24px;
+.extra-wrapper {
+  line-height: 55px;
+  padding-right: 24px;
 
-    .extra-item {
-      display: inline-block;
-      margin-right: 24px;
+  .extra-item {
+    display: inline-block;
+    margin-right: 24px;
 
-      a {
-        margin-left: 24px;
-      }
+    a {
+      margin-left: 24px;
     }
   }
+}
 
-  .antd-pro-pages-dashboard-analysis-twoColLayout {
-    position: relative;
-    display: flex;
-    display: block;
-    flex-flow: row wrap;
-  }
+.antd-pro-pages-dashboard-analysis-twoColLayout {
+  position: relative;
+  display: flex;
+  display: block;
+  flex-flow: row wrap;
+}
 
-  .antd-pro-pages-dashboard-analysis-salesCard {
-    height: calc(100% - 24px);
-    /deep/ .ant-card-head {
-      position: relative;
-    }
+.antd-pro-pages-dashboard-analysis-salesCard {
+  height: calc(100% - 24px);
+  /deep/ .ant-card-head {
+    position: relative;
   }
+}
 
-  .dashboard-analysis-iconGroup {
-    i {
-      margin-left: 16px;
-      color: rgba(0,0,0,.45);
-      cursor: pointer;
-      transition: color .32s;
-      color: black;
-    }
-  }
-  .analysis-salesTypeRadio {
-    position: absolute;
-    right: 54px;
-    bottom: 12px;
+.dashboard-analysis-iconGroup {
+  i {
+    margin-left: 16px;
+    color: rgba(0,0,0,.45);
+    cursor: pointer;
+    transition: color .32s;
+    color: black;
   }
+}
+.analysis-salesTypeRadio {
+  position: absolute;
+  right: 54px;
+  bottom: 12px;
+}
 </style>

src/views/dashboard/RepairReport.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="page-header-index-wide">
+    <a-card title=">24小时停机次数按月统计" :loading="loading" v-show="visible" :bordered="false" :body-style="{padding: '0'}">
+      <div class="salesCard">
+        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
+          <div class="extra-wrapper" slot="tabBarExtraContent">
+            <a-button type="primary" icon="printer" @click="handlePrint()">打印</a-button>
+            <a-button style="margin-left: 8px" type="primary" @click="doExport()">导出</a-button>
+            <a-select style="margin-left: 8px" @change="changeYear" v-model="queryParam.year" placeholder="请选择">
+              <a-select-option
+                v-for="item in years"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">{{ item.label }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <a-tab-pane loading="true" tab="图形统计" key="1">
+            <a-row>
+              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                <div style="padding: 10px">
+                  <div id="container"></div>
+                </div>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+          <a-tab-pane loading="true" tab="表格统计" key="2">
+            <a-row>
+              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                <div style="padding: 10px">
+                  <a-table
+                    bordered
+                    :data-source="chartsData"
+                    :columns="columns"
+                    tableLayout="auto"
+                    :scroll="{x: 1, y: BaseTool.Constant.scrollY }"
+                    rowKey="month">
+                  </a-table>
+                </div>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+    <print-in-repair-report ref="basePrintModal" @ok="handleOk"/>
+  </div>
+</template>
+
+<script>
+import { getMonthReportBig24, exportMonthReportBig24 } from '@/api/report/application-form'
+import { Chart } from '@antv/g2'
+import PrintInRepairReport from '@/views/dashboard/modules/PrintInRepairReport'
+
+export default {
+  name: 'Analysis',
+  components: {
+    PrintInRepairReport,
+    Chart
+  },
+  data () {
+    return {
+      loading: false,
+      serverData: [],
+      queryParam: {
+        year: 2021
+      },
+      years: [],
+      visible: true,
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      // 表头
+      columns: [
+        {
+          title: '月份',
+          width: 180,
+          dataIndex: 'month'
+        },
+        {
+          title: '数量',
+          width: 120,
+          dataIndex: 'num'
+        }
+      ]
+    }
+  },
+  created () {
+    this.initSelectYear()
+  },
+  mounted () {
+    this.changeYear(this.queryParam.year)
+  },
+  methods: {
+    initSelectYear () {
+      var myDate = new Date()
+      this.queryParam.year = myDate.getFullYear()// 获取当前年
+      this.years = []
+      for (let i = 0; i < 5; i++) {
+        this.years.push({ value: (this.queryParam.year - i), label: (this.queryParam.year - i) + '年' })
+      }
+    },
+    changeYear (value) {
+      this.queryParam.year = value
+      getMonthReportBig24(this.queryParam)
+        .then(res => {
+          this.chartsData = res.data
+          this.getCharts('container', this.chartsData)// 调用统计图
+        })
+    },
+    getCharts (id, data) {
+      this.chart && this.chart.destroy()// 防止点击搜索按钮新增一个
+      this.chart = new Chart({
+        container: 'container',
+        autoFit: true,
+        height: 400
+      })
+      this.chart.data(data)
+      this.chart.scale('num', {
+        nice: true
+      })
+      this.chart.tooltip({
+        showMarkers: true,
+        shared: true
+      })
+      this.chart.interval().position('month*num')
+      this.chart.interaction('active-region')
+      this.chart.legend({
+        position: 'bottom'
+      })
+      this.chart.render()
+    },
+    doExport () {
+      const parameter = {
+        ...this.queryParam
+      }
+      exportMonthReportBig24(parameter).then(file => {
+        this.BaseTool.UPLOAD.downLoadExportExcel(file)
+      })
+    },
+    handlePrint (record) {
+      const modal = this.$refs.basePrintModal
+      this.visible = false
+      modal.base({ year: this.queryParam.year, data: this.chartsData })
+    },
+    handleOk () {
+      this.visible = true
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .extra-wrapper {
+    line-height: 55px;
+    padding-right: 24px;
+
+    .extra-item {
+      display: inline-block;
+      margin-right: 24px;
+
+      a {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  .antd-pro-pages-dashboard-analysis-twoColLayout {
+    position: relative;
+    display: flex;
+    display: block;
+    flex-flow: row wrap;
+  }
+
+  .antd-pro-pages-dashboard-analysis-salesCard {
+    height: calc(100% - 24px);
+    /deep/ .ant-card-head {
+      position: relative;
+    }
+  }
+
+  .dashboard-analysis-iconGroup {
+    i {
+      margin-left: 16px;
+      color: rgba(0,0,0,.45);
+      cursor: pointer;
+      transition: color .32s;
+      color: black;
+    }
+  }
+  .analysis-salesTypeRadio {
+    position: absolute;
+    right: 54px;
+    bottom: 12px;
+  }
+</style>

src/views/dashboard/modules/PrintInCheckJobReport.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="print-content" v-show="visible">
+    <a-row :gutter="48" slot="extra">
+      <a-col :md="48" :sm="48">
+        <span class="table-page-search-submitButtons" style="float: right">
+          <a-button type="primary" v-print="'#print-container2'" :disabled="disabled">打印</a-button>
+          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
+        </span>
+      </a-col>
+    </a-row>
+    <div class="container" id="print-container2">
+      <div class="text-center" style="position:relative;font-size:20px;font-weight:bold">
+        Hitachi</br>>保养任务月统计报表
+      </div>
+      <div>
+        <div class="col-md-4 text-center" style="padding: 0">统计年份: {{ record.year }}</div>
+      </div>
+      <table class="gridtable list">
+        <tbody>
+          <tr>
+            <td class="text-center">月份</td>
+            <td class="text-center">总数</td>
+            <td class="text-center">完成数</td>
+            <td class="text-center">未完成数</td>
+            <td class="text-center">完成率</td>
+          </tr>
+          <tr :key="index" v-for="(item,index) in items">
+            <td class="text-center">{{ item.month}}</td>
+            <td class="text-center">{{ item.totalNum }}</td>
+            <td class="text-center">{{ item.totalFinishNum }}</td>
+            <td class="text-center">{{ item.totalWaitNum }}</td>
+            <td class="text-center">{{ item.finishRate }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="row">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@/utils/util'
+
+export default {
+  name: 'PrintCheckJobReport',
+  components: { },
+  data () {
+    return {
+      visible: false,
+      disabled: true,
+      record: {},
+      count: 0,
+      items: [],
+      user: this.$store.getters.userInfo
+      // 下拉框map
+    }
+  },
+  props: {},
+  created () {
+    // 下拉框map
+  },
+  computed: {
+  },
+  methods: {
+    base (record) {
+      this.disabled = true
+      this.visible = true
+      this.record = record
+      this.items = record.data
+      this.disabled = false
+    },
+    formatDateEn (value) {
+      return formatDate(new Date(value), 'yyyy-MM-dd')
+    },
+    handleCancel (values) {
+      this.visible = false
+      this.$emit('ok', values)
+    },
+  }
+}
+</script>
+<style media=print>
+/* 应用这个样式的在打印时隐藏 */
+.noPrint {
+  display: none;
+}
+
+/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
+.page {
+  page-break-after: always;
+}
+</style>
+<style>
+.print-content{
+  width: 1123px;
+  background-color: #fff;
+}
+
+#print-container2 * {
+  font-family: SimHei !important;
+  color: #333447;
+  line-height: 1.5;
+}
+
+.container {
+  width: 95%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+table.gridtable {
+  width: 100%;
+  font-family: verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+}
+
+table.gridtable th {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #dedede;
+}
+
+table.gridtable td {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #ffffff;
+}
+
+table.content td {
+  height: 95px;
+}
+
+.row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.container:before,
+.container:after,
+.row:before, .row:after {
+  display: table;
+  content: " ";
+}
+
+.container:after, .row:after {
+  clear: both;
+}
+
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+  float: left;
+}
+
+.col-md-12 {
+  width: 100%;
+}
+
+.col-md-11 {
+  width: 91.66666667%;
+}
+
+.col-md-10 {
+  width: 83.33333333%;
+}
+
+.col-md-9 {
+  width: 75%;
+}
+
+.col-md-8 {
+  width: 66.66666667%;
+}
+
+.col-md-7 {
+  width: 58.33333333%;
+}
+
+.col-md-6 {
+  width: 50%;
+}
+
+.col-md-5 {
+  width: 41.66666667%;
+}
+
+.col-md-4 {
+  width: 33.33333333%;
+}
+
+.col-md-3 {
+  width: 25%;
+}
+
+.col-md-2 {
+  width: 16.66666667%;
+}
+
+.col-md-1 {
+  width: 8.33333333%;
+}
+</style>

src/views/dashboard/modules/PrintInRepairReport.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="print-content" v-show="visible">
+    <a-row :gutter="48" slot="extra">
+      <a-col :md="48" :sm="48">
+        <span class="table-page-search-submitButtons" style="float: right">
+          <a-button type="primary" v-print="'#print-container2'" :disabled="disabled">打印</a-button>
+          <a-button style="margin-left: 8px" @click="handleCancel()">返回列表</a-button>
+        </span>
+      </a-col>
+    </a-row>
+    <div class="container" id="print-container2">
+      <div class="text-center" style="position:relative;font-size:20px;font-weight:bold">
+        Hitachi</br>>24小时停机次数按月统计
+      </div>
+      <div>
+        <div class="col-md-4 text-center" style="padding: 0">统计年份: {{ record.year }}</div>
+      </div>
+      <table class="gridtable list">
+        <tbody>
+          <tr>
+            <td class="text-center">月份</td>
+            <td class="text-center">数量</td>
+          </tr>
+          <tr :key="index" v-for="(item,index) in items">
+            <td class="text-center">{{ item.month}}</td>
+            <td class="text-center">{{ item.num }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="row">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@/utils/util'
+
+export default {
+  name: 'PrintRepairReport',
+  components: { },
+  data () {
+    return {
+      visible: false,
+      disabled: true,
+      record: {},
+      count: 0,
+      items: [],
+      user: this.$store.getters.userInfo
+      // 下拉框map
+    }
+  },
+  props: {},
+  created () {
+    // 下拉框map
+  },
+  computed: {
+  },
+  methods: {
+    base (record) {
+      this.disabled = true
+      this.visible = true
+      this.record = record
+      this.items = record.data
+      this.disabled = false
+    },
+    formatDateEn (value) {
+      return formatDate(new Date(value), 'yyyy-MM-dd')
+    },
+    handleCancel (values) {
+      this.visible = false
+      this.$emit('ok', values)
+    },
+  }
+}
+</script>
+<style media=print>
+/* 应用这个样式的在打印时隐藏 */
+.noPrint {
+  display: none;
+}
+
+/* 应用这个样式的，从那个标签结束开始另算一页，之后在遇到再起一页，以此类推 */
+.page {
+  page-break-after: always;
+}
+</style>
+<style>
+.print-content{
+  width: 1123px;
+  background-color: #fff;
+}
+
+#print-container2 * {
+  font-family: SimHei !important;
+  color: #333447;
+  line-height: 1.5;
+}
+
+.container {
+  width: 95%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
+  position: relative;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.text-left {
+  text-align: left;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+table.gridtable {
+  width: 100%;
+  font-family: verdana, arial, sans-serif;
+  font-size: 11px;
+  color: #333333;
+  border-width: 1px;
+  border-color: #666666;
+  border-collapse: collapse;
+}
+
+table.gridtable th {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #dedede;
+}
+
+table.gridtable td {
+  border-width: 1px;
+  padding: 8px;
+  border-style: solid;
+  border-color: #666666;
+  background-color: #ffffff;
+}
+
+table.content td {
+  height: 95px;
+}
+
+.row {
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.container:before,
+.container:after,
+.row:before, .row:after {
+  display: table;
+  content: " ";
+}
+
+.container:after, .row:after {
+  clear: both;
+}
+
+.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
+  float: left;
+}
+
+.col-md-12 {
+  width: 100%;
+}
+
+.col-md-11 {
+  width: 91.66666667%;
+}
+
+.col-md-10 {
+  width: 83.33333333%;
+}
+
+.col-md-9 {
+  width: 75%;
+}
+
+.col-md-8 {
+  width: 66.66666667%;
+}
+
+.col-md-7 {
+  width: 58.33333333%;
+}
+
+.col-md-6 {
+  width: 50%;
+}
+
+.col-md-5 {
+  width: 41.66666667%;
+}
+
+.col-md-4 {
+  width: 33.33333333%;
+}
+
+.col-md-3 {
+  width: 25%;
+}
+
+.col-md-2 {
+  width: 16.66666667%;
+}
+
+.col-md-1 {
+  width: 8.33333333%;
+}
+</style>

src/views/purchase/purchase-plan/modules/PrintForm.vue

@@ -119,7 +119,6 @@
             <td colspan="6">特殊情况说明（如有）：</td>
           </tr>
         </tbody>
-
       </table>
       <div class="row">
         <div class="col-md-6">项目部负责人签字：</div>
@@ -242,6 +241,7 @@ export default {
     border-width: 1px;
     border-color: #666666;
     border-collapse: collapse;
+    margin-bottom: 20px;
   }
 
   table.gridtable th {