优化

src/api/report/check-job.js

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

src/router/generator-platform-routers.js

@@ -321,6 +321,7 @@ const constantRouterComponents = {
 
   // 报表
   'CheckJobReport': () => import('@/views/dashboard/CheckJobReport'), // 保养任务完成率报表
+  'CheckJobReportWeek': () => import('@/views/dashboard/CheckJobReportWeek'), // 保养任务周工作负荷统计报表
   'RepairReport': () => import('@/views/dashboard/RepairReport'), // >24小时停机次数按月统计
   'RepairReportSbAll': () => import('@/views/dashboard/RepairReportSbAll'), // 设备故障次数按月统计
   'RepairReportMttr': () => import('@/views/dashboard/RepairReportMttr')// MTTR月统计报表

src/views/dashboard/CheckJobReportWeek.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="page-header-index-wide">
+    <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">
+            <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-check-job-report-week ref="basePrintModal" @ok="handleOk"/>
+  </div>
+</template>
+
+<script>
+import { getWeekReport, exportMonthReport } from '@/api/report/check-job'
+import { Chart } from '@antv/g2'
+import PrintInCheckJobReportWeek from '@/views/dashboard/modules/PrintInCheckJobReportWeek'
+
+export default {
+  name: 'Analysis',
+  components: {
+    PrintInCheckJobReportWeek,
+    Chart
+  },
+  data () {
+    return {
+      loading: false,
+      serverData: [],
+      queryParam: {
+        year: 2021
+      },
+      years: [],
+      visible: true,
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      // 表头
+      columns: [
+        {
+          title: '周',
+          width: 180,
+          dataIndex: 'week'
+        },
+        {
+          title: '保养标准工时',
+          width: 120,
+          dataIndex: 'totalHours'
+        }
+      ]
+    }
+  },
+  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
+      getWeekReport(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', 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('totalHours', {
+        nice: true
+      })
+      this.chart.tooltip({
+        showMarkers: false,
+        shared: true
+      })
+      this.chart.interval().position('week*totalHours')
+      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-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/PrintInCheckJobReportWeek.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>>保养任务每月统计报表
+      </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.week}}</td>
+            <td class="text-center">{{ item.totalHours }}</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="row">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { formatDate } from '@/utils/util'
+
+export default {
+  name: 'PrintInCheckJobReportWeek',
+  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>