销售任务

src/apis/analysis.js

@@ -7,5 +7,8 @@ export default {
   },
   getSales: {
     url: '/vue/analysis/get-sales'
+  },
+  getSalesGoal: {
+    url: '/vue/analysis/get-sales-goal'
   }
 }

src/components/analysis/sales-goal/salesGoal.js

+export default {
+  methods: {
+    /* eslint-disable */
+    c (categories, item) {
+      Highcharts.chart(item.name, {
+      	chart: {
+      		type: 'spline'
+      	},
+      	title: {
+      		text: `${item.name}${item.year}年销售任务`
+      	},
+      	subtitle: {
+      		text: ''
+      	},
+      	xAxis: {
+          title: {
+            text: `${item.name}${item.year}年销售任务`
+          },
+          labels: {
+    				rotation: -45
+    			},
+      		categories: categories
+      	},
+      	yAxis: {
+          max: Math.ceil(item.goal_profit / 500000) * 500000,
+      		title: {
+      			text: ''
+      		},
+      		labels: {
+      			formatter: function () {
+      				return (this.value / 10000) + '万'
+      			}
+      		},
+          plotLines:[{
+      			color:'#7cb5ec',
+      			dashStyle:'solid',
+      			value: item.goal_profit,
+      			label: {
+              text: (item.goal_profit / 10000) + '万元'
+            },
+      			width:2
+      		}]
+      	},
+        legend: {
+          enabled: false
+        },
+      	tooltip: {
+      		crosshairs: true,
+      		shared: true
+      	},
+      	plotOptions: {
+      		spline: {
+      			marker: {
+      				radius: 4,
+      				lineColor: '#666666',
+      				lineWidth: 1
+      			}
+      		}
+      	},
+      	series: [{
+      		name: item.name,
+          data: item.data_profits
+      	}, {
+      		name: item.name,
+      		data: item.data_currents
+        }]
+      });
+
+    }
+  }
+}

src/components/analysis/sales-goal/salesGoalHome.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>
+      <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">
+          <div class="header-title header-flex" style="height: 100%;">
+            <div  v-for="item in chartTypeArray">
+              <span class="title-two">{{ item.name }}</span>
+              <div :id="item.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 '../analysis/timeSearchForm'
+import singleRadioTool from '../../common/singleRadioTool'
+import salesGoal from './salesGoal.js'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+  name: 'caseHome',
+
+  mixins: [salesGoal],
+
+  components: {
+    SearchHeader,
+    SearchForm,
+    TimeSearchForm,
+    singleRadioTool,
+    countArr
+  },
+
+  data () {
+    return {
+      filter: [],
+      form: {
+      },
+      type: 'all',
+      navArray: [],
+      result: {
+        countList: []
+      },
+      chartTypeArray: []
+    }
+  },
+
+  mounted () {
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.getFilter()
+      this.getSalesChart()
+    },
+
+    getSalesChart () {
+      let t = this
+      requestAPI(api.getSalesGoal, {})
+        .then(res => {
+          res.data.list.forEach(item => {
+            this.chartTypeArray.push({
+              key: item.name,
+              name: item.name
+            })
+          })
+          this.$nextTick(function () {
+            res.data.list.forEach(item => {
+              t.c(res.data.categories, item)
+            })
+          })
+        })
+    },
+
+    // 1.查询条件
+    getFilter () {
+      requestAPI(api.getFilterSalesChart).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
+      })
+    },
+
+    typeChange (val) {
+      let ret = this.setParams({
+        ...this.form,
+        page: this.pagenation.thispage
+      }, { 'CaseSearch[case_status]': val })
+      this.getList(ret)
+    },
+
+    // 3.2关键字后面的重置
+    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)
+    }
+
+  }
+}
+</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/sales/dataArchiveProfit.js

@@ -23,7 +23,7 @@ export default {
           labels: {
       			formatter: function () {
       				return (this.value / 10000) + '万'
-      			},
+      			}
       		}
       	},
       	plotOptions: {

src/routes/analysis.js

 import AnalysisHome from '../components/analysis/analysis/analysisHome'
 import SalesHome from '../components/analysis/sales/salesHome'
+import SalesGoalHome from '../components/analysis/sales-goal/SalesGoalHome'
 const routes = [{
   path: '/analysis',
-  name: 'analysisHome',
+  name: 'analysis',
   component: AnalysisHome
 }, {
   path: '/sales',
-  name: 'salesHome',
+  name: 'sales',
   component: SalesHome
+}, {
+  path: '/salesGoal',
+  name: 'salesGoal',
+  component: SalesGoalHome
 }]
 export default routes