完善

src/api/customize/report.js

@@ -8,13 +8,13 @@ import { stringify } from 'qs'
  * @returns {*}
  */
 export function getCustomizeReportPage (parameter) {
-    return axios({
-        url: '/customize/reports/page?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/customize/reports/page?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -24,15 +24,15 @@ export function getCustomizeReportPage (parameter) {
  * @returns {*}
  */
 export function addCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports',
-        method: 'POST',
-        headers: {
-            'Accept': 'application/json',
-            'Content-Type': 'application/json;charset=UTF-8'
-        },
-        data: parameter
-    })
+  return axios({
+    url: '/customize/reports',
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    data: parameter
+  })
 }
 
 /**
@@ -42,11 +42,11 @@ export function addCustomizeReport (parameter) {
  * @returns {*}
  */
 export function updateCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports/' + parameter.id,
-        method: 'PUT',
-        data: parameter
-    })
+  return axios({
+    url: '/customize/reports/' + parameter.id,
+    method: 'PUT',
+    data: parameter
+  })
 }
 
 /**
@@ -56,13 +56,13 @@ export function updateCustomizeReport (parameter) {
  * @returns {*}
  */
 export function fetchCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports/' + parameter.id,
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/customize/reports/' + parameter.id,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -72,13 +72,13 @@ export function fetchCustomizeReport (parameter) {
  * @returns {*}
  */
 export function queryCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        }
-    })
+  return axios({
+    url: '/customize/reports?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
 }
 
 /**
@@ -88,11 +88,11 @@ export function queryCustomizeReport (parameter) {
  * @returns {*}
  */
 export function deleteCustomizeReports (parameter) {
-    return axios({
-        url: '/customize/reports',
-        method: 'DELETE',
-        data: parameter
-    })
+  return axios({
+    url: '/customize/reports',
+    method: 'DELETE',
+    data: parameter
+  })
 }
 
 /**
@@ -102,14 +102,13 @@ export function deleteCustomizeReports (parameter) {
  * @returns {*}
  */
 export function deleteCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports/' + parameter.id,
-        method: 'DELETE',
-        data: parameter
-    })
+  return axios({
+    url: '/customize/reports/' + parameter.id,
+    method: 'DELETE',
+    data: parameter
+  })
 }
 
-
 /**
  * export file
  * parameter: { }
@@ -117,12 +116,12 @@ export function deleteCustomizeReport (parameter) {
  * @returns {*}
  */
 export function exportCustomizeReport (parameter) {
-    return axios({
-        url: '/customize/reports/export?' + stringify(parameter),
-        method: 'get',
-        headers: {
-            'Content-Type': 'application/json;charset=UTF-8'
-        },
-        responseType: 'blob'
-    })
+  return axios({
+    url: '/customize/reports/export?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
 }

src/api/report/template.js

@@ -0,0 +1,37 @@
+import { axios } from '@/utils/request'
+import { stringify } from 'qs'
+
+/**
+ * 导出报表
+ * page func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function getChartReport (parameter) {
+  return axios({
+    url: parameter.sqlVal,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * 导出模板报表
+ * export file
+ * parameter: { }
+ * @param parameter :
+  * @returns {*}
+ */
+export function exportChartReport (parameter) {
+  return axios({
+    url: parameter.url + '/export?' + stringify(parameter),
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    },
+    responseType: 'blob'
+  })
+}

src/router/generator-platform-routers.js

@@ -428,7 +428,18 @@ export const constantRouterMap = [
       }
     ]
   },
-
+  {
+    path: '/chartReport',
+    component: BlankLayout,
+    redirect: '/chart/report',
+    children: [
+      {
+        path: 'ChartReport',
+        name: 'ChartReport',
+        component: () => import('@/views/dashboard/template/ChartReport')
+      }
+    ]
+  },
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')

src/views/customize/report/CustomizeReport.vue

@@ -1,85 +1,88 @@
 <template>
-  <a-card :bordered='false'>
-    <div class='table-page-search-wrapper' @keyup.enter='handleEnter'>
-      <a-form layout='inline'>
-        <a-row :gutter='48'>
-          <a-col :md='8' :sm='24'>
-            <a-form-item label='关键字'>
-              <a-input v-model='queryParam.keyword' placeholder='请输入名称/类型名称' />
+  <a-card :bordered="false">
+    <div class="table-page-search-wrapper" @keyup.enter="handleEnter">
+      <a-form layout="inline">
+        <a-row :gutter="48">
+          <a-col :md="8" :sm="24">
+            <a-form-item label="关键字">
+              <a-input v-model="queryParam.keyword" placeholder="请输入名称/类型名称" />
             </a-form-item>
           </a-col>
-          <a-col :md='8 || 24' :sm='24'>
-            <span class='table-page-search-submitButtons'>
-              <a-button type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
-              <a-button style='margin-left: 8px' @click='resetSearchForm'>重置</a-button>
+          <a-col :md="8 || 24" :sm="24">
+            <span class="table-page-search-submitButtons">
+              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
             </span>
           </a-col>
         </a-row>
       </a-form>
     </div>
 
-    <div class= 'table-operator'>
-     <a-button v-if="$auth('customize-reports-add')" type='primary' icon='plus' @click='$refs.baseModal.base()'>新增
+    <div class="table-operator">
+      <a-button v-if="$auth('customize-reports-add')" type="primary" icon="plus" @click="$refs.baseModal.base()">新增
       </a-button>
       <a-button
-        style= "margin-left: 8px"
+        style="margin-left: 8px"
         v-if="$auth('customize-reports-export')"
-        type='primary'
-        icon='download'
-        @click='doExport'>导出
+        type="primary"
+        icon="download"
+        @click="doExport">导出
       </a-button>
       <a-dropdown v-action:edit v-if="selectedRowKeys.length > 0 && $auth('customize-reports-del')">
-        <a-menu slot='overlay'>
-          <a-popconfirm title='是否要删除所选数据？' @confirm='batchDelete()'>
-            <a-menu-item key='1'>
-              <a-icon type='delete' />
+        <a-menu slot="overlay">
+          <a-popconfirm title="是否要删除所选数据？" @confirm="batchDelete()">
+            <a-menu-item key="1">
+              <a-icon type="delete" />
               <a>删除</a></a-menu-item>
           </a-popconfirm>
         </a-menu>
-        <a-button style='margin-left: 8px'>
+        <a-button style="margin-left: 8px">
           批量操作
-          <a-icon type='down' />
+          <a-icon type="down" />
         </a-button>
       </a-dropdown>
     </div>
 
     <s-table
-      ref='table'
-      size='default'
-      rowKey='id'
-      :columns='columns'
-      :data='loadData'
-      :alert='options.alert'
-      :rowSelection='options.rowSelection'
-      showPagination='auto'
+      ref="table"
+      size="default"
+      rowKey="id"
+      :columns="columns"
+      :data="loadData"
+      :alert="options.alert"
+      :rowSelection="options.rowSelection"
+      showPagination="auto"
     >
-            <span slot='action' slot-scope='record'>
-              <template>
-                <a @click='handleView(record)'>查看</a>
-                <operation-button
-                  v-if="$auth('customize-reports-edit')"
-                  @click='handleEdit(record)'
-                >修改</operation-button>
-                <operation-button
-                  v-if="$auth('customize-reports-del')"
-                  :type='2'
-                  title='是否要删除该条数据？'
-                  @confirm='batchDelete(record.id)'>删除</operation-button>
-              </template>
-            </span>
+      <span slot="action" slot-scope="record">
+        <template>
+          <a @click="handleView(record)">查看</a>
+          <operation-button
+            v-if="$auth('customize-reports-edit')"
+            @click="handleEdit(record)"
+          >修改</operation-button>
+          <operation-button
+            @click="handlePreview(record)"
+          >预览</operation-button>
+          <operation-button
+            v-if="$auth('customize-reports-del')"
+            :type="2"
+            title="是否要删除该条数据？"
+            @confirm="batchDelete(record.id)">删除</operation-button>
+        </template>
+      </span>
 
       <span slot="interType" slot-scope="text">
-          <badge
-            :text="interTypeMap[text]" />
-        </span>
+        <badge
+          :text="interTypeMap[text]" />
+      </span>
 
       <span slot="echartType" slot-scope="text">
-          <badge
-            :text="echartTypeMap[text]" />
-        </span>
+        <badge
+          :text="echartTypeMap[text]" />
+      </span>
     </s-table>
-    <base-form ref='baseModal' @ok='handleOk' />
-    <detail ref='detailModal' />
+    <base-form ref="baseModal" @ok="handleOk" />
+    <detail ref="detailModal" />
   </a-card>
 </template>
 
@@ -124,10 +127,10 @@ export default {
           dataIndex: 'echartType',
           scopedSlots: { customRender: 'echartType' }
         },
-        {
+        /*   {
           title: '报表检索条件',
           dataIndex: 'parameter'
-        },
+        }, */
         {
           title: '报表接口类型',
           dataIndex: 'interType',
@@ -137,16 +140,16 @@ export default {
           title: '数据来源',
           dataIndex: 'sqlVal'
         },
-        {
+        /*   {
           title: '表格展示字段',
           dataIndex: 'columns'
-        },
-        {
-          title: '',
+        }, */
+        /*     {
+          title: '创建人',
           dataIndex: 'createdUserName'
-        },
+        }, */
         {
-          title: '',
+          title: '创建时间',
           dataIndex: 'createdTime'
         },
         {
@@ -252,6 +255,15 @@ export default {
         modal.base(res.data)
       })
     },
+    handlePreview (record) {
+      console.log('JSON.stringify(record): ' + JSON.stringify(record))
+      const text = this.$router.resolve({
+        name: 'ChartReport',
+        query: record
+      })
+      // 打开一个新的页面
+      window.open(text.href, '_blank')
+    },
     handleView (record) {
       fetchCustomizeReport({ id: record.id }).then(res => {
         const modal = this.$refs.detailModal

src/views/dashboard/template/ChartReport.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="page-header-index-wide">
+    <a-card :title="queryParam.name" :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-month-picker
+              style="margin-left: 8px"
+              :default-value="moment(defaultStartMonth, monthFormat)"
+              :format="monthFormat"
+              v-model="queryParam.startMonth"
+              placeholder="开始月份"
+              @change="onStartChange" />
+            <a-month-picker
+              style="margin-left: 8px"
+              :default-value="moment(defaultEndMonth, monthFormat)"
+              :format="monthFormat"
+              v-model="queryParam.endMonth"
+              placeholder="结束月份"
+              @change="onEndChange" />
+            <a-button style="margin-left: 8px" type="default" @click="getData()">查询</a-button>
+            <a-button style="margin-left: 8px" type="default" 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">
+                <div style="padding: 10px">
+                  <div id="container" style="width: 100%;overflow-x:auto"></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">
+                    <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-check-job-report ref="basePrintModal" @ok="handleOk"/>
+    <detail-check-job-report ref="detailModal" @ok="handleOk"/>
+  </div>
+</template>
+
+<script>
+import { getChartReport } from '@/api/report/template'
+import { Chart } from '@antv/g2'
+import PrintInCheckJobReport from '@/views/dashboard/modules/PrintInCheckJobReport'
+import DetailCheckJobReport from '@/views/dashboard/modules/DetailCheckJobReport'
+import moment from 'moment'
+
+export default {
+  name: 'ChartReport',
+  components: {
+    PrintInCheckJobReport,
+    Chart,
+    DetailCheckJobReport
+  },
+  props: {
+  },
+  data () {
+    return {
+      // 自定义报表对象
+      chartData: {
+        title: '统计报表'
+      },
+      loading: false,
+      serverData: [],
+      sbLevelMap: {},
+      treeData: [],
+      monthFormat: 'YYYY-MM',
+      defaultStartMonth: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR) + '-01',
+      defaultEndMonth: this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR) + '-12',
+      queryParam: {
+      },
+      years: [],
+      levelMap: {},
+      visible: true,
+      chart: null, // 创建一个chart变量
+      chartsData: [],
+      // 表头
+      columns: [
+        {
+          title: '月份',
+          width: 180,
+          dataIndex: 'month'
+        },
+        {
+          title: '数量',
+          width: 120,
+          dataIndex: 'num'
+        },
+        {
+          title: '操作',
+          key: 'action',
+          width: '200px',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  created () {
+    // 获取浏览器的请求参数：页面跳转过来的数据
+    this.queryParam = this.$route.query
+    console.log('this.queryParam: ' + this.queryParam)
+  },
+  mounted () {
+    this.$nextTick(function () {
+      this.getData()
+    })
+  },
+  methods: {
+    moment,
+    getData () {
+      getChartReport(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()
+    },
+    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>