售前数据

src/apis/analysis.js

@@ -10,5 +10,8 @@ export default {
   },
   getSalesGoal: {
     url: '/vue/analysis/get-sales-goal'
+  },
+  getPreSalesChart: {
+    url: '/vue/analysis/get-pre-sales-chart'
   }
 }

src/components/analysis/pre-sales/preSales.js

+export default {
+  methods: {
+    /* eslint-disable */
+    c () {
+      var chart = Highcharts.chart('key', {
+      	chart: {
+      		type: 'column'
+      	},
+      	title: {
+      		text: '堆叠柱形图'
+      	},
+      	xAxis: {
+      		categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']
+      	},
+      	yAxis: {
+      		min: 0,
+      		title: {
+      			text: '水果消费总量'
+      		},
+      		stackLabels: {  // 堆叠数据标签
+      			enabled: true,
+      			style: {
+      				fontWeight: 'bold',
+      				color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
+      			}
+      		}
+      	},
+      	legend: {
+      		align: 'right',
+      		x: -30,
+      		verticalAlign: 'top',
+      		y: 25,
+      		floating: true,
+      		backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
+      		borderColor: '#CCC',
+      		borderWidth: 1,
+      		shadow: false
+      	},
+      	tooltip: {
+      		formatter: function () {
+      			return '<b>' + this.x + '</b><br/>' +
+      				this.series.name + ': ' + this.y + '<br/>' +
+      				'总量: ' + this.point.stackTotal;
+      		}
+      	},
+      	plotOptions: {
+      		column: {
+      			stacking: 'normal',
+      			dataLabels: {
+      				enabled: true,
+      				color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
+      				style: {
+      					// 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
+      					textOutline: '1px 1px black'
+      				}
+      			}
+      		}
+      	},
+      	series: [{
+      		name: '小张',
+      		data: [5, 3, 4, 7, 2]
+      	}, {
+      		name: '小彭',
+      		data: [2, 2, 3, 2, 1]
+      	}, {
+      		name: '小潘',
+      		data: [3, 4, 4, 2, 5]
+      	}]
+      });
+    }
+  }
+}

src/components/analysis/pre-sales/preSalesHome.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%;">
+            <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  v-for="item in chartTypeArray">
+              <span class="title-two">{{ item.name }}</span>
+              <div :id="item.key" style="height:400px;"></div>
+            </div> -->
+            <div>
+              <span class="title-two">123</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 '../analysis/timeSearchForm'
+import singleRadioTool from '../../common/singleRadioTool'
+import preSales from './preSales.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()
+      this.getSalesChart()
+    },
+
+    getSalesChart () {
+      requestAPI(api.getPreSalesChart, {})
+        .then(res => {
+          this.result.countList = res.counts
+          this.c()
+        })
+    },
+
+    // 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-goal/salesGoal.js

@@ -16,16 +16,18 @@ export default {
           title: {
             text: `${item.name}${item.year}年销售任务`
           },
+          gridLineWidth: 1,
           labels: {
     				rotation: -45
     			},
       		categories: categories
       	},
       	yAxis: {
-          max: Math.ceil(item.goal_profit / 500000) * 500000,
+          max: Math.ceil(item.goal_profit / 500000) * 500000  ,
       		title: {
       			text: ''
       		},
+          gridLineWidth: 1,
       		labels: {
       			formatter: function () {
       				return (this.value / 10000) + '万'
@@ -48,15 +50,29 @@ export default {
       		crosshairs: true,
       		shared: true
       	},
-      	plotOptions: {
-      		spline: {
-      			marker: {
-      				radius: 4,
-      				lineColor: '#666666',
-      				lineWidth: 1
+        plotOptions: {
+      		column: {
+      			stacking: 'normal',
+      			dataLabels: {
+              // 柱状图里面是否显示value值
+      				// enabled: true,
+      				color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
+      				style: {
+      					// 如果不需要数据标签阴影，可以将 textOutline 设置为 'none'
+      					textOutline: '1px 1px black'
+      				}
       			}
       		}
       	},
+      	// plotOptions: {
+      	// 	spline: {
+      	// 		marker: {
+      	// 			radius: 4,
+      	// 			lineColor: '#666666',
+      	// 			lineWidth: 1
+      	// 		}
+      	// 	}
+      	// },
       	series: [{
       		name: item.name,
           data: item.data_profits

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'
+import PreSalesHome from '../components/analysis/pre-sales/preSalesHome'
 const routes = [{
   path: '/analysis',
   name: 'analysis',
@@ -13,5 +14,9 @@ const routes = [{
   path: '/salesGoal',
   name: 'salesGoal',
   component: SalesGoalHome
+}, {
+  path: '/preSales',
+  name: 'preSalesHome',
+  component: PreSalesHome
 }]
 export default routes