Selaa lähdekoodia

Merge branch 'feature/work-test' of http://git.tjyourong.com.cn/ctop/adsp-vue into feature/work-test

朱鑫波 3 vuotta sitten
vanhempi
commit
a16f78cab3
4 muutettua tiedostoa jossa 334 lisäystä ja 189 poistoa
  1. 4 2
      src/permission.js
  2. 32 28
      src/views/bossDataKanban/chart.js
  3. 295 158
      src/views/bossDataKanban/index.vue
  4. 3 1
      src/views/user/Login.vue

+ 4 - 2
src/permission.js

@@ -58,7 +58,8 @@ router.beforeEach((to, from, next) => {
               // 跳转到目的路由
               if( to.path === '/dashboard/analysis' && from.path == '/'){
                 if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
-                  window.open("/boss-data-kanban", "_blank");
+                  let tempPage = window.open('', '_blank');
+                  tempPage.location="/boss-data-kanban";
                 }
               }
               next({ path: redirect })
@@ -81,7 +82,8 @@ router.beforeEach((to, from, next) => {
       }
       if( to.path === '/dashboard/analysis' && from.path == '/'){
         if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
-          window.open("/boss-data-kanban", "_blank");
+          let tempPage = window.open('', '_blank');
+          tempPage.location="/boss-data-kanban";
           return
         }
       }

+ 32 - 28
src/views/bossDataKanban/chart.js

@@ -112,31 +112,31 @@
         position: 'outside',
         formatter: '{b} \n{c} {d}%'
       },
-      tooltip: {
-        backgroundColor: '#033b77',
-        borderColor: '#21f2c4',
-        textStyle: {
-          color: '#fff',
-          fontSize: 13
-        },
-        formatter: params => {
-          if (
-            params.seriesName !== 'mouseoutSeries' &&
-              params.seriesName !== 'pie2d'
-          ) {
-            const bfb = (
-              (option.series[params.seriesIndex].pieData.endRatio -
-                  option.series[params.seriesIndex].pieData.startRatio) *
-                100
-            ).toFixed(2)
-            return (
-              `${params.seriesName}<br/>` +
-              `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-              `${bfb}%`
-            )
-          }
-        }
-      },
+    //   tooltip: {
+    //     backgroundColor: '#033b77',
+    //     borderColor: '#21f2c4',
+    //     textStyle: {
+    //       color: '#fff',
+    //       fontSize: 13
+    //     },
+    //     formatter: params => {
+    //       if (
+    //         params.seriesName !== 'mouseoutSeries' &&
+    //           params.seriesName !== 'pie2d'
+    //       ) {
+    //         const bfb = (
+    //           (option.series[params.seriesIndex].pieData.endRatio -
+    //               option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //         ).toFixed(2)
+    //         return (
+    //           `${params.seriesName}<br/>` +
+    //           `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+    //           `${bfb}%`
+    //         )
+    //       }
+    //     }
+    //   },
       xAxis3D: {
         min: -1,
         max: 1
@@ -151,16 +151,20 @@
       },
       grid3D: {
         show: false,
+        width:'80%',
+        height:'80%',
+        left:'10%',
+        top:'10%',
         boxHeight: boxHeight, // 圆环的高度
         viewControl: {
           // 3d效果可以放大、旋转等
-          alpha:30, // 角度
-          distance:350, // 调整视角到主体的距离,类似调整zoom
+          alpha:40, // 角度
+          distance:400, // 调整视角到主体的距离,类似调整zoom
           rotateSensitivity: 0, // 设置为0无法旋转
           zoomSensitivity: 0, // 设置为0无法缩放
           panSensitivity: 0, // 设置为0无法平移
           autoRotate: false // 自动旋转
-        },
+        }
       },
       series: series
     }

+ 295 - 158
src/views/bossDataKanban/index.vue

@@ -1,10 +1,28 @@
+<style>
+    .range-pick-echart .ant-calendar-range-part {
+        background: rgb(26, 52, 104) !important;
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-range .ant-calendar-input{
+        background: rgb(26, 52, 104) !important;
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-year-select{
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-month-select{
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-date{
+        color: #B0C4DE;
+    }
+</style>
 <style lang="scss" scoped>
     .body-css {
         min-width: 100%;
         min-height: 100%;
         position: absolute;
         box-sizing: border-box;
-
         background-image: url('../../assets/img/wangge2.png');
         background-repeat: repeat;
         background-position: center;
@@ -15,7 +33,7 @@
 
     .body-heada {
         min-width: 100%;
-        height: 60px;
+        height: 45px;
         background-image: url('../../assets/img/head_bg.png');
         background-size: 100% 100%;
     }
@@ -45,7 +63,7 @@
         color: white;
         /* background: rgba(2, 28, 69, 1) !important; */
         border-bottom: 1px solid rgba(2, 28, 69, 1);
-        padding: 14px;
+        padding: 10px;
         background-color: rgb(26, 52, 104);
     }
 
@@ -138,11 +156,11 @@
 
         .bg {
             position: absolute;
-            bottom: 145px;
+            bottom: 56px;
             left: 50%;
             z-index: 0;
-            width: 468px;
-            height: 273px;
+            width: 92%;
+            height: 75%;
             background: no-repeat center;
             background-image: url('../../assets/img/u4.svg');
             background-size: 100% 100%;
@@ -152,11 +170,11 @@
 
         .bgtwo {
             position: absolute;
-            bottom: 100px;
+            bottom: 97px;
             left: 50%;
             z-index: 0;
-            width: 583px;
-            height: 340px;
+            width: 74%;
+            height: 62%;
             background: no-repeat center;
             background-image: url('../../assets/img/u3.svg');
             background-size: 100% 100%;
@@ -166,11 +184,11 @@
 
         .bgthree {
             position: absolute;
-            bottom: 61px;
+            bottom: 130px;
             left: 50%;
             z-index: 0;
-            width: 688px;
-            height: 399px;
+            width: 61%;
+            height: 51%;
             background: no-repeat center;
             background-image: url('../../assets/img/u2.svg');
             background-size: 100% 100%;
@@ -190,10 +208,10 @@
                     style="letter-spacing:10px;color:#00BFFF;line-height: 50px;font-size: 1.5vw; text-align: center;padding-left: 110px;font-weight: bold;">
                     分公司投放数据监控中心
                     <a-button @click="fullScreen" v-if="fullText"
-                        style="float: right;background: rgb(58, 77, 87);height: 28px;margin-top: 2px;margin-right: 2px;"
+                        style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
                         type="primary" size="small">全屏查看</a-button>
                     <a-button @click="signOutfullScreen" v-else
-                        style="float: right;background: rgb(58, 77, 87);height: 28px;margin-top: 2px;margin-right: 2px;"
+                        style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
                         type="primary" size="small">退出全屏</a-button>
                 </p>
 
@@ -210,10 +228,13 @@
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材产出占比</span>
-
-                        <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
-                            style="width: 90%;height: 300px;margin-right: 20px;">
+                        <div v-if="emptyShowOne">
+                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
+                                style="width: 90%;height: 300px;margin-right: 20px;">
+                            </div>
                         </div>
+                        <a-list v-else :data-source="[]" />
+                        <!-- <a-empty :image="emptyImg"  /> -->
 
                     </div>
 
@@ -224,9 +245,11 @@
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">分公司消耗素材</span>
-
-                        <div id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
-
+                        <div v-if="emptyShowTwo">
+                            <div id="consume" ref="consume" style="width: 98%;height: 290px;"></div>
+                        </div>
+                        <a-list v-else :data-source="[]" v-else />
+                        <!-- <a-empty style="margin-top: 20px;"  /> -->
                     </div>
 
                     <!-- 环形图 -->
@@ -238,21 +261,29 @@
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
                         <div style="line-height: 180px;">
 
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
+                            <div style="float: left;margin-left: 2%;width: 25%;height: 20%;text-align: center;">
                                 <a-progress type="circle" strokeColor="#FF00FF" :percent="useRateData" :strokeWidth=10
-                                    :width="95" />
+                                    :width="88" :format="percent => `${percent}%`" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
                             </div>
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
-                                <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="95"
-                                    :strokeWidth=10 />
+
+
+
+                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
+                                <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="88"
+                                    :strokeWidth=10  :format="percent => `${percent}%`" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
                             </div>
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
-                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="95" />
+
+
+
+
+                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
+                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88"  :format="percent => `${percent}%`" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
                             </div>
 
+
                         </div>
 
 
@@ -274,11 +305,12 @@
                             </a-radio-button>
                         </a-radio-group>
                         <a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
-                            class="range-pick" :disabled-date="disabledDate" :allowClear="false"
-                            @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" />
+                             :disabled-date="disabledDate" :allowClear="false"
+                            dropdownClassName="range-pick-echart" @calendarChange="calendarPriceRangeChange"
+                            @change="changePriceRangeDate" />
 
                         <div class="chart-container">
-                            <div class="chart" ref="chart" v-show="chartPie"></div>
+                            <div class="chart" ref="chart" v-if="chartPie"></div>
                             <!-- 底座背景 -->
                             <div class="bg"></div>
                             <div class="bgtwo"></div>
@@ -288,12 +320,18 @@
                         </branch> -->
                     </div>
                     <!-- 横向柱状图 -->
-                    <div style="height:243px;background-color:  rgba(2, 28, 69, 1);">
+                    <div
+                        style="height:243px;background-color:  rgba(2, 28, 69, 1);overflow: hidden;overflow-y: scroll;">
                         <br>
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">本月分媒体消耗数据</span>
-                        <div id="shadow" ref="shadow" style="width: 98%;height: 200px;"></div>
+
+                        <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
+
+
+
+
 
                     </div>
                 </a-col>
@@ -308,9 +346,12 @@
                         <br>
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
-                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">近七天分日数据</span>
-
-                        <div id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></div>
+                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">{{launchDate}}</span>
+                        <div v-if="emptyShowThree">
+                            <div id="lineChart" ref="lineChart" style="width: 100%;height: 260px;margin-top: 5px;"></div>
+                        </div>
+                        <a-list v-else :data-source="[]" v-else />
+                        <!-- <a-empty v-else /> -->
 
                     </div>
                     <div style="height:512px;background-color:  rgba(2, 28, 69, 1);">
@@ -324,6 +365,9 @@
                                 <span
                                     :class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
                             </span>
+                            <span slot="totalCost" slot-scope="text,record">
+                                <span>{{text > 10000?(text/10000).toFixed(2)+'万':text}}</span>
+                            </span>
                         </a-table>
 
                     </div>
@@ -347,21 +391,27 @@
     require('echarts/lib/component/graphic');
     require('echarts/lib/component/toolbox');
     require('echarts/lib/component/legend');
-
+    import { Empty } from 'ant-design-vue';
     import { getAction, postAction, putAction } from '@/api/manage';
-    const color = ['#FF00FF', '#8A2BE2', '#00FFFF', '#4169E1', '#FFA500', '#7FFF00']
+    const color = ['#8A2BE2', '#FFA500', '#00FFFF', '#4169E1', '#FF00FF', '#48D1CC']
     import 'echarts-gl';
     export default {
         data() {
             return {
                 optionData: [],
-                chartPie:true,
+                
+                container: true,
+                chartPie: true,
+                emptyShowOne: true,
+                emptyShowTwo:true,
+                emptyShowThree:true,
                 statusChart: null,
                 option: {},
                 fullscreenShow: false,
                 branchShow: true,
                 value: '2',
                 priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
+                launchDate:'',
                 selectPriceDate: '',
                 offsetDays: 86400000 * 31,
                 fullText: true,
@@ -394,25 +444,30 @@
                         dataIndex: 'totalCost',
                         key: 'totalCost',
                         ellipsis: true,
+                        scopedSlots: { customRender: 'totalCost' },
                     },
 
                 ],
                 data: [],
                 pieTotal: '',
+                emptyImg: '',
             }
         },
         created() {
-            this.getData();
 
 
-        },
 
+        },
+       
         mounted() {
+           
+            this.getData();
             this.getQueryNewlyData();
             const that = this
             window.onresize = function () {
                 that.changeSize()
             }
+            this.launchDate  = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
         },
         methods: {
 
@@ -450,11 +505,19 @@
                 this.fullShow = true;
             },
             radioChange() {
+                this.chartPie = false
                 this.getData();
                 this.getQueryNewlyData();
             },
-            changePriceRangeDate() {
+            changePriceRangeDate(event) {
+                
+                if (this.priceRangeDate[0].format('YYYY-MM-DD') !=  this.priceRangeDate[1].format('YYYY-MM-DD')) {
+                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
+                }else{
+                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD')+'投放数据'
+                }
                 this.selectPriceDate = '';
+                this.chartPie = false
                 this.getData();
                 this.getQueryNewlyData();
             },
@@ -485,18 +548,26 @@
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
                     if (res.code == 0) {
                         var servicedata = res.result
-                        console.log(servicedata);
-                        this.pieData = [];
-                        let num = 0;
-                        for (var i = 0; i < servicedata.length; i++) {
-                            var obj = new Object();
-                            obj.name = servicedata[i].area;
-                            obj.value = servicedata[i].meterialNum;
-                            num += servicedata[i].meterialNum;
-                            this.pieData[i] = obj;
+                        if (servicedata.length > 0) {
+                            this.emptyShowOne = true;
+                            this.pieData = [];
+                            let num = 0;
+                            for (var i = 0; i < servicedata.length; i++) {
+                                var obj = new Object();
+                                obj.name = servicedata[i].area;
+                                obj.value = servicedata[i].meterialNum;
+                                num += servicedata[i].meterialNum;
+                                this.pieData[i] = obj;
+                            }
+                            this.pieTotal = num
+                            this.$nextTick(() => {
+                                this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
+                            })
+                            
+                        } else {
+                            this.emptyShowOne = false;
                         }
-                        this.pieTotal = num
-                        this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
+
                     }
                 })
                 // 3D柱状图
@@ -511,11 +582,20 @@
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
                     if (res.code == 0) {
                         resultArray = res.result;
-                        resultArray.forEach(element => {
-                            areaArray.push(element.area);
-                            payNumArray.push(element.cost)
-                        });
-                        this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
+                        if (resultArray.length > 0) {
+                            this.emptyShowTwo = true;
+                            resultArray.forEach(element => {
+                                areaArray.push(element.area);
+                                payNumArray.push(element.cost)
+                            });
+                            this.$nextTick(() => {
+                                this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
+                            })
+                            
+                        } else {
+                            this.emptyShowTwo = false;
+                        }
+
                     }
                 })
 
@@ -527,9 +607,23 @@
                 }
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
                     if (res.code == 0) {
-                        this.useRateData = res.result.useRate;
-                        this.faddishRateData = res.result.faddishRate;
-                        this.innovateRateData = res.result.innovateRate;
+                        if (res.result.useRate) {
+
+                            this.useRateData = res.result.useRate;
+                        } else {
+                            this.useRateData = 0;
+                        }
+                        if (res.result.faddishRate) {
+                            this.faddishRateData = res.result.faddishRate;
+                        } else {
+                            this.faddishRateData = 0;
+                        }
+                        if (res.result.innovateRate) {
+                            this.innovateRateData = res.result.innovateRate;
+                        } else {
+                            this.innovateRateData = 0;
+                        }
+
                     }
                 })
 
@@ -555,12 +649,18 @@
                 }
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
                     if (res.code == 0) {
+                        this.emptyShowThree = true;
                         let huaBei = res.result.huaBei;
                         let huaDong = res.result.huaDong;
                         let huaNan = res.result.huaNan;
                         let jiaoYang = res.result.jiaoYang;
                         let time = res.result.time
-                        this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
+                        this.$nextTick(() => {
+                            this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
+                        })
+
+                    } else {
+                        this.emptyShowThree = false;
                     }
                 })
 
@@ -591,7 +691,7 @@
                     // });
                     myChart.clear()
                     myChart.setOption(optionName);
-                    
+
                     window.addEventListener('resize', function () {
                         that.clientWidth = document.documentElement.clientWidth - 224
                         myChart.resize()
@@ -605,17 +705,21 @@
                 let option = {
                     tooltip: {
                         trigger: 'item',
-                        formatter: '{a} <br/>{b}: {c} ({d}%)'
+                        formatter: function(obj){
+                            return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
+                        }
                     },
                     legend: {
-                        top: '10%',
+                        top: '20%',
                         orient: 'vertical',
-                        right: '10%',
+                        right: '0%',
                         textStyle: { //图例文字的样式
                             color: '#fff',
-                            fontSize: 13
+                            fontSize: 12
                         },
                         itemGap: 20,
+                        itemWidth:15,
+                        itemHeight:10,
                         padding: [-20, 0, 0, 80],
                         bottom: '55%',
                         formatter: function (name) {  //该函数用于设置图例显示后的百分比
@@ -629,7 +733,7 @@
                                 }
                             })
                             var p = Math.round(((value / total) * 100)); //求出百分比
-                            return `${name}        ${'|'}  ${p}%       ${value}`;  //返回出图例所显示的内容是名称+百分比
+                            return p>=10? `${name}    ${'|'}  ${p}%    ${value}` : `${name}    ${'|'}    ${p}%      ${value}` //返回出图例所显示的内容是名称+百分比
 
 
                         },
@@ -639,29 +743,30 @@
                         {
                             name: '',
                             type: 'pie',
-                            radius: ['50%', '80%'],
+                            radius: ['50%', '75%'],
                             avoidLabelOverlap: false,
                             hoverAnimation: true,
                             silent: false,
                             itemStyle: {
-                                borderRadius: 20,
+                                borderRadius: 10,
                                 borderColor: 'rgba(2, 28, 69, 1)',
-                                borderWidth: 6
+                                borderWidth: 2
                             },
                             label: {
                                 show: true,
                                 position: 'center',
+                                fontSize:10,
                                 formatter: function (param) {
 
-                                    return '素材总数\r\n\r\n' + pieTotal
+                                    return '素材总数\r\n' + pieTotal
                                 },
                                 textStyle: {
-                                    fontSize: 16,
+                                    fontSize: 13,
                                     color: '#fff'
                                 }
                             },
                             left: 0,
-                            right: '56%',
+                            right: '50%',
                             top: 0,
                             bottom: '20%',
 
@@ -678,10 +783,10 @@
             // 柱状图
             getConsumeData(areaArray, payNumArray) {
                 // var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
-
                 var areaData = areaArray;   //横坐标值
                 var payPersonNum = payNumArray;  //柱状图的值
-                const VALUE1 = [{    //每个柱子的颜色(可自行改变颜色)
+               
+                let VALUE1 = [{    //每个柱子的颜色(可自行改变颜色)
                     value: payPersonNum[0],
                     itemStyle: {
                         color: 'rgba(0,137,255,1.0)'
@@ -710,9 +815,19 @@
                     itemStyle: {
                         color: 'rgba(182,105,86,1.0)'
                     }
-                }
+                },{
+                    value: payPersonNum[5],
+                    itemStyle: {
+                        color: '#40E0D0'
+                    }
+                },
                 ]
-                const VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
+                
+                VALUE1 = VALUE1.filter(item => {
+                    return item.value !=undefined
+                    })
+                    console.log(VALUE1);
+                let VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
                     value: Math.max.apply(null, payPersonNum),    //这个value是柱状图的值里的最大值
                     itemStyle: {
                         color: 'rgba(0,137,255,.1)'
@@ -743,6 +858,11 @@
                     }
                 }
                 ]
+                if (VALUE1.length !=VALUE2.length) {
+
+                    VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
+                }
+                console.log(VALUE2);
                 // 绘制左侧面
                 const CubeLeft = echarts.graphic.extendShape({
                     shape: {
@@ -792,17 +912,17 @@
                 echarts.graphic.registerShape('CubeLeft', CubeLeft)
                 echarts.graphic.registerShape('CubeRight', CubeRight)
                 echarts.graphic.registerShape('CubeTop', CubeTop)
-                const MAX = [300, 300, 300, 300, 300]
+                const MAX = [300, 300, 300, 300, 300,300]
                 const VALUE = payPersonNum
                 let option = {
                     backgroundColor: "transparent",
-                        
+
                     grid: {  //图表的上下左右的距离
-                        left: '-10%',
-                        right: '0%',
+                        left: '-80',
+                        right: '10%',
                         bottom: '15%',
                         top: '20%',
-                        padding: [0, 0, 0, 0],
+                        padding: [50, 0, 0, 0],
                         containLabel: true,
                     },
                     xAxis: {  //x轴的样式设置
@@ -859,6 +979,7 @@
                         type: 'custom',
                         renderItem: (params, api) => {
                             const location = api.coord([api.value(0), api.value(1)])
+                            
                             return {
                                 type: 'group',
                                 children: [{
@@ -1019,7 +1140,7 @@
                                 offset: [2, -25],
                                 formatter: function (value) {
                                     var val = value.data;
-                                    if (val >= 10000 && val < 10000000) {
+                                    if (val >= 10000 && val < 1000000000000) {
                                         val = (val / 10000).toFixed(2) + "万";
                                     }
                                     return val;
@@ -1052,7 +1173,6 @@
                             type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                         },
                         formatter: function (params, ticket, callback) {
-                            console.log(params)
                             var res = params[0].name;
                             for (var i = 0, l = params.length; i < l; i++) {
                                 res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
@@ -1064,23 +1184,23 @@
                             return 'loading...';
                         }
                     },
-                    dataZoom: [
-                        {
-                            type: "slider", //滑动条
-                            show: true, //开启
-                            yAxisIndex: [0],
-                            left: "96%", //滑动条位置
-                            start: 0, //初始化时,滑动条宽度开始标度
-                            end: 20, //初始化时,滑动条宽度结束标度<br>  
-                            filterMode:"none"                 
-                        },
-                        {
-                            type: "inside", //内置滑动,随鼠标滚轮展示
-                            yAxisIndex: [0],
-                            start: 20, //初始化时,滑动条宽度开始标度
-                            filterMode:"none"     
-                        },
-                    ],
+                    // dataZoom: [
+                    //     {
+                    //         type: "slider", //滑动条
+                    //         show: true, //开启
+                    //         yAxisIndex: [0],
+                    //         left: "96%", //滑动条位置
+                    //         start: 0, //初始化时,滑动条宽度开始标度
+                    //         end: 20, //初始化时,滑动条宽度结束标度<br>  
+                    //         filterMode:"none"                 
+                    //     },
+                    //     {
+                    //         type: "inside", //内置滑动,随鼠标滚轮展示
+                    //         yAxisIndex: [0],
+                    //         start: 20, //初始化时,滑动条宽度开始标度
+                    //         filterMode:"none"     
+                    //     },
+                    // ],
                     legend: {
                         data: ['快手', '头条'],
                         x: 'right',
@@ -1194,18 +1314,26 @@
                     },
                     color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
                     tooltip: {
-                        trigger: 'axis'
+                        trigger: 'axis',
+                        formatter: function (params) {
+                            var relVal = params[0].name;
+                            for (var i = 0, l = params.length; i < l; i++) {
+                            //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
+                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
+                            }
+                            return relVal;
+                        }
                     },
                     legend: {
                         data: ['华北', '华东', '华南', '骄阳'],
                         textStyle: {
-                            fontSize: 15,
+                            fontSize: 12,
                             color: '#B0C4DE'
                         },
                     },
                     grid: {
                         left: '3%',
-                        right: '4%',
+                        right: '15%',
                         bottom: '3%',
                         containLabel: true
                     },
@@ -1255,28 +1383,24 @@
                             name: '华北',
                             type: 'line',
                             data: huaBei,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '华东',
                             type: 'line',
                             data: huaDong,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '华南',
                             type: 'line',
                             data: huaNan,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '骄阳',
                             type: 'line',
                             data: jiaoYang,
-                            symbol: 'none',
                             smooth: true,
                         },
 
@@ -1295,27 +1419,43 @@
                     if (res.code == 0) {
                         let arr = res.result
                         let optionArray = [];
-                        for (var i = 0; i < arr.length; i++) {
-                            var obj = new Object();
-                            obj.name = arr[i].area;
-                            obj.value = arr[i].cost;
-                            obj.rate = arr[i].rate;
-                            optionArray[i] = obj;
-                        }
+                        // for (var i = 0; i < arr.length; i++) {
+                        //     var obj = new Object();
+                        //     // if (arr[i].cost != 0) {
+                        //     obj.name = arr[i].area;
+                        //     obj.value = arr[i].cost;
+                        //     obj.rate = arr[i].rate;
+                        //     optionArray[i] = obj;
+                        //     // }
+
+                        // }
+                        res.result.forEach(element => {
+                            optionArray.push({ name: element.area, value: element.cost, rate: element.rate })
+                        });
                         this.optionData = optionArray
-                        console.log(this.optionData.length == 0);
                         if (this.optionData.length == 0) {
-                            this.chartPie = false
-                            
-                        }else{
-                            
-                            this.setLabel(this.optionData);
-                            this.initChart(this.optionData);
+                            this.optionData.push({
+                                name: '暂无数据',
+                                value: 100,
+                                rate: '',
+                            })
+
+
+                            this.chartPie = true
+                            this.$nextTick(() => {
+                                this.setLabel(this.optionData);
+                                this.initChart(this.optionData);
+                            })
+                        } else {
                             this.chartPie = true;
-                            
+                            this.$nextTick(() => {
+                                this.setLabel(this.optionData);
+                                this.initChart(this.optionData);
+                            })
+
                         }
-                            
-                        
+
+
 
                     }
                 })
@@ -1326,49 +1466,46 @@
                 // {
                 //   name: '华东',
                 //   value: 8005
-                // }, {
-                //   name: '骄阳',
-                //   value: 2848
-                // }, {
-                //   name: '华南',
-                //   value: 5708
-                // }]
+                // },]
             },
             // 初始化label样式
             setLabel(optionData) {
                 optionData.forEach((item, index) => {
                     item.itemStyle = {
-                        color: color[index]
+                        color: color[index],
                     }
                     item.label = {
                         normal: {
                             show: true,
                             color: color[index],
-                            fontSize: 20,
+                            fontSize: 18,
+                            padding:[250,0],
                             formatter: function (params) {
-                                return params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
+                                return params.value != 0 ? params.name == '暂无数据'? params.name + '\r\n' + params.data.rate 
+                                : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate 
+                                : ''
                             }, // 用\n来换行
-                            rich: {
-                                b: {
-                                    color: '#fff',
-                                    lineHeight: 18,
-                                    align: 'left'
-                                },
-                                c: {
-                                    fontSize: 20,
-                                    color: '#fff',
-                                    textShadowColor: '#1c90a6',
-                                    textShadowOffsetX: 0,
-                                    textShadowOffsetY: 2,
-                                    textShadowBlur: 5,
-                                    align: 'left'
-                                },
-                                d: {
-                                    color: color[index],
-                                    fontSize: 20,
-                                    align: 'left'
-                                }
-                            }
+                            // rich: {
+                            //     b: {
+                            //         color: '#fff',
+                            //         lineHeight: 18,
+                            //         align: 'left'
+                            //     },
+                            //     c: {
+                            //         fontSize: 20,
+                            //         color: '#fff',
+                            //         textShadowColor: '#1c90a6',
+                            //         textShadowOffsetX: 0,
+                            //         textShadowOffsetY: 50,
+                            //         textShadowBlur: 5,
+                            //         align: 'left'
+                            //     },
+                            //     d: {
+                            //         color: color[index],
+                            //         fontSize: 20,
+                            //         align: 'left'
+                            //     }
+                            // }
                         }
                     }
                     item.labelLine = {
@@ -1385,7 +1522,7 @@
             initChart(optionData) {
                 this.statusChart = echarts.init(this.$refs.chart)
                 // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
-                this.option = getPie3D(optionData, 0, 240, 28, 30, 0.7)
+                this.option = getPie3D(optionData, 0, 240, 28, 30, 0.5)
                 this.statusChart.setOption(this.option)
                 // 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
                 this.option.series.push({
@@ -1404,7 +1541,7 @@
                     },
                     startAngle: -30, // 起始角度,支持范围[0, 360]。
                     clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-                    radius: ['20%', '52%'],
+                    radius: '45%',
                     center: ['50%', '50%'],
                     data: optionData,
                     labelLine: {  //删除指示线

+ 3 - 1
src/views/user/Login.vue

@@ -448,7 +448,9 @@ export default {
         path: '/dashboard/analysis',
       })
       if (this.userInfo().id == '4aba62011120ac565c7f2b9f8f4aa96b' || this.userInfo().id == 'e9ca23d68d884d4ebb19d07889727dae') {
-        window.open("/boss-data-kanban","_blank")
+        let tempPage = window.open('', '_blank');
+        tempPage.location="/boss-data-kanban";
+        // window.open("/boss-data-kanban","_blank")
       }
       
       this.$notification.success({