实施数据

src/apis/analysis.js

@@ -20,6 +20,12 @@ export default {
   getImplement: {
     url: '/vue/analysis/get-implement'
   },
+  getImplementChart: {
+    url: '/vue/analysis/get-implement-chart'
+  },
+  getFilterImplementChart: {
+    url: '/vue/supplier/get-filter-implement-chart'
+  },
   getFilterSalesGoal: {
     url: '/vue/analysis/get-filter-sales-goal'
   },

src/components/analysis/implement/implement.js

+export default {
+  methods: {
+    /* eslint-disable */
+    c (id, data) {
+      let _data = data.values
+      Highcharts.chart(id, {
+      	chart: {
+      		type: 'column'
+      	},
+      	title: {
+      		text: ''
+      	},
+      	subtitle: {
+      		text: ''
+      	},
+      	xAxis: {
+          type: 'category',
+          gridLineWidth: 1,
+          labels: {
+    				useHTML:true
+          }
+      	},
+      	yAxis: {
+      		title: {
+      			text: ''
+      		},
+          gridLineWidth: 1,
+      		labels: {
+      			formatter: function () {
+      				return (this.value / 10000) + '万'
+      			},
+      		},
+      		plotLines:[{
+      			color:'red',
+      			dashStyle:'solid',
+      			value: _data.average,
+      			label: _data.average + '',
+      			width:2
+      		}]
+      	},
+      	legend: {
+      		enabled: false
+      	},
+      	plotOptions: {
+      		series: {
+      			borderWidth: 0,
+      			dataLabels: {
+      				enabled: true,
+      				format: '{point.y}'
+      			}
+      		}
+      	},
+      	tooltip: {
+      		headerFormat: '<span style="font-size:12px">业绩分析</span><br>',
+          pointFormat: '<span>{point.name}</span>: <b>{point.y}</b><br/>'
+      	},
+      	series: [{
+      		colorByPoint: true,
+          data: _data.summary
+      	}]
+      });
+    }
+  }
+}

src/components/analysis/implement/implementHome.vue

+<template>
+  <section>
+    <div class="content">
+      <time-search-form
+        ref="timeSearchForm"
+        formSearchKey="projectSearch"
+        :filter="filter"
+        @update:form="search => timeSearchForm(search)">
+      </time-search-form>
+      <div class="page-body-content">
+        <div class="mb10">
+          <singleRadioTool
+            :form-item="type"
+            :options-list="navArray"
+            @update:item="val => { typeChange(val) }">
+          </singleRadioTool>
+        </div>
+        <div class="mt10">
+          <el-row class="header-title" style="height: 100%;">
+            <el-col>
+              <span class="title-two">实施简报</span>
+              <countArr :list="result.countList"></countArr>
+            </el-col>
+          </el-row>
+          <div class="header-title header-flex" style="height: 100%;">
+            <div>
+              <span class="title-two">实施工程师统计信息</span>
+              <div id="key" style="height:400px;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import SearchHeader from '../../common/searchHeader'
+import SearchForm from '../../common/SearchForm'
+import countArr from '../analysis/countArr'
+import TimeSearchForm from './searchForm'
+import singleRadioTool from '../../common/singleRadioTool'
+import preSales from './implement.js'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+  name: 'caseHome',
+
+  mixins: [preSales],
+
+  components: {
+    SearchHeader,
+    SearchForm,
+    TimeSearchForm,
+    singleRadioTool,
+    countArr
+  },
+
+  data () {
+    return {
+      filter: [],
+      form: {
+      },
+      type: 'all',
+      navArray: [],
+      result: {
+        countList: []
+      }
+    }
+  },
+
+  mounted () {
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.getFilter()
+    },
+
+    getSalesChart (params) {
+      requestAPI(api.getImplementChart, params)
+        .then(res => {
+          this.result.countList = res.counts
+          this.c('key', res.chars.individualJournalContributions)
+        })
+    },
+
+    // 1.查询条件
+    getFilter () {
+      requestAPI(api.getFilterImplementChart).then(res => {
+        this.filter = res
+      })
+    },
+
+    typeChange (val) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, { 'CaseSearch[case_status]': val })
+      this.getList(ret)
+    },
+
+    // 3.2关键字后面的重置
+    searchClear () {
+    },
+
+    // 5.3 TimeSearchForm
+    timeSearchForm (search) {
+      this.getSalesChart(search)
+    }
+
+  }
+}
+</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;
+  }
+  & .btn-primary .badge {
+    color: #333744;
+    background-color: #fff;
+  }
+  & .badge {
+    position: relative;
+    top: 0px;
+    left: -5px;
+    display: inline-block;
+    padding: 0px 5px;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+    background:white;
+    color:#333744;
+  }
+  i {
+    display: inline-block;
+    padding-right: 3px;
+  }
+}
+</style>

src/components/analysis/implement/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="thisweek">本周</el-radio-button>
+                <el-radio-button label="lastweek">上周</el-radio-button>
+                <el-radio-button label="thismonth">本月</el-radio-button>
+                <el-radio-button label="lastmonth">上月</el-radio-button>
+              </el-radio-group>
+              <el-button-group>
+                <el-button type="primary" size="mini" :class="setYearClass" @click="triggerYear">{{setYearText}}
+                </el-button>
+                <el-dropdown size="small" placement="bottom-start" @command="handleCommand" trigger="click">
+                  <el-button type="primary" size="mini" icon="el-icon-caret-bottom" class="trigger-year yearClass"></el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item :command="year.value" v-for="(year, key) in perYears" :key="key">{{year.name}}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-button-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 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',
+    startWeek: setTimeFormat(new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)),
+    endWeek: setTimeFormat(new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek))),
+    beforeStartWeek: setTimeFormat(new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 7)),
+    beforeEndWeek: setTimeFormat(new Date(nowYear, nowMonth, nowDay - nowDayOfWeek - 1)),
+    startMonth: setTimeFormat(new Date(nowYear, nowMonth, 1)),
+    endMonth: setTimeFormat(new Date(nowYear, nowMonth + 1, 0)),
+    beforeStartMonth: setTimeFormat(new Date(nowYear, nowMonth - 1, 1)),
+    beforeEndMonth: setTimeFormat(new Date(nowYear, nowMonth, 0))
+  }
+}
+const perYears = [
+  {
+    name: '本财年',
+    value: 'currentfascalyear'
+  },
+  {
+    name: '2017年',
+    value: 'year2017'
+  },
+  {
+    name: '2018年',
+    value: 'year2018'
+  },
+  {
+    name: '2019年',
+    value: 'year2019'
+  }
+]
+export default {
+  name: 'timeSearchForm',
+
+  props: ['filter'],
+
+  data () {
+    return {
+      form: {
+        from: checkDate().currentStartDate,
+        to: checkDate().currentEndDate,
+        period: '',
+        dataUserId: ''
+      },
+      perYears,
+      checkYear: 'currentfascalyear',
+      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 []
+      }
+    },
+
+    setYearText () {
+      let year = this.perYears.find(i => i.value === this.checkYear)
+      if (year) {
+        return year.name
+      } else {
+        return '本财年'
+      }
+    },
+
+    setYearClass () {
+      if (this.form.period === '' && this.checkYear !== '') {
+        return 'check-year'
+      } else {
+        return ''
+      }
+    }
+  },
+
+  methods: {
+    triggerYear () {
+      if (this.checkYear === '') {
+        this.checkYear = 'currentfascalyear'
+        this.form.period = ''
+        this.setFullYear(new Date().getFullYear())
+        let _val = JSON.parse(JSON.stringify(this.form))
+        if (this.checkYear !== '') {
+          _val.period = this.checkYear
+        }
+        this.$emit('update:form', _val)
+      }
+    },
+
+    handleCommand (command) {
+      this.checkYear = command
+      this.form.period = ''
+      if (command === 'currentfascalyear') {
+        this.setFullYear(new Date().getFullYear())
+      } else {
+        this.setFullYear(command.replace(/[^0-9]/ig, ''))
+      }
+      let _val = JSON.parse(JSON.stringify(this.form))
+      if (this.checkYear !== '') {
+        _val.period = this.checkYear
+      }
+      this.$emit('update:form', _val)
+    },
+    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 === 'thisweek') {
+        this.form.from = this.checkDate.startWeek
+        this.form.to = this.checkDate.endWeek
+      } else if (val === 'lastweek') {
+        this.form.from = this.checkDate.beforeStartWeek
+        this.form.to = this.checkDate.beforeEndWeek
+      } else if (val === 'thismonth') {
+        this.form.from = this.checkDate.startMonth
+        this.form.to = this.checkDate.endMonth
+      } else if (val === 'lastmonth') {
+        this.form.from = this.checkDate.beforeStartMonth
+        this.form.to = this.checkDate.beforeEndMonth
+      }
+    },
+    setSearchTime () {}
+  },
+
+  watch: {
+    'form': {
+      handler (val) {
+        let _val = JSON.parse(JSON.stringify(val))
+        if (this.checkYear !== '') {
+          _val.period = this.checkYear
+        }
+        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>

src/routes/analysis.js

@@ -4,6 +4,7 @@ import SalesGoalHome from '../components/analysis/sales-goal/SalesGoalHome'
 import PreSalesHome from '../components/analysis/pre-sales/preSalesHome'
 import PreSaleAnalyze from '../components/analysis/pre-sales-analyze/preSalesAnalyzeHome'
 import ImplementAnalyze from '../components/analysis/implement-analyze/implementAnalyzeHome'
+import ImplementHome from '../components/analysis/implement/implementHome'
 const routes = [{
   path: '/analysis',
   name: 'analysis',
@@ -28,5 +29,9 @@ const routes = [{
   path: '/implementAnalyze',
   name: 'implementAnalyze',
   component: ImplementAnalyze
+}, {
+  path: '/implement',
+  name: 'implement',
+  component: ImplementHome
 }]
 export default routes