智能雷达页面

project/src/components/channelCode/channelAnalyse.vue

@@ -36,6 +36,7 @@ export default {
       default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
       resetFlag: false,
       myChart: null,
+      time:[]
     }
   },
   created(){

project/src/components/smartRadar/addLimit.vue

@@ -0,0 +1,203 @@
+<template>
+  <div>
+<!--
+ <div class="regulations">
+      <label><em>*</em>预警人</label>
+      <self-customerservice title='' width="300px"
+                            :afferent_users='user_id_list'
+                            @customerDefine="(val)=>{user_id_list=val;}"></self-customerservice>
+
+    </div>
+-->
+
+    <div style="margin-left: 100px;width: 720px">
+      <div class="flex">
+        <self-input :hasLabel="false" @inputChange='(val)=>{member_val = val;initFlag=!initFlag}'></self-input>
+        <el-button type="primary" size="mini" @click="batch_setting">批量设置</el-button>
+      </div>
+      <el-table v-loading="loading" ref="multipleTable"
+                border
+                :data="tableData"
+                tooltip-effect="dark"
+                @selection-change="handleSelectionChange"
+                :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+                style="width: 100%">
+        <el-table-column width="40px" type="selection"></el-table-column>
+        <el-table-column label="全部成员" align="center">
+          <template slot-scope="scope">
+            <div>{{scope.row.user_id ? scope.row.user_id : '-'}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="每日添加客户上限" align="center">
+          <template slot-scope="scope">
+            <el-input size="mini" v-model="scope.row.input"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="今日添加客户数" align="center">
+          <template slot-scope="scope">
+            <div>{{scope.row.assign_count||scope.row.assign_count==0 ? scope.row.assign_count : '-'}}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="是否分配客户" align="center">
+          <template slot-scope="scope">
+            <el-switch v-model="scope.row.isAllot"
+                       active-color="#13ce66"
+                       inactive-color="#ddd"></el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <div class="c-00B38A pointer lMar8">删除</div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination" v-show="total>0">
+        <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+        </el-pagination>
+      </div>
+    </div>
+
+
+    <el-dialog
+      title="设置添加上限"
+      :center="true"
+      :visible.sync="dialogVisible"
+      width="20%">
+      <div style="display: flex;align-items: center;justify-content: center">
+        <div>每日添加客户上限: </div>
+        <div style="width: 100px;margin-left: 20px"><el-input size="mini" v-model="batchVal"></el-input></div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="batchValSave">确 定</el-button>
+      </span>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
+export default {
+  name: "addLimit",
+  components:{
+    selfCustomerservice,
+    selfInput
+  },
+  data(){
+    return{
+      loading: false,
+      dataLoading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      tableData:[],
+      user_id_list:[],
+      input:'',
+      initFlag:false,
+      member_val:'',
+      noChooseFlag:false,
+      user_ids:[],
+      dialogVisible:false,
+      batchVal:100,
+    }
+  },
+  watch:{
+
+  },
+  created() {
+    this.init(1)
+  },
+  methods:{
+    batchValSave(){
+      this.dialogVisible = false
+    },
+    noChooseCustomeTips(){//没有选择客户提示
+      this.noChooseFlag = false
+      if( this.user_ids){
+        if(this.user_ids.length==0){
+          this.$message({
+            type: 'error',
+            message: '请选择成员!'
+          });
+          this.noChooseFlag = true
+        }
+        if(this.user_ids.length>=4){
+          this.$message({
+            type: 'error',
+            message: '最多可选3个成员!'
+          });
+          this.noChooseFlag = true
+        }
+      }
+
+    },
+    handleSelectionChange(val){//列表选择人员
+      this.user_ids = []
+      val.forEach(item=>{
+        this.user_ids.push(item.user_id)
+      })
+    },
+    batch_setting(){//批量设置
+      this.noChooseCustomeTips()
+      if(this.noChooseFlag){return}
+      this.batchVal = 100
+      this.dialogVisible = true
+
+    },
+    goDataAanlyse(id){
+      this.$router.push('/dataAnalyse/'+id)
+    },
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.batchAddCustomer_statistic, {
+        params:{
+          start_date: '2022-05-14',
+          end_date: '2022-06-13',
+          page: type == 'export' ? 1 : this.page,
+          pagesize: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            this.tableData = res.rst.data
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../customOperate/create.scss";
+</style>

project/src/components/smartRadar/createRadar.vue

@@ -0,0 +1,363 @@
+<template>
+  <div>
+    <div class="backBox" @click="$router.go(-1)">
+     <div class="back">
+       <i class="el-icon-back"></i>
+       <span>返回</span>
+     </div>
+   </div>
+
+    <div v-if="!loading" class="bg-ffffff createMassMsg" style="padding: 10px 30px 10px;">
+      <div class="regulations">
+        <label><em>*</em>名称</label>
+        <el-input placeholder="请输入雷达名称" style="width:300px" v-model.trim="radarName"
+                  maxlength="32"
+                  show-word-limit
+                  clearable size="small"></el-input>
+      </div>
+      <div class="regulations" style="align-items: center">
+        <label>选择分组</label>
+        <el-select v-model="group_val" size="small" clearable placeholder="请选择" style="width: 300px">
+          <el-option
+            v-for="item in groupArrs"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>文件类型</label>
+<!--        <fileType></fileType>-->
+      </div>
+      <div class="regulations">
+        <label><em>*</em>跳转链接</label>
+        <el-input placeholder="请输入跳转链接" style="width:300px" v-model.trim="jumplink_val"
+                  clearable size="small"></el-input>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>雷达标题</label>
+        <el-input placeholder="请输入雷达标题" style="width:300px" v-model.trim="radartitle"
+                  clearable size="small"></el-input>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>雷达描述</label>
+        <el-input placeholder="请输入雷达标题" style="width:300px" v-model.trim="radardesc"
+                  clearable size="small"></el-input>
+      </div>
+      <div class="regulations">
+        <label><em>*</em>雷达封面</label>
+        <div>
+
+        </div>
+      </div>
+      <div class="regulations smartFollow">
+        <label class="fWeight600">智能跟进</label>
+        <div>
+          <el-checkbox-group v-model="smartVal">
+            <el-checkbox label="行为通知(当客户点击雷达时,发送雷达的员工将会收到消息提醒)"></el-checkbox>
+            <el-checkbox label="动态通知(当客户点击雷达时,会将客户的打开行为记录在客户动态里)"></el-checkbox>
+            <el-checkbox label="客户标签(给点击雷达的客户打上选中的标签)"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+
+      <div style="margin-top: 20px">
+        <el-button type="primary" @click="newCode_click">创建雷达</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import dialogGroup from './dialogGroup.vue'
+export default {
+  name: "createRadar",
+  components:{
+    // dialogGroup
+  },
+  data(){
+    return{
+      loading:false,
+      radarName:'',
+      jumplink_val:'',
+      radartitle:'',
+      radardesc:'',
+      group_val:0,
+      groupArrs:[
+        {
+          label:'分组一',
+          value:0
+        }
+      ],
+      user_id_list: [],
+
+      resetFlag: false,
+      smartVal: [],
+
+    }
+  },
+  watch:{
+
+  },
+  created(){
+
+  },
+  methods:{
+    detail () {//详情
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.welcomeMsg_detail, {
+        params: {
+          rule_id: this.$route.query.id
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          this.dataInfo = res.rst;
+          this.is_for_all = res.rst.is_for_all;
+          this.user_id_list = res.rst.users ? res.rst.users.split(',') : [];
+          this.name = res.rst.name;
+          let msg_list = res.rst.msg_list;
+          msg_list.forEach((item) => {
+            item.content = item.content ? item.content.replace('%NICKNAME%', '「客户昵称」') : '';
+            item.attachments = item.attachments && item.attachments != '' ? JSON.parse(item.attachments) : [];
+            item.weeks = item.weeks ? item.weeks.split(',') : []
+          })
+          let main_msg_data = msg_list.filter((v) => {//特定有一个主欢迎语内容
+            return v.is_day_parting == 0
+          })
+          this.main_msg_data = main_msg_data && main_msg_data.length > 0 ? main_msg_data[0] : {};
+
+          this.timeIntervalList = msg_list.filter((v) => {//分时段欢迎语内容
+            return v.is_day_parting == 1
+          })
+
+          if (msg_list.length > 1) {
+            this.is_day_parting = true
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    tipsClick(){
+      if(this.user_id_list&&this.user_id_list.length==0){
+        this.$message({
+          type: 'error',
+          message: '请先选择使用客服!'
+        });
+      }
+    },
+    newCode_click(){//新建活码
+      if(this.radarName == ''){
+        this.$message({
+          type: 'error',
+          message: '渠道名称不能为空!'
+        });
+        return
+      }
+      if(this.user_id_list&&this.user_id_list.length==0){
+        this.$message({
+          type: 'error',
+          message: '使用客服不能为空!'
+        });
+        return
+      }
+      if(this.customerNote_val==''){
+        this.$message({
+          type: 'error',
+          message: '客户备注不能为空!'
+        });
+        return
+      }
+      if (this.main_msg_data.content == '' && (!this.main_msg_data.attachments || this.main_msg_data.attachments == '' || this.main_msg_data.attachments.length == 0)) {
+        this.$message({
+          message: '请输入【主】欢迎语内容！',
+          type: "warning"
+        })
+        return
+      }
+      if (this.main_msg_data.content != '' && this.$getStrBytes(this.main_msg_data.content) > 4000) {
+        this.$message({
+          message: '请检查【主】欢迎语内容，最多4000个字节，已超出！',
+          type: "error"
+        })
+        return
+      }
+
+      let msg_data = []
+      if (this.is_day_parting) {//开启分段欢迎语
+        for (let i = 0; i < this.timeIntervalList.length; i++) {
+          let item = this.timeIntervalList[i];
+          if (item.content == '' && (!item.attachments || item.attachments == '' || item.attachments.length == 0)) {
+            this.$message({
+              message: `请输入【时段${i + 1}】欢迎语内容！`,
+              type: "warning"
+            })
+            return
+          }
+          if (item.content != '' && this.$getStrBytes(item.content) > 4000) {
+            this.$message({
+              message: `请检查【时段${i + 1}】欢迎语内容，最多4000个字节，已超出！`,
+              type: "error"
+            })
+            return
+          }
+          if (!item.weeks || item.weeks.length == 0) {
+            this.$message({
+              message: `请选择【时段${i + 1}】发送日期！`,
+              type: "warning"
+            })
+            return
+          }
+          if (!item.start_time || item.start_time == '') {
+            this.$message({
+              message: `请输入【时段${i + 1}】发送开始时间！`,
+              type: "warning"
+            })
+            return
+          }
+          if (!item.end_time || item.end_time == '') {
+            this.$message({
+              message: `请输入【时段${i + 1}】发送结束时间！`,
+              type: "warning"
+            })
+            return
+          }
+          if (this.$date_compatible(('2020-04-01 ' + item.start_time)).getTime() > this.$date_compatible(('2020-04-01 ' + item.end_time)).getTime()) {
+            this.$message({
+              message: `请正确输入【时段${i + 1}】发送时间！`,
+              type: "warning"
+            })
+            return
+          }
+        }
+        msg_data = msg_data.concat(this.timeIntervalList)
+      } else {//关闭分段欢迎语
+        let delete_arr = JSON.parse(JSON.stringify(this.timeIntervalList));
+        delete_arr = delete_arr.filter((v) => {
+          return v.msg_id
+        })
+        delete_arr.forEach((item) => {
+          item.operate = 'del'
+        })
+        this.deleteTimeIntervalList = this.deleteTimeIntervalList.concat(delete_arr)
+      }
+      msg_data = msg_data.concat(this.deleteTimeIntervalList);//删除的分时段内容
+
+      msg_data.push(this.main_msg_data)
+      msg_data.forEach((item) => {
+        item.weeks = item.weeks.join(',');
+        item.content = item.content.replace('「客户昵称」', '%NICKNAME%')
+        item.attachments = item.attachments == '' || item.attachments.length == 0 ? '' : JSON.stringify(item.attachments)
+      })
+
+      this.$loading(this.$loadingConfig)
+
+      this.$axios.post(this.URL.BASEURL + this.URL.welcomeMsg_set, {
+        rule_id: this.$route.query.id ? this.$route.query.id : '',
+        radarName: this.radarName,
+        is_for_all: this.is_for_all,
+        users: this.is_for_all == 0 ? this.user_id_list.join(',') : '',
+        msg_data: msg_data
+      }).then((res) => {
+        var res = res.data
+        this.$loading(this.$loadingConfig).close()
+        if (res && res.errno == 0) {
+          this.$router.go(-1)
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.$loading(this.$loadingConfig).close()
+      });
+    },
+    tagDefine (data) {//标签选择回调
+      if (data.tag_id_list && data.tag_id_list.length != 0) {
+        this.tag_info = data.tag_id_list
+      } else {
+        this.tag_info = []
+      }
+    },
+    getAttachment (val) {
+      this.main_msg_data.attachments = val;
+    },
+    switchChange () {//分时段开关打开
+      if (this.is_day_parting && this.timeIntervalList.length == 0) {
+        this.timeIntervalList.push(this.init_welcom_con)
+      }
+    },
+    getWelcomEdit (val, index) {//分时段编辑
+      this.$set(this.timeIntervalList, index, val)
+    },
+    deleteWelcomCon (index) {//删除分时段
+      if (this.$route.query.id && this.timeIntervalList[index].msg_id) {//删除的分时段内容
+        let obj = JSON.parse(JSON.stringify(this.timeIntervalList[index]))
+        obj.operate = 'del';
+        this.deleteTimeIntervalList.push(obj)
+      }
+      this.timeIntervalList.splice(index, 1)
+    },
+    addWelcom () {//添加分时段
+      this.timeIntervalList.push(this.init_welcom_con)
+    },
+    switchLimit(){
+      if(this.user_id_list&&this.user_id_list.length==0){
+        this.$message({
+          type: 'error',
+          message: '使用客服不能为空!'
+        });
+        return
+      }
+
+    }
+  }
+}
+</script>
+<style lang="scss">
+.appendOnly{
+  .el-input-group__append{
+    padding: 0 20px;
+  }
+}
+.limitBox{
+  .el-switch.is-disabled .el-switch__core{
+    cursor: pointer;
+  }
+}
+.createMassMsg .smartFollow label{
+  display: block;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+</style>
+<style lang="scss" scoped>
+@import "../customOperate/create.scss";
+
+.newGroupCss{
+  color: #00b38a;
+  font-size: 14px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.add_welcom_hint {
+  color: #00b38a;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 90px;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  cursor: pointer;
+  display: inline-block;
+}
+</style>

project/src/components/smartRadar/customerNote.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <div class="flex-align-center">
+        <el-input style="width: 300px"
+                  clearable
+                  @blur="changeIpt"
+                  v-if="node_radio==2"
+                  placeholder="请输入客户备注"
+                  size="small"
+                  v-model="customerNote_val">
+          <template slot="prepend">客户昵称-</template>
+        </el-input>
+        <el-input style="width: 300px"
+                  clearable
+                  @blur="changeIpt"
+                  class="appendOnly"
+                  size="small"
+                  v-if="node_radio==1"
+                  placeholder="请输入客户备注"
+                  v-model="customerNote_val">
+          <template slot="append">-客户昵称</template>
+        </el-input>
+      <div style="display: flex;margin-left: 20px">
+        <el-radio v-model="node_radio" :label="1">备注在昵称后</el-radio>
+        <el-radio v-model="node_radio" :label="2">备注在昵称前</el-radio>
+      </div>
+    </div>
+    <div class="sampleBox">
+      <div class="f14">示例</div>
+      <div class="customerNoteBox">
+        <img src="../../assets/img/cs_logo.png" alt="">
+        <div class="flex-align-center">
+          <template v-if="node_radio==1"><span class="c-000">{{customerNote_val}}</span> -客户昵称</template>
+          <template v-if="node_radio==2">客户昵称- <span class="c-000">{{customerNote_val}}</span></template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "customerNote",
+  props:['customerNote_val'],
+  data(){
+    return{
+      // customerNote_val:'',//客户备注
+      node_radio:1,
+    }
+  },
+  methods:{
+    changeIpt(){
+      this.$emit('changeVal',this.customerNote_val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sampleBox{
+  width: 710px;
+  background: #fbfbfb;
+  border: 1px solid #eee;
+  padding: 10px;
+  display: flex;
+  align-items: flex-start;
+  margin-top: 10px;
+  .customerNoteBox{
+    display: flex;
+    padding:10px;
+    border: 1px solid #ddd;
+    margin-left: 20px;
+    color: #999;
+    img{
+      width: 30px;
+      height: 30px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>

project/src/components/smartRadar/dataAnalyse.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="con" v-loading="loading">
+    <div class="backBox" @click="$router.go(-1)">
+      <div class="back">
+        <i class="el-icon-back"></i>
+        <span>返回</span>
+        (数据分析)
+      </div>
+    </div>
+
+    <div class="dataBox">
+      <div v-for="(item,index) in dataPreview" :key="index" class="box_item">
+        <div class="c-000 fWeight600">{{item.bigTitle?item.bigTitle:'-'}}</div>
+        <div class="f28 pad120">{{item.bigNum||item.bigNum==0?item.bigNum:'-'}}</div>
+      </div>
+    </div>
+
+    <div class="topTagBox">
+      <div class="span_title">打开链接的客户</div>
+      <div class="flex-align-center">
+        <self-input :hasLabel="false" label_name="搜索客户" @inputChange='(val)=>{kehu_val = val;initFlag=!initFlag}'></self-input>
+        <div style="width: 20px"></div>
+        <self-input :hasLabel="false" label_name="选择渠道" @inputChange='(val)=>{kehu_val = val;initFlag=!initFlag}'></self-input>
+        <div style="width: 20px"></div>
+        <date-picker title="" :quickFlag="false" :afferent_time="default_time"
+                     :clearFlag='false' :reset="resetFlag" @changeTime="changeTime"></date-picker>
+        <div style="width: 20px"></div>
+        <self-input :hasLabel="false" label_name="所属成员" @inputChange='(val)=>{kehu_val = val;initFlag=!initFlag}'></self-input>
+        <div style="width: 20px"></div>
+        <el-button type="primary" size="small" >重置</el-button>
+      </div>
+      <publicTable
+        :propsData="{
+          desCol:desCol,
+          source:'dataAnalyse',
+          initFlag:initFlag
+        }"
+      ></publicTable>
+    </div>
+  </div>
+</template>
+
+<script>
+import datePicker from '@/components/assembly/screen/datePicker.vue'
+import selfInput from '@/components/assembly/screen/input.vue'
+import publicTable from './publicTable.vue'
+export default {
+  name: "dataAnalyse",
+  components:{
+    publicTable,
+    selfInput,
+    datePicker
+  },
+  data(){
+    return{
+      loading:false,
+      dataPreview:[
+        {
+          bigTitle:'总访问人数',
+          bigNum:0,
+        },
+        {
+          bigTitle:'今日访问人数',
+          bigNum:0,
+        },
+        {
+          bigTitle:'总访问次数',
+          bigNum:0,
+        },
+        {
+          bigTitle:'今日访问次数',
+          bigNum:0,
+        }
+      ],
+      default_time: [this.$getDay(-30, false), this.$getDay(0, false)],
+      resetFlag: false,
+      kehu_val:'',
+      initFlag:false,
+      time:[],
+      desCol:[
+        { prop: "name", label: "客户" },
+        { prop: "assign_count", label: "所属成员" },
+        { prop: "name", label: "最近点击时间" },
+        { prop: "waiting_add_count", label: "最近点击渠道" },
+        { prop: "passed_count", label: "客户访问总次数"}
+      ]
+    }
+  },
+  methods:{
+    changeTime (time) {//筛选时间变化
+      if (!time || time && time.length == 0) {
+        this.time = []
+      } else {
+        this.time = time
+      }
+      this.initFlag=!this.initFlag
+
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/list.scss";
+.con{
+  padding-right: 10px;
+}
+.dataBox{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .box_item{
+    min-width: 23%;
+    padding: 20px 15px 10px;
+    font-size: 14px;
+    background-color: #fff;
+    border-radius: 4px;
+    .splitLine{
+      width: 100%;
+      border-bottom: 1px solid #ddd;
+    }
+  }
+}
+.topTagBox{
+  margin-top: 10px;
+  font-size: 14px;
+  .span_title{
+    font-weight: 600;
+    color: #000;
+    margin: 10px 0 ;
+  }
+}
+</style>

project/src/components/smartRadar/dialogGroup.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    :append-to-body="true"
+    custom-class="channel_code_group"
+    :title="propsData.dialogTitle+'分组'"
+    :visible.sync="dialogVisible"
+    width="30%">
+    <div class="dialogBox">
+      <div class="lable">分组名称</div>
+      <el-input
+        size="small"
+        placeholder="请输入内容"
+        maxlength="8"
+        v-model="groupName"
+        clearable>
+      </el-input>
+    </div>
+    <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible=false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="dialogVisible=false">确 定</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "dialogGroup",
+  props:['propsData'],
+  data(){
+    return{
+      groupName:'',
+      dialogTitle:'',
+      dialogVisible:false,
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.channel_code_group{
+  .dialogBox{
+    display: flex;
+    align-items: center;
+    .lable{
+      font-weight: 600;
+      margin-right: 10px;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+</style>

project/src/components/smartRadar/groupList.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div class="title">
+      <span class="fWeight600 c-000 f14">雷达分组</span>
+      <span class="addGroupBox" @click="$refs.dialogGroupRef.dialogVisible = true">
+        <i class="el-icon-plus f12"></i>
+        添加分组
+      </span>
+    </div>
+    <div class="listBox">
+
+      <div class="item_css" :class="[acIdx==null? 'ac_css' : '']" @click="itemClick(null)"><i class="el-icon-folder"></i>全部雷达</div>
+      <draggable class="syllable_ul" element="ul"
+                 :list="tableData"
+                 :emptyInsertThreshold="0"
+                 :options="{group:'name',
+                 animation:200,
+                 ghostClass:'ghostClass',
+                 dragClass:'dragClass'}">
+        <div v-for="(item,index) in tableData" :key="item.id" class="item_css"
+             @click="itemClick(item.id)"
+             :class="[acIdx==item.id ? 'ac_css' : '']">
+          <i class="el-icon-folder"></i>
+          <span>{{item.name ? item.name : '-'}}</span>
+          <span class="lMarauto">
+  <!--          <span class="c-ddd">{{item.nums||item.nums==0 ? item.nums : '-'}}</span>-->
+
+            <el-dropdown @command="handleCommand">
+              <span class="el-dropdown-link">
+                <i class="el-icon-more"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown" >
+                <el-dropdown-item :command="'editName/'+item.id+'/'+item.name">修改名称</el-dropdown-item>
+                <el-dropdown-item :command="'deleGroup/'+item.id">删除分组</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+          </span>
+        </div>
+      </draggable>
+    </div>
+
+    <dialogGroup
+      ref="dialogGroupRef"
+      :propsData="{
+      dialogTitle:dialogTitle
+    }"></dialogGroup>
+  </div>
+</template>
+
+<script>
+import order from '@/components/mixins/order'
+import dialogGroup from './dialogGroup.vue'
+import draggable from "vuedraggable"
+export default {
+  name: "groupList",
+  mixins:[order],
+  components:{
+    dialogGroup,
+    draggable
+  },
+  data(){
+    return{
+      dialogTitle:'',
+      acIdx:null,
+      tableData:[
+        {
+          id:0,
+          name:'全部自定义可拖动的',
+          nums:0,
+          canEdit:false
+        },
+        {
+          id:1,
+          name:'默认分组zidingyi',
+          nums:0,
+          canEdit:false
+        },
+        {
+          id:2,
+          name:'自定义分组',
+          nums:0,
+          canEdit:true
+        },
+        {
+          id:3,
+          name:'自定义分组2',
+          nums:0,
+          canEdit:true
+        },
+        {
+          id:4,
+          name:'自定义分组5',
+          nums:0,
+          canEdit:true
+        }
+      ]
+
+    }
+  },
+  methods:{
+    //下移报错,置顶,置地错误
+    handleCommand(command){
+      var eventArr = command.split('/'),//0是点击名字,1是id,2是分组名(仅修改名称有)
+        eventName = eventArr[0],
+         id = eventArr[1],
+        name = eventArr[2]
+      if(eventName == 'editName'){
+        this.editGroup(name)
+      }else if(eventName == 'deleGroup'){
+        this.deleGroup(id)
+      }
+    },
+    editGroup(name){//修改分组
+      this.$nextTick(()=>{
+        this.dialogTitle = '修改'
+        this.$refs.dialogGroupRef.groupName = name
+        this.$refs.dialogGroupRef.dialogVisible = true
+      })
+    },
+    deleGroup(id){//删除分组
+      this.$confirm('此操作将永久删除该分组, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listArrs.forEach((item,idx)=>{
+          if(item.id == id){
+            this.listArrs.splice(idx,1)
+          }
+        })
+
+      })
+    },
+
+    itemClick(id){
+      this.acIdx = id
+    },
+    showMore(){
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ghostClass{
+  font-weight: 600;
+}
+.title{
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .addGroupBox{
+    color: #00b38a;
+    font-size: 13px;
+    cursor: pointer;
+
+  }
+}
+.listBox{
+  margin-top: 10px;
+  .item_css{
+    display: flex;
+    align-items: center;
+    padding: 15px 10px;
+    font-size: 14px;
+    cursor: pointer;
+    border-left: 2px solid transparent;
+    .el-icon-folder{
+      margin-right: 4px;
+      color: #00b38a;
+    }
+    .el-icon-more{
+      //transform:rotate(90deg);
+      font-size: 12px;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .ac_css,.item_css:hover{
+    border-left: 2px solid #00b38a;
+    background-color: rgba(0,179,138,0.1);
+  }
+
+}
+</style>

project/src/components/smartRadar/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="con">
+    <div class="searchBox">
+      <el-button type="primary" size="mini" @click="createdchannel_code">新建智能雷达</el-button>
+      <self-input label_name="搜索雷达" @inputChange='(val)=>{radar_val = val;initFlag=!initFlag}'></self-input>
+      <div class="reset" @click="resetEvent">重置</div>
+    </div>
+    <div class="mainBox">
+      <div class="groupBox">
+        <groupList></groupList>
+      </div>
+      <div class="tableBox">
+        <publicTable
+          :propsData="{
+            desCol:desCol,
+            source:'radarIndex',
+            initFlag:initFlag,
+            radar_val:radar_val
+          }"
+          ></publicTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+import publicTable from './publicTable.vue'
+import groupList from './groupList.vue'
+export default {
+  name: "codeIndex",
+  components:{
+    publicTable,
+    selfInput,
+    groupList
+  },
+  data() {
+    return {
+      initFlag:false,
+      radar_val:'',
+      desCol:[
+        { prop: "name", label: "名称" },
+        { prop: "assign_count", label: "类型" },
+        { prop: "waiting_add_count", label: "分组" },
+        { prop: "waiting_add_count", label: "客户标签" },
+        { prop: "passed_count", label: "总访问人数",},
+        { prop: "passed_count", label: "总发送次数",},
+        { prop: "passed_count", label: "添加时间",}
+      ],
+    }
+  },
+  methods:{
+    resetEvent () {//重置
+      this.initFlag = !this.initFlag
+      this.radar_val = ''
+    },
+    createdchannel_code(){//新建渠道活码
+      this.$router.push({path:'/createRadar'})
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.con{
+  padding-right: 10px;
+  .searchBox{
+    display: flex;
+    align-items: center;
+    background-color: #fff;
+    padding: 5px 10px ;
+    position: relative;
+    .reset {
+      width: 80px;
+      height: 30px;
+      background: #00b38a;
+      border-radius: 100px 3px 3px 3px;
+      border: 1px solid #d2d2d2;
+      color: #ffffff;
+      font-size: 14px;
+      line-height: 30px;
+      text-align: center;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      letter-spacing: 2px;
+      cursor: pointer;
+    }
+  }
+  .mainBox{
+    display: flex;
+    align-items: flex-start;
+    margin-top: 10px;
+    .groupBox{
+      width: 20%;
+      background-color: #fff;
+      flex-shrink: 0;
+      margin-right: 10px;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+      overflow-y: auto;
+      &::-webkit-scrollbar{
+        width: 3px;
+      }
+    }
+    .tableBox{
+      flex: 1;
+      background-color: #fff;
+      height: calc(100vh - 60px - 62px - 20px - 10px);
+      overflow-y: auto;
+      &::-webkit-scrollbar{
+        width: 3px;
+      }
+    }
+  }
+}
+
+</style>

project/src/components/smartRadar/publicTable.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+  <!-- table -->
+    <el-table v-loading="loading" ref="multipleTable"
+              border
+              :height='height'
+              :data="tableData"
+              tooltip-effect="dark"
+              :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
+              style="width: 100%">
+      <template v-for="item in propsData.desCol">
+        <el-table-column :key="item.prop" :label="item.label" align="center"
+                         :show-overflow-tooltip="item.showOverTooltip"
+                         :min-width="item.min_width?item.min_width:120">
+          <template #header v-if="item.tooltip">
+            {{item.label?item.label:'-'}}
+            <el-tooltip class="disinblock" :content="item.tooltip" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            <div>{{scope.row[item.prop] ? scope.row[item.prop] : '-'}}</div>
+          </template>
+        </el-table-column>
+      </template>
+
+      <template v-if="propsData.source=='radarIndex'">
+        <el-table-column label="操作" align="center" min-width="180px">
+          <template slot-scope="scope">
+              <div class="flex">
+                <div class="c-00B38A pointer">编辑</div>
+                <div class="c-00B38A pointer lMar8">删除</div>
+                <div class="c-00B38A pointer lMar8" @click="goDataAanlyse(scope.row.id)">分析数据</div>
+              </div>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+    <div class="pagination" v-show="total>0">
+      <el-pagination background :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count='Number(pages)'>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "publicTable",
+  props:['propsData'],
+  data(){
+    return{
+      loading: false,
+      dataLoading: false,
+      page: 1,
+      pages: 0,
+      total: 0,
+      page_size: 20,
+      height: '',
+      tableData:[]
+    }
+  },
+  watch:{
+    'propsData.initFlag'(){
+      this.init(1)
+    }
+  },
+  created() {
+    this.height = document.documentElement.clientHeight - 300 > 400 ? document.documentElement.clientHeight - 300 : 400
+    this.init(1)
+  },
+  methods:{
+    goDataAanlyse(id){
+      this.$router.push('/radar_dataAnalyse/'+id)
+    },
+    init (page, type) {
+      if (type != 'export') {
+        this.page = page ? page : this.page;
+      } else {
+        if (this.total == 0) {
+          this.$message({
+            message: '暂无数据可导出',
+            type: "warning"
+          })
+          return
+        }
+      }
+      this.loading = true
+      this.$axios.get(this.URL.BASEURL + this.URL.batchAddCustomer_statistic, {
+        params:{
+          start_date: '2022-05-14',
+          end_date: '2022-06-13',
+          page: type == 'export' ? 1 : this.page,
+          pagesize: type == 'export' ? this.$store.state.exportNumber : this.page_size,
+        }
+      }).then((res) => {
+        var res = res.data
+        this.loading = false
+        if (res && res.errno == 0) {
+          if (type == 'export') {
+            this.exportEvent(res.rst.data)
+          } else {
+            this.tableData = res.rst.data
+            this.total = res.rst.pageInfo.total;
+            this.pages = res.rst.pageInfo.pages;
+          }
+        } else if (res.errno != 4002) {
+          this.$message({
+            message: res.err,
+            type: "warning"
+          })
+        }
+      }).catch((err) => {
+        this.loading = false
+      });
+    },
+    handleCurrentChange (val) {
+      this.init(val)
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

project/src/router/allRouter.js

@@ -41,6 +41,9 @@ const importRecordDetial = () => import(/* webpackChunkName: 'importRecordDetial
 const codeIndex = () => import(/* webpackChunkName: 'codeIndex' */ '@/components/channelCode/codeIndex.vue')
 const code_dataAnalyse = () => import(/* webpackChunkName: 'dataAnalyse' */ '@/components/channelCode/dataAnalyse.vue')
 const createChannelCode = () => import(/* webpackChunkName: 'createChannelCode' */ '@/components/channelCode/createChannelCode.vue')
+const codeIndex_radar = () => import(/* webpackChunkName: 'codeIndex_radar' */ '@/components/smartRadar/index.vue')
+const radar_dataAnalyse = () => import(/* webpackChunkName: 'radar_dataAnalyse' */ '@/components/smartRadar/dataAnalyse.vue')
+const createRadar = () => import(/* webpackChunkName: 'createRadar' */ '@/components/smartRadar/createRadar.vue')
 //
 
 // name与菜单配置的页面路由一致
@@ -103,6 +106,36 @@ export var allRouter = [
         }
       },
       {
+        path: 'codeIndex_radar',
+        name: 'codeIndex_radar',
+        component: codeIndex_radar,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '智能雷达'
+        }
+      },
+      {
+        path: 'radar_dataAnalyse/:id',
+        name: 'codeIndex_radar',
+        component: radar_dataAnalyse,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '数据分析'
+        }
+      },
+      {
+        path: 'createRadar',
+        name: 'codeIndex',
+        component: createRadar,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '新建智能雷达'
+        }
+      },
+      {
         path: 'codeIndex',
         name: 'codeIndex',
         component: codeIndex,