实施分析

src/apis/analysis.js

@@ -25,5 +25,8 @@ export default {
   },
   getFilterPreSales: {
     url: '/vue/analysis/get-filter-pre-sales'
+  },
+  getFilterImplement: {
+    url: '/vue/analysis/get-filter-implement'
   }
 }

src/components/analysis/implement-analyze/implementAnalyze.js

 export default {
   methods: {
     /* eslint-disable */
-    c (categories, item) {
-       Highcharts.chart(item.key, {
+    c (id, categories, data) {
+      debugger
+       Highcharts.chart(id, {
       	chart: {
       		type: 'spline'
       	},
@@ -36,7 +37,7 @@ export default {
       			enableMouseTracking: false
       		}
       	},
-        series: item.values
+        series: data.values
       	// series: [{
       	// 	name: '东京',
       	// 	data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

src/components/analysis/implement-analyze/implementAnalyzeHome.vue

 <template>
   <section>
     <div class="content">
-      <search-header
-        ref="searchHeader"
-        :title="'销售数据'"
-        @update:headerClear="() => searchClear()">
-      </search-header>
       <time-search-form
         ref="timeSearchForm"
         formSearchKey="projectSearch"
-        @update:list="search => timeSearchForm(search)">
-      </time-search-form>
-      <search-form
-        ref="clientForm"
         :filter="filter"
-        @update:clientList="form =>{ updateForm(form) }">
-      </search-form>
+        @update:form="search => timeSearchForm(search)">
+      </time-search-form>
       <div class="page-body-content">
         <div class="mb10">
           <singleRadioTool
@@ -41,17 +32,17 @@
 import SearchHeader from '../../common/searchHeader'
 import SearchForm from '../../common/SearchForm'
 import countArr from '../analysis/countArr'
-import TimeSearchForm from '../analysis/searchForm'
+import TimeSearchForm from './searchForm'
 import singleRadioTool from '../../common/singleRadioTool'
-import preSalesAnalyze from '../pre-sales-analyze/preSalesAnalyze.js'
+import dataArchiveProfit from './implementAnalyze.js'
 import {
   requestAPI,
   api
 } from '@/lib/commonMixin'
 export default {
-  name: 'caseHome',
+  name: 'preHome',
 
-  mixins: [preSalesAnalyze],
+  mixins: [dataArchiveProfit],
 
   components: {
     SearchHeader,
@@ -82,13 +73,13 @@ export default {
   methods: {
     init () {
       this.getFilter()
-      this.getSalesChart()
     },
 
-    getSalesChart () {
+    getSalesChart (params) {
       let t = this
-      requestAPI(api.getImplement, {})
+      requestAPI(api.getImplement, params)
         .then(res => {
+          this.chartTypeArray = []
           res.data.list.forEach(item => {
             this.chartTypeArray.push({
               key: item.key,
@@ -97,7 +88,7 @@ export default {
           })
           this.$nextTick(function () {
             res.data.list.forEach(item => {
-              t.c(res.data.categories, item)
+              t.c(item.key, res.data.categories, item)
             })
           })
         })
@@ -105,14 +96,8 @@ export default {
 
     // 1.查询条件
     getFilter () {
-      requestAPI(api.getPreSales).then(res => {
+      requestAPI(api.getFilterImplement).then(res => {
         this.filter = res
-        // let _inx = res.findIndex(item => item.key === 'CaseSearch[case_status]')
-        // let _newRes = res.splice(_inx, 1)
-        // this.filter = res
-        // let _navArray = _newRes[0].value
-        // _navArray.unshift({key: 'all', name: '全部'})
-        // this.navArray = _navArray
       })
     },
 
@@ -128,22 +113,9 @@ export default {
     searchClear () {
     },
 
-    // 5.1查询条件
-    updateForm (search) {
-      let ret = this.setParams({
-        ...this.form,
-        page: this.pagenation.thispage
-      }, search)
-      this.getList(ret)
-    },
-
     // 5.3 TimeSearchForm
     timeSearchForm (search) {
-      let ret = this.setParams({
-        ...this.form,
-        page: this.pagenation.thispage
-      }, search)
-      this.getList(ret)
+      this.getSalesChart(search)
     }
 
   }
@@ -151,13 +123,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.header-flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-.header-flex div {
-  flex: 0 1 50%;
-}
 @include c('opearate-button') {
   > .el-button {
     margin-right:0px;

src/components/analysis/implement-analyze/searchForm.vue

+<template>
+  <section class="analysis-client">
+    <el-row :gutter="10" class="header-title">
+      <el-col :span="4">
+        <h2>销售分析</h2>
+      </el-col>
+      <el-col :span="20">
+        <el-form ref="form" size="mini">
+          <el-col :span="6" :xs="24">
+            <el-form-item label=" " label-width="42">
+              <el-radio-group v-model="form.period" size="mini" @change="periodChangeEvent">
+                <el-radio-button label="lastseason">上季度</el-radio-button>
+                <el-radio-button label="thisseason">本季度</el-radio-button>
+                <el-radio-button label="currentfascalyear">本财年</el-radio-button>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-form>
+        <el-form ref="clientTimeRange" size="mini">
+          <el-col :span="10" :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="form.from"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="开始时间">
+              </el-date-picker>
+              至
+              <el-date-picker
+                size="mini"
+                v-model="form.to"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="结束时间">
+              </el-date-picker>
+              <el-button type="primary" size="mini" class="head-date-button" @click="setSearchTime">确定</el-button>
+            </el-form-item>
+          </el-col>
+        </el-form>
+        <el-form ref="clientForm" size="mini" label-width="0" label-position="top">
+          <el-col :span="4">
+            <el-form-item>
+              <el-select v-model="form.dataUserId">
+                <el-option v-for="sItem in userArr"
+                           :key="sItem.key"
+                           :label="sItem.name"
+                           :value="sItem.key"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-form>
+      </el-col>
+    </el-row>
+  </section>
+</template>
+<script>
+let checkDate = () => {
+  let setTimeFormat = (date) => {
+    let myYear = date.getFullYear()
+    let myMonth = date.getMonth() + 1
+    let myWeekday = date.getDate()
+    if (myMonth < 10) {
+      myMonth = '0' + myMonth
+    }
+    if (myWeekday < 10) {
+      myWeekday = '0' + myWeekday
+    }
+    return (myYear + '-' + myMonth + '-' + myWeekday)
+  }
+  // 获得本季度的开始月份
+  let getQuarterStartMonth = () => {
+    var quarterStartMonth = 0
+    if (nowMonth < 3) {
+      quarterStartMonth = 0
+    }
+    if (nowMonth > 2 && nowMonth < 6) {
+      quarterStartMonth = 3
+    }
+    if (nowMonth > 5 && nowMonth < 9) {
+      quarterStartMonth = 6
+    }
+    if (nowMonth > 8) {
+      quarterStartMonth = 9
+    }
+    return quarterStartMonth
+  }
+  let getMonthDays = (myMonth) => {
+    var monthStartDate = new Date(nowYear, myMonth, 1)
+    var monthEndDate = new Date(nowYear, myMonth + 1, 1)
+    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
+    return days
+  }
+  let getPriorSeasonFirstDay = (year, month) => {
+    // var quarterMonthStart = 0
+    var spring = 0
+    var summer = 3
+    var fall = 6
+    var winter = 9
+    // 月份从0-11
+    if (month >= 0 && month <= 2) {
+      year--
+      month = winter
+    } else if (month >= 3 && month <= 6) {
+      month = spring
+    } else if (month >= 7 && month <= 9) {
+      month = summer
+    } else if (month >= 10 && month <= 12) {
+      month = fall
+    }
+    return new Date(year, month, 1)
+  }
+  let getPreviousSeason = () => {
+    // 起止日期数组
+    var startStop = []
+    // 获取当前时间
+    // var currentDate = now
+    // 获得当前月份0-11
+    var currentMonth = nowMonth
+    // 获得当前年份4位年
+    var currentYear = nowYear
+    // 上季度的第一天
+    var priorSeasonFirstDay = getPriorSeasonFirstDay(currentYear, currentMonth)
+    // 上季度的最后一天
+    var priorSeasonLastDay = new Date(priorSeasonFirstDay.getFullYear(), priorSeasonFirstDay.getMonth() + 2, getMonthDays(priorSeasonFirstDay.getFullYear(), priorSeasonFirstDay.getMonth() + 2))
+    // 添加至数组
+    startStop.push(priorSeasonFirstDay)
+    startStop.push(priorSeasonLastDay)
+    return startStop
+  }
+  let now = new Date() // 当前日期
+  // let nowDayOfWeek = now.getDay() // 今天本周的第几天
+  // let nowDay = now.getDate() // 当前日
+  let nowMonth = now.getMonth() // 当前月
+  let nowYear = now.getFullYear() // 当前年
+  return {
+    currentStartDate: nowYear + '-1' + '-1',
+    currentEndDate: nowYear + '-12' + '-31',
+    quarterStartDate: setTimeFormat(new Date(nowYear, getQuarterStartMonth(), 1)),
+    quarterEndDate: setTimeFormat(new Date(nowYear, getQuarterStartMonth() + 2, getMonthDays(getQuarterStartMonth() + 2))),
+    getPreviousSeason: getPreviousSeason()
+  }
+}
+
+export default {
+  name: 'timeSearchForm',
+
+  props: ['filter'],
+
+  data () {
+    return {
+      form: {
+        from: checkDate().currentStartDate,
+        to: checkDate().currentEndDate,
+        period: 'currentfascalyear',
+        dataUserId: ''
+      },
+      checkDate: checkDate()
+    }
+  },
+
+  created () {
+  },
+
+  computed: {
+    userArr () {
+      let _ret = this.filter
+      if (_ret && _ret.length !== 0) {
+        let _userArr = _ret.filter.find(item => item.key === 'dataUserId').value
+        this.form.dataUserId = _userArr[0].key
+        return _userArr
+      } else {
+        return []
+      }
+    }
+  },
+
+  methods: {
+    setFullYear (year) {
+      let d = new Date()
+      d.setFullYear(year)
+      this.form.from = d.getFullYear() + '-01-01'
+      this.form.to = d.getFullYear() + '-12-31'
+    },
+    periodChangeEvent (val) {
+      this.checkYear = ''
+      if (val === 'currentfascalyear') {
+        this.form.from = this.checkDate.currentStartDate
+        this.form.to = this.checkDate.currentEndDate
+      } else if (val === 'thisseason') {
+        this.form.from = this.checkDate.quarterStartDate
+        this.form.to = this.checkDate.quarterEndDate
+      } else if (val === 'lastseason') {
+        this.form.from = this.checkDate.getPreviousSeason[0]
+        this.form.to = this.checkDate.getPreviousSeason[1]
+      }
+    },
+    setSearchTime () {}
+  },
+
+  watch: {
+    'form': {
+      handler (val) {
+        let _val = JSON.parse(JSON.stringify(val))
+        this.$emit('update:form', _val)
+      },
+      deep: true,
+      immediate: true
+    }
+  }
+}
+</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;
+  }
+  .el-dropdown {
+    top: -1px;
+  }
+  .analysis-client .el-button-group > .el-button {
+    color: #333;
+    background-color: #fff;
+    border: 1px solid #ccc;
+  }
+  .analysis-client .el-dropdown > .el-button {
+    padding-left: 6px;
+    padding-right: 6px;
+    border-left-width: 1px;
+    border-left-color: #ccc;
+  }
+  .analysis-client .trigger-year {
+    color: #333;
+    background-color: #fff;
+    border-color: #ccc;
+    border-right: 1px solid #ccc !important;
+  }
+  .analysis-client .head-date-button {
+    color: #fff;
+    background-color: #333744;
+    border-color: #282b35;
+  }
+  .analysis-client .check-year {
+    color: #fff !important;
+    background-color: #17a2b8 !important;
+    border-color: #17a2b8 !important;
+  }
+</style>