魏志佳 4 år sedan
förälder
incheckning
23a3db9651
2 ändrade filer med 384 tillägg och 219 borttagningar
  1. 384 57
      src/views/modules/stockWatch/accountPage.vue
  2. 0 162
      面试题.md

+ 384 - 57
src/views/modules/stockWatch/accountPage.vue

@@ -46,22 +46,67 @@
                         <div class="item">
                             <div class="todyCost">
                                 <span>{{667.15 | decimalsHandle}}</span>
-                                <span>
-                                    <a-icon type="rise" />
-                                    <a-icon type="fall" />
+                                <span class="sign">
+                                    <a-icon type="rise"  class="rise"/>
+                                    <!-- <a-icon type="fall" class="fall" /> -->
                                 </span>
                             </div>
                             <div class="yesterdayCost">
                                 /昨日:{{407.16 | decimalsHandle}}
                             </div>
-                            <div class="IndexName">
+                            <span class="IndexName" :class="{'IndexNameActive':isActive==1}" @click="getActiveIndexName(1)">
                                 激活数
+                            </span>
+                        </div>
+                        <div class="item">
+                            <div class="todyCost">
+                                <span>{{667.15 | decimalsHandle}}</span>
+                                <span class="sign">
+                                    <a-icon type="rise"  class="rise"/>
+                                    <!-- <a-icon type="fall" class="fall" /> -->
+                                </span>
+                            </div>
+                            <div class="yesterdayCost">
+                                /昨日:{{407.16 | decimalsHandle}}
+                            </div>
+                            <span class="IndexName" :class="{'IndexNameActive':isActive==2}" @click="getActiveIndexName(2)">
+                                激活成本
+                            </span>
+                        </div>
+                        <div class="item">
+                            <div class="todyCost">
+                                <span>{{667.15 | decimalsHandle}}</span>
+                                <span class="sign">
+                                    <a-icon type="rise"  class="rise"/>
+                                    <!-- <a-icon type="fall" class="fall" /> -->
+                                </span>
+                            </div>
+                            <div class="yesterdayCost">
+                                /昨日:{{407.16 | decimalsHandle}}
+                            </div>
+                            <span class="IndexName" :class="{'IndexNameActive':isActive==3}" @click="getActiveIndexName(3)">
+                                激活数
+                            </span>
+                        </div>
+                        <div class="item">
+                            <div class="todyCost">
+                                <span>{{667.15 | decimalsHandle}}</span>
+                                <span class="sign">
+                                    <a-icon type="rise"  class="rise"/>
+                                    <!-- <a-icon type="fall" class="fall" /> -->
+                                </span>
+                            </div>
+                            <div class="yesterdayCost">
+                                /昨日:{{407.16 | decimalsHandle}}
                             </div>
+                            <span class="IndexName" :class="{'IndexNameActive':isActive==4}" @click="getActiveIndexName(4)">
+                                激活数
+                            </span>
                         </div>
                     </div>
-                    <div class="echart">
+                    <div class="echart" style="margin-top:10px">
                         <a-spin :spinning="accountIndexEchartSpinning">
-                        <div class="accountIndexEchart" id="accountIndexEchart"  style='width:100%;height:350px;margin:0 auto;' ref="accountIndexEchart"></div>
+                            <div class="accountIndexEchart" id="accountIndexEchart"  style='width:100%;height:160px;margin:0 auto;' ref="accountIndexEchart"></div>
                         </a-spin>
                     </div>
                 </div>
@@ -302,6 +347,58 @@
             </div>
             </a-spin>
         </div>
+
+
+
+        <!-- 修改检测链接的modal -->
+        <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800'>
+            <div class="linkBody">
+                <a-row>
+                    <a-col :span="4">
+                        <p style="text-align:right">第三方检测链接:</p>
+                    </a-col>
+                    <a-col :span="18">
+                        <span>{{"https://www.baidu.com/s?wd=echart%E5%AE%9E%E7%8E%B0%E4%B8%A4%E4%B8%AAx%E8%BD%B4%E4%B8%A4%E4%B8%AAy%E8%BD%B4&rsv_spt=1&rsv_iqid=0x9a6bd47e00238246&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=43&rsv_sug1=35&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=16314&rsv_sug4=17094"}}</span>
+                    </a-col>
+                </a-row>
+                <p></p>
+                <a-row>
+                    <a-col :span="4">
+                        <p style="text-align:right">修改链接:</p>
+                    </a-col>
+                    <a-col :span="18">
+                        <a-input placeholder="请输入监测链接" style="300px"  v-model="newLink"/>
+                    </a-col>
+                </a-row>
+            </div>
+        </a-modal>
+        <!-- 修改定向的modal -->
+        <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk">
+            <div class="linkBody">
+                <a-row>
+                    <a-col :span="4">
+                        <p style="text-align:right">已有定向包:</p>
+                    </a-col>
+                    <a-col :span="18">
+                        <span>DM2021</span>
+                    </a-col>
+                </a-row>
+                <p></p>
+                <a-row>
+                    <a-col :span="4">
+                        <p style="text-align:right">修改定向包:</p>
+                    </a-col>
+                    <a-col :span="18">
+                        <a-select size="default" default-value="a1" style="width: 200px" >
+                            <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
+                                {{ (i + 9).toString(36) + i }}
+                            </a-select-option>
+                        </a-select>
+                    </a-col>
+                </a-row>
+                
+            </div>
+        </a-modal>
     </div>
 </template>
 
@@ -510,6 +607,10 @@ const indexValue = [
         name:'accountPage',
         data() {
             return {
+                newLink:'',
+                linkVisible:false,
+                targetVisible:false,
+                isActive:1,
                 moment,
                 materialDate:[moment().subtract(1,'days'),moment().subtract(1,'days')],
                 currentAccount:{},
@@ -573,6 +674,18 @@ const indexValue = [
             }
         },
         methods: {
+            // 监测链接修改OK事件
+            linkhandleOk(e){
+                this.linkVisible=true
+            },
+            // 定向包修改OK事件
+            targethandleOk(e){
+                this.targetVisible=true
+            },
+
+            getActiveIndexName(val){
+                this.isActive=val
+            },
             showIndexChangeBox(){
 
             },
@@ -585,6 +698,83 @@ const indexValue = [
             materialDataChange(date, dateString){
                 console.log(date, dateString)
             },
+            initAccountIndexEchart(type,data){
+                // let type='激活'
+                let option = {
+                    tooltip: {
+                        trigger: 'axis',
+                        formatter: `${type}<br />{a0}  {b0}: {c0}<br />{a1}  {b1}: {c1}`
+                    },
+                    grid:{
+                        left:'5px',
+                        top:0,
+                        right:'5px',
+                        bottom:0
+                    },
+                    xAxis: {
+                        type: 'category',
+                        show:false,
+                        boundaryGap: false,
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    },
+                    yAxis: {
+                        type: 'value',
+                        show:false,
+                    },
+                    series: [
+                        {
+                        name: '今天',
+                        data: [820, 932, 901, 934, 1290, 1330, 1320],
+                        type: 'line',
+                        smooth: true,
+                        showSymbol: false,
+                        symbol: 'circle',
+                        lineStyle: {                               
+                            color: '#2461F1',   
+                            width: 3,
+                        },
+                        itemStyle:{
+                            color:'#2461F1',
+                            borderWidth:2,
+                            borderColor:'#fff'
+                        },
+                        areaStyle: {
+                            color:{
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [{
+                                    offset: 0, color: '#2461F1' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'white' // 100% 处的颜色
+                                }],
+                            }
+                        }
+                    },
+                    {
+                        name: '昨天',
+                        data: [800, 962, 930, 950, 1200, 1380, 1420],
+                        type: 'line',
+                        smooth: true,
+                        showSymbol: false,
+                        symbol: 'circle',
+                        lineStyle: {                               
+                            color: '#3CC6A5',   
+                            width: 3,
+                        },
+                        itemStyle:{
+                            color:'#3CC6A5',
+                            borderWidth:2,
+                            borderColor:'#fff'
+                        },
+                        
+                    }
+                    ]
+                };
+                return option
+            },  
             initGaugechart(value){
                 var dataArr = value;
                 var colorSet = {
@@ -834,43 +1024,78 @@ const indexValue = [
             },
             initMaterialChart(data){
                 let  option={
-                    
-                    tooltip: {
-                        trigger: 'axis'
-                    },
                     legend: {
                         data: ['新上计划数', '新上组数', '新上创意数']
                     },
-                    xAxis: {
-                        type: 'category',
-                        data: ['新上素材数量', '新上素材使用数', '素材总数', '有效素材', '爆量素材', '新上素材使用率'],
-                        axisLine: {
-                            show:false,
-                        
+                    xAxis:[
+                        {   
+                            // name:"a",
+                            type: 'category',
+                            data: ['新上素材数量', '新上素材使用数',  '有效素材', '爆量素材', '新上素材使用率',''],
+                            axisLine: {
+                                show:false,
+                            
+                            },
+                            axisTick:{
+                                show:false,
+                            }
+                        },
+                        {   
+                            // name:"b",
+                            type: 'category',
+                            data: ['素材总数','','','','',''],
+                            nameLocation: 'end',
+                            axisLine: {
+                                show:false,
+                            
+                            },
+                            axisTick:{
+                                show:false,
+                            },
+                            position: 'bottom',
+                            inverse: true
                         },
-                        axisTick:{
+                    
+                    
+                    ] ,
+                    yAxis:[
+                        {
+                            type: 'value',
                             show:false,
-                        }
-                    },
-                    yAxis: {
-                        type: 'value',
-                        show:false,
-                        axisLine: {
-                            onZero: false,
+                            axisLine: {
+                                onZero: false,
+                                show:false,
+                                color: '#999',
+                                lineStyle: {
+                                    color: '#999'
+                                }
+                            },
+                        },
+                        {
+                            type: 'value',
                             show:false,
-                            color: '#999',
-                            lineStyle: {
-                                color: '#999'
-                            }
+                            axisLine: {
+                                onZero: false,
+                                show:false,
+                                color: '#999',
+                                lineStyle: {
+                                    color: '#999'
+                                }
+                            },
+                            position: 'right',
+                            // inverse: true
                         },
-                    },
+                        
+                        
+                    ] ,
                     
                     series: [
                         {   
                             
-                            data: [820, 932, 901, 934, 1290, 1330, 1320],
+                            data: [820, 932, 901, 934, 1290 ],
                             type: 'bar',
                             barWidth: '30%',
+                            xAxisIndex:0,
                             label:{
                                 show:true,
                                 position:'top',
@@ -895,6 +1120,37 @@ const indexValue = [
                                 
                             },
                         },
+                        {   
+                            
+                            data: [13200000000],
+                            type: 'bar',
+                            barWidth: '30%',
+                            xAxisIndex:1,
+                            yAxisIndex:1,
+                            label:{
+                                show:true,
+                                position:'top',
+                                distance: 10 ,
+
+                            },
+                            backgroundStyle:{
+                                borderRadius:[0, 0, 5, 5],
+                            },
+                            itemStyle:{
+                                
+                                // normal: {
+                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                        offset: 0,
+                                        color: '#7820FF'
+                                    }, {
+                                        offset: 1,
+                                        color:  '#3470FF'
+                                    }]),
+                                    barBorderRadius:[10, 10, 0, 0],
+                                // },
+                                
+                            },
+                        },
                         
                     ]
                 }
@@ -1005,30 +1261,22 @@ const indexValue = [
 
 
             getPieOption(){
+                const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                 let option = {
-                    // title: {
-                    //     text: '南丁格尔玫瑰图',
-                    //     subtext: '纯属虚构',
-                    //     left: 'center'
-                    // },
+                    
                     tooltip: {
                         trigger: 'item',
                         formatter: '{a} <br/>{b} : {c} ({d}%)'
                     },
                     legend: {
                         orient: 'vertical',
-                        left: '10%',
+                        left: '3%',
                         top:'center',
                         
                     },
                     toolbox: {
                         show: true,
-                        feature: {
-                            mark: {show: true},
-                            dataView: {show: true, readOnly: false},
-                            restore: {show: true},
-                            saveAsImage: {show: true}
-                        }
+                        
                     },
                     series: [
                         {
@@ -1037,18 +1285,27 @@ const indexValue = [
                             radius: [20, 140],
                             center: ['55%', '50%'],
                             roseType: 'area',
+                            labelLine:{
+                                length:5,
+                                length2:5
+                            },
+                            label:{
+                                position:'outside'
+                            },
                             itemStyle: {
-                                borderRadius: 5
+                                borderRadius: 5,
+                                color: (params) => {
+                                    return colorList[params.dataIndex]
+                                }
                             },
                             data: [
                                 {value: 30, name: 'rose 1'},
-                                {value: 28, name: 'rose 2'},
-                                {value: 26, name: 'rose 3'},
-                                {value: 24, name: 'rose 4'},
-                                {value: 22, name: 'rose 5'},
-                                {value: 20, name: 'rose 6'},
-                                {value: 18, name: 'rose 7'},
-                                {value: 16, name: 'rose 8'}
+                                {value: 25, name: 'rose 2'},
+                                {value: 22, name: 'rose 3'},
+                                {value: 20, name: 'rose 4'},
+                                {value: 16, name: 'rose 5'},
+                                {value: 10, name: 'rose 6'},
+
                             ]
                         }
                     ]
@@ -1131,7 +1388,7 @@ const indexValue = [
             echartIndexChange(val){
                 console.log(`Selected: ${val}`);
                 let type=this.handlerTypeOfIndex(val);
-
+                console.log(type)
                 this.initEchart('adPositionEchart',this.initAdpositionChart(type,[]))
                 this.initEchart('ageEchart',this.initAdpositionChart(type,[]))
                 this.initEchart('genderEchart',this.initAdpositionChart(type,[]))
@@ -1197,11 +1454,14 @@ const indexValue = [
 
 
             handlerTypeOfIndex(val){
-                return this.indexValue.map(item=>{
+                let type=''
+                this.indexValue.forEach(item=>{
                     if(item.value==val){
-                        return item.type
+                        type= item.type
                     }
                 })
+
+                return type
             }
         },
         mounted() {
@@ -1209,6 +1469,9 @@ const indexValue = [
                 this.initEchart('gaugeEchart',this.initGaugechart(30))
                 this.initEchart('newDataEchart',this.initNewDataChart())
                 this.initEchart('materialEchart',this.initMaterialChart())
+                this.initEchart('accountIndexEchart',this.initAccountIndexEchart('激活',[]))
+                this.echartIndexChange('cost')
+                
             })
             
         },
@@ -1288,6 +1551,7 @@ const indexValue = [
 <style lang="scss" scoped>
 // #
 .accountPage{
+    
     .echart{
         margin-top: 30px;
     }
@@ -1312,7 +1576,7 @@ const indexValue = [
     }
     .accountBodyRight{
         width: 25%;
-        flex-shrink: 0;
+        // flex-shrink: 0;
         padding: 25px;
     }
     .accountBodyLeft,.accountBodyRight{
@@ -1370,20 +1634,83 @@ const indexValue = [
         .top{
             display: flex;
             justify-content: space-between;
+            padding-top: 8px;
         }
         .item{
             width: 20%;
+            min-width: 100px;
+            
+        }
+        .todyCost{
+            font-size: 2em;
+            font-weight: 700;
+            color:#303133;
+            margin-bottom: 10px;
+            width: 100%;
+            
+        }
+        .sign{
+            font-size: 18px;
+            .rise{
+                color: #F2637B;
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                // background-color: #F2637B;
+                // border-radius: 50%;
+                // color: white;
+                // font-size: 14px;
+                transform: rotate(-30deg);
+            }
+            .fall{
+                color: green;
+            }
+            .up{
+                width: 16px;
+                height: 16px;
+                text-align: center;
+                background-color: #F2637B;
+                border-radius: 5px;
+                color: white;
+            }
+        }
+        .yesterdayCost{
+            font-size: 15px;
+            font-weight: 500;
+            color:#303133;
+            margin-bottom:8px ;
+        }
+        .IndexName{
+            font-size: 15px;
+            font-weight: 600;
+            color:#303133;
+            display: inline-block;
+            cursor: pointer;
+        }
+        .IndexNameActive{
+            color:#2461F1;
+        }
+        .IndexNameActive::after{
+            content: '';
+            display: block;
+            width: 15px;
+            height: 3px;
+            background: #2461F1;
+            position: relative;
+            top: 5px;
+            left: 50%;
+            margin-left: -8px;
         }
-
         .showIndex{
             position: absolute;
             top: -5px;
             right: 0px;
-            font-size: 14px;
+            font-size: 12px;
             cursor: pointer;
+            color: #909399;
         }
         .showIndex:hover{
-            color:#1890ff
+            color:#2461F1
         }
     }
 

+ 0 - 162
面试题.md

@@ -1,162 +0,0 @@
-#  2月22日 
-
-- 基础题
-  - 编写一个方法,该方法接收两个参数,分别为 k 和 一个无序的纯数字数组。该方法在执行后,会返回数组中第 k 大的数字。特别注意,如果数组中,有两位数值一样的数字,同数值数字排名并列。如 [3,1,3,2,5,4,5] 中,第 1 大的数字为 5,第2大的数字为 4,第5大的数字为 1?
-  - `__proto__`  和 prototype 之前有什么关系?
-  - call(), .apply() .bind() 的区别和作用?bind 方法如何来实现?
-
-- 附加题
-  - `JS`中基础数据类型有哪几种?了解包装对象么?
-  - 2、如何判断this?箭头函数的this是什么?
-
-# 2月23日
-
-- 基础题 
-  - 如何中断ajax请求?
-  - 什么是同步?什么是异步?
-  - 什么是宏任务?什么是微任务?
-
-- 附加题
-
-# 2月24日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 2月25日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 2月26日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 2月27日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 2月28日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月1日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月2日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月3日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月3日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月4日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月5日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月6日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月7日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月8日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月9日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月10日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月11日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月12日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月13日
-
-- 基础题
-  - 
-
-- 附加题
-
-# 3月14日
-
-- 基础题
-  - 
-
-- 附加题
-
-
-