优化

src/api/report/application-form.js

@@ -33,3 +33,36 @@ export function exportMonthReportBig24 (parameter) {
     responseType: 'blob'
   })
 }
+
+/**
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getMonthReportMttr (parameter) {
+  return axios({
+    url: '/report/repair/mttr?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * export file
+ * parameter: { }
+ * @param parameter :
+  * @returns {*}
+ */
+export function exportMonthReportMttr (parameter) {
+  return axios({
+    url: '/report/repair/mttr/export?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
+}

src/router/generator-platform-routers.js

@@ -321,7 +321,9 @@ const constantRouterComponents = {
 
   // 报表
   'CheckJobReport': () => import('@/views/dashboard/CheckJobReport'), // 保养任务完成率报表
-  'RepairReport': () => import('@/views/dashboard/RepairReport')// >24小时停机次数按月统计
+  'RepairReport': () => import('@/views/dashboard/RepairReport'), // >24小时停机次数按月统计
+  'RepairReportSbAll': () => import('@/views/dashboard/RepairReportSbAll'), // 设备故障次数按月统计
+  'RepairReportMttr': () => import('@/views/dashboard/RepairReportMttr')// MTTR月统计报表
 }
 
 // 前端未找到页面路由（固定不用改）

src/views/dashboard/RepairReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-header-index-wide">
-    <a-card title=">24小时停机次数按月统计" :loading="loading" v-show="visible" :bordered="false" :body-style="{padding: '0'}">
+    <a-card :title="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">
@@ -58,12 +58,26 @@ export default {
     PrintInRepairReport,
     Chart
   },
+  props: {
+    /**
+     * 检查类型： 1->24小时非计划性维修 2-全部维修（不包括其他临时完善维修）
+     */
+    searchType: {
+      type: Number,
+      default: 1
+    },
+    title: {
+      type: String,
+      default: '>24小时非计划性维修'
+    }
+  },
   data () {
     return {
       loading: false,
       serverData: [],
       queryParam: {
-        year: 2021
+        year: 2021,
+        searchType: this.searchType
       },
       years: [],
       visible: true,
@@ -140,7 +154,7 @@ export default {
     handlePrint (record) {
       const modal = this.$refs.basePrintModal
       this.visible = false
-      modal.base({ year: this.queryParam.year, data: this.chartsData })
+      modal.base({ year: this.queryParam.year, title: this.title, data: this.chartsData })
     },
     handleOk () {
       this.visible = true

src/views/dashboard/RepairReportMttr.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="page-header-index-wide">
+    <a-card :title="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">
+            <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-mttr ref="basePrintModal" @ok="handleOk"/>
+  </div>
+</template>
+
+<script>
+import { getMonthReportMttr, exportMonthReportMttr } from '@/api/report/application-form'
+import { Chart } from '@antv/g2'
+import PrintInRepairReportMttr from '@/views/dashboard/modules/PrintInRepairReportMttr'
+
+export default {
+  name: 'Analysis',
+  components: {
+    PrintInRepairReportMttr,
+    Chart
+  },
+  props: {
+    title: {
+      type: String,
+      default: 'MTTR月统计报表'
+    }
+  },
+  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'
+        },
+        {
+          title: '总修复时间（小时）',
+          width: 120,
+          dataIndex: 'totalHours'
+        },
+        {
+          title: '平均修复时间（小时）',
+          width: 120,
+          dataIndex: 'mttr'
+        }
+      ]
+    }
+  },
+  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
+      getMonthReportMttr(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('mttr', {
+        nice: true
+      })
+      this.chart.tooltip({
+        showMarkers: true,
+        shared: true
+      })
+      this.chart.interval().position('month*mttr')
+      this.chart.interaction('active-region')
+      this.chart.legend({
+        position: 'bottom'
+      })
+      this.chart.render()
+    },
+    doExport () {
+      const parameter = {
+        ...this.queryParam
+      }
+      exportMonthReportMttr(parameter).then(file => {
+        this.BaseTool.UPLOAD.downLoadExportExcel(file)
+      })
+    },
+    handlePrint (record) {
+      const modal = this.$refs.basePrintModal
+      this.visible = false
+      modal.base({ year: this.queryParam.year, title: this.title, 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/RepairReportSbAll.vue

@@ -0,0 +1,22 @@
+<template>
+  <RepairReport :title="title" :search-type="2"/>
+</template>
+
+<script>
+import RepairReport from './RepairReport'
+export default {
+  name: 'RepairReportSbAll',
+  components: {
+    RepairReport
+  },
+  data () {
+    return {
+      title: '设备故障次数按月统计'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/dashboard/modules/PrintInRepairReport.vue

@@ -10,7 +10,7 @@
     </a-row>
     <div class="container" id="print-container2">
       <div class="text-center" style="position:relative;font-size:20px;font-weight:bold">
-        Hitachi</br>>24小时停机次数按月统计
+        Hitachi</br> {{ record.title }}
       </div>
       <div>
         <div class="col-md-4 text-center" style="padding: 0">统计年份: {{ record.year }}</div>
@@ -70,7 +70,7 @@ export default {
     handleCancel (values) {
       this.visible = false
       this.$emit('ok', values)
-    },
+    }
   }
 }
 </script>

src/views/dashboard/modules/PrintInRepairReportMttr.vue

@@ -0,0 +1,228 @@
+<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> {{ record.title }}
+      </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>
+          </tr>
+          <tr :key="index" v-for="(item,index) in items">
+            <td class="text-center">{{ item.month}}</td>
+            <td class="text-center">{{ item.num }}</td>
+            <td class="text-center">{{ item.totalHours }}</td>
+            <td class="text-center">{{ item.mttr }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="row">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@/utils/util'
+
+export default {
+  name: 'PrintRepairReportMttr',
+  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>