完善

src/views/purchase/purchase-order-report/PurchaseOrderReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page-header-index-wide">
-    <a-card :title="title" :loading="loading" v-show="visible" :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">

src/views/purchase/purchase-order-report/PurchaseOrderReportPie.vue

@@ -0,0 +1,303 @@
+<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-date-picker
+              style="margin-left: 8px"
+              :default-value="moment(defaultStartMonth, monthFormat)"
+              :format="monthFormat"
+              showTime
+              v-model="queryParam.createdTimeStart"
+              placeholder="开始月份"
+              @change="onStartChange" />
+            <a-date-picker
+              style="margin-left: 8px"
+              :default-value="moment(defaultEndMonth, monthFormat)"
+              :format="monthFormat"
+              showTime
+              v-model="queryParam.createdTimeEnd"
+              placeholder="结束月份"
+              @change="onEndChange" />
+            <a-button style="margin-left: 8px" type="default" @click="getData()">查询</a-button>
+            <!-- <a-button style="margin-left: 8px" type="primary" icon="printer" @click="handlePrint()">打印</a-button> -->
+            <a-button style="margin-left: 8px" type="primary" @click="doExport()">导出</a-button>
+          </div>
+          <a-tab-pane loading="true" tab="图形统计" key="1">
+            <a-row>
+              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                <chart-view :chartOption="chartOption1" width="100%" height="600px" />
+              </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">
+                    <span slot="action" slot-scope="record">
+                      <template>
+                        <a @click="handleView(record)">查看明细</a>
+                        <a-divider type="vertical" />
+                        <a @click="doExportDetail(record)">导出</a>
+                      </template>
+                    </span>
+                  </a-table>
+                </div>
+              </a-col>
+            </a-row>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </a-card>
+    <print-in-repair-report ref="basePrintModal" @ok="handleOk"/>
+    <detail ref="detailModal" @ok="handleOk"/>
+  </div>
+</template>
+
+<script>
+import { Chart } from '@antv/g2'
+import PrintInRepairReport from '@/views/dashboard/modules/PrintInRepairReport'
+import Detail from './modules/Detail'
+
+import moment from 'moment'
+import { getPurchaseReport, exportOrder, exportOrderDetail } from '@/api/purchase/purchase-order'
+
+export default {
+  name: 'Analysis',
+  components: {
+    PrintInRepairReport,
+    Chart,
+    Detail
+  },
+  props: {
+    /**
+     * 检查类型： 1->24小时非计划性维修 2-全部维修（不包括其他临时完善维修）
+     */
+    searchType: {
+      type: Number,
+      default: 1
+    },
+    title: {
+      type: String,
+      default: '大于24小时非计划性维修'
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      serverData: [],
+      monthFormat: 'YYYY-MM-DD',
+      defaultStartMonth: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR_MONTH) + '-01 00:00:00',
+      defaultEndMonth: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN),
+      queryParam: {
+        // year: 2021,
+        createdTimeStart: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR_MONTH) + '-01 00:00:00',
+        createdTimeEnd: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
+      },
+      visible: true,
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      // 表头
+      columns: [
+        {
+          title: '采购单状态',
+          width: 180,
+          dataIndex: 'purchaseType',
+          customRender: (text, record, index) => {
+            return this.BaseTool.Table.getMapText(this.typeMap, text)
+          }
+        },
+        {
+          title: '采购单总数',
+          width: 120,
+          dataIndex: 'orderTotalNum'
+        },
+        {
+          title: '备件总数',
+          width: 120,
+          dataIndex: 'spareTotalNum'
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '200px',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      typeMap: {}
+    }
+  },
+  computed: {
+    chartOption1 () {
+      return {
+        // tooltip: {
+        //   trigger: 'axis',
+        //   axisPointer: {
+        //     type: 'shadow'
+        //   }
+        // },
+        legend: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        xAxis: {
+          type: 'category',
+          data: this.chartsData.map(item => this.BaseTool.Table.getMapText(this.typeMap, item.purchaseType))
+        },
+        series: [
+          {
+            name: '采购单总数',
+            type: 'bar',
+            data: this.chartsData.map(item => item.orderTotalNum),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          },
+          {
+            name: '备件总数',
+            type: 'bar',
+            data: this.chartsData.map(item => item.spareTotalNum),
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, // 开启显示
+                  position: 'top', // 在上方显示
+                  textStyle: { // 数值样式
+                    color: 'black',
+                    fontSize: 16
+                  }
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  },
+  created () {
+    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.LONG_YAN_PURCHASE_TYPE)
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getData()
+    })
+  },
+  methods: {
+    moment,
+    onStartChange (date, dateString) {
+      this.queryParam.createdTimeStart = this.BaseTool.Date.formatter(date, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
+    },
+    onEndChange (date, dateString) {
+      console.log(date)
+      this.queryParam.createdTimeEnd = this.BaseTool.Date.formatter(date, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN)
+    },
+    getData () {
+      getPurchaseReport(this.queryParam)
+        .then(res => {
+          this.chartsData = res.data
+        })
+    },
+    doExport () {
+      const parameter = {
+        ...this.queryParam
+      }
+      exportOrder(parameter).then(file => {
+        this.BaseTool.UPLOAD.downLoadExportExcel(file)
+      })
+    },
+    doExportDetail (record) {
+      const parameter = {
+        ...this.queryParam,
+        type: record.purchaseType
+      }
+      exportOrderDetail(parameter).then(file => {
+        this.BaseTool.UPLOAD.downLoadExportExcel(file)
+      })
+    },
+    handlePrint (record) {
+      const modal = this.$refs.basePrintModal
+      this.visible = false
+      modal.base({ createdTimeStart: this.queryParam.createdTimeStart, createdTimeEnd: this.queryParam.createdTimeEnd, title: this.title, data: this.chartsData })
+    },
+    handleView (record) {
+      console.log(111)
+      console.log(record)
+      const modal = this.$refs.detailModal
+      modal.base(record)
+    },
+    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>