1

src/api/flow/index.js

@@ -185,3 +185,12 @@ export function flowLogs(params,isLoading=false) {
     isLoading
   })
 }
+
+export function statistics(type, params, isLoading=true) {
+  return request({
+    method: 'get',
+    url: `/api/oa/statistics/get-chart-data/${type}`,
+    params,
+    isLoading
+  })
+}

src/layout/CardContainer.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <el-card shadow="always">
+      <template #header>
+        <slot name="header">
+          <div>
+            <Icon :icon="$route.meta.icon"></Icon>
+            <span style="font-weight: 600;letter-spacing: 1px;">{{ $route.meta.title }}</span>
+          </div>
+        </slot>
+      </template>
+
+      <template #default>
+        <slot></slot>
+      </template>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import Icon from "@/layout/components/Sidebar/Icon.vue"
+
+export default {
+  components: {
+    Icon
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/layout/components/AppMain.vue

@@ -25,10 +25,17 @@ export default {
   background: #eff2f9;
   position: relative;
   overflow: hidden;
+  padding: 20px;
 }
 .fixed-header+.app-main {
   padding-top: 50px;
 }
+@media (max-width: 768px) {
+  .app-main {
+    min-height: calc(100vh - 54px);
+    padding: 10px;
+  }
+}
 </style>
 
 <style lang="scss">

src/layout/components/Sidebar/Icon.vue

@@ -0,0 +1,45 @@
+<script>
+export default {
+  name: "Icon",
+  props: {
+    icon: String
+  },
+  render(h) {
+    if (this.icon) {
+      if (this.icon.includes('el-icon')) {
+        return <i class={[this.icon, 'sub-el-icon']} />
+      }
+      else if(this.icon.includes("iviewicon")){
+        let icon = this.icon.split("/")[1];
+        return <Icon type={icon} class='sub-el-icon' size="18" />
+      }
+      else if(this.icon.includes("iconfont")){
+        let icon = this.icon.split("/")[1]+" iconfont";
+        return <Icon custom={icon} class='sub-el-icon' size="18" />
+      }
+      else {
+        return <i class="sub-el-icon"><svg-icon class-name="sub-el-icon__svg" icon-class={this.icon}/></i>
+      }
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {},
+  computed: {}
+}
+</script>
+
+<style scoped lang="scss">
+.sub-el-icon {
+  margin-right: 5px;
+  width: 18px !important;
+  text-align: center;
+  vertical-align: middle;
+  color: currentColor;
+  display: inline-block;
+
+  &__svg {
+  }
+}
+</style>

src/main.js

@@ -54,6 +54,8 @@ import Vant from 'vant'
 import 'vant/lib/index.css';
 Vue.use(Vant)
 
+import CardContainer from '@/layout/CardContainer.vue'
+Vue.component('CardContainer', CardContainer)
 //moment
 import moment from 'moment'
 Vue.prototype.$moment = moment;
@@ -87,7 +89,7 @@ else if(window.top !== window.self) {
     store,
     render: h => h(App)
   }).$mount("#app")
-  router.push('/')
+  router.push(getQueryParam('to') || '/')
   // window.addEventListener("message",function (e) {
   //   const { module_name, auth_token } = e.data;
   //   window.MODULE_NAME = module_name;

src/views/flow/statistics.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="container">
+    <div class="left-bar">
+      <el-card>
+        <el-radio-group v-model="pickedType" size="small">
+          <el-radio v-for="item in types" :key="item.value" :label="item.value" border>{{ item.name }}</el-radio>
+        </el-radio-group>
+      </el-card>
+    </div>
+    <card-container class="right-content">
+      <div class="select">
+        <el-date-picker
+          :value="select.date_range ? select.date_range.split('~') : []"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+          @input="e => select.date_range =  e ? e.join('~') : ''">
+        </el-date-picker>
+      </div>
+    </card-container>
+  </div>
+</template>
+
+<script>
+import { statistics } from '@/api/flow'
+export default {
+  data() {
+    return {
+      pickedType: 'custom-model',
+      types: [
+        {
+          value: 'avg-time',
+          name: '平均办结时长'
+        },
+        {
+          value: 'mixed',
+          name: '流程模块+发起科室'
+        },
+        {
+          value: 'department',
+          name: '发起科室'
+        },
+        {
+          value: 'custom-model',
+          name: '流程模块'
+        }
+      ],
+      select: {
+        date_range: '',
+        department_id: ''
+      },
+      pickerOptions: {
+        shortcuts: [{
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      }
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    async getData() {
+      try {
+        const res = await statistics(this.pickedType, this.select)
+        console.log(res)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  },
+  computed: {},
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+
+  .left-bar {
+    flex-basis: 22%;
+  }
+  .right-content {
+    flex: 1;
+    margin-left: 20px;
+  }
+}
+@media (max-width: 768px) {
+  .container {
+    display: inherit;
+
+    .right-content {
+      margin-left: 0;
+      margin-top: 10px;
+    }
+  }
+}
+::v-deep .el-radio.is-bordered+.el-radio.is-bordered {
+  margin-left: 0;
+  margin-top: 6px;
+}
+::v-deep .el-radio.is-bordered {
+  display: block;
+  width: 100%;
+}
+</style>