图表需求

index.ejs

@@ -89,6 +89,12 @@
             "title": "系统设置",
             "appName": 'settings',
             "url": "/setting"
+          }, {
+            "icon": "fa-home",
+            "isRouteShow": 1,
+            "title": "统计分析",
+            "appName": 'analysis',
+            "url": "/analysis"
           }],
           homePage: {
             appName: 'reimbursement',

src/assets/css/analysis-app.scss

+.analysis-app {
+  .mt10 {
+    margin-top:10px;
+  }
+  .title-two {
+    margin: 0;
+    padding-left: 10px;
+    border-left-width: 2px;
+    border-left-style: solid;
+    border-left-color: #649fd7;
+    font-weight: 400;
+    font-size: 1.3em;
+    color: #649fd7;
+  }
+}

src/assets/css/app.scss

@@ -8,4 +8,5 @@
 @import './profile-app.scss';
 @import './service-app.scss';
 @import './punch-app.scss';
-@import './setting\-app.scss';
+@import './setting-app.scss';
+@import './analysis-app.scss'

src/components/analysis/analysis/countArr.vue

+<template>
+  <section class="obear-countArr-section">
+    <div class="obear-countArr-row">
+      <div class="obear-countArr-row__col" v-for="item in list" :key="item.key">
+        <div class="obear-countArr-option" :style="{'background-color': item.color}">
+          <span class="obear-countArr-option__label">{{ item.name }}</span>
+          <span class="obear-countArr-option__number">{{ item.value }}</span>
+          <span class="obear-countArr-option__unit">天</span>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  name: 'countArr',
+
+  props: {
+    list: Array
+  }
+}
+</script>
+<style lang="scss" scoped>
+@include c('countArr-section'){
+  background-color:white;
+}
+@include c('countArr-row'){
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  justify-content:start;
+  align-items:center;
+  @include e('col'){
+    position: relative;
+    // width: 100%;
+    width: 16.66%;
+    min-height: 1px;
+    padding-right: 15px;
+    padding-left: 15px;
+    // -ms-flex-preferred-size: 0;
+    // flex-basis: 0;
+    // -ms-flex-positive: 1;
+    // flex-grow: 1;
+    // max-width: 100%;
+  }
+}
+@include c('countArr-option'){
+  position: relative;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  color: #FFF;
+  padding: 0 0 6px;
+  text-align: center;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+  background-color:#98c450;
+  @include e('label'){
+    display: block;
+    color: #fff;
+    font-size: 14px;
+    padding: 3px 0;
+    margin-bottom: 3px;
+    border-bottom: 1px solid #FFF;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+  @include e('number'){
+    font-size: 22px;
+  }
+}
+@include c('report-link'){
+  color: #FFF;
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+}
+</style>

src/components/analysis/analysis/timeSearchForm.vue

+<template>
+  <section>
+    <el-row class="form-content-time-top">
+      <el-form ref="clientTimeForm" :model="clientTimeForm" size="mini">
+        <el-col :span="8" :xs="24">
+          <el-form-item label="提交时间:" label-width="42">
+            <el-radio-group v-model="clientTimeForm[formSearchKey + '[period]']" size="mini">
+              <el-radio-button label="all">本周</el-radio-button>
+              <el-radio-button label="today">上周</el-radio-button>
+              <el-radio-button label="tomorrow">本月</el-radio-button>
+              <el-radio-button label="aftertomorrow">上月</el-radio-button>
+            </el-radio-group>
+            <el-dropdown>
+              <el-button type="primary" size="mini">
+                本财年<i class="el-icon-arrow-down el-icon--right"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>2017年</el-dropdown-item>
+                <el-dropdown-item>2018年</el-dropdown-item>
+                <el-dropdown-item>2019年</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-form-item>
+        </el-col>
+      </el-form>
+      <el-form ref="clientTimeRange" :model="clientTimeRange" size="mini">
+        <el-col :span="8" :offset="0" :xs="{span: 24, offset: 0}" class="form-content-time-range">
+          <el-form-item label-width="0">
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.from"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="开始时间">
+            </el-date-picker>
+            至
+            <el-date-picker
+              size="mini"
+              v-model="clientTimeRange.to"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="结束时间">
+            </el-date-picker>
+            <el-button type="primary" size="mini" @click="setSearchTime">确定</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </section>
+</template>
+<script>
+import setParams from '../../common/setParams'
+export default {
+  name: 'timeSearchForm',
+
+  mixins: [setParams],
+
+  props: ['formSearchKey'],
+
+  data () {
+    return {
+      clientTimeForm: {},
+      clientTimeRange: {
+        from: '',
+        to: ''
+      }
+    }
+  },
+
+  created () {
+    this.initParams()
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.$watch('clientTimeForm', (val) => {
+        let perid = val[this.formSearchKey + '[period]']
+        this.$emit('update:list', Object.assign({}, {[this.formSearchKey + '[period]']: perid}))
+      }, {deep: true})
+    },
+
+    initParams () {
+      this.setInitParams((ret) => {
+        this.$set(this.clientTimeForm, this.formSearchKey + '[period]', ret[this.formSearchKey + '[period]'] || 'all')
+        this.clientTimeRange.from = ret[this.formSearchKey + '[from]'] || ''
+        this.clientTimeRange.to = ret[this.formSearchKey + '[to]'] || ''
+      })
+    },
+
+    resetForm () {
+      this.clientTimeForm[this.formSearchKey + '[period]'] = 'all'
+      this.clientTimeRange.from = ''
+      this.clientTimeRange.to = ''
+    },
+
+    setSearchTime () {
+      let from = this.clientTimeRange.from
+      let to = this.clientTimeRange.to
+      this.$emit('update:list', Object.assign({}, {
+        [this.formSearchKey + '[from]']: from,
+        [this.formSearchKey + '[to]']: to
+      }, this.clientTimeForm))
+    }
+  },
+
+  watch: {
+    'formSearchKey': {
+      handler (val) {
+        this.$set(this.clientTimeForm, val + '[period]', 'all')
+      },
+      immediate: true
+    },
+    'clientTimeRange.from' (val) {
+      if (new Date(val) >= new Date(this.clientTimeRange.to)) {
+        this.clientTimeRange.to = val
+      }
+    },
+    'clientTimeRange.to' (val) {
+      if (new Date(val) <= new Date(this.clientTimeRange.from)) {
+        this.clientTimeRange.from = val
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+  .form-content-time-top {
+    background: #FFF;
+  }
+
+  .form-content-time-top .el-form-item {
+    margin: 7px 0 9px;
+  }
+
+  .form-content-time-top .el-col {
+    padding: 0 15px;
+  }
+</style>

src/route.js

@@ -11,6 +11,7 @@ import ProfileRoute from './routes/profile'
 import ServiceRoute from './routes/service'
 import PunchRoute from './routes/punch'
 import SettingRoute from './routes/setting'
+import AnalysisRoute from './routes/analysis'
 
 let routes = []
 let reimRoutes = []
@@ -23,6 +24,7 @@ let profileRoute = []
 let serviceRoute = []
 let punchRoute = []
 let settingRoute = []
+let analysisRoute = []
 const appName = 'schedule'
 
 routes = [].concat(ScheduleRoute)
@@ -36,6 +38,7 @@ profileRoute = [].concat(ProfileRoute)
 serviceRoute = [].concat(ServiceRoute)
 punchRoute = [].concat(PunchRoute)
 settingRoute = [].concat(SettingRoute)
+analysisRoute = [].concat(AnalysisRoute)
 
 let RouterInit = () => {
   portal.createApp(appName, {}, app => {
@@ -71,6 +74,9 @@ let RouterInit = () => {
   portal.createApp('settings', {}, app => {
     app.mapRoute(settingRoute)
   })
+  portal.createApp('analysis', {}, app => {
+    app.mapRoute(analysisRoute)
+  })
   // portal.createApp('client', {}, app => {
   //   app.mapRoute([
   //     {

src/routes/analysis.js

+import AnalysisHome from '../components/analysis/analysis/analysisHome'
+const routes = [{
+  path: '/analysis',
+  name: 'AnalysisHome',
+  component: AnalysisHome
+}]
+export default routes