开发中

datadas/mydatadas/src/views/datadas/Edit.vue

@@ -1,134 +0,0 @@
-<template>
-   <el-scrollbar height="100%">
-        <div class="page-container main-view">
-            <div class="container">
-                <el-form
-                    :model="dataContainer.form"
-                    ref="FormElRef"
-                    :inline="true"
-                    :rules="dataContainer.rules"
-                    label-width="120px"
-                >
-                    <el-row :gutter="0">
-                        <el-col :span="8" :xs="6">
-                            <el-form-item label="客户名称" prop="username">
-                                <el-input
-                                    v-model="dataContainer.form.username"
-                                    placeholder="请输入"
-                                    clearable
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" :xs="6">
-                            <el-form-item label="contact" prop="contact">
-                                <el-input
-                                    v-model="dataContainer.form.contact"
-                                    placeholder="请输入"
-                                    clearable
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" :xs="6">
-                            <el-form-item label="微伴ID" prop="weibanId">
-                                <el-input
-                                    v-model="dataContainer.form.weibanId"
-                                    placeholder="请输入"
-                                    clearable
-                                />
-                            </el-form-item>
-                        </el-col>
-                        <el-col :span="8" :xs="6">
-                            <el-form-item label="输入城市" prop="city">
-                                <el-input
-                                    v-model="dataContainer.form.city"
-                                    placeholder="请输入"
-                                    clearable
-                                />
-                            </el-form-item>
-                        </el-col>
-                    </el-row>
-                </el-form>
-                <el-button type="primary" @click="handleSubmit"> 提交 </el-button>
-            </div>
-        </div>
-    </el-scrollbar>
-</template>
-
-<script setup>
-import {
-    defineComponent,
-    onBeforeUnmount,
-    ref,
-    reactive,
-    getCurrentInstance,
-    onActivated,
-    onMounted,
-} from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { messageError,messageSuccess } from '@/action/messagePrompt.js';
-const FormElRef = ref(null); //组件实例
-    const router = useRouter();
-    const route = useRoute();
-    const dataContainer = reactive({
-        loading: false,
-        form: {},
-        rules: {
-            username: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-            contact: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
-            weibanId: [{ required: true, message: '请输入微伴ID', trigger: 'blur' }],
-            city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
-        },
-    });
-            /**
-         * 数据初始化
-         */
-         function initData() {
-            let params = route.query;
-            if (!params) return;
-            dataContainer.form = params;
-        }
-        initData();
-
-        /** 提交数据 */
-        function handleSubmit() {
-            /** 使用组件自带方法验证数据 */
-             if (!FormElRef.value) return;
-            FormElRef.value.validate((valid, e) => {
-                if (e) {
-                    /** 打印报错信息 */
-                    let msg = e[Object.keys(e)[0]][0].message;
-                    messageError(msg);
-                }
-                if (!valid) return;
-                /** 像后端提交 */
-                messageSuccess("提交成功")
-            });
-        }
-        
-
-</script>
-
-<style scoped lang='scss'>
-
-.main-view {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    .container {
-        background-color: white;
-        width: 100%;
-        // min-height: 800px;
-        height: fit-content;
-        border-radius: 5px;
-        padding: 15px;
-        box-sizing: border-box;
-        > * {
-            margin: 0 0 30px 0;
-            &:last-child {
-                margin: 0;
-            }
-        }
-    }
-}
-
-</style>

datadas/mydatadas/src/views/datadas/index.vue

@@ -55,22 +55,22 @@
                           label-width="110px"
                       >
                           <el-row :gutter="0">
-                              <el-col class="anchor-point-target" :span="6" :xs="6">
-                                  <el-form-item label="客户编码" prop="id">
+                              <el-col class="anchor-point-target" :span="4" :xs="4">
+                                  <el-form-item label="搜索客户" prop="user_name">
                                       <el-input
-                                          v-model="dataContainer.form.id"
-                                          placeholder="请输入"
+                                          v-model="dataContainer.form.user_name"
+                                          placeholder="请输入要搜索客户"
                                           clearable
                                           @clear="handleQuery"
                                           @keyup.enter="handleQuery"
                                       />
                                   </el-form-item>
                               </el-col>
-                              <el-col :span="6" :xs="6">
-                                  <el-form-item label="联系方式" prop="contact">
+                              <el-col :span="4" :xs="4">
+                                  <el-form-item label="所属客服" prop="from_service">
                                       <el-input
-                                          v-model="dataContainer.form.contact"
-                                          placeholder="请输入"
+                                          v-model="dataContainer.form.from_service"
+                                          placeholder="请输入所选客服"
                                           clearable
                                           @clear="handleQuery"
                                           @keyup.enter="handleQuery"
@@ -78,25 +78,36 @@
                                   </el-form-item>
                               </el-col>
                               <el-col :span="6" :xs="6">
-                                  <el-form-item label="weibanID" prop="weibanID">
-                                      <el-input
-                                          v-model="dataContainer.form.weibanID"
-                                          placeholder="请输入"
-                                          clearable
-                                          @clear="handleQuery"
-                                          @keyup.enter="handleQuery"
-                                      />
+                                  <el-form-item label="企业标签" prop="enterpris_label">
+                                    <el-select
+                                        v-model="dataContainer.form.enterpris_label"
+                                        multiple
+                                        filterable
+                                        remote
+                                        reserve-keyword
+                                        placeholder="请输入标签名进行搜索"
+                                        :remote-method="remoteMethod"
+                                        :loading="loading_select"
+                                        style="width: 240px"
+                                    >
+                                        <el-option
+                                        v-for="item in options"
+                                        :key="item.value"
+                                        :label="item.label"
+                                        :value="item.value"
+                                        />
+                                    </el-select>
                                   </el-form-item>
                               </el-col>
-                              <el-col :span="6" :xs="6">
-                                <el-form-item label="客户状态" prop="status">
+                              <el-col :span="4" :xs="4">
+                                <el-form-item label="客户状态" prop="loss_status">
                                       <el-select
                                           style="width: 100%"
-                                          v-model="dataContainer.form.status"
+                                          v-model="dataContainer.form.loss_status"
                                           placeholder="请选择"
                                           clearable
-                                          @clear="handleQuery"
-                                          @change="handleQuery"
+                                          multiple
+                                          collapse-tags
                                       >
                                           <el-option
                                               v-for="item in dataContainer.optionList"
@@ -107,24 +118,47 @@
                                       </el-select>
                                   </el-form-item>
                               </el-col>
-                              <el-col :span="6" :xs="6">
-                                <el-form-item label="输入城市" prop="city">
-                                      <el-input
-                                          v-model="dataContainer.form.city"
-                                          placeholder="请输入"
-                                          clearable
-                                          @clear="handleQuery"
-                                          @keyup.enter="handleQuery"
-                                      />
+                              <el-col :span="4" :xs="4">
+                                <el-form-item label="添加时间" prop="add_time">
+                                    <el-date-picker
+                                        v-model="dataContainer.form.add_time"
+                                        type="date"
+                                        placeholder="yyyy-mm-dd"
+                                        :size="size"
+                                        value-format="YYYY-MM-DD"
+                                  />
+                                </el-form-item>
+                              </el-col>
+                              <el-col :span="4" :xs="4">
+                                  <el-form-item label="最晚进群时间" prop="min_join_group_time">
+                                    <el-date-picker
+                                        v-model="dataContainer.form.min_join_group_time"
+                                        type="date"
+                                        placeholder="yyyy-mm-dd"
+                                        :size="size"
+                                        value-format="YYYY-MM-DD"
+                                  />
                                   </el-form-item>
                               </el-col>
-                              <el-col :span="6" :xs="6">
-                                  <el-form-item label="选择日期" prop="date">
+                              <el-col :span="4" :xs="4">
+                                  <el-form-item label="最晚退群时间" prop="max_withdraw_group_time">
+                                    <el-date-picker
+                                        v-model="dataContainer.form.max_withdraw_group_time"
+                                        type="date"
+                                        placeholder="yyyy-mm-dd"
+                                        :size="size"
+                                       value-format="YYYY-MM-DD"
+                                  />
+                                  </el-form-item>
+                              </el-col>
+                              <el-col :span="4" :xs="4">
+                                  <el-form-item label="删除好友时间" prop="delete_time">
                                     <el-date-picker
-                                        v-model="dataContainer.form.date"
+                                        v-model="dataContainer.form.delete_time"
                                         type="date"
-                                        placeholder="yyyy/mm/dd"
+                                        placeholder="yyyy-mm-dd"
                                         :size="size"
+                                        value-format="YYYY-MM-DD"
                                   />
                                   </el-form-item>
                               </el-col>
@@ -188,15 +222,16 @@
           </div>
           <div class="table-container">
             <el-table :data="tableData" stripe style="width: 100%" border fit v-loading="loading">
-              <el-table-column prop="id" width="130" label="客户编码"  />
-              <el-table-column prop="username" width="180" label="客户昵称"  />
-              <el-table-column prop="contact" width="120" label="联系方式" />
-              <el-table-column prop="score" width="100" label="客户积分" />
-              <el-table-column prop="weibanId" width="350"  label="微伴ID" />
-              <el-table-column prop="city" width="180" label="客户城市" />
-              <el-table-column prop="status" width="100" label="客户状态" />
-              <el-table-column prop="createTime" width="180" label="创建时间" />
-              <el-table-column prop="updateTime" width="180" label="更新时间" />
+              <el-table-column prop="user_name" width="130" label="客户名称"  />
+              <el-table-column prop="remark_name" width="120" label="备注名"  />
+              <el-table-column prop="external_userid" width="120" label="用户ID" />
+              <el-table-column prop="from_service" width="100" label="所属客服" />
+              <el-table-column prop="enterpris_label" width="350"  label="企业标签" />
+              <el-table-column prop="loss_status" width="100" label="客户状态" />
+              <el-table-column prop="add_time" width="180" label="添加时间" />
+              <el-table-column prop="min_join_group_time" width="180" label="最早进群时间" />
+              <el-table-column prop="max_withdraw_group_time" width="180" label="最晚退群时间" />
+              <el-table-column prop="delete_time" width="180" label="删除好友时间" />
             </el-table>
           </div>
           <div class="pagination-container">
@@ -228,9 +263,6 @@
   </template>
 
 
-
-
-
   <script setup>
     import {
         defineComponent,
@@ -250,104 +282,104 @@
   const size = ref('default')
   const router = useRouter()
   const result_tabel = reactive({})//获取结论表
-  const selected_date = ref('') //这个日期用来控制结论表数据看板的展示当前选中的日期进行展示
+  const selected_date = ref(''); //这个日期用来控制结论表数据看板的展示当前选中的日期进行展示
   const formattedDate = ref('');
-  let currentDate = ref('')
+  let currentDate = ref('');
   let isFromDatePicker = false;
-  const dataContainer = reactive({
+  let dataContainer = reactive({
               loading: false,
               showSearch: true,
               form: {
-                id:"",
-                contact:"",
-                weibanID:"",
-                status:"",
-                city:"",
-                date:""
-              },
-              params: {
-                  //基础参数
-                  pageNum: 1,
-                  pageSize: 10,
+                user_name:"",
+                from_service:"",
+                enterpris_label:[],//标签数据
+                loss_status:[],//客户状态
+                add_time:'',
+                min_join_group_time:'',
+                max_withdraw_group_time:'',
+                delete_time:''
               },
-              config: {
-                  total: 0,
-              },
-              list: [], //当前展示的数据列表
-              currentRows: [], //当前多选的数据列表
               optionList: [
-                  { value: true, label: '正常', elTagType: 'danger' },
-                  { value: false, label: '禁用', elTagType: 'primary' },
+                  { value: '已流失', label: '已流失' ,elTagType: 'danger' },
+                  { value: '未流失', label: '未流失' ,elTagType: 'primary' },
               ],
           });
-  let tableData = reactive([
-      {
-        id: 'klkh000007511',
-        username: '无敌是多么寂寞',
-        contact: '13409765432',
-        score:0,
-        weibanId:"wmgizUDQAAHw1v1iudFfi7JMYgQHDYEQ",
-        city:"广州市",
-        status:"正常",
-        createTime:"2024/12/06 08:44:04",
-        updateTime:"2024/12/06 10:42:03"
-      },
-      {
-        id: 'klkh000007511',
-        username: '无敌是多么寂寞',
-        contact: '13409765432',
-        score:0,
-        weibanId:"",
-        city:"广州市",
-        status:"正常",
-        createTime:"2024/12/06 08:44:04",
-        updateTime:"2024/12/06 10:42:03"
-      },
-      {
-        id: 'klkh000007511',
-        username: '无敌是多么寂寞',
-        contact: '13409765432',
-        score:0,
-        weibanId:"",
-        city:"广州市",
-        status:"正常",
-        createTime:"2024/12/06 08:44:04",
-        updateTime:"2024/12/06 10:42:03"
-      }
-    ]) 
+  let tableData = reactive([]) 
   let loading = ref(false);
-  
-  const params= reactive({
+  let loading_select = ref(false);
+  let states = [];
+    let params= reactive({
         //基础参数
         pageNum: 1,
         pageSize: 10,
     }) 
-  const config= reactive({
+    let config= reactive({
         total: 38,
     }) 
 
+
+    const options = ref([])//客服标签的选项
+    // const value = ref([])
+    const list = ref([])//后台返回的全部标签数据
+
+    onMounted(() => {
+        service("/data/get_lable_all").then((res)=>{
+            states = res.data;
+            console.log("标签",states);
+
+            list.value = states.map((item) => {
+                return { value: item, label: item }
+            })
+        })
+
+  console.log("list",list.value);
+
+})
+const remoteMethod = (query) => {
+  if (query) {
+   
+      options.value = list.value.filter((item) => {
+        return item.label.toLowerCase().includes(query.toLowerCase())
+      })
+
+  } else {
+    options.value = []
+  }
+}
+
+
+    console.log("传送参数",dataContainer.form);
+    
 //只能选择当天以前的日期
 const disabledDate = (time) => {
      return time.getTime() > Date.now()
 }
   
-      /** 获取数据列表 */
+      /** 获取数据列表 */   //debounceFn是个防抖函数
       const getDataList = debounceFn(function () {
             if (loading.value) return;
             loading.value = true;
-          setTimeout(() => {
-              Promise.resolve(tableData.value)
-                  .then((res) => {
-                      tableData.value = res.rows || [];
-                      config.value.total = res.total;
-                  })
-                  .catch(() => {
-                      return;
-                  })
-                  .finally(() => {
-                        loading.value = false;
-                  });
-          }, 800);
+            service("/data/get_customer_table",{
+                params:{
+                    pageNum: params.pageNum,
+                    pageSize:params.pageSize
+                }
+            }).then((res)=>{
+                const { success, data, total } = res
+                if(success){
+                    console.log(data);
+                    console.log(total);
+                    tableData = data;
+                    config.total = total;
+                }
+            })
+            .catch((err)=>{
+                console.log(err);
+                loading.value = false;
+            })
+            .finally(() => {
+                loading.value = false;
+            });
       }, 70);
        getDataList();
 
@@ -527,8 +559,16 @@ const disabledDate = (time) => {
       
       /** 搜索按钮操作 */
       function handleQuery() {
-        dataContainer.params.pageNum = 1;
-        getDataList();
+        service.post("/data/query",dataContainer.form,{
+    headers: {
+        'Content-Type': 'application/json'
+    }
+}).then((res)=>{
+            if(res.success){
+                console.log("查询数据",res.data);
+            }
+        })
+
       }
       
         /** 重置按钮操作 */

datadas/mydatadas/src/views/layout.vue

@@ -80,21 +80,21 @@
                   </div>
                   <template v-slot:dropdown>
                       <div class="bt-list-container">
-                          <div class="item" @click="toPath('/main/mine/info')">
+                          <div class="item" >
                               <SvgIcon
                                   :style="'width:16px;height:16px;'"
                                   name="svg:user-fill.svg"
                               ></SvgIcon>
                               个人中心
                           </div>
-                          <div class="item" @click="toPath('/main/mine/info-password')">
+                          <div class="item">
                               <SvgIcon
                                   :style="'width:16px;height:16px;'"
                                   name="svg:supervise.svg"
                               ></SvgIcon>
                               密码修改
                           </div>
-                          <div class="item logout-bt" @click.stop="onLogout">
+                          <div class="item logout-bt" >
                               <SvgIcon
                                   :style="'width:16px;height:16px;color:#f56c6c;'"
                                   name="svg:poweroff.svg"

server/db/mysql.js

@@ -12,7 +12,7 @@ const pool = mysql.createPool({
 
 });
 
-function queryDatabase(sql, callback) {
+function queryDatabase(sql,callback) {
 
     pool.getConnection((err,connection)=>{
         if (err) {
@@ -21,7 +21,7 @@ function queryDatabase(sql, callback) {
         }
         console.log("连接数据库成功");
 
-        connection.query(sql, (err, results) => {
+        connection.query(sql,(err, results) => {
             connection.release();
             if (err) {
                 console.error('查询数据出错：', err);
@@ -36,5 +36,5 @@ function queryDatabase(sql, callback) {
 
 
 
-module.exports =  {queryDatabase};
+module.exports =  {queryDatabase,queryDatabaseSelectLabel};
 

server/routes/index.js

@@ -1,12 +1,15 @@
 var express = require('express');
 const XLSX = require('xlsx');
 var router = express.Router();
-const {queryDatabase } = require('../db/mysql')
-/* GET home page. */
+const {queryDatabase} = require('../db/mysql')
+
+
+/* 数据看板接口*/
 router.get('/result_info', function(req, res, next) {
   let strDate = req.query.date
   console.log(strDate);
   const sql = `SELECT * FROM result_table_${strDate}`;
+
     queryDatabase(sql,(err,results)=>{
       if(err){
         res.status(500).json({ error: '查询数据失败' });
@@ -20,6 +23,137 @@ router.get('/result_info', function(req, res, next) {
   // res.render('index', { title: 'Express' });
 });
 
+
+//下载客户表_研发表展示
+router.get("/get_customer_table",function(req,res,next){
+
+  const pageNum = parseInt(req.query.pageNum) || 1; // 获取页码，默认第1页
+  const pageSize = parseInt(req.query.pageSize) || 10; // 获取每页条数，默认10条
+  const offset = (pageNum - 1) * pageSize; // 计算偏移量
+  console.log(req.query);
+  
+  const mainSql = `SELECT c.user_name, c.remark_name, c.external_userid, c.from_service, GROUP_CONCAT(e.enterprise_label SEPARATOR ',') AS enterpris_label, c.loss_status, c.add_time, c.min_join_group_time, c.max_withdraw_group_time, c.delete_time FROM customer_table c LEFT JOIN enterprise_label_table e ON c.external_userid = e.external_userid GROUP BY c.external_userid LIMIT ${offset}, ${pageSize}`;
+
+
+  // 查询总记录数的语句，只统计customer_table表中的记录数，不涉及关联表的计数影响
+    const countSql = `SELECT COUNT(*) AS total_count FROM customer_table c`;
+
+    queryDatabase( mainSql, (mainErr, results) => {
+      if (mainErr) {
+        console.error('查询客户数据失败：', mainErr);
+        res.status(500).json({ success: false, message: '查询客户数据失败' });
+        return;
+      }
+      
+      queryDatabase(countSql,(countErr, countResult) => {
+        if (countErr) {
+          console.error('查询客户数据总记录数失败：', countErr);
+          res.status(500).json({ success: false, message: '查询客户数据总记录数失败' });
+          return;
+        }
+        const total = countResult[0].total_count;
+
+        res.json({
+          success: true,
+          data: results,
+          total: total,
+          currentPage: pageNum,
+          pageSize: pageSize
+        });
+
+      })
+    })
+  
+
+
+})
+
+//获取标签表不重复的全部标签列表
+router.get("/get_lable_all", function(req,res,next){
+
+  const sql = `SELECT DISTINCT enterprise_label FROM enterprise_label_table`;
+  queryDatabase(sql,(err,results)=>{
+    if(err){
+      res.status(500).json({ error: '查询数据失败' });
+      return;
+    }
+    let labels = results.map(row => row.enterprise_label);
+
+    res.json({ success: true, data: labels });
+
+
+  })
+})
+
+router.get("/query",function(req,res,next){
+  const { user_name, from_service, enterpris_label, loss_status, add_time, min_join_group_time, max_withdraw_group_time, delete_time } = req.body;
+  console.log(req.body);
+  
+   // 构建模糊查询的条件语句部分
+   let conditions = [];
+   if (user_name) {
+       conditions.push(`c.user_name LIKE '%${user_name}%'`);
+   }
+   if (from_service) {
+       conditions.push(`c.from_service LIKE '%${from_service}%'`);
+   }
+   if (enterpris_label.length > 0) {
+       const labelConditions = enterpris_label.map(label => `e.enterprise_label LIKE '%${label}%'`);
+       conditions.push(`(${labelConditions.join(' OR ')})`);
+   }
+   if (loss_status.length > 0) {
+       const statusConditions = loss_status.map(status => `c.loss_status LIKE '%${status}%'`);
+       conditions.push(`(${statusConditions.join(' OR ')})`);
+   }
+   if (add_time) {
+       conditions.push(`c.add_time LIKE '%${add_time}%'`);
+   }
+   if (min_join_group_time) {
+       conditions.push(`c.min_join_group_time LIKE '%${min_join_group_time}%'`);
+   }
+   if (max_withdraw_group_time) {
+       conditions.push(`c.max_withdraw_group_time LIKE '%${max_withdraw_group_time}%'`);
+   }
+   if (delete_time) {
+       conditions.push(`c.delete_time LIKE '%${delete_time}%'`);
+   }
+
+   // 组合完整的查询条件语句
+   let whereClause = '';
+   if (conditions.length > 0) {
+       whereClause = 'WHERE ';
+       whereClause += conditions.join(' AND ');
+   }
+
+   const mainSql = `
+        SELECT
+            c.add_time,
+            c.delete_time,
+            GROUP_CONCAT(e.enterprise_label SEPARATOR ',') AS enterpris_label,
+            c.external_userid,
+            c.from_service,
+            c.loss_status,
+            c.max_withdraw_group_time,
+            c.min_join_group_time,
+            c.remark_name,
+            c.user_name
+        FROM
+            customer_table c
+        LEFT JOIN
+            enterprise_label_table e ON c.external_userid = e.external_userid
+        ${whereClause}
+        GROUP BY
+            c.external_userid
+    `;
+   queryDatabase(mainSql,(err,results)=>{
+
+    if(err){
+      res.status(500).json({ error: '查询数据失败' });
+      return;
+    }
+    res.json({ success: true, data: results });
+   })
+})
 //下载入群表格的excel接口
 router.get('/join_group', function(req,res,next){
   const sql = 'SELECT * FROM join_group_table';