【开发】首页联调与修改

src/views/dashboard/AllMoneyTenEcharts.vue

@@ -10,6 +10,7 @@
 import * as echarts from 'echarts'
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
 
 export default {
   name: 'AllMoneyTenEcharts',
@@ -18,14 +19,7 @@ export default {
     return {
       disableMixinCreated: true,
       url: {
-        list: '/statistics/allProjectStatistics/listDepartment',
+        list: '/index/top10Statistics',
-      },
-      // 给定当年作为来款年份默认查询条件
-      queryParam: {
-        year: new Date().getFullYear().toString()
-      },
-      lastQueryParam: {
-        year: new Date().getFullYear().toString()
       },
       echartsData: {
         allMoney: [],
@@ -37,6 +31,7 @@ export default {
     this.loadData(1)
   },
   methods: {
+    formatMoney,
     loadData(arg) {
       if (!this.url.list) {
         this.$message.error('请设置url.list属性!')
@@ -50,7 +45,7 @@ export default {
       this.loading = true
       getAction(this.url.list, params).then((res) => {
         if (res.success) {
-          this.initEcharts(res.result.pageList.records)
+          this.initEcharts(res.result)
         }
         if (res.code === 510) {
           this.$message.warning(res.message)
@@ -61,10 +56,9 @@ export default {
       })
     },
     initEcharts(data) {
-      console.log(data)
       // 处理 x轴数据
       let xData = data.reduce((pre, val) => {
-        return pre.concat(val.departName || '')
+        return pre.concat(val.name)
       }, [])
       // 处理y轴数据
       data.map(item => {
@@ -99,7 +93,7 @@ export default {
             <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
             <span style="color:#666">${item.seriesName}</span>
 </div>
-            <div style="color:#333;">${item.data}</div>
+            <div style="color:#333;">${this.formatMoney(item.data)}</div>
           </div>
         </div>`
             })
@@ -115,6 +109,39 @@ export default {
           },
           axisLabel: {
             show: true,
+            interval:0,
+            // 坐标轴刻度标签换行处理
+            formatter: function (params) {
+              let newParamsName = '' // 最终拼接成的字符串
+              let paramsNameNumber = params.length // 实际标签的个数
+              let provideNumber = 6 // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (let p = 0; p < rowNumber; p++) {
+                  let tempStr = ''// 表示每一次截取的字符串
+                  let start = p * provideNumber // 开始截取的位置
+                  let end = start + provideNumber // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p === rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params
+              }
+              return newParamsName
+            },
             color: '#999'
           },
           // 刻度线设置

src/views/dashboard/Analysis.vue

@@ -66,6 +66,7 @@ export default {
     return {}
   },
   created() {
+    console.log(this.$store.getters.userInfo.roleCode === 'bmfzr' ||  this.$store.getters.userInfo.roleCode === 'sld')
   },
   mounted() {
   },

src/views/dashboard/DepartmentTotalEcharts.vue

@@ -10,6 +10,7 @@
 import * as echarts from 'echarts'
 import {JeroListMixin} from '@/mixins/JeroListMixin'
 import {getAction} from '@api/manage'
+import {formatMoney} from '@/utils/formatMoney'
 
 export default {
   name: 'DepartmentTotalEcharts',
@@ -18,14 +19,7 @@ export default {
     return {
       disableMixinCreated: true,
       url: {
-        list: '/statistics/allProjectStatistics/listDepartment',
+        list: '/index/overallDepartmentStatistics',
-      },
-      // 给定当年作为来款年份默认查询条件
-      queryParam: {
-        year: new Date().getFullYear().toString()
-      },
-      lastQueryParam: {
-        year: new Date().getFullYear().toString()
       },
       echartsData: {
         allMoney: [],
@@ -37,6 +31,7 @@ export default {
     this.loadData(1)
   },
   methods: {
+    formatMoney,
     loadData(arg) {
       if (!this.url.list) {
         this.$message.error('请设置url.list属性!')
@@ -50,7 +45,7 @@ export default {
       this.loading = true
       getAction(this.url.list, params).then((res) => {
         if (res.success) {
-          this.initEcharts(res.result.pageList.records)
+          this.initEcharts(res.result)
         }
         if (res.code === 510) {
           this.$message.warning(res.message)
@@ -61,10 +56,9 @@ export default {
       })
     },
     initEcharts(data) {
-      console.log(data)
       // 处理 x轴数据
       let xData = data.reduce((pre, val) => {
-        return pre.concat(val.departName || '')
+        return pre.concat(val.name)
       }, [])
       // 处理y轴数据
       data.map(item => {
@@ -99,7 +93,7 @@ export default {
             <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${item.color};border-radius: 3px"></span>
             <span style="color:#666">${item.seriesName}</span>
 </div>
-            <div style="color:#333;">${item.data}</div>
+            <div style="color:#333;">${this.formatMoney(item.data)}</div>
           </div>
         </div>`
             })
@@ -115,7 +109,39 @@ export default {
           },
           axisLabel: {
             show: true,
-            color: '#999'
+            interval:0,
+            color: '#999',
+            formatter: function (params) {
+              let newParamsName = '' // 最终拼接成的字符串
+              let paramsNameNumber = params.length // 实际标签的个数
+              let provideNumber = 8 // 每行能显示的字的个数
+              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+              /**
+               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+               */
+              // 条件等同于rowNumber>1
+              if (paramsNameNumber > provideNumber) {
+                /** 循环每一行,p表示行 */
+                for (let p = 0; p < rowNumber; p++) {
+                  let tempStr = ''// 表示每一次截取的字符串
+                  let start = p * provideNumber // 开始截取的位置
+                  let end = start + provideNumber // 结束截取的位置
+                  // 此处特殊处理最后一行的索引值
+                  if (p === rowNumber - 1) {
+                    // 最后一次不换行
+                    tempStr = params.substring(start, paramsNameNumber)
+                  } else {
+                    // 每一次拼接字符串并换行
+                    tempStr = params.substring(start, end) + '\n'
+                  }
+                  newParamsName += tempStr // 最终拼成的字符串
+                }
+              } else {
+                // 将旧标签的值赋给新标签
+                newParamsName = params
+              }
+              return newParamsName
+            },
           },
           // 刻度线设置
           axisTick: {

src/views/dashboard/IncomeSortEcharts.vue

@@ -12,74 +12,140 @@
 
 <script>
 import * as echarts from 'echarts'
+import {getAction} from '@api/manage'
 
 export default {
   name: 'IncomeSortEcharts',
   data() {
     return {
-      activeIndex:'allMoney'
+      activeIndex:'allMoney',
+      echartsInstace:null,
+      url:{
+        list:'/index/incomeClassificationStatistics'
+      }
     }
   },
   mounted() {
-    this.initEcharts()
+    // this.initEcharts()
+    this.loadData()
   },
   methods:{
     toggleEcharts(key) {
-      this.activeIndex = key
+      if(key === this.activeIndex) {
-
+        return
+      }else {
+        this.activeIndex = key
+        this.loadData()
+      }
     },
-    initEcharts() {
+    loadData() {
+      if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
+        this.echartsInstace.dispose()//销毁
+      }
+      let typeEnum = {
+        allMoney:1,
+        confirmAmount:2
+      }
+      getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{
+        if(res.success){
+         this.initEcharts(res.result)
+        }
+      })
+    },
+    initEcharts(data) {
+      let color = ['#069F99', '#6D7FD0 ', '#A5B3FF', '#A5B3FF', '#BDA79E']
+      let echartsData = data.reduce( (pre,val) => {
+       return  pre.concat({value:val.value,name:val.name_dictText})
+      },[])
+      echartsData = this.initPoint(echartsData,color)
       let chartDom = document.getElementById('incomeSort')
       let myChart = echarts.init(chartDom)
       let option
 
       option = {
+        
         tooltip: {
+          show:false,
           trigger: 'item'
         },
         legend: {
           bottom:'2%',
           left: 'center'
         },
+        labelLine:{
+          lineStyle:{
+            color:'#999'
+          }
+        },
         series: [
           {
-            name: 'Access From',
+            color:color,
             type: 'pie',
             radius: ['30%', '60%'],
-            avoidLabelOverlap: false,
             itemStyle: {
               borderColor: '#fff',
               borderWidth: 2
             },
-            label: {
+            label:{
-              show: false,
+              show:true,
-              position: 'center'
+              formatter: '{pre|}{d}%',
-            },
+              rich:{
-            emphasis: {
+                pre:{
-              label: {
+                  width:4,
-                show: false,
+                  height:4,
-                fontSize: '40',
+                  borderRadius:[4,4,4,4]
-                fontWeight: 'bold'
+                }
               }
             },
+
             labelLine: {
-              show: false
+              show: true
             },
-            data: [
+            data: echartsData
-              { value: 1048, name: 'Search Engine' },
-              { value: 735, name: 'Direct' },
-              { value: 580, name: 'Email' },
-              { value: 484, name: 'Union Ads' },
-              { value: 300, name: 'Video Ads' }
-            ]
           }
         ]
       }
 
       option && myChart.setOption(option)
+      this.echartsInstace = myChart
       window.addEventListener('resize', () => {
         myChart.resize()
       })
+    },
+    // 处理圆点
+    initPoint(data,color) {
+      // 这步主要是为了让小圆点的颜色和饼状图的块对应
+      let setLabel = (data) => {
+        let opts = []
+        for (let i = 0; i < data.length; i++) {
+          let item = {}
+          item.name = data[i].name
+          item.value = data[i].value
+          item.label = {
+            normal: {
+              //控制引导线上文字颜色和位置,此处a是显示文字区域，b做一个小圆圈在引导线尾部显示
+              show: true,
+              formatter: '{point|}{a|}{d}%',
+              rich: {
+                a:{
+                  padding: [0,0,0,4]
+                },
+                point: {
+                  height: 6,
+                  width: 6,
+                  lineHeight: 6,
+                  borderRadius: 4,
+                  backgroundColor: color[i], // 圆点颜色和饼图块状颜色一致
+                },
+              }
+            },
+          }
+
+          opts.push(item)
+        }
+        return opts
+      }
+      return setLabel(data)
     }
   }
 }
@@ -126,6 +192,13 @@ export default {
   width: 100%;
   height: 400px;
 }
+.point {
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  border-radius: 50%;
+  background: #000;
+}
 .title {
   text-align: left;
   font-weight: 500;

src/views/dashboard/SingleMonthEcharts.vue

@@ -126,8 +126,6 @@ export default {
           // 初始化 echarts
           this.initEcharts()
           this.dataSource = tableData
-          console.log(this.dataSource)
-
         }
         if (res.code === 510) {
           this.$message.warning(res.message)
@@ -166,8 +164,8 @@ export default {
               dataStr += `<div>
           <div style="margin: 0 8px;">
             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
-            <span>${item.seriesName}</span>
+            <span style="color: #666">${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
+            <span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
           </div>
         </div>`
             })

src/views/dashboard/SingleMonthTotalEcharts.vue

@@ -165,8 +165,8 @@ export default {
               dataStr += `<div>
           <div style="margin: 0 8px;">
             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
-            <span>${item.seriesName}</span>
+            <span style="color: #666">${item.seriesName}</span>
-            <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
+            <span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
           </div>
         </div>`
             })