销售分析

index.ejs

@@ -15,6 +15,7 @@
   <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
   <script src="https://code.highcharts.com.cn/highcharts/modules/drilldown.js">
   // <script src="https://code.highcharts.com.cn/highcharts/modules/solid-gauge.js"></script>
+  <script src="https://code.highcharts.com.cn/highcharts/themes/grid-light.js"></script>
   <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
   <script>
     (function (){

src/apis/analysis.js

 export default {
+  getFilterSalesChart: {
+    url: '/vue/analysis/get-filter-sales-chart'
+  },
   getSalesChart: {
     url: '/vue/analysis/get-sales-chart'
+  },
+  getSales: {
+    url: '/vue/analysis/get-sales'
   }
 }

src/components/analysis/analysis/analysisHome.vue

@@ -148,13 +148,14 @@ export default {
 
     // 1.查询条件
     getFilter () {
-      requestAPI(api.getCaseFilter).then(res => {
-        let _inx = res.findIndex(item => item.key === 'CaseSearch[case_status]')
-        let _newRes = res.splice(_inx, 1)
+      requestAPI(api.getFilterSalesChart).then(res => {
         this.filter = res
-        let _navArray = _newRes[0].value
-        _navArray.unshift({key: 'all', name: '全部'})
-        this.navArray = _navArray
+        // 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
       })
     },
 

src/components/analysis/sales/dataArchiveProfit.js

+export default {
+  methods: {
+    /* eslint-disable */
+    c (id, categories, data) {
+       Highcharts.chart(id, {
+      	chart: {
+      		type: 'spline'
+      	},
+      	title: {
+      		text: ''
+      	},
+      	subtitle: {
+      		text: ''
+      	},
+      	xAxis: {
+          categories: categories
+      		// categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+      	},
+      	yAxis: {
+      		title: {
+      			text: ''
+      		},
+          labels: {
+      			formatter: function () {
+      				return (this.value / 10000) + '万'
+      			},
+      		}
+      	},
+      	plotOptions: {
+      		line: {
+      			dataLabels: {
+      				// 开启数据标签
+      				enabled: true
+      			},
+      			// 关闭鼠标跟踪，对应的提示框、点击事件会失效
+      			enableMouseTracking: false
+      		}
+      	},
+        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]
+      	// }, {
+      	// 	name: '伦敦',
+      	// 	data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
+      	// }]
+      });
+    }
+  }
+}

src/components/analysis/sales/salesHome.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">
+          <el-row class="header-title" style="height: 100%;" v-for="item in chartTypeArray">
+            <el-col>
+              <span class="title-two">{{ item.name }}</span>
+              <div :id="item.key" style="height:400px;"></div>
+            </el-col>
+          </el-row>
+        </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 dataArchiveProfit from './dataArchiveProfit.js'
+import {
+  requestAPI,
+  api
+} from '@/lib/commonMixin'
+export default {
+  name: 'caseHome',
+
+  mixins: [dataArchiveProfit],
+
+  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.getSales, {})
+        .then(res => {
+          Object.keys(res.data.list).forEach(item => {
+            this.chartTypeArray.push({
+              key: res.data.list[item].key,
+              name: res.data.list[item].name
+            })
+          })
+          this.$nextTick(function () {
+            Object.keys(res.data.list).forEach(item => {
+              t.c(item, res.data.categories, res.data.list[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">
+@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/routes/analysis.js

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