管理驾驶舱优化

src/api/kzksApi.js

@@ -33,7 +33,8 @@ const costModelInform = (params)=>postAction("/costModelList/costModelList/infor
 // 首页/报表/驾驶舱
 const getZhibiaoCollect = (params)=>getAction("/index/getCollect", params);
 const getdataByHt = (params)=>postAction("/index/getContractAmountInfo", params);
-const getdataByChb = (params)=>getAction("/index/getEightCost", params);
+const getdataByChb = (params)=>getAction("/index/getEightCostsInfo", params);
+// const getdataByChb = (params)=>getAction("/index/getEightCost", params);
 const getdataByLr = (params)=>getAction("/index/countLreByDate", params);
 const getdataBySk = (params)=>getAction("/index/countTotalReceivedByDate", params);
 

src/views/module_kzks/dashboard/Analysis.vue

@@ -6,24 +6,24 @@
     <template v-else>
       <a-row :gutter="24">
         <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px', cursor: 'pointer' }" v-for="(item, index) in zhibiaoTotal" :key="index" @click="clickItemTotal(item, index)">
-          <chart-card :loading="loading" :title="item.title+'(元) / 当月'" :total="item.monthTotal+''">
+          <chart-card :loading="loading" :title="item.title+' (万元) / 当月'" :total="totalPrice(item.monthTotal)">
             <a-tooltip :title="`点击查看${item.title}明细`" slot="action">
               <a-icon type="info-circle-o" />
             </a-tooltip>
             <div>
-              <trend flag="up" style="margin-right: 16px;">
+              <trend :flag="setJiantou(item.monthTb)" style="margin-right: 16px;">
                 <span slot="term">月同比</span>
-                {{(Number(item.monthTb)*100).toFixed(2)}}%
+                {{comTbHb(item.monthTb)}}%
               </trend>
-              <trend flag="down">
+              <trend :flag="setJiantou(item.monthHb)">
                 <span slot="term">月环比</span>
-                {{(Number(item.monthHb)*100).toFixed(2)}}%
+                {{comTbHb(item.monthHb)}}%
               </trend>
             </div>
-            <template slot="footer">年{{item.title}}<span> {{item.yearTotal}}0</span>
-              <trend flag="up" style="float: right;">
+            <template slot="footer">年{{item.title}}<span> {{totalPriceYear(item.yearTotal)}}</span>
+              <trend :flag="setJiantou(item.yearTb)"  style="float: right;">
                 <span slot="term">同比</span>
-                {{(Number(item.yearTb)*100).toFixed(2)}}%
+                {{comTbHb(item.yearTb)}}%
               </trend>
             </template>
           </chart-card>
@@ -36,8 +36,8 @@
           <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
             <div class="extra-wrapper" slot="tabBarExtraContent">
               <div class="extra-item">
-                <a-button :type=searchTypeMonth @click="searchTypeChange('month')">按月查询</a-button>
-                <a-button :type="searchTypeYear" @click="searchTypeChange('year')">按年查询</a-button>
+                <a-button :type="searchType==='month'?'primary':'link'" @click="searchTypeChange('month')">按月查询</a-button>
+                <a-button :type="searchType==='year'?'primary':'link'" @click="searchTypeChange('year')">按年查询</a-button>
               </div>
               <!-- <a-range-picker :style="{width: '256px'}" /> -->
               <a-range-picker
@@ -45,30 +45,42 @@
                 :format="searchFormat"
                 :mode="searchMode"
                 :value="dateValue"
+                :open="datePickShow"
                 @panelChange="handlePanelChange"
+                @openChange="datePickShow = !datePickShow"
               >
                 <template slot="renderExtraFooter">
-                  <div style="width: 100%;">
-                    <a-button type="primary" style="float: right;" @click="handleDateSure">确定</a-button>
+                  <div style="width: 540px;">
+                    <a-button type="primary" style="float: right;margin: 8px;" @click="handleDateSure">确定</a-button>
                   </div>
                 </template>
               </a-range-picker>
             </div>
             <a-tab-pane loading="true" :tab="chartTitle+'图表'" key="1">
               <a-row>
-                <a-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
-                  <!-- <bar title="销售额排行" :dataSource="barData"/> -->
-                  <twoYAxisChart v-if="chooseValue === 'hte'"  :xAxisData="twoYAxisXAxisData" :seriesData="twoYAxisSeriesData" :title="chartTitle"
-                  style="height: 360px;"
-                  class="line-timePrice common-layout"></twoYAxisChart>
-                  <lineBarChart v-else :xAxisData="lineBarXAxisData" :seriesData="lineBarSeriesData" :title="chartTitle" 
-                  style="height: 360px;"
-                  class="line-timePrice common-layout"></lineBarChart>
-                </a-col>
-                <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
-                  <rank-list title="详情" :list="rankList"/>
-                  <!-- <pieContentChart style="height: 360px;"></pieContentChart> -->
-                </a-col>
+                <template v-if="chooseValue !== 'chb'">
+                  <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
+                  <!-- <a-col :xl="chooseValue === 'chb'?16:24" :lg="chooseValue === 'chb'?16:24" :md="chooseValue === 'chb'?16:24" :sm="24" :xs="24"> -->
+                    <!-- <bar title="销售额排行" :dataSource="barData"/> -->
+                    <twoYAxisChart v-if="chooseValue === 'hte'" ref="twoYAxisChartRef" :twoYAxisData="twoYAxisData"
+                    style="height: 360px;"
+                    class="line-timePrice common-layout"></twoYAxisChart>
+                    <lineBarChart v-else ref="lineBarChartRef" :xAxisData="lineBarXAxisData" :seriesData="lineBarSeriesData" :title="chartTitle" 
+                    style="height: 360px;"
+                    class="line-timePrice common-layout"></lineBarChart>
+                  </a-col>
+                </template>
+                <template v-if="chooseValue === 'chb'">
+                  <a-col :xl="16" :lg="16" :md="16" :sm="24" :xs="24">
+                    <lineBarChartChb ref="lineBarChartChbRef" :xAxisData="chbXAxisData" :seriesData="chbSeriesData" :title="chartTitle" 
+                      style="height: 360px;"
+                      class="line-timePrice common-layout"></lineBarChartChb>
+                  </a-col>
+                  <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
+                    <rank-list title="详情" :list="rankList"/>
+                    <!-- <pieContentChart style="height: 360px;"></pieContentChart> -->
+                  </a-col>
+                </template>
               </a-row>
             </a-tab-pane>
             <!-- <a-tab-pane tab="销售趋势" key="2">
@@ -139,19 +151,23 @@
   import Trend from '@/components/Trend'
 
   import lineBarChart from './components/lineBarChart.vue'
+  import lineBarChartChb from './components/lineBarChartChb.vue'
   import rankingChart from './components/rankingChart.vue'
   import pieContentChart from './components/pieContentChart.vue'
   import twoYAxisChart from './components/twoYAxisChart.vue'
 
   import { getLoginfo,getVisitInfo } from '@/api/api'
 
-  const rankList = []
-  for (let i = 0; i < 7; i++) {
-    rankList.push({
-      name: '费用 ' + (i+1) + '5%',
-      total: 1234.56 - i * 100
-    })
-  }
+  const chb8Names = [
+    { name: '外协费', value: 'wxf' },
+    { name: '材料费', value: 'clf' },
+    { name: '专用费', value: 'zyf' },
+    { name: '事务费', value: 'swf' },
+    { name: '燃动费', value: 'rldlf' },
+    { name: '工资费', value: 'gzjlwf' },
+    { name: '固资费', value: 'gdzczj' },
+    { name: '管理费', value: 'glf' },
+  ]
   export default {
     name: "dashboard-Analysis",
     components: {
@@ -160,6 +176,7 @@
       RankList,
 
       lineBarChart,
+      lineBarChartChb,
       rankingChart,
       pieContentChart,
       twoYAxisChart,
@@ -167,7 +184,7 @@
     data() {
       return {
         loading: true,
-        rankList,
+        rankList: [],
         loginfo:{},
         visitInfo:[],
 
@@ -213,12 +230,12 @@
 
 
         // 日期区间选择模块
+        searchType: 'month',
         searchPlaceholder: ['开始月份', '结束月份'],
-        searchTypeMonth: 'primary', // 按月查询按钮
-        searchTypeYear: 'link', // 按年查询按钮
         searchFormat: 'YYYY-MM', // 日期区间选择器format（页面数据显示格式）
         dateValue: [null, null], // 日期区间选择器format（页面显示的数据）
         searchMode: ['month', 'month'], // 日期区间选择器mode（选择器形式）
+        datePickShow: false,
         // 日期区间选择传参数据
         searchParams: {
           time: '',
@@ -233,6 +250,8 @@
         // 折线柱形总览图
         lineBarXAxisData: [],
         lineBarSeriesData: [],
+        chbXAxisData: [],
+        chbSeriesData: [],
         // 排行
         rankingSeriesData: [50, 42, 26, 20, 15, 14, 12, 8, 5, 1],
         rankingYAxisNames: ["部门06", "部门01", "部门05", "部门10", "部门07", "部门04", "部门03", "部门08", "部门09", "部门02"],
@@ -240,8 +259,7 @@
 
 
         // 双y轴总览图
-        twoYAxisXAxisData: [],
-        twoYAxisSeriesData: [],
+        twoYAxisData: {},
         // 排行
 
 
@@ -297,10 +315,42 @@
 
       }
     },
+    computed: {
+      // 判断箭头样式
+      setJiantou(){
+        // 闭包实现computed中传参
+        return function (value) {
+          var item = Number(value) > 0 ? 'up' : 'down'
+          return item
+        }
+      },
+      totalPrice(){
+        return function (value) {
+          var item = (Number(value) / 10000).toFixed(2)
+          // console.log(item)
+          return '￥'+item
+        }
+      },
+      totalPriceYear(){
+        return function (value) {
+          var item = (Number(value) / 10000).toFixed(2)
+          console.log(item)
+          return item + ' 万元'
+        }
+      },
+      // 将后端数据准换成整数%显示
+      comTbHb(){
+        return function (value) {
+          // console.log(Math.abs('-0.35'))
+          var item = (Math.abs(value) * 100).toFixed(0)
+          return item
+        }
+      },
+    },
     created() {
       this.initLogInfo();
       this.getZhibiaoCollect()
-      this.setNowDate('month')
+      this.setNowDate()
     },
     methods: {
       getZhibiaoCollect(){
@@ -334,16 +384,18 @@
         const now = new Date()
         const year = now.getFullYear(); // 年
         const month = now.getMonth() + 1; // 月
+        const monthBetter = month > 10 ? month : '0' + month
         const beginDate = `${year}-01`
-        const endDate = `${year}-${month}`
+        const endDate = `${year}-${monthBetter}`
         this.dateValue = [beginDate, endDate]
-        if(type === 'month'){
+        var sType = this.searchType ? this.searchType : type
+        if(sType === 'month'){
           this.searchParams = {
             time: 'month',
             beginDate: beginDate,
             endDate: endDate,
           }
-        } else if (type === 'year') {
+        } else if (sType === 'year') {
           this.searchParams = {
             time: 'year',
             beginDate: year - 1,
@@ -354,11 +406,19 @@
       },
       // 点击指标转换下方数据
       clickItemTotal(item, index){
-        console.log(item, index)
+        // console.log(item, index)
         this.chooseValue = item.value
         this.chartTitle = item.value === 'hte' ? '合同' : item.title
+        // 调用showLoading方法--解决卡顿和数据闪等问题
+        setTimeout(() => {
+          // 定时器解决v-if下第一时间无法获取ref的问题
+          if(this.$refs.lineBarChartRef){this.$refs.lineBarChartRef.uEcharts.showLoading({text: '加载中...'});}
+          // 取消设置，因为一开始就很快
+          if(this.$refs.twoYAxisChartRef){this.$refs.twoYAxisChartRef.uEcharts.showLoading({text: '加载中...'});}
+          if(this.$refs.lineBarChartChbRef){this.$refs.lineBarChartChbRef.uEcharts.showLoading({text: '加载中...'});}
+        }, 1);
         // this.lineBarSeriesData = item.lineBarSeriesData
-        console.log(this.dateValue)
+        // console.log(this.dateValue)
         this.getDataByDate()
       },
       // 获取时间变化图表数据
@@ -368,20 +428,7 @@
             getdataByHt(this.searchParams).then(res => {
               console.log(res)
               if (res.success) {
-                this.twoYAxisXAxisData = res.result.xaxisData
-                this.twoYAxisSeriesData = [
-                  {
-                    name: '合同数量',
-                    type: 'line',
-                    data: res.result.contractTotal,
-                  },
-                  {
-                    name: '合同额',
-                    type: 'bar',
-                    barWidth: '30%',
-                    data: res.result.contractAmount,
-                  }
-                ]
+                this.twoYAxisData = res.result
               }else{
                 this.$message.warning(res.message)
               }
@@ -407,15 +454,42 @@
               // this.loading = false
             })
             break;
+          case 'ske':
+            getdataBySk(this.searchParams).then(res => {
+              console.log(res)
+              if (res.success) {
+                this.lineBarXAxisData = res.result.xaxisData
+                this.lineBarSeriesData = [
+                  {
+                    name: '收款额',
+                    data: res.result.seriesData,
+                  }
+                ]
+              }else{
+                this.$message.warning(res.message)
+              }
+            }).finally(() => {
+              // this.loading = false
+            })
+            break;
           case 'chb':
             getdataByChb(this.searchParams).then(res => {
               console.log(res)
+              var chartsData = res.result[0].chartInfoList[0]
+              var chbRankingData = res.result[0].eightCostPaiHang
+              this.rankList = chbRankingData.map(res => {
+                var findItem = chb8Names.find(item => item.value === res.name)
+                return{
+                  name: findItem.name + ' ' + res.proportion + '%',
+                  total: res.value
+                }
+              })
               if(res){
-                this.lineBarXAxisData = res[0].xaxisData
-                this.lineBarSeriesData = [
+                this.chbXAxisData = chartsData.xaxisData
+                this.chbSeriesData = [
                   {
                     name: '成本额',
-                    data: res[0].seriesData,
+                    data: chartsData.seriesData,
                   }
                 ]
               }
@@ -430,8 +504,7 @@
       // 查询类型选择：按年、按月
       searchTypeChange(type){
         // this.resetParams()
-        this.searchTypeMonth = type === 'month' ? 'primary' : 'link'
-        this.searchTypeYear = type === 'year' ? 'primary' : 'link'
+        this.searchType = type
         this.searchFormat = type === 'month' ? 'YYYY-MM' : 'YYYY'
         this.searchPlaceholder = type === 'month' ? ['开始月份', '结束月份'] : ['开始年份', '结束年份']
         this.searchMode = [type, type]
@@ -460,6 +533,7 @@
       handleDateSure(){
         console.log(this.searchParams)
         this.getDataByDate()
+        this.datePickShow = false
       },
       initLogInfo () {
         getLoginfo(null).then((res)=>{

src/views/module_kzks/dashboard/components/lineBarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="lineBarCharts" ref="lineBarCharts" />
+  <div class="lineBarCharts" ref="lineBarCharts"/>
 </template>
 
 <script>
@@ -24,7 +24,7 @@ export default {
     return {
       uEcharts: null,
       uOption: null,
-
+      spinning: true,
     }
   },
   watch: {
@@ -149,7 +149,8 @@ export default {
           data: res.data,
         }
       })
-      console.log(this.uOption.series)
+      // console.log(this.uOption.series)
+      this.uEcharts.hideLoading()
       this.uEcharts.setOption(this.uOption, true)
     }
   }
@@ -157,6 +158,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.a-spin{
+  height: 100%;
+  .ant-spin-container{
+    height: 100%;
+  }
+}
 .lineBarCharts{
   width: 100%;
   height: 100%;

src/views/module_kzks/dashboard/components/lineBarChartChb.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="lineBarCharts" ref="lineBarCharts" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: '',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    xAxisData: {
+      type: Array,
+      default: []
+    },
+    seriesData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      uEcharts: null,
+      uOption: null,
+
+    }
+  },
+  watch: {
+    seriesData: {
+      handler(newValue, oldValue){
+        console.log(newValue, oldValue)
+        if(newValue){
+          this.setSeriesData(newValue)
+        }
+      },
+      deep: true,
+      // immediate: true
+    }
+  },
+  created () {
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+      this.setSeriesData()
+    })
+  },
+  methods: {
+    initChart(){
+      this.uEcharts = echarts.init(this.$refs.lineBarCharts)
+
+      let color = ['#42CEAF', '#FF882A', '#16B4FE', '#747AFE','#f9c129', '#13c2c2', '#79ce42', '#f55837'];
+      // fc8452  
+      this.uOption = {
+        // title: {
+        //   text: this.title + '图',
+        //   left: 'center'
+        // },
+        color: color,
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          bottom: '10%'
+        },
+        legend: {
+          type: 'scroll',
+          width: '60%',
+          // orient: 'vertical',
+          // right: 90,
+          // left: 20,
+          top: 0,
+          // bottom: 20,
+          // selectedMode: 'single',
+          padding: [
+              5,  // 上
+              150, // 右
+              0,  // 下
+              20, // 左
+          ],
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            // dataView: { readOnly: false }, // 展示数据--不过没用
+            magicType: { type: ['bar', 'line'] },
+            // restore: {}, // 还原
+            saveAsImage: {}
+          }
+        },
+        // dataZoom: [
+        //   {
+        //     startValue: '2023-02-01'
+        //   },
+        //   {
+        //     type: 'inside'
+        //   }
+        // ],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: true, // 解决数据溢出X轴的问题
+          data: this.xAxisData
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            // 可以动态设置是数量还是金额
+            formatter: '{value} '
+          }
+        },
+        series: [
+          // {
+          //   name: 'Highest',
+          //   type: 'line',
+          //   data: [10, 11, 13, 11, 12, 12, 9],
+          //   markPoint: {
+          //     data: [
+          //       { type: 'max', name: 'Max' },
+          //       { type: 'min', name: 'Min' }
+          //     ]
+          //   },
+          //   // markLine: {
+          //   //   data: [{ type: 'average', name: 'Avg' }]
+          //   // }
+          // },
+        ]
+      };
+
+      this.uOption && this.uEcharts.setOption(this.uOption);
+      window.addEventListener('resize', ()=>{
+        this.uEcharts.resize()
+      })
+    },
+    setSeriesData(data){
+      // console.log(this.uEcharts)
+      var seriesData = data ? data : this.seriesData
+      // console.log(seriesData)
+      // var option = this.uOption
+      this.uOption.xAxis.data = this.xAxisData
+      this.uOption.series = seriesData.map(res => {
+        return {
+          name: res.name,
+          type: 'bar',
+          smooth: true,
+          data: res.data,
+        }
+      })
+      // console.log(this.uOption.series)
+      this.uEcharts.hideLoading()
+      this.uEcharts.setOption(this.uOption, true)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.lineBarCharts{
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/module_kzks/dashboard/components/twoYAxisChart.vue

@@ -7,28 +7,20 @@ import * as echarts from 'echarts'
 export default {
   name: '',
   props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    xAxisData: {
-      type: Array,
-      default: []
-    },
-    seriesData: {
-      type: Array,
-      default: []
+    twoYAxisData: {
+      type: Object,
+      default: ()=>{}
     }
+    
   },
   data () {
     return {
       uEcharts: null,
       uOption: null,
-
     }
   },
   watch: {
-    seriesData: {
+    twoYAxisData: {
       handler(newValue, oldValue){
         console.log(newValue, oldValue)
         if(newValue){
@@ -107,6 +99,9 @@ export default {
         yAxis: [
           {
             type: 'value',
+            // min: 0,
+            // max: this.numMax,
+            // interval: Math.ceil(this.numMax / 6),
             axisLabel: {
               // 可以动态设置是数量还是金额
               formatter: '{value} '
@@ -114,6 +109,9 @@ export default {
           },
           {
             type: 'value',
+            // min: 0,
+            // max: this.priceMax,
+            // interval: Math.ceil(this.priceMax / 6),
             axisLabel: {
               // 可以动态设置是数量还是金额
               formatter: '{value} '
@@ -144,19 +142,53 @@ export default {
     },
     setSeriesData(data){
       // console.log(this.uEcharts)
-      var seriesData = data ? data : this.seriesData
-      // console.log(seriesData)
-      // var option = this.uOption
-      this.uOption.xAxis.data = this.xAxisData
-      this.uOption.series = seriesData.map((res, index) => {
-        return {
-          name: res.name,
-          type: res.type,
-          yAxisIndex: index,
-          data: res.data,
+      console.log(data)
+      var twoYAxisData = data ? data : this.twoYAxisData
+
+      console.log(twoYAxisData)
+      var numMax = Math.max(...twoYAxisData.contractTotal)
+      console.log(numMax)
+      var priceMax = Math.max(...twoYAxisData.contractAmount)
+      this.uOption.xAxis.data = twoYAxisData.xaxisData
+      this.uOption.yAxis = [
+        {
+          type: 'value',
+          min: 0,
+          max: numMax,
+          interval: Math.ceil(numMax / 6),
+          axisLabel: {
+            // 可以动态设置是数量还是金额
+            formatter: '{value} '
+          }
+        },
+        {
+          type: 'value',
+          min: 0,
+          max: priceMax,
+          interval: Math.ceil(priceMax / 6),
+          axisLabel: {
+            // 可以动态设置是数量还是金额
+            formatter: '{value} '
+          }
+        },
+      ]
+      this.uOption.series = [
+        {
+          name: '合同数量',
+          type: 'line',
+          yAxisIndex: 0,
+          data: twoYAxisData.contractTotal,
+        },
+        {
+          name: '合同额',
+          type: 'bar',
+          yAxisIndex: 1,
+          barWidth: '30%',
+          data: twoYAxisData.contractAmount,
         }
-      })
-      console.log(this.uOption)
+      ]
+      this.uEcharts.hideLoading()
+      // // console.log(this.uOption)
       this.uEcharts.setOption(this.uOption, true)
     }
   }