瀏覽代碼

Merge branch 'feature/work-test'

liubei@c-top.com.cn 3 年之前
父節點
當前提交
68faee647b

+ 4 - 1
.env.development

@@ -19,4 +19,7 @@ VUE_APP_BASE_MATERIAL_URL = http://192.168.0.195:9999/material
 # 测试环境 http://192.168.0.195:9999
 # 西安环境 http://192.168.1.59:7006
 
-
+#盯盘相关接口
+VUE_APP_BASE_STARE_URL = http://192.168.0.195:9999/material
+# 字安接口 http://192.168.1.43:9999
+# 测试环境 http://192.168.0.195:9999

+ 6 - 1
.env.production

@@ -22,4 +22,9 @@ VUE_APP_BASE_MATERIAL_URL = http://api.tjyourong.com.cn/material
 #宇飞接口地址
 VUE_APP_BASE_MOST_SYSTEM = http://118.24.244.213:8808
 # 线上 http://118.24.244.213:8808
-# 测试 http://139.186.165.84:8808
+# 测试 http://139.186.165.84:8808
+
+#盯盘相关接口
+VUE_APP_BASE_STARE_URL = http://192.168.0.195:9999/material
+# 字安接口 http://192.168.1.43:9999
+# 测试环境 http://192.168.0.195:9999

二進制
src/assets/greendown.png


二進制
src/assets/upred.png


+ 27 - 27
src/permission.js

@@ -56,19 +56,19 @@ router.beforeEach((to, from, next) => {
               next({ ...to, replace: true })
             } else {
               // 跳转到目的路由
-              if( to.path === '/dashboard/analysis' && from.path == '/'){
-                if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae'|| store.getters.userInfo.id == 'db2d59e9b4a3b18629c838fd7f5b58d8') {
-                  const a = document.createElement('a');
-                  document.body.appendChild(a);
-                  a.style.display = 'none';
-                  a.href = 'http://adsp.c-top.com.cn/boss-data-kanban';
-                  a.target = '_blank'
-                  a.click();
-                  document.body.removeChild(a);
-                  // let tempPage = window.open('', '_blank');
-                  // tempPage.location="/boss-data-kanban";
-                }
-              }
+              // if( to.path === '/dashboard/analysis' && from.path == '/'){
+              //   if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
+              //     const a = document.createElement('a');
+              //                         document.body.appendChild(a);
+              //                         a.style.display = 'none';
+              //                         a.href = 'http://192.168.0.195:9001/boss-data-kanban';
+              //                         a.target = '_blank'
+              //                         a.click();
+              //                         document.body.removeChild(a);
+              //     // let tempPage = window.open('', '_blank');
+              //     // tempPage.location="/boss-data-kanban";
+              //   }
+              // }
               next({ path: redirect })
             }
           })
@@ -87,20 +87,20 @@ router.beforeEach((to, from, next) => {
         warterMark.set(store.getters.userInfo.realname)
         next()
       }
-      if( to.path === '/dashboard/analysis' && from.path == '/'){
-        if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae' || store.getters.userInfo.id == 'db2d59e9b4a3b18629c838fd7f5b58d8') {
-          const a = document.createElement('a');
-          document.body.appendChild(a);
-          a.style.display = 'none';
-          a.href = 'http://adsp.c-top.com.cn/boss-data-kanban';
-          a.target = '_blank'
-          a.click();
-          document.body.removeChild(a);
-          // let tempPage = window.open('', '_blank');
-          // tempPage.location="/boss-data-kanban";
-          return
-        }
-      }
+      // if( to.path === '/dashboard/analysis' && from.path == '/'){
+      //   if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
+      //     const a = document.createElement('a');
+      //                         document.body.appendChild(a);
+      //                         a.style.display = 'none';
+      //                         a.href = 'http://192.168.0.195:9001/boss-data-kanban';
+      //                         a.target = '_blank'
+      //                         a.click();
+      //                         document.body.removeChild(a);
+      //     // let tempPage = window.open('', '_blank');
+      //     // tempPage.location="/boss-data-kanban";
+      //     return
+      //   }
+      // }
     }
   } else {
     if (whiteList.indexOf(to.path) !== -1) {

+ 1 - 1
src/views/modules/stockWatch/modules/keep-person/keep-person.vue

@@ -332,7 +332,7 @@ export default {
             }).then((res) => {
                 // console.log(res)
                 if (res.success) {
-                // console.log(JSON.parse(res.result))
+                console.log(JSON.parse(res.result))
                 if (res.result) {
                     let columns = JSON.parse(res.result)
                     if (columns.length) {

File diff suppressed because it is too large
+ 1463 - 0
src/views/modules/stockWatch/modules/new-keepManage/account-newkeepManage.vue


File diff suppressed because it is too large
+ 1236 - 0
src/views/modules/stockWatch/modules/new-keepManage/acountProjectData.js


+ 296 - 0
src/views/modules/stockWatch/modules/new-keepManage/customColumnProject.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="customColumnKS">
+      <a-modal v-model="visibleOk" title="自定义列" on-ok="handleOk" @cancel="handleCancel" width="65%">
+        <template slot="footer">
+          <a-button key="back" @click="handleCancel">取消</a-button>
+          <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
+        </template>
+        <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
+        <div class="zhuti">
+          <div class="addlist">
+            <p>可添加的列</p>
+            <div class="selectionList">
+              <!--  v-for="(item,index) in addColumns" :key="index" -->
+              <!-- <div v-if="mediaType==1"> -->
+                <selectComponent
+                :showCol="mylistNum"
+                @getshowlist="getshowlist"
+                :fixedCol="fiexColumn"
+                :mediaType='mediaType'
+                
+                />
+              <!-- </div> -->
+              <!-- <div v-if="mediaType==2">
+                <selectComponentKS
+                :showCol="mylistNum"
+                @getshowlist="getshowlist"
+                :fixedCol="fiexColumn"
+                :mediaType='mediaType'
+                
+              />
+              </div> -->
+              
+            </div>
+          </div>
+          <div class="listNum">
+            <p>已选{{mylistNum.length}}列</p>
+            <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
+            <ul class="selectlist">
+                  <!-- draggable="true"
+                    @dragstart="handleDragStart($event, item.dataIndex)"
+                    @dragover.prevent="handleDragOver($event, item.dataIndex)"
+                    @dragenter="handleDragEnter($event, item.dataIndex)"
+                    @dragend="handleDragEnd($event, item.dataIndex)" -->
+              <li v-for="(item,index) in mylistNum" :key="index">
+                <span v-if=" index < fiexColumn.length">
+                  <a-icon type="lock" />
+                  <span class="listText">{{item.title}}</span>
+                </span>
+                <span v-else-if=" index >=fiexColumn.length"  >
+                  <a-icon type="menu" style="color:#ccc" />
+                  <span class="listText">{{item.title}}</span>
+                  <a-icon
+                    type="close"
+                    @click="deleteCol(item,index)"
+                    id="closeStyle"
+                    style="fontSize:12px;"
+                  />
+                </span>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+  </template>
+  
+  <script>
+  import selectComponent from './selectComponentPrject.vue'
+  export default {
+    components: {
+      selectComponent,
+    },
+    props: ['visible', 'listNum', 'fiexColumn','mediaType'],
+  
+    data() {
+      return {
+        dragging: null,
+        dataKey: 0,
+        visibleOk: false,
+        mylistNum: [],
+        loading: false
+      }
+    },
+    watch: {
+      visible(n, o) {
+        // console.log(n,o)
+        this.visibleOk = this.visible
+      },
+      listNum: {
+        handler(newValue, oldValue) {
+          this.mylistNum = newValue
+        },
+        immediate: true
+        // deep: true
+      }
+    },
+    methods: {
+       //li展示里的关闭按钮 删除当前被选中的这一个列
+      deleteCol(item, index) {
+        this.mylistNum = this.mylistNum.filter((item1, num) => {
+          return num != index
+        })
+      },
+      handleDragStart(e, item) {
+        this.dragging = item
+      },
+      handleDragEnd(e, item) {
+        this.dragging = null
+      },
+      //首先把div变成可以放置的元素,即重写dragenter/dragover
+      handleDragOver(e) {
+        e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
+      },
+      handleDragEnter(e, item) {
+        e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
+        if (item === this.dragging) {
+          return
+        }
+        const newItems = [...this.mylistNum]
+        const src = newItems.findIndex(v => v.dataIndex === this.dragging)
+        const dst = newItems.findIndex(v => v.dataIndex === item)
+  
+        newItems.splice(dst, 0, ...newItems.splice(src, 1))
+  
+        this.mylistNum = newItems
+      },
+      //弹出框确定
+      handleOk(e) {
+        this.loading = false
+        this.visibleOk = false
+        this.$emit('closeCustomColumn', false)
+        this.$emit('changeColumn', this.mylistNum)
+      },
+      //取消按钮
+      handleCancel() {
+        this.visibleOk = false
+        this.$emit('closeCustomColumn', false)
+      },
+      //清空全部
+      clearAllList() {
+        this.mylistNum = [...this.fiexColumn]
+      },
+      //从自定义列拿选择的项
+      getshowlist(val) {
+        var arr = []
+  
+        // console.log(val)
+        if (val.length) {
+          if (val.flag) {
+            let newArr = val.arr
+            newVal.map((item, index) => {
+              // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
+              //  this.listNum.push(item); // 进行动态的操作
+              // }
+              var result = this.listNum.some(items => {
+                if (items.dataIndex == item.dataIndex) {
+                  return true
+                }
+              })
+  
+              // console.log(result)
+              if (result) {
+                newArr.splice(index, 1)
+              }
+            })
+  
+            this.mylistNum = [...this.mylistNum, ...newArr]
+          } else {
+            //取消全选  清楚listNum中的val里的值
+            val.arr.map((item, index) => {
+              var result = this.mylistNum.some(items => {
+                if (items.dataIndex == item.dataIndex) {
+                  return true
+                }
+              })
+              // console.log(result)
+              if (result) {
+                this.mylistNum.splice(index, 1)
+              }
+            })
+          }
+        } else {
+          arr = this.mylistNum.filter((item, index) => {
+            return item.dataIndex == val.dataIndex
+          })
+        }
+        if (arr.length) {
+          var index
+          this.mylistNum.map((item, ind) => {
+            if (item.dataIndex == val.dataIndex) {
+              index = ind
+            }
+          })
+          this.mylistNum.splice(index, 1)
+        } else {
+          this.mylistNum.push(val)
+        }
+      }
+    },
+    mounted() {
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  
+  
+  .addlist {
+    float: left;
+    width: 70%;
+    border: 1px solid #eee;
+    .selectionList {
+      padding: 10px 15px;
+      height: 450px;
+      overflow: auto;
+      .leibie {
+        .leiName {
+          font-size: 26px;
+          text-align: left;
+        }
+      }
+      .jutixiang {
+        display: inline-block;
+        width: 32%;
+        box-sizing: border-box;
+        padding: 10px 3px;
+      }
+    }
+  }
+  .listNum {
+    float: right;
+    width: 28%;
+    border: 1px solid #eee;
+    position: relative;
+  }
+  .zhuti {
+    margin-top: 15px;
+    overflow: hidden;
+  
+    p {
+      height: 40px;
+      line-height: 20px;
+      padding: 10px 15px;
+  
+      background: rgb(249, 250, 253);
+      border-bottom: 1px solid #eee;
+    }
+    #btn {
+      position: absolute;
+      right: 0;
+      top: 5px;
+    }
+    .selectlist {
+      width: 100%;
+      list-style: none;
+      margin: 0;
+      height: 450px;
+      padding: 0 15px 10px;
+      overflow: auto;
+  
+      li {
+        width: 100%;
+        padding: 5px 8px;
+        margin: 6px 0;
+        border-radius: 10px;
+        background: rgb(248, 248, 248);
+        height: 32px;
+        position: relative;
+        span {
+          width: 80%;
+          height: 100%;
+          display: inline-block;
+          margin: 0 10px;
+          // overflow:hidden;
+          // text-overflow:ellipsis;
+          // white-space: nowrap;
+        }
+        .listText {
+          position: absolute;
+          top: 2;
+          left: 10;
+          width: 60%;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        #closeStyle {
+          position: absolute;
+          top: 9px;
+          right: 7px;
+        }
+      }
+    }
+  }
+  
+  </style>

File diff suppressed because it is too large
+ 1155 - 0
src/views/modules/stockWatch/modules/new-keepManage/group-keepManage.vue


+ 200 - 0
src/views/modules/stockWatch/modules/new-keepManage/new-keep-data.js

@@ -0,0 +1,200 @@
+/**
+ * @file 盯盘基础展示数据
+ * @author zhuxinbo(zhuxinbo@c-top.com.cn)
+ */
+ import moment from 'moment'
+ class keepPersonServer {
+     constructor() {}
+ 
+     // 固定不可删除的列
+     setNoDeleteColumns() {
+         return [
+             {
+                 title: '项目名称',
+                 dataIndex: 'projectName',
+                 scopedSlots: { customRender: 'projectName' },
+                 align: 'center',
+                 key: 'date',
+                 width: 200,
+                 fixed: 'left',
+             },
+             {
+                 title: '账户数量',
+                 dataIndex: 'accountNum',
+                 align: 'center',
+                 width: 100,
+                 fixed: 'left',
+             },
+             {
+                 title: '运营人员',
+                 dataIndex: 'userNum',
+                 scopedSlots: { customRender: 'userNum' },
+                 align: 'center',
+                 width: 100,
+                 fixed: 'left',
+             },
+             {
+                 title: '花费',
+                 dataIndex: 'totalCost',
+                 align: 'center',
+                 width: 100,
+                 fixed: 'left',
+                 sorter: (a, b) => a.totalCost - b.totalCost,
+             },
+             {
+                 title: '花费环比',
+                 dataIndex: 'yearOnYear',
+                 width: 150,
+                 tip: '',
+                 align: 'center',
+                 
+             },{
+                title: '花费同比',
+                dataIndex: 'equallyRate',
+                width: 150,
+                tip: '',
+                align: 'center',
+                
+            },{
+                title: '有效素材数',
+                dataIndex: 'newEffectNum',
+                width: 150,
+                tip: '',
+                align: 'center',
+                
+            },{
+                title: '爆款素材数',
+                dataIndex: 'newHotNum',
+                width: 150,
+                tip: '',
+                align: 'center',
+                
+            },
+         ]
+     }
+
+     setNoDeleteProjectColumns() {
+        return [
+            {
+                title: '账户名称',
+                dataIndex: 'accountName',
+                scopedSlots: { customRender: 'accountName' },
+                align: 'center',
+                key: 'date',
+                width: 200,
+                fixed: 'left',
+            },{
+                title: '账户ID',
+                dataIndex: 'accountId',
+                scopedSlots: { customRender: 'accountId' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '运营人员',
+                dataIndex: 'userName',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            {
+                title: '花费',
+                dataIndex: 'totalCost',
+                scopedSlots: { customRender: 'totalCost' },
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+                sorter: (a, b) => a.totalCost - b.totalCost,
+            },
+            {
+                title: '花费环比',
+                dataIndex: 'yearOnYear',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },{
+                title: '花费同比',
+                dataIndex: 'equallyRate',
+                align: 'center',
+                width: 100,
+                fixed: 'left',
+            },
+            
+        ]
+    }
+    groupDelivery(){
+        return [
+            {
+                title: '状态操作',
+                dataIndex: 'status',
+                align: 'center',
+                scopedSlots: { customRender: 'status' },
+                },
+                {
+                title: '组名称',
+                dataIndex: 'unitName',
+                align: 'center',
+                width:350,
+                },{
+                title: '花费',
+                dataIndex: 'charge',
+                align: 'center',
+                sorter: (a, b) => a.charge - b.charge,
+                },{
+                title: '出价',
+                dataIndex: 'bid',
+                align: 'center',
+                sorter: (a, b) => a.bid - b.bid,
+                },{
+                title: '激活数',
+                dataIndex: 'activation',
+                align: 'center',
+                sorter: (a, b) => a.activation - b.activation,
+                },{
+                title: '激活成本',
+                dataIndex: 'activationCost',
+                align: 'center',
+                sorter: (a, b) => a.activationCost - b.activationCost,
+                },{
+                    title: '操作建议',
+                    dataIndex: 'operationAgree',
+                    key: 'operationAgree',
+                    align: 'center',
+                     
+                    },{
+                    title: '操作',
+                    dataIndex: 'operator',
+                    key: 'operator',
+                    align: 'center',
+                    scopedSlots: { customRender: 'operator' },
+                    },
+        ]
+    }
+     // 默认初始展示列
+     setDefaultColumns() {
+         return [
+             
+         ]
+     }
+ 
+     //时间段筛选
+     setTimeRange() {
+         return {
+             昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+             // 今天: [moment(), moment()],
+     
+             近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
+             近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
+             近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
+             近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
+             近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
+             近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
+         }
+     }
+ 
+ 
+ }
+ 
+ export default new keepPersonServer();
+ 

+ 39 - 0
src/views/modules/stockWatch/modules/new-keepManage/new-keepManage.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+       <newKeepManage v-if="disabledMange"></newKeepManage>
+       <newPersonal v-else></newPersonal>
+    </div>
+</template>
+
+
+<script>
+    import newKeepManage from './group-keepManage'
+    import newPersonal from './personal-keepManage.vue'
+    import { mapGetters, mapMutations, mapActions } from 'vuex'
+    export default {
+        components:{
+            newKeepManage,
+            newPersonal
+        },
+        data() {
+            return {
+                disabledMange:true
+            }
+        },
+        mounted() {
+            this.getRoleData();
+            
+        },
+        methods: {
+            ...mapGetters(['userInfo']),
+        getRoleData(){
+            if (this.userInfo().roleName.indexOf('运营经理') != -1 || this.userInfo().roleName.indexOf('管理员') != -1) {
+                this.disabledMange = true
+            }else{
+                this.disabledMange = false
+            }
+        },
+        },
+    }
+
+</script>

+ 327 - 0
src/views/modules/stockWatch/modules/new-keepManage/personal-keepManage.vue

@@ -0,0 +1,327 @@
+<template>
+    <div>
+        <a-row :gutter="24" style="margin-bottom: 20px;">
+            <a-col :sm="18" :md="18" :xl="18" class="keep-manage-col">
+                <a-card class="card-content echarts-card">
+                    <div slot="title">
+                        数据总览 更新时间:{{updateAccountEchart||'-'}}
+                    </div>
+                    <div class="person-content-title" slot="extra">
+
+                        <div class="content-title-acount"></div>
+                        <div class="content-title-checkout">
+                            <span class="title-checkout-time">
+                                <a-range-picker v-model="dateEchart" :range="dateRanges" />
+                            </span>
+                        </div>
+                    </div>
+
+                    <div id="accountIndexEchart" ref="accountIndexEchart"
+                    style="width: 90%;height: 315px;margin: 0 auto;">
+                    <a-empty />
+                    </div>
+
+                </a-card>
+            </a-col>
+
+            <a-col :sm="6" :md="6" :xl="6"  class="keep-manage-col">
+                <a-card title="运营个人数据" class="card-content">
+                    <div style="width: 100%;height: 315px;">
+                        <ul class="group-keep-ul">
+                            <li>
+                                今日消耗: <span style="font-weight: bold;">21,233.958</span> 
+                            </li>
+                            <li>
+                                <span  style="margin-left:20%;" v-if="personData  < 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
+                                    <span style="color: green;">10%</span>
+                                </span>
+                                <span style="margin-left:20%;" v-else-if="personData>= 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
+                                    <span style="color: red;">10%</span>
+                                </span>
+                            </li>
+                            <li>
+                                消耗:118,2335.112
+                            </li>
+                            <li>
+                                <span>环比:</span>
+                                <span style="margin-left: 10%;" v-if="personData  < 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/up.png" alt="">
+                                    <span style="color: green;">10%</span>
+                                </span>
+                                <span style="margin-left: 10%;" v-else-if="personData>= 0">
+                                    <img style=" width: 25px;height: 25px;" class="title-radio-img" src="@/assets/down.png" alt="">
+                                    <span style="color: red;">10%</span>
+                                </span>
+                            </li>
+                            <li>
+                                月消耗:12,520.525
+                            </li>
+                            <li>
+                                月激励:12,520.525
+                            </li>
+                            <li>
+                                月框返:12,520.525
+                            </li>
+                            <li>
+                                团队内排名:1/86
+                            </li>
+                        </ul>
+                        
+                      
+                    </div>
+                </a-card>
+            </a-col>
+        </a-row>
+
+        <a-row :gutter="24">
+            <a-col>
+                <a-card title="项目列表" >
+                    <div class="person-content-title" slot="extra">
+                        <div class="content-title-acount"></div>
+                        <div class="content-title-checkout">
+                            <span style="margin-right: 20px;">
+                                <a-button type="link">
+                                    自定义列
+                                  </a-button>
+                            </span>
+                            <span style="margin-right: 20px;">
+                                <a-range-picker
+                                v-model="dateMiddleProject"
+                                :ranges="dateRanges"
+                                />
+                            </span>
+                            <span>
+                                <a-radio-group v-model="projectAccount" >
+                                    <a-radio-button value="a">
+                                      项目
+                                    </a-radio-button>
+                                    <a-radio-button value="b">
+                                      账户
+                                    </a-radio-button>
+                                  </a-radio-group>
+                            </span>
+                        </div>
+                    </div>
+
+                    <a-table
+                    size="middle"
+                    :dataSource="echartsDataProject"
+                    :columns="columnsProject"
+                    bordered
+                    id="outTable"
+                    :pagination="echartsIpaginationProject"
+                    :loading="echartsLoading"
+                    ref="accountTable"
+                    ></a-table>
+
+                </a-card>
+            </a-col>
+        </a-row>
+    </div>
+</template>
+
+
+<script>
+    import keepPersonData from '../keep-manage/keep-manage-data.js';
+    import moment from 'moment';
+    // 引入基本模板
+    var echarts = require('echarts');
+    // 引入折线图组件
+    require('echarts/lib/chart/line');
+    // 引入提示框和title组件
+    require('echarts/lib/component/tooltip');
+    require('echarts/lib/component/title');
+    require('echarts/lib/component/graphic');
+    require('echarts/lib/component/toolbox');
+    require('echarts/lib/component/legend');
+    export default{
+        data() {
+            return {
+                updateAccountEchart:'2021-12-22 8:00:00',
+                dateEchart:[moment(), moment()],
+                dateRanges: keepPersonData.setTimeRange(),
+                personData:0,
+                dateMiddleProject:[moment(), moment()],
+                echartsDataProject:[],
+                echartsLoading: false,
+                projectAccount:'a',
+                echartsIpaginationProject:{
+                current: 1,
+                pageSize: 5,
+                //   pageSizeOptions: ['10', '20', '30'],
+                showTotal: (total, range) => {
+                return range[0] + '-' + range[1] + ' 共' + total + '条'
+                },
+                showQuickJumper: true,
+                // showSizeChanger: true,
+                // pageSizeOptions: ['10', '30', '50'],
+                total: 0,
+                onChange: (current, pageSize) => {
+                    // 切换分页时的回调,
+                    // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
+                    this.echartsIpaginationProject.current = current
+                    this.echartsIpaginationProject.pageSize = pageSize
+                },
+                },
+                columnsProject:[
+                    {
+                    title: '项目名称',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '账户数量',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '运营人员',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '花费',
+                    align: "center",
+                    dataIndex: '',
+                    sorter: true,
+                    },{
+                    title: '花费环比',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '花费同比',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '上新素材数',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '有效素材数',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '爆款素材数',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '激活数',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '激活单价',
+                    align: "center",
+                    dataIndex: ''
+                    },{
+                    title: '行为数',
+                    align: "center",
+                    dataIndex: ''
+                    },
+                ]
+            }
+        },
+        mounted() {
+            this.getQueryNewlyData();
+        },
+        methods: {
+            getQueryNewlyData(){
+                this.initEchart('accountIndexEchart',this.initAccountIndexEchart())
+            },
+               //获取echart的值
+            initEchart(idName, optionName) {
+                let that = this;
+                const chart = this.$refs[idName]
+                //   // console.log(res);(chart)
+                if (chart) {
+                    console.log(chart);
+                    const myChart = echarts.init(document.getElementById(idName))
+                    // myChart.showLoading({
+                    //     text: "图表数据正在努力加载..."
+                    // });
+                    myChart.clear()
+                    myChart.setOption(optionName)
+                    window.addEventListener('resize', function() {
+                        that.clientWidth = document.documentElement.clientWidth - 224
+                        myChart.resize()
+                    })
+                }
+            },
+             //趋势图echarts配置
+             initAccountIndexEchart() {
+                // this.clientWidth  =  document.documentElement.clientWidth - 224
+                // var myChart = echarts.init(document.getElementById('accountIndexEchart'))
+                let option = {
+                  
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    legend: {
+                        data: ['today','yesterday']
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+
+                    },
+                    // toolbox: {
+                    //     feature: {
+                    //         saveAsImage: {}
+                    //     }
+                    // },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                    },
+                    yAxis: {
+                        type: 'value'
+                    },
+                    series: [
+                        {
+                            name: 'today',
+                            type: 'line',
+                            smooth: true,
+                            symbol: 'circle',
+                            data: [120, 132, 101, 134, 90, 230, 210],
+                            lineStyle: {                               
+                            color: '#00BFFF',   
+                            width: 2,
+                            },
+                            itemStyle:{
+                            color:'#00BFFF',
+                            borderWidth:2,
+                            borderColor:'#00BFFF'
+                            },
+                        },
+                        {
+                            name: 'yesterday',
+                            type: 'line',
+                            smooth: true,
+                            symbol: 'circle',
+                            data: [220, 182, 191, 234, 290, 330, 310],
+                            lineStyle: {                               
+                            color: '#00FF7F',   
+                            width: 2,
+                            },
+                            itemStyle:{
+                            color:'#00FF7F',
+                            borderWidth:2,
+                            borderColor:'#00FF00'
+                            },
+                        },
+                       
+                    ]
+                };
+                return option
+            },
+        },
+    }
+</script>
+<style lang="less" scoped>
+     @import "../keep-manage/keep-manage.less";
+    .group-keep-ul li{
+    margin-bottom: 15px;
+    font-size: 16px;
+}
+</style>

+ 240 - 0
src/views/modules/stockWatch/modules/new-keepManage/selectComponentPrject.vue

@@ -0,0 +1,240 @@
+<template>
+    <div>
+      <div v-for="(item,index) in customFields" :key="index">
+        <div class="leibie">
+          <p class="leiName">{{item.title}}</p>
+          <!-- <span class="jutixiang">
+            <a-checkbox
+              :value="index"
+              name="type"
+              @change="isSelectAll($event,index)"
+              :checked="item.checkall"
+            >全选</a-checkbox>
+          </span> -->
+          <!-- {{item.form}} -->
+          <a-checkbox-group v-model="item.form" >
+            <span class="jutixiang" v-for="(zhi,num) in item.specificFields " :key="num">
+  
+              <a-checkbox :value="zhi.dataIndex" :disabled="zhi.disabled"  name="type" @change="checkboxClick(zhi)">
+                <a-tooltip
+                  class="select-component"
+                  placement="top"
+                  :title="zhi.tip"
+                  :overlayClassName="tooltipShow"
+                >{{zhi.title}}</a-tooltip>
+              </a-checkbox>
+            </span>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import  {customFieldsSource ,KScustomFields}  from './acountProjectData.js'
+  // let customFields=customFields
+  export default {
+    props: ['showCol','fixedCol','mediaType'],
+    data() {
+      return {
+          // customFields,
+        customFields:[],
+        quanxuanflag: [],
+        hovered: false,
+        tooltipShow: 'tooltipShow',
+        toParentArr: []
+      }
+    },
+    watch: {
+      
+      showCol(n) {
+        // console.log(n)
+        //
+        if (this.showCol.length == this.fixedCol.length) {
+  
+          for (let i = 0; i < this.customFields.length; i++) {
+            this.customFields[i].form=[]          
+          }
+          this.showCol.map((item, index) => {
+            this.customFields.map((it, ind) => {
+              it.specificFields.map((i, d) => {
+                if (i.dataIndex === item.dataIndex) {
+                  it.form.push(item.dataIndex)
+                }else{
+  
+                }
+              })
+            })
+          })
+        } else {
+          
+         for (let i = 0; i < this.customFields.length; i++) {
+            this.customFields[i].form=[]
+            
+          }
+          n.map((item, index) => {
+            this.customFields.map((it, ind) => {
+              it.specificFields.map((i, d) => {
+                if (i.dataIndex === item.dataIndex) {
+                  it.form.push(item.dataIndex)
+                }else{
+  
+                }
+              })
+            })
+          })
+        }
+        // console.log(this.form)
+      },
+    
+    },
+    mounted() {
+      if(this.mediaType==1){
+        //头条自定义列
+        this.customFields=customFieldsSource
+      }else if(this.mediaType==2){
+        //快手自定义列
+        this.customFields=KScustomFields
+      }
+      for (let i = 0; i < this.customFields.length; i++) {
+        this.customFields[i].form=[]
+      }
+      // console.log(1)
+      this.showCol.map((item, index) => {
+        this.customFields.map((it, ind) => {
+          it.specificFields.map((i, d) => {
+            if (i.dataIndex === item.dataIndex) {
+              it.form.push(item.dataIndex)
+            }
+          })
+        })
+      })
+      this.fixedCol.map((item, index) => {
+        this.customFields.map((it, ind) => {
+          it.specificFields.map((i, d) => {
+            if (i.dataIndex === item.dataIndex) {
+              i.disabled=true;
+            }
+          })
+        })
+      })
+  
+  
+      console.log(this.customFields, 'customFields-customFields');
+      
+    },
+    methods: {
+      hide() {
+        this.clicked = false
+        this.hovered = false
+      },
+      handleHoverChange(visible) {
+        this.clicked = false
+        this.hovered = visible
+      },
+      getPopupContainer() {
+        console.log(this)
+      },
+  
+      //全选框   判断是否全选
+      isSelectAll(e, val) {
+        //像父元素传递
+        console.log(e, val)
+        let arr=JSON.parse(JSON.stringify(this.customFields[val].specificFields))
+        let valArr={
+          flag:true,
+          arr
+        }
+        this.customFields[val].checkall = e.target.checked
+        console.log(this.customFields[val].checkall)
+  
+        if (this.customFields[val].checkall) {
+         
+          this.customFields[val].form=[]
+   
+          this.customFields[val].specificFields.map((item, index) => {
+  
+            this.customFields[val].form.push(item.dataIndex)
+  
+          })
+          valArr.flag=true;
+          this.$emit('getshowlist', valArr)
+        } else {
+          console.log(this.customFields[val])
+          this.customFields[val].form=[];
+          valArr.flag=false;
+          console.log(this.customFields[val].form=[])
+          this.$emit('getshowlist', valArr)
+        }
+  
+        console.log(this.form[val])
+      },
+  
+      onChange(){
+          
+      },
+  
+      //复选框的点击事件
+      checkboxClick(val) {
+        // console.log(val)
+      //   this.$emit('update:count',)
+        this.$emit('getshowlist', val)
+        // console.log(val,this.customFields[0].form)
+        // this.customFields[val].checkall=!this.customFields[val].checkall
+        // for (let i = 0; i < this.customFields.length; i++) {
+        //   // console.log(this.customFields[0].form,this.customFields[i].specificFields.length)
+        //   if(this.customFields[i].form.length==this.customFields[i].specificFields.length-1){
+        //       this.customFields[i].checkall=true;
+        //   }else{
+        //     this.customFields[i].checkall=false;
+        //   }
+            
+        //   }
+      }
+    }
+  }
+  </script>
+  <style>
+  .tooltipShow {
+    max-width: 30%;
+  }
+  .tooltipShow .ant-tooltip-content .ant-tooltip-inner {
+    background: white;
+    font-size: 10px;
+    color: #333;
+  }
+  .ant-tooltip-content .ant-tooltip-arrow::before {
+    background-color: white;
+  }
+  </style>
+  <style lang="scss" scoped>
+  .leibie {
+    width: 100%;
+    margin-bottom: 10px;
+    .leiName {
+      font-size: 20px;
+      text-align: left;
+      margin-bottom: 5px;
+      margin-top: 0px;
+    }
+  }
+  .jutixiang {
+    display: inline-block;
+    width: 32%;
+    box-sizing: border-box;
+    padding: 8px 3px;
+    height: 30px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .ant-tooltip-content .tooltipShow {
+    background: #eee;
+    font-size: 10px;
+    color: #333;
+  }
+  
+  .ant-checkbox-group {
+    width: 100%;
+  }
+  </style>