Merge branch 'ui_change'

src/api/qw/externalContact.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 查询企业微信客户列表
+export function listExternalContact(query) {
+  return request({
+    url: '/qw/externalContact/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询企业微信客户详细
+export function getExternalContact(id) {
+  return request({
+    url: '/qw/externalContact/' + id,
+    method: 'get'
+  })
+}
+
+// 新增企业微信客户
+export function addExternalContact(data) {
+  return request({
+    url: '/qw/externalContact',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改企业微信客户
+export function updateExternalContact(data) {
+  return request({
+    url: '/qw/externalContact',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除企业微信客户
+export function delExternalContact(id) {
+  return request({
+    url: '/qw/externalContact/' + id,
+    method: 'delete'
+  })
+}
+
+// 导出企业微信客户
+export function exportExternalContact(query) {
+  return request({
+    url: '/qw/externalContact/export',
+    method: 'get',
+    params: query
+  })
+}

src/api/qw/qwUser.js

@@ -7,3 +7,12 @@ export function getQwUserAll() {
     method: 'get'
   })
 }
+
+//查询企业信息
+export function  getQwUserInfo(query) {
+  return request({
+    url: '/qw/user/getQwUserInfo',
+    method: 'get',
+    params: query
+  })
+}

src/assets/styles/common.scss

@@ -1,121 +1,121 @@
- /**
- * 通用css样式布局处理
- */
+/**
+* 通用css样式布局处理
+*/
 
- /** 基础通用 **/
+/** 基础通用 **/
 .pt5 {
-	padding-top: 5px;
+  padding-top: 5px;
 }
 .pr5 {
-	padding-right: 5px;
+  padding-right: 5px;
 }
 .pb5 {
-	padding-bottom: 5px;
+  padding-bottom: 5px;
 }
 .mt5 {
-	margin-top: 5px;
+  margin-top: 5px;
 }
 .mr5 {
-	margin-right: 5px;
+  margin-right: 5px;
 }
 .mb5 {
-	margin-bottom: 5px;
+  margin-bottom: 5px;
 }
 .mb8 {
-	margin-bottom: 8px;
+  margin-bottom: 8px;
 }
 .ml5 {
-	margin-left: 5px;
+  margin-left: 5px;
 }
 .mt10 {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .mr10 {
-	margin-right: 10px;
+  margin-right: 10px;
 }
 .mb10 {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .ml0 {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 .mt20 {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 .mr20 {
-	margin-right: 20px;
+  margin-right: 20px;
 }
 .mb20 {
-	margin-bottom: 20px;
+  margin-bottom: 20px;
 }
 .m20 {
-	margin-left: 20px;
+  margin-left: 20px;
 }
 
 .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
-	font-family: inherit;
-	font-weight: 500;
-	line-height: 1.1;
-	color: inherit;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
 }
 
 .el-dialog:not(.is-fullscreen) {
-	margin-top: 6vh !important;
+  margin-top: 6vh !important;
 }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
-    overflow: auto;
-	overflow-x: hidden;
-	max-height: 70vh;
-	padding: 10px 20px 0;
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
 }
 
 .el-table {
-	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
-		th {
-			word-break: break-word;
-			background-color: #f8f8f9;
-			color: #515a6e;
-			height: 40px;
-			font-size: 13px;
-		}
-	}
-	.el-table__body-wrapper {
-		.el-button [class*="el-icon-"] + span {
-			margin-left: 1px;
-		}
-	}
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
+  }
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
+  }
 }
 
 /** 表单布局 **/
 .form-header {
-    font-size:15px;
-	color:#6379bb;
-	border-bottom:1px solid #ddd;
-	margin:8px 10px 25px 10px;
-	padding-bottom:5px
+  font-size:15px;
+  color:#6379bb;
+  border-bottom:1px solid #ddd;
+  margin:8px 10px 25px 10px;
+  padding-bottom:5px
 }
 
 /** 表格布局 **/
 .pagination-container {
-	position: relative;
-	height: 25px;
-	margin-bottom: 10px;
-	margin-top: 15px;
-	padding: 10px 20px !important;
+  position: relative;
+  height: 25px;
+  margin-bottom: 10px;
+  margin-top: 15px;
+  padding: 10px 20px !important;
 }
 
 /* tree border */
 .tree-border {
-    margin-top: 5px;
-    border: 1px solid #e5e6e7;
-    background: #FFFFFF none;
-    border-radius:4px;
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius:4px;
 }
 
 .pagination-container .el-pagination {
-	right: 0;
-	position: absolute;
+  right: 0;
+  position: absolute;
 }
 
 @media ( max-width : 768px) {
@@ -128,64 +128,64 @@
 }
 
 .el-table .fixed-width .el-button--mini {
-	padding-left: 0;
-	padding-right: 0;
-	width: inherit;
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
 /** 表格更多操作下拉样式 */
 .el-table .el-dropdown-link {
-	cursor: pointer;
-	color: #409EFF;
-	margin-left: 5px;
+  cursor: pointer;
+  color: #409EFF;
+  margin-left: 5px;
 }
 
 .el-table .el-dropdown, .el-icon-arrow-down {
-	font-size: 12px;
+  font-size: 12px;
 }
 
 .el-tree-node__content > .el-checkbox {
-	margin-right: 8px;
+  margin-right: 8px;
 }
 
 .list-group-striped > .list-group-item {
-	border-left: 0;
-	border-right: 0;
-	border-radius: 0;
-	padding-left: 0;
-	padding-right: 0;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .list-group {
-	padding-left: 0px;
-	list-style: none;
+  padding-left: 0px;
+  list-style: none;
 }
 
 .list-group-item {
-	border-bottom: 1px solid #e7eaec;
-	border-top: 1px solid #e7eaec;
-	margin-bottom: -1px;
-	padding: 11px 0px;
-	font-size: 13px;
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
 .pull-right {
-	float: right !important;
+  float: right !important;
 }
 
 .el-card__header {
-	padding: 14px 15px 7px;
-	min-height: 40px;
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
 .el-card__body {
-	padding: 15px 20px 20px 20px;
+  padding: 15px 20px 20px 20px;
 }
 
 .card-box {
-	padding-right: 15px;
-	padding-left: 15px;
-	margin-bottom: 10px;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-bottom: 10px;
 }
 
 /* button color */
@@ -211,62 +211,62 @@
 
 /* text color */
 .text-navy {
-	color: #1ab394;
+  color: #1ab394;
 }
 
 .text-primary {
-	color: inherit;
+  color: inherit;
 }
 
 .text-success {
-	color: #1c84c6;
+  color: #1c84c6;
 }
 
 .text-info {
-	color: #23c6c8;
+  color: #23c6c8;
 }
 
 .text-warning {
-	color: #f8ac59;
+  color: #f8ac59;
 }
 
 .text-danger {
-	color: #ed5565;
+  color: #ed5565;
 }
 
 .text-muted {
-	color: #888888;
+  color: #888888;
 }
 
 /* image */
 .img-circle {
-	border-radius: 50%;
+  border-radius: 50%;
 }
 
 .img-lg {
-	width: 120px;
-	height: 120px;
+  width: 120px;
+  height: 120px;
 }
 
 .avatar-upload-preview {
-	position: absolute;
-	top: 50%;
-	transform: translate(50%, -50%);
-	width: 200px;
-	height: 200px;
-	border-radius: 50%;
-	box-shadow: 0 0 4px #ccc;
-	overflow: hidden;
+  position: absolute;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
 /* 拖拽列样式 */
 .sortable-ghost{
-	opacity: .8;
-	color: #fff!important;
-	background: #42b983!important;
+  opacity: .8;
+  color: #fff!important;
+  background: #42b983!important;
 }
 
 .top-right-btn {
-	position: relative;
-	float: right;
+  position: relative;
+  float: right;
 }

src/assets/styles/element-ui.scss

@@ -84,9 +84,9 @@
 }
 
 .el-menu--collapse
-  > div
-  > .el-submenu
-  > .el-submenu__title
-  .el-submenu__icon-arrow {
+> div
+> .el-submenu
+> .el-submenu__title
+.el-submenu__icon-arrow {
   display: none;
-}
+}

src/assets/styles/variables.scss

@@ -1,6 +1,6 @@
 // base color
 $blue:#324157;
-$light-blue:#3A71A8;
+$light-blue: #3a71a8;
 $red:#C03639;
 $pink: #E65D6E;
 $green: #30B08F;
@@ -11,7 +11,7 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#bfcbd9;
 $base-menu-color-active:#f4f4f5;
-$base-menu-background:#304156;
+$base-menu-background: #304156;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:rgba(0,0,0,.70);

src/components/PaginationMore/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'PaginationMore',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5,10, 20, 30, 50,100,200,300,500]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/views/his/integralOrder/index.vue

@@ -52,7 +52,36 @@
        <el-form-item label="提交时间" prop="createTime">
                  <el-date-picker v-model="createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
               </el-form-item>
-
+      <el-form-item label="销售公司" prop="companyId">
+        <el-select v-model="queryParams.companyId" placeholder="销售公司"  size="small" @change="getAllUserlist(queryParams.companyId)" clearable>
+          <el-option
+            v-for="dict in qwCompanyList"
+            :key="dict.companyId"
+            :label="dict.companyName"
+            :value="dict.companyId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="销售账号" prop="userId">
+        <el-select v-model="queryParams.companyUserId" placeholder="销售账号"  size="small" clearable>
+          <el-option
+            v-for="dict in companyUserNameList"
+            :key="dict.userId"
+            :label="dict.userName"
+            :value="dict.userId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="企微微信" prop="companyUserName">
+        <el-select v-model="queryParams.qwUserId" placeholder="企微微信"  size="small" clearable>
+          <el-option
+            v-for="dict in qwUserList"
+            :key="dict.id"
+            :label="dict.qwUserName"
+            :value="dict.id"
+          />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -105,6 +134,9 @@
       <el-table-column label="快递单号" align="center" prop="deliverySn" />
       <el-table-column label="发货时间" align="center" prop="deliveryTime" width="180"/>
       <el-table-column label="提交时间" align="center" prop="createTime" width="180"/>
+      <el-table-column label="销售公司ID" align="center" prop="companyId" width="180"/>
+      <el-table-column label="销售ID" align="center" prop="companyUserId" width="180"/>
+      <el-table-column label="企业微信ID" align="center" prop="qwUserId" width="180"/>
       <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
         <template slot-scope="scope">
@@ -226,6 +258,10 @@
 import {importTemplate, listIntegralOrder,importExpressTemplate, getIntegralOrder, delIntegralOrder, addIntegralOrder, updateIntegralOrder, exportIntegralOrder } from "@/api/his/integralOrder";
 import integralOrderDetails from '../../components/his/integralOrderDetails.vue';
 import { getToken } from "@/utils/auth";
+import {getCompanyList} from "@/api/company/company";
+import {getAllUserlist} from "@/api/company/companyUser";
+import {getQwUserInfo} from "@/api/qw/qwUser";
+
 export default {
   name: "IntegralOrder",
   components: { integralOrderDetails },
@@ -284,8 +320,14 @@ export default {
         createTime: null,
         sTime:null,
         eTime:null,
+        companyUserId:null,
+        qwUserId:null,
+        companyId:null,
       },
        createTime:null,
+      qwCompanyList:[],
+      companyUserNameList:[],
+      qwUserList:[],
       // 表单参数
       form: {},
       // 表单校验
@@ -304,6 +346,12 @@ export default {
     this.getDicts("sys_integral_order_status").then(response => {
       this.statusOptions = response.data;
     });
+
+
+    //获取企业
+    getCompanyList().then(response => {
+      this.qwCompanyList = response.data;
+    });
   },
   methods: {
     change(){
@@ -381,7 +429,6 @@ export default {
         remark: null,
         sTime:null,
         eTime:null,
-        createTime:null,
       };
       this.resetForm("form");
     },
@@ -396,6 +443,9 @@ export default {
       this.createTime=null;
       this.queryParams.sTime=null;
       this.queryParams.eTime=null;
+      this.queryParams.qwUserId=null;
+      this.queryParams.companyId=null;
+      this.queryParams.companyUserId=null;
       this.handleQuery();
 
     },
@@ -477,6 +527,18 @@ export default {
           this.download(response.msg);
           this.exportLoading = false;
         }).catch(() => {});
+    },
+    //选择企业后触发
+    getAllUserlist(companyId){
+      if(companyId){
+        getAllUserlist({companyId}).then(response => {
+          this.companyUserNameList=response.data;
+        });
+        //企业微信
+        getQwUserInfo({companyId}).then(response => {
+          this.qwUserList=response.data;
+        })
+      }
     }
   }
 };

src/views/index.vue

@@ -2,174 +2,202 @@
   <div class="statistics-dashboard">
     <!-- 数据概览 (Data Overview) -->
     <el-card class="overview-section" shadow="never">
-      <div slot="header" class="header">
-        <span>数据概览</span>
-      </div>
-
       <el-row :gutter="20">
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-user-solid"></i>
-              分公司数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="dealderCount" :duration="3600" class="card-panel-num" /></div>
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16" class="companybox">
+          <img src="../assets/images/topbg.png" alt="" class="topimg">
+          <img src="../assets/images/topbg.png" alt="" class="bottomimg">
+          <div class="companyboxtitle">
+            企业数据
           </div>
-        </el-col>
+          <div class="companyflex">
+            <div class="topbg companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/tab_company.png" alt="" class="icon-img">
+                分公司数量
+              </div>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-user"></i>
-              销售数量
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="dealderCount" :duration="3600"
+                          class="card-panel-num companynumber" />
+              </div>
             </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600" class="card-panel-num" />
+            <div class="companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/salesperson.png" alt="" class="icon-img">
+                销售数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="groupMgrCount" :duration="3600"
+                          class="card-panel-num companynumber" />
+              </div>
             </div>
-          </div>
-        </el-col>
+            <div class="companycard cardafter">
+              <div class="card-title1">
+                <img src="../assets/images/member.png" alt="" class="icon-img">
+                会员数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num companynumber" />
+                <span class="highlight-today-add companyadd">+{{todayIncreaseUserNum}}</span>
+              </div>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              会员数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="memberCount" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayIncreaseUserNum}}</span>
             </div>
-            <div class="card-badge">
-            </div>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              企微数量
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="qwMemberNum" :duration="3600" class="card-panel-num" /></div>
-            <div class="card-badge">
+            <div class="botttombg companycard">
+              <div class="card-title1">
+                <img src="../assets/images/tab_enterprise.png" alt="" class="icon-img">
+                企微数量
+              </div>
+              <div class="card-value highlight1">
+                <count-to :start-val="0" :end-val="qwMemberNum" :duration="3600" class="card-panel-num companynumber" />
+              </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-money"></i>
-              可用余额
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
-            </div>
-          </div>
-        </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <span>今日消耗</span>
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
-            </div>
-            <div class="card-sub">
-              <span>昨日消耗（元）</span>
-              <span class="sub-value">
-                <count-to :start-val="0" :end-val="yesterdayComsumption" :duration="3600" class="card-panel-num" />
-              </span>
-            </div>
-            <el-progress :percentage="percentage" :show-text="false" color="#409EFF"></el-progress>
-            <div class="card-desc">{{remainMessage}}</div>
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="propertyboxtitle">
+          <div class="property_title">
+            资产概览
           </div>
-        </el-col>
-
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <span class="cdn-label">CDN</span>
-              今日
-            </div>
-            <div class="card-value highlight">{{formatBytes(this.todayTraffic)}}
+          <div class="propertyboxflex">
+            <div class="property-card propertyline">
+              <div class="property-title">
+                <i class="el-icon-money"></i>
+                企业资产（元）
+              </div>
+              <div class="card-value highlight">
+                <count-to :start-val="0" :end-val="balance" :duration="3600" class="card-panel-num" />
+              </div>
             </div>
-            <div class="card-sub">
-              <span>本月</span>
-              <span class="sub-value">{{formatBytes(this.thisMonthTraffic)}}</span>
+            <div class="property-card">
+              <div class="property-title">
+                <span>今日消耗 (元)</span>
+              </div>
+              <div class="card-value highlight" style="color: rgba(32, 33, 36, 1);margin-top: 10px;">
+                <count-to :start-val="0" :end-val="todayComsumption" :duration="3600" class="card-panel-num" />
+              </div>
+              <div class="card-compare">
+                较昨日 <span>+1</span>
+              </div>
             </div>
           </div>
-        </el-col>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-message"></i>
-              短信剩余条数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="smsRemainCount" :duration="3600" class="card-panel-num" />
-            </div>
-          </div>
         </el-col>
+      </el-row>
 
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              平台今日看课人数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
-            </div>
-            <div class="card-sub">
-              <span>配额上限</span>
-              <span class="sub-value">
-                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />/<count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" /></span>
-            </div>
-            <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false" color="#409EFF"></el-progress>
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
+          <div class="operatetitle">
+            经营数据
           </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              订单总数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="orderTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayOrderNum}}</span>
-            </div>
-            <div class="card-badge">
+          <div class="operatetitle-col">
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                收款总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="recvTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{recvTodayNum}}</span>
+                </div>
+              </div>
+              <div class="card-badge">
+              </div>
             </div>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              收款总数
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                订单总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="orderTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{todayOrderNum}}</span>
+                </div>
+
+              </div>
+              <div class="card-badge">
+              </div>
+
             </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="recvTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{recvTodayNum}}</span>
+            <div class="operatetitle-card">
+              <div class="card-title">
+                平台今日看课人数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num" />
+              </div>
+              <div class="card-sub">
+                <span>配额上限</span>
+                <span class="sub-value">
+                  <count-to :start-val="0" :end-val="todayWatchUserCount" :duration="3600" class="card-panel-num"
+                            style="color: rgba(49, 185, 154, 1);" />
+                  /
+                  <count-to :start-val="0" :end-val="versionLimit" :duration="3600" class="card-panel-num" />
+                </span>
+              </div>
+              <el-progress :percentage="todayWatchUserCount/versionLimit" :show-text="false"
+                           color="#409EFF"></el-progress>
             </div>
-            <div class="card-badge">
+            <div class="operatetitle-card">
+              <div class="card-title">
+                <i class="el-icon-shopping-cart-full"></i>
+                商品总数
+              </div>
+              <div class="operate-value highlight">
+                <count-to :start-val="0" :end-val="goodsTotalNum" :duration="3600" class="card-panel-num" />
+                <div class="yesterdaybox">
+                  较昨日 <span class="highlight-today-add2">+{{todayGoodsNum}}</span>
+                </div>
+
+              </div>
+              <div class="card-badge">
+              </div>
             </div>
           </div>
+
         </el-col>
-        <el-col :span="3">
-          <div class="data-card">
-            <div class="card-title">
-              <i class="el-icon-shopping-cart-full"></i>
-              商品总数
-            </div>
-            <div class="card-value highlight">
-              <count-to :start-val="0" :end-val="goodsTotalNum" :duration="3600" class="card-panel-num" />
-              <span class="highlight-today-add">+{{todayGoodsNum}}</span>
+
+
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" style="padding-left: 15px;">
+
+          <div class="internetbox">
+            <div class="internet-cardtop">
+              <div class="cardinnerbox">
+                <div class="cardtopimg">
+                  <img src="../assets/images/liuliang.png" alt=""><span>剩余流量</span>
+                </div>
+                <div class="cardtopnumber">
+                  100.00GB
+                </div>
+              </div>
+              <div class="progress">
+                <el-progress :percentage="90" :show-text="false" define-back-color="#000">
+
+                </el-progress>
+              </div>
+              <div class="cardinnerbox2">
+                <div>
+                  今日消耗 <span>{{formatBytes(this.todayTraffic)}}</span>
+                </div>
+                <div>
+                  本月 <span>{{formatBytes(this.thisMonthTraffic)}}</span>
+                </div>
+              </div>
             </div>
-            <div class="card-badge">
+
+            <div class="internetbox-messge">
+              <div class="internet-card">
+                <img src="../assets/images/message.png" alt="">
+
+                <span class="internet-title">
+                  短信剩余条数 (条)
+                </span>
+              </div>
+              <div class="internet-number">
+                0
+              </div>
             </div>
           </div>
         </el-col>
@@ -178,7 +206,7 @@
     <!-- 分析概览 (Analysis Overview) -->
     <div class="analysis-section" shadow="never">
       <div slot="header" class="header">
-        <span>分析概览</span>
+        <div>分析概览</div>
         <div class="tab-group">
           <el-radio-group v-model="queryTime" size="medium" @change="handleAnalysis">
             <el-radio-button label="今日"></el-radio-button>
@@ -191,7 +219,6 @@
 
         <div class="action-group">
           <el-radio-group v-model="userTypeText" @change="handleUserType">
-<!--            <el-radio-button label="会员"></el-radio-button>-->
             <el-radio-button label="企微"></el-radio-button>
           </el-radio-group>
 
@@ -203,21 +230,23 @@
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item :command="0" :class="{ 'is-active': !autoRefreshInterval }">关闭</el-dropdown-item>
               <el-dropdown-item :command="5" :class="{ 'is-active': autoRefreshInterval === 5 }">5分钟</el-dropdown-item>
-              <el-dropdown-item :command="10" :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
-              <el-dropdown-item :command="15" :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
+              <el-dropdown-item :command="10"
+                                :class="{ 'is-active': autoRefreshInterval === 10 }">10分钟</el-dropdown-item>
+              <el-dropdown-item :command="15"
+                                :class="{ 'is-active': autoRefreshInterval === 15 }">15分钟</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
           <el-button size="small" plain icon="el-icon-refresh" type="primary" @click="manualRefresh">手动刷新</el-button>
-          <!--          <el-button size="small" type="primary" @click="refresh">刷新</el-button>-->
         </div>
       </div>
     </div>
     <div>
       <el-row :gutter="20">
-        <el-col :span="12" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''" @click="handleToggleDiv(0)">
+        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===0?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(0)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-monitor"></i></div>
+              <img class="card-icon" src="../assets/images/cishu_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>观看人数</span>
@@ -238,68 +267,70 @@
               </div>
             </div>
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-video-play"></i></div>
+              <img class="card-icon" src="../assets/images/number_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>观看次数</span>
-                  <span class="highlight">
+                  <span class="highlight-red">
                     <count-to :start-val="0" :end-val="watchCount" :duration="3600" class="card-panel-num" /></span>
                 </div>
                 <div class="card-row">
                   <span>完播次数</span>
-                  <span class="highlight">
+                  <span class="highlight-red">
                     <count-to :start-val="0" :end-val="completedCount" :duration="3600" class="card-panel-num" />
                   </span>
                 </div>
                 <div class="card-row">
                   <span>视频完播率</span>
-                  <span class="highlight">{{watchRate}}%</span>
+                  <span class="highlight-red">{{watchRate}}%</span>
                 </div>
               </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="6" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"  @click="handleToggleDiv(1)">
+        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===1?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(1)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-headset"></i></div>
+              <img class="card-icon" src="../assets/images/renshu_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>答题人数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="answerMemberCount" :duration="3600" class="card-panel-num" />
                   </span>
                 </div>
                 <div class="card-row">
                   <span>正确人数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="correctUserCount" :duration="3600" class="card-panel-num" />
-                    </span>
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>正确率</span>
-                  <span class="highlight">{{correctRate}}%</span>
+                  <span class="highlight-black">{{correctRate}}%</span>
                 </div>
               </div>
             </div>
           </div>
         </el-col>
 
-        <el-col :span="6" style="position: relative">
-          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"  @click="handleToggleDiv(2)">
+        <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6"  style="position: relative">
+          <div class="analysis-card-check" :class="selectedDiv===2?'analysis-card-check-selected color':''"
+               @click="handleToggleDiv(2)">
             <div class="analysis-card">
-              <div class="card-icon"><i class="el-icon-present"></i></div>
+              <img class="card-icon" src="../assets/images/hongbao_views.png"></img>
               <div class="card-content">
                 <div class="card-row">
                   <span>答题红包个数</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="rewardCount" :duration="3600" class="card-panel-num" />
-                    </span>
+                  </span>
                 </div>
                 <div class="card-row">
                   <span>答题红包金额(元)</span>
-                  <span class="highlight">
+                  <span class="highlight-black">
                     <count-to :start-val="0" :end-val="rewardMoney" :duration="3600" class="card-panel-num" /></span>
                 </div>
               </div>
@@ -1129,7 +1160,7 @@ export default {
 
       return (isNegative ? '-' : '') + formattedInteger + decimalPart;
     },
-    handleToggleDiv(selected){
+    handleToggleDiv(selected) {
       this.selectedDiv = selected;
 
       if (selected === 1) {
@@ -1151,12 +1182,12 @@ export default {
           if (this.answerRedPackMoneyViewerChart) this.answerRedPackMoneyViewerChart.resize();
         });
       }
-      if(this.selectedDiv === 0){
+      if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
-      } else if(this.selectedDiv === 1) {
+      } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
-      } else if(this.selectedDiv === 2) {
+      } else if (this.selectedDiv === 2) {
         this.handleAnswerRedPackViewerChart()
         this.handleAnswerRedPackMoneyViewerChart()
       }
@@ -1207,11 +1238,11 @@ export default {
       return param;
     },
     // 分析概览
-    handleAnalysis(e){
+    handleAnalysis(e) {
 
       let param = this.getParam();
-      analysisPreview(param).then(res=>{
-        if(res.code === 200){
+      analysisPreview(param).then(res => {
+        if (res.code === 200) {
           this.watchUserCount = res.data.watchUserCount;
           this.completedUserCount = res.data.completedUserCount;
           this.completedRate = res.data.completedRate;
@@ -1226,12 +1257,12 @@ export default {
         }
       })
 
-      if(this.selectedDiv === 0){
+      if (this.selectedDiv === 0) {
         this.handleViewChartData()
         this.handleDealerChartData()
-      } else if(this.selectedDiv === 1) {
+      } else if (this.selectedDiv === 1) {
         this.handleCourseWatchChart()
-      } else if(this.selectedDiv === 2) {
+      } else if (this.selectedDiv === 2) {
         this.handleAnswerRedPackViewerChart()
         this.handleAnswerRedPackMoneyViewerChart()
       }
@@ -1401,37 +1432,60 @@ export default {
 </script>
 
 <style scoped>
-.highlight-today-add{
-  color:green;font-size:17px;font-weight: normal;
+.highlight-today-add {
+  color: green;
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.highlight-today-add2 {
+  color: rgba(49, 185, 154, 1);
+  font-size: 14px;
+  font-weight: normal;
+  transform: scale(.9);
 }
-.action-group .el-button + .el-button,
+
+.action-group .el-button+.el-button,
 .action-group .el-dropdown {
   margin-left: 10px;
 }
+
 .is-active {
   color: #409EFF;
   font-weight: bold;
 }
+
 ::v-deep .el-radio-button__inner:hover {
-  color: #409EFF; /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
+  color: #409EFF;
+  /* 鼠标悬浮时的文字颜色，可以根据需要调整 */
 }
+
 ::v-deep .el-radio-button.is-active .el-radio-button__inner {
-  background-color: #409EFF; /* 选中时的背景色 */
-  border-color: #409EFF;     /* 选中时的边框色 */
-  color: #FFFFFF;           /* 选中时的文字颜色 (通常是白色) */
-  box-shadow: -1px 0 0 0 #409EFF; /* 处理按钮间的连接缝隙 */
+  background-color: #409EFF;
+  /* 选中时的背景色 */
+  border-color: #409EFF;
+  /* 选中时的边框色 */
+  color: #FFFFFF;
+  /* 选中时的文字颜色 (通常是白色) */
+  box-shadow: -1px 0 0 0 #409EFF;
+  /* 处理按钮间的连接缝隙 */
 }
+
 /* 如果需要，也可以修改非选中状态下的聚焦（focus）或悬浮（hover）样式 */
 /* 例如，让非选中按钮悬浮时边框和文字也变蓝 */
 ::v-deep .el-radio-button:not(.is-active) .el-radio-button__inner:hover {
   color: #409EFF;
   /* border-color: #b3d8ff;  Element UI 默认悬浮边框色，可以按需修改 */
 }
+
 /* 聚焦时的外框，如果需要的话 */
 ::v-deep .el-radio-button:focus:not(.is-checked) .el-radio-button__inner {
-  /* border-color: #409EFF; */ /* Element UI 默认的 focus 颜色通常关联主题色 */
-  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */ /* 示例 focus 光晕 */
+  /* border-color: #409EFF; */
+  /* Element UI 默认的 focus 颜色通常关联主题色 */
+  /* box-shadow: 0 0 2px 2px rgba(64, 158, 255, 0.2); */
+  /* 示例 focus 光晕 */
 }
+
 .statistics-dashboard {
   padding: 20px;
   background-color: #f5f7fa;
@@ -1461,7 +1515,8 @@ export default {
   position: relative;
   transition: background-color 0.3s ease-in-out;
 }
-.data-card:hover{
+
+.data-card:hover {
   border: 1px solid #4592ff;
   background-color: #e7f1ff;
 }
@@ -1472,10 +1527,16 @@ export default {
   margin-bottom: 10px;
 }
 
+.card-title1 {
+  color: white;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
 .card-value {
   font-size: 24px;
   font-weight: bold;
-  margin-top: auto;
+  margin-top: 20px;
 }
 
 .highlight {
@@ -1555,7 +1616,8 @@ export default {
   justify-items: center;
   flex-direction: column;
   padding: 10px;
-  .highlight{
+
+  .highlight {
     text-align: center;
     margin-top: 1em;
 
@@ -1563,9 +1625,10 @@ export default {
     color: #1677ff;
     font-size: 21px;
     line-height: 42px;
-    font-weight: 400;
+    font-weight: 600;
     margin-top: 8px;
   }
+
   font-size: 15px;
   color: #000;
 
@@ -1615,17 +1678,20 @@ export default {
   height: 350px;
   width: 100%;
 }
-.analysis-card-check{
+
+.analysis-card-check {
   display: flex;
   flex-direction: row;
   border: 1px solid transparent;
   background-color: #fff;
   border-radius: 4px;
 }
-.analysis-card-check:hover{
+
+.analysis-card-check:hover {
   cursor: pointer;
 }
-.analysis-card-check-selected:after{
+
+.analysis-card-check-selected:after {
   content: "";
   display: block;
   border-width: 15px;
@@ -1637,9 +1703,10 @@ export default {
   border-color: #4592FF transparent transparent transparent;
   font-size: 0;
   line-height: 0;
-  z-index:1;
+  z-index: 1;
 }
-.analysis-card-check-selected:before{
+
+.analysis-card-check-selected:before {
   content: "";
   display: block;
   border-width: 15px;
@@ -1651,22 +1718,324 @@ export default {
   border-color: #4592FF transparent transparent transparent;
   font-size: 0;
   line-height: 0;
-  z-index:1;
+  z-index: 1;
 }
-.analysis-card-check-selected{
+
+.analysis-card-check-selected {
   border: 1px solid #4592FF;
   background-color: #e7f1ff;
 }
-.color{
+
+.color {
   position: relative;
   border: 1px solid #4592FF;
   background-color: #e7f1ff;
 }
+
 .color:after {
   bottom: -27px;
   border-color: #E7F1FF transparent transparent transparent;
 }
-.legend-group{
 
+.companybox {
+  color: white;
+  background-color: #006CFF;
+  padding: 10px 10px 40px 10px;
+  box-sizing: border-box;
+  position: relative;
+  border-radius: 6px;
+
+  .topimg {
+    width: 100px;
+    height: 80px;
+    position: absolute;
+    top: 0px;
+    left: 0;
+  }
+
+  .bottomimg {
+    width: 100px;
+    height: 80px;
+    position: absolute;
+    bottom: -10px;
+    right: 0;
+    transform: rotate(180deg);
+  }
+
+  .companyboxtitle {
+    height: 30px;
+    margin-bottom: 20px;
+    font-weight: 600;
+  }
+
+  .companyflex {
+    display: flex;
+    justify-content: space-around;
+  }
+}
+
+
+
+.companynumber {
+  color: white;
+}
+
+.companycard {
+
+  width: 25%;
+}
+
+.companyadd {
+  color: white;
+}
+
+.cardafter {
+  position: relative;
+
+}
+
+.cardafter::after {
+  content: "";
+  height: 60px;
+  border-right: 1px solid rgba(255, 255, 255, 0.20);
+  position: absolute;
+  right: 30px;
+  top: 0px;
+}
+
+.highlight1 {
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+
+
+
+.propertyboxtitle {
+  background-image: url(../assets/images/zcgl_bg.png);
+  height: 100px;
+}
+
+.propertyboxflex {
+  display: flex;
+  background-color: white;
+  justify-content: space-between;
+}
+
+.property-card {
+  width: 48%;
+  border-radius: 4px;
+  padding: 15px;
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  transition: background-color 0.3s ease-in-out;
+
+}
+
+.property_title {
+  height: 40px;
+  line-height: 40px;
+  color: rgba(32, 33, 36, 1);
+  box-sizing: border-box;
+  padding-left: 10px;
+  font-weight: 600;
+}
+
+.card-compare {
+  margin-top: 5px;
+  font-size: 14px;
+  color: rgba(92, 95, 102, 1);
+
+  span {
+    font-size: 13px;
+    transform: scale(.8);
+    color: rgba(49, 185, 154, 1);
+  }
+}
+
+.propertyline {
+  position: relative;
+}
+
+.propertyline::after {
+  position: absolute;
+  content: "";
+  height: 80px;
+  border-right: 1px solid rgba(237, 239, 242, 1);
+  right: 0;
+}
+
+.operatetitle {
+  font-weight: 600;
+  height: 50px;
+  line-height: 50px;
+}
+
+.operatetitle-col{
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 20px;
+  padding-right: 5px;
+  .operatetitle-card {
+    width: 24%;
+    border: 1px solid transparent;
+    background-color: rgba(245, 247, 250, 1);
+    border-radius: 4px;
+    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: background-color 0.3s ease-in-out;
+
+    .operate-value {
+      font-size: 24px;
+      font-weight: bold;
+    }
+  }
+}
+
+.yesterdaybox {
+  font-size: 14px;
+  color: rgba(92, 95, 102, 1);
+  font-weight: 200;
+  margin-top: 10px;
+}
+
+.internetbox {
+  background: linear-gradient(to right, rgba(255, 99, 0, 1), rgba(255, 159, 1, 1));
+  border-radius: 6px;
+  padding: 2px 5px 15px 5px;
+  width: 100%;
+  .internet-cardtop {
+    background-color: white;
+    border-radius: 3px;
+    margin-top: 5px;
+    justify-content: space-between;
+    padding: 15px;
+    box-sizing: border-box;
+    color: rgba(32, 33, 36, 1);
+
+    .cardinnerbox {
+      display: flex;
+      justify-content: space-between;
+
+      .cardtopimg {
+        display: flex;
+        align-items: center;
+        font-size: 15px;
+
+        img {
+          height: 18px;
+          width: 18px;
+        }
+      }
+
+      .cardtopnumber {
+        font-size: 25px;
+        color: rgba(32, 33, 36, 1);
+        font-weight: bold;
+      }
+
+    }
+
+    .cardinnerbox2 {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+      color: rgba(92, 95, 102, 1);
+
+
+    }
+
+  }
+
+  .internetbox-messge{
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 10px 10px 10px;
+    .internet-card{
+      display: flex;
+      font-size: 14px;
+      align-items: center;
+      img{
+        height: 18px;
+        width: 18px;
+      }
+      span{
+        padding-left: 5px;
+      }
+    }
+    .internet-number{
+      font-size: 25px;
+
+    }
+  }
+  .internetbox {
+    display: flex;
+    color: white;
+
+    .internet-card {
+      width: 100%;
+      display: flex;
+      color: white;
+
+    }
+  }
+
+  .internet-title {
+    font-size: 14px;
+  }
+
+}
+
+.company {
+  background-color: 006CFF;
+}
+.highlight-red{
+  text-align: center;
+  margin-top: 1em;
+  font-family: BebasNeue;
+  color: rgba(255, 82, 82, 1);
+  font-size: 21px;
+  line-height: 42px;
+  font-weight: 600;
+  margin-top: 8px;
+}
+.highlight-black{
+  text-align: center;
+  margin-top: 1em;
+  font-family: BebasNeue;
+  color: rgba(32, 33, 36, 1);
+  font-size: 21px;
+  line-height: 42px;
+  font-weight: 600;
+  margin-top: 8px;
+
+}
+.operatetitle-card:hover{
+  border: 1px solid #4592ff;
+  background-color: #e7f1ff;
+}
+.icon-img{
+  height: 14px;
+  width: 14px;
+}
+.progress{
+  transform: rotate(180deg);
+  margin-top: 20px;
+}
+.progress ::v-deep .el-progress-bar__outer{
+  background-color: rgba(247, 152, 11, 0.2);
+}
+::v-deep .el-progress {
+
+  .el-progress-bar {
+    .el-progress-bar__inner {
+      background: linear-gradient(to right, #FF6300,#FF9F01)
+    }
+  }
 }
 </style>

src/views/login.vue

@@ -1,25 +1,38 @@
 <template>
   <div class="login" id="loginBox">
+    <div class="logopositon">
+      <img src="../assets/images/yunlian_logo.png" alt="">
+    </div>
     <div class="login-con">
       <div class="img-box">
-        <img src="../assets/images/login_left.png" alt="">
+        <div class="imgline1">
+          一站式私域平台
+        </div>
+        <div class="imgline2">
+          助力企业打造自主客户资产池!
+        </div>
       </div>
       <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-        <h3 class="title">{{vueAppTitle}}</h3>
+        <div class="title">{{vueAppTitle}}</div>
+        <div class="title-line"></div>
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="username" >
+            <img slot="prefix" src="../assets/images/user.png" class="input-icon "/>
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             v-model="loginForm.password"
-            type="password"
+            :type="passwordtype"
             auto-complete="off"
             placeholder="密码"
             @keyup.enter.native="handleLogin"
+            class="password"
           >
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+            <!-- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> -->
+            <img slot="prefix" src="../assets/images/pass.png" class="input-icon" />
+            <img slot="suffix" src="../assets/images/eyeoff.png" class="input-icon2" v-if="ispassword" @click.stop="changetype()"/>
+            <img slot="suffix" src="../assets/images/eyeopen.png" class="input-icon2" v-else @click.stop="changetype()"/>
           </el-input>
         </el-form-item>
         <el-form-item prop="code">
@@ -29,8 +42,10 @@
             placeholder="验证码"
             style="width: 63%"
             @keyup.enter.native="handleLogin"
+
           >
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+            <!-- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/> -->
+            <img slot="prefix" src="../assets/images/code.png" class="input-icon" />
           </el-input>
           <div class="login-code">
             <img :src="codeUrl" @click="getCode" class="login-code-img"/>
@@ -96,7 +111,9 @@ export default {
         code: [{ required: true, trigger: "change", message: "验证码不能为空" }]
       },
       loading: false,
-      redirect: undefined
+      redirect: undefined,
+      passwordtype:'password',
+      ispassword:true
     };
   },
   watch: {
@@ -156,6 +173,14 @@ export default {
             });
         }
       });
+    },
+    changetype(){
+      this.ispassword=!this.ispassword
+      if(this.ispassword){
+        this.passwordtype="password"
+      }else{
+        this.passwordtype="text"
+      }
     }
   }
 };
@@ -163,43 +188,70 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss">
 .login {
+  .logopositon{
+    position: fixed;
+    left: 30px;
+    top: 30px;
+  }
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
-  background-image: linear-gradient(#0e68c3, #1e99f5);
+  background-image: (url(../assets/images/login_bg.png) );
+  background-size: 100% 100%;
   background-size: cover;
+
   .login-con{
-    width: 750px;
+    width: 880px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-radius: 10px;
-    overflow: hidden;
-    background: #ffffff;
+
+
     .img-box{
-      width: 420px;
-      height: 420px;
-      img{
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
+      width: 440px;
+      height: 500px;
+      background-image: url(../assets/images/login_left.png);
+      background-size: 100% 100%;
+      color: #FFFFFF;
+      .imgline1{
+        font-size: 34px;
+        font-weight:400;
+        margin-left: 38px;
+        margin-top: 38px;
+        letter-spacing: 2px;
+      }
+      .imgline2{
+        margin-left: 38px;
+        font-size: 16px;
+        margin-top: 6px;
+        letter-spacing: 1px;
       }
+
     }
   }
 }
 .title {
-  margin: 0px auto 30px auto;
+  margin: 0px auto 15px auto;
   text-align: center;
-  color: #707070;
+  color: #202124;
+  font-weight: 500;
+  font-size: 20px;
+}
+.title-line{
+  width: 40px;
+  border-bottom: 2px solid #006CFF;
+  margin: 0px auto 30px auto;
 }
-
 .login-form {
   box-sizing: border-box;
   background: #ffffff;
-  width: 330px;
-  padding: 25px 25px 5px 25px;
+  width: 440px;
+  height: 500px;
+  padding: 40px 25px 5px 25px;
+  box-shadow:4px -4px 10px rgba(0, 108, 255, 0.15);
   .el-input {
     height: 38px;
     input {
@@ -207,9 +259,16 @@ export default {
     }
   }
   .input-icon {
-    height: 39px;
-    width: 14px;
+    height: 20px;
+    width: 20px;
     margin-left: 2px;
+    margin-top: 10px;
+  }
+  .input-icon2{
+    height: 20px;
+    width: 20px;
+    margin-right: 4px;
+    margin-top: 10px;
   }
 }
 .login-tip {
@@ -241,4 +300,6 @@ export default {
 .login-code-img {
   height: 38px;
 }
+
+
 </style>

src/views/qw/externalContact/index.vue

@@ -0,0 +1,973 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px" style="border: 1px solid transparent">
+      <el-form-item label="销售公司" prop="companyId">
+        <el-select v-model="queryParams.companyId" placeholder="销售公司"  size="small" @change="getAllUserlist(queryParams.companyId)" clearable>
+          <el-option
+              v-for="dict in qwCompanyList"
+              :key="dict.companyId"
+              :label="dict.companyName"
+              :value="dict.companyId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="销售账号" prop="companyUserName">
+        <el-select v-model="queryParams.companyUserName" placeholder="销售账号"  size="small" clearable>
+          <el-option
+              v-for="dict in companyUserNameList"
+              :key="dict.userId"
+              :label="dict.userName"
+              :value="dict.userName"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="企微微信" prop="companyUserName">
+        <el-select v-model="queryParams.qwUserId" placeholder="企微微信"  size="small" clearable>
+          <el-option
+              v-for="dict in qwUserList"
+              :key="dict.id"
+              :label="dict.qwUserName"
+              :value="dict.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户名称" prop="name">
+        <el-input
+            v-model="queryParams.name"
+            placeholder="请输入客户名称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="销售企微昵称" prop="qwUserName">
+        <el-input
+            v-model="queryParams.qwUserName"
+            placeholder="请输入销售企微昵称"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户类别" prop="type">
+        <el-select v-model="queryParams.type" placeholder="请选择用户类别" clearable size="small">
+          <el-option
+              v-for="dict in typeOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="性别" prop="gender">
+        <el-select v-model="queryParams.gender" placeholder="状态" clearable size="small">
+          <el-option
+              v-for="dict in genderOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="客户等级" prop="level">
+        <el-select v-model="queryParams.level" placeholder="客户等级" clearable size="small">
+          <el-option
+              v-for="dict in ratingType"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="等级升降" prop="levelType">
+        <el-select v-model="queryParams.levelType" placeholder="等级升降" clearable size="small">
+          <el-option
+              v-for="dict in ratingUpFall"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item label="电话号码" prop="remarkMobiles">
+        <el-input
+            v-model="queryParams.remarkMobiles"
+            placeholder="请输入备注电话号码"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+
+      <el-form-item label="来源" prop="addWay">
+
+        <el-select v-model="queryParams.addWay" placeholder="来源" clearable size="small">
+          <el-option
+              v-for="dict in addWayOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+
+        <el-select v-model="queryParams.status" placeholder="状态" clearable size="small">
+          <el-option
+              v-for="dict in statusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="转接状态" prop="addWay">
+
+        <el-select v-model="queryParams.transferStatus" placeholder="转接状态" clearable size="small">
+          <el-option
+              v-for="dict in transferStatusOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否绑定会员" prop="isBindMini">
+        <el-select v-model="queryParams.isBindMini" placeholder="是否绑定会员" clearable size="small" @change="handleQuery" >
+          <el-option
+              v-for="dict in isBindMiniOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="标签" prop="tagIds">
+        <div @click="hangleChangeTags()" style="cursor: pointer; border: 1px solid #e6e6e6; background-color: white; overflow: hidden; flex-grow: 1;width: 250px">
+          <div style="min-height: 35px; max-height: 200px; overflow-y: auto;">
+            <el-tag type="success"
+                    closable
+                    :disable-transitions="false"
+                    v-for="list in this.selectTags"
+                    :key="list.tagId"
+                    @close="handleCloseTags(list)"
+                    style="margin: 3px;"
+            >{{list.name}}
+            </el-tag>
+          </div>
+        </div>
+
+
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+            v-model="queryParams.remark"
+            placeholder="请输入备注"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="所属销售" prop="companyUser">
+        <el-input
+            v-model="queryParams.companyUser"
+            placeholder="请输入昵称或者手机号"
+            clearable
+            size="small"
+            @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="添加时间" prop="createTime">
+        <el-date-picker v-model="queryParams.createTime" size="small" style="width: 220px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="change"></el-date-picker>
+      </el-form-item>
+
+
+
+
+      <el-form-item label="流失时间" prop="lossTime">
+        <el-date-picker clearable size="small"
+                        v-model="queryParams.lossTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择流失时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="删除时间" prop="delTime">
+        <el-date-picker clearable size="small"
+                        v-model="queryParams.delTime"
+                        type="date"
+                        value-format="yyyy-MM-dd"
+                        placeholder="选择删除时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          :loading="exportLoading"
+          @click="handleExport"
+          v-hasPermi="['qw:externalContact:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="externalContactList" @selection-change="handleSelectionChange" border>
+    <el-table-column type="selection" width="55" align="center" />
+    <el-table-column label="企微客户ID"  align="center" prop="id" />
+    <el-table-column label="企微客户头像" align="center" prop="avatar" width="100px">
+      <template slot-scope="scope">
+        <el-popover
+            placement="right"
+            title=""
+            trigger="hover">
+          <img slot="reference" :src="scope.row.avatar" width="60px">
+          <img :src="scope.row.avatar" style="max-width: 200px;">
+        </el-popover>
+      </template>
+    </el-table-column>
+    <el-table-column label="企微客户名称"  prop="name" width="110px"/>
+    <el-table-column label="客户称呼"  prop="stageStatus" width="110px"/>
+    <el-table-column label="销售企微昵称" align="center" prop="qwUserName" width="120px"/>
+    <el-table-column label="企微部门" align="center" prop="departmentName" width="120px"/>
+    <el-table-column label="用户类别" align="center" prop="type">
+      <template slot-scope="scope">
+        <dict-tag :options="typeOptions" :value="scope.row.type"/>
+      </template>
+    </el-table-column>
+    <el-table-column label="性别" align="center" prop="gender">
+      <template slot-scope="scope">
+        <dict-tag :options="genderOptions" :value="scope.row.gender"/>
+      </template>
+    </el-table-column>
+    <el-table-column label="备注" align="center" prop="remark" />
+    <el-table-column label="描述信息" align="center" prop="description" />
+    <el-table-column label="标签" align="center" prop="tagIdsName" width="250px">
+      <template slot-scope="scope">
+        <div v-for="name in scope.row.tagIdsName"  style="display: inline;">
+          <el-tag type="success">{{ name }}</el-tag>
+        </div>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="状态" align="center" prop="status" width="120px" >
+      <template slot-scope="scope">
+        <dict-tag :options="statusOptions" :value="scope.row.status"/>
+      </template>
+    </el-table-column>
+    <el-table-column label="客户等级" align="center" prop="level" width="120px" >
+      <template slot-scope="scope">
+        <dict-tag :options="ratingType" :value="scope.row.level"/>
+      </template>
+    </el-table-column>
+    <el-table-column label="等级状态" align="center" prop="levelType" width="120px" >
+      <template slot-scope="scope">
+        <dict-tag :options="ratingUpFall" :value="scope.row.levelType"/>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="添加时间" align="center" prop="createTime" width="100px" />
+    <el-table-column label="流失时间" align="center" prop="lossTime" width="100px" />
+    <el-table-column label="删除时间" align="center" prop="delTime" width="100px" />
+    <el-table-column label="备注电话号码" align="center" prop="remarkMobiles" width="150px">
+      <template slot-scope="scope">
+        <div v-for="i in JSON.parse(scope.row.remarkMobiles)" :key="i">{{i}}</div>
+      </template>
+    </el-table-column>
+    <el-table-column label="备注企业名称" align="center" prop="remarkCorpName" />
+    <el-table-column label="来源" align="center" prop="addWay" width="100px">
+      <template slot-scope="scope">
+        <dict-tag :options="addWayOptions" :value="scope.row.addWay"/>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="转接状态" align="center" prop="transferStatus" width="100px" >
+      <template slot-scope="scope">
+        <dict-tag :options="transferStatusOptions" :value="scope.row.transferStatus"/>
+      </template>
+    </el-table-column>
+    <el-table-column label="企业id" align="center" prop="corpId" />
+    <el-table-column label="是否绑定会员" width="100px" align="center" fixed="right">
+      <template slot-scope="scope">
+        <el-tag v-if="scope.row.fsUserId" >已绑定</el-tag>
+        <el-tag v-else type="info"> 未绑定</el-tag>
+      </template>
+    </el-table-column>
+<!--    <el-table-column label="修改" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">-->
+<!--      <template slot-scope="scope">-->
+<!--        <el-button-->
+<!--            v-if="scope.row.status==0||scope.row.status==2"-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit"-->
+<!--            @click="handleUpdate(scope.row)"-->
+<!--            v-hasPermi="['qw:externalContact:edit']"-->
+<!--        >修改备注</el-button>-->
+<!--        <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-user-solid"-->
+<!--            @click="handleAppellation(scope.row)"-->
+<!--        >修改客户称呼</el-button>-->
+<!--      </template>-->
+<!--    </el-table-column>-->
+    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
+<!--      <template slot-scope="scope">-->
+<!--        <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-edit-outline"-->
+<!--            @click="handleUpdateUser(scope.row)"-->
+<!--        >-->
+<!--          <span v-if="scope.row.fsUserId">换绑会员</span>-->
+<!--          <span v-else>绑定会员</span>-->
+<!--        </el-button>-->
+
+<!--        <el-button-->
+<!--            v-if="scope.row.fsUserId"-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            icon="el-icon-thumb"-->
+<!--            @click="handleUnBindUserId(scope.row)"-->
+<!--            v-hasPermi="['qw:externalContact:unBindUserId']"-->
+<!--        >-->
+<!--          <span>解除会员绑定</span>-->
+<!--        </el-button>-->
+<!--        <el-button-->
+<!--            size="mini"-->
+<!--            type="text"-->
+<!--            @click="handledetails(scope.row)"-->
+<!--        >AI获取用户信息-->
+<!--        </el-button>-->
+<!--      </template>-->
+    </el-table-column>
+    </el-table>
+
+    <pagination-more
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+    />
+    <!--  搜索标签   -->
+    <el-dialog :title="changeTagDialog.title" :visible.sync="changeTagDialog.open" style="width:100%;height: 100%" append-to-body>
+
+      <div>搜索标签：
+        <el-input v-model="queryTagParams.name" placeholder="请输入标签名称" clearable size="small" style="width: 200px;margin-right: 10px" />
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearchTags(queryTagParams.name)">搜索</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" @click="cancelSearchTags">重置</el-button>
+      </div>
+      <div v-for="item in tagGroupList" :key="item.id"  >
+        <div style="font-size: 20px;margin-top: 20px;margin-bottom: 20px;">
+          <span class="name-background">{{ item.name }}</span>
+        </div>
+        <div class="tag-container">
+          <a
+              v-for="tagItem in item.tag"
+              class="tag-box"
+              @click="tagSelection(tagItem)"
+              :class="{ 'tag-selected': tagItem.isSelected }"
+          >
+            {{ tagItem.name }}
+          </a>
+        </div>
+      </div>
+
+      <pagination
+          v-show="tagTotal>0"
+          :total="tagTotal"
+          :page.sync="queryTagParams.pageNum"
+          :limit.sync="queryTagParams.pageSize"
+          @pagination="getPageListTagGroup"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="tagSubmitForm()">确 定</el-button>
+        <el-button @click="tagCancel()">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listExternalContact, getExternalContact, delExternalContact, addExternalContact, updateExternalContact, exportExternalContact } from "@/api/qw/externalContact";
+import {getCompanyList} from "@/api/company/company";
+import {getAllUserlist} from "@/api/company/companyUser";
+import {getQwUserInfo} from "@/api/qw/qwUser";
+import { allListTagGroup} from "@/api/qw/tagGroup";
+import {searchTags,} from "@/api/qw/tag";
+import PaginationMore from '@/components/PaginationMore/index.vue'
+
+
+export default {
+  name: "ExternalContact",
+  components: { PaginationMore },
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 导出遮罩层
+      exportLoading: false,
+      //等级状态
+      ratingUpFall: [],
+      // 性别字典
+      genderOptions: [],
+      // 用户类别字典
+      typeOptions: [],
+      //状态
+      statusOptions:[],
+      //客户等级
+      ratingType: [],
+      // 来源字典
+      addWayOptions: [],
+      //转接状态
+      transferStatusOptions:[],
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 企业微信客户表格数据
+      externalContactList: [],
+      //销售员工数据
+      companyUserNameList:[],
+      //企微用户信息数据
+      qwUserList:[],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      //标签
+      tagGroupList: [],
+      // 查询参数
+      queryParams: {
+        companyUser:null,
+        pageNum: 1,
+        pageSize: 10,
+        qwUserName:null,
+        userId: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        gender: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        companyUserId: null,
+        qwUserId: null,
+        customerId: null,
+        transferStatus: null,
+        status: null,
+        stageStatus: null,
+        transferTime: null,
+        transferNum: null,
+        lossTime: null,
+        delTime: null,
+        state: null,
+        wayId: null,
+        fsUserId: null,
+        openId: null,
+        unionid: null,
+        uploadAddWxStatus: null,
+        uploadRegisterStatus: null,
+        uploadFinishedStatus: null,
+        welcomeStatus: null,
+        isInteract: null,
+        level: null,
+        companyUserName:null,
+        levelType: null,
+        firstTime: null,
+        lastWatchTime: null,
+        isRepeat: null,
+        commentStatus: null,
+        isBindMini:null,
+      },
+      //标签
+      changeTagDialog:{
+        title:"",
+        open:false,
+      },
+      selectTags:[],
+      tagTotal:0,
+      queryTagParams:{
+        pageNum: 1,
+        pageSize: 10,
+        total:0,
+        name:null,
+        corpId:null,
+      },
+      isBindMiniOptions:[
+        {dictLabel:"已绑定",dictValue:'isBindMini'},
+        {dictLabel:"未绑定",dictValue:'noBindMini'},
+      ],
+      qwCompanyList:[],
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    };
+  },
+  created() {
+    //用户类别
+    this.getDicts("sys_qw_externalContact_type").then(response => {
+      this.typeOptions = response.data;
+    });
+
+    //客户等级
+    this.getDicts("sys_qw_sop_rating_type").then(response => {
+      this.ratingType = response.data;
+    });
+
+    //等级状态
+    this.getDicts("sys_qw_sop_rating_upFall").then(response => {
+      this.ratingUpFall = response.data;
+    });
+
+    //性别
+    this.getDicts("sys_sex").then(response => {
+      this.genderOptions = response.data;
+    });
+
+    //状态
+    this.getDicts("sys_qw_external_contact_status").then(response => {
+      this.statusOptions = response.data;
+    });
+
+    //来源
+    this.getDicts("sys_qw_externalContact_addWay").then(response => {
+      this.addWayOptions = response.data;
+    });
+
+    //转接状态
+    this.getDicts("sys_qw_transfer_status").then(response => {
+      this.transferStatusOptions = response.data;
+    });
+
+    //获取企业
+    getCompanyList().then(response => {
+      this.qwCompanyList = response.data;
+      if(this.qwCompanyList!=null){
+        this.queryParams.companyId=this.qwCompanyList[0].companyId;
+        this.getAllUserlist(this.queryParams.companyId);
+      }
+    });
+  },
+  methods: {
+    /** 获取销售账号列表 **/
+    getAllUserlist(companyId){
+      if(companyId){
+        this.getList();
+        getAllUserlist({companyId}).then(response => {
+          this.companyUserNameList=response.data;
+        });
+        //企业微信
+        getQwUserInfo({companyId}).then(response => {
+          this.qwUserList=response.data;
+        })
+      }
+    },
+    tagSelection(row){
+      row.isSelected= !row.isSelected;
+      this.$forceUpdate();
+    },
+    /** 查询企业微信客户列表 */
+    getList() {
+      this.loading = true;
+      listExternalContact(this.queryParams).then(response => {
+        this.externalContactList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        userId: null,
+        externalUserId: null,
+        name: null,
+        avatar: null,
+        type: null,
+        gender: null,
+        remark: null,
+        description: null,
+        tagIds: null,
+        remarkMobiles: null,
+        remarkCorpName: null,
+        addWay: null,
+        operUserid: null,
+        corpId: null,
+        companyId: null,
+        companyUserId: null,
+        qwUserId: null,
+        customerId: null,
+        transferStatus: 0,
+        status: 0,
+        stageStatus: "0",
+        createBy: null,
+        createTime: null,
+        updateBy: null,
+        updateTime: null,
+        transferTime: null,
+        transferNum: null,
+        lossTime: null,
+        delTime: null,
+        state: null,
+        wayId: null,
+        fsUserId: null,
+        openId: null,
+        unionid: null,
+        uploadAddWxStatus: 0,
+        uploadRegisterStatus: 0,
+        uploadFinishedStatus: 0,
+        welcomeStatus: 0,
+        isInteract: null,
+        level: null,
+        levelType: null,
+        firstTime: null,
+        lastWatchTime: null,
+        isRepeat: null,
+        commentStatus: 0
+      };
+      this.resetForm("form");
+    },
+    change(){
+      if(this.createTime!=null){
+        this.queryParams.sTime=this.createTime[0];
+        this.queryParams.eTime=this.createTime[1];
+      }else{
+        this.queryParams.sTime=null;
+        this.queryParams.eTime=null;
+      }
+
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      //验证是否选择企业
+      if(!this.queryParams.companyId){
+        return this.$message.warning({
+          message: "请先选择企业！",
+          duration: 3000
+        })
+      }
+
+      if (this.selectTags!=null && this.selectTags.length>0){
+        // 确保 this.form.tags 是数组
+        if (!this.queryParams.tagIds) {
+          this.queryParams.tagIds = []; // 如果未定义，初始化
+        } else {
+          this.queryParams.tagIds = []; // 清空已有数据
+        }
+
+        // 遍历并添加 tagId
+        this.selectTags.forEach(tag => {
+          if (tag.tagId) { // 确保 tagId 存在
+            this.queryParams.tagIds.push(tag.tagId);
+          }
+        });
+        this.queryParams.tagIds=this.queryParams.tagIds.join(",");
+      }else {
+        this.queryParams.tagIds=null;
+      }
+
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.queryParams.corpId= this.qwCompanyList[0].dictValue;
+      this.selectTags=[];
+      this.queryParams.qwUserId = null;
+      this.createTime=null;
+      this.queryParams.sTime=null;
+      this.queryParams.eTime=null;
+      this.externalContactList=[];
+      if(this.qwCompanyList!=null){
+        this.queryParams.companyId=this.qwCompanyList[0].companyId;
+        this.getAllUserlist(this.queryParams.companyId);
+      }
+    },
+    handleSearchTags(name){
+
+      searchTags({name:name,corpId:this.queryParams.corpId}).then(response => {
+        this.tagGroupList = response.rows;
+      });
+
+    },
+    cancelSearchTags(){
+      this.resetSearchQueryTag()
+
+      this.getPageListTagGroup();
+    },
+    resetSearchQueryTag(){
+
+      this.queryTagParams= {
+        pageNum: 1,
+        pageSize: 10,
+        total:0,
+        name:null,
+      };
+    },
+    //确定选择标签
+    tagSubmitForm(){
+
+
+      for (let i = 0; i < this.tagGroupList.length; i++) {
+        for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
+          if (this.tagGroupList[i].tag[x].isSelected === true) {
+
+            if (!this.selectTags) {
+              this.selectTags = [];
+            }
+            // 检查当前 tag 是否已经存在于 tagListFormIndex[index] 中
+            let tagExists = this.selectTags.some(
+                tag => tag.id === this.tagGroupList[i].tag[x].id
+            );
+
+            // 如果 tag 不存在于 tagListFormIndex[index] 中，则新增
+            if (!tagExists) {
+              this.selectTags.push(this.tagGroupList[i].tag[x]);
+            }
+          }
+        }
+      }
+      if (!this.selectTags || this.selectTags.length === 0) {
+        return this.$message('请选择标签');
+      }
+
+      this.changeTagDialog.open = false;
+    },
+    getPageListTagGroup(){
+      this.queryTagParams.corpId=this.queryParams.corpId
+      allListTagGroup(this.queryTagParams).then(response => {
+        this.tagGroupList = response.rows;
+        this.tagTotal = response.total;
+      });
+    },
+    //取消选择标签
+    tagCancel(){
+      this.changeTagDialog.open = false;
+    },
+    //删除一些选择的标签
+    handleCloseTags(list){
+      const ls = this.selectTags.findIndex(t => t.tagId === list.tagId);
+      if (ls !== -1) {
+        this.selectTags.splice(ls, 1);
+        this.selectTags = [...this.selectTags];
+      }
+
+      if (this.selectTags!=null && this.selectTags.length>0){
+        // 确保 this.form.tags 是数组
+        if (!this.queryParams.tagIds) {
+          this.queryParams.tagIds = []; // 如果未定义，初始化
+        } else {
+          this.queryParams.tagIds = []; // 清空已有数据
+        }
+
+        // 遍历并添加 tagId
+        this.selectTags.forEach(tag => {
+          if (tag.tagId) { // 确保 tagId 存在
+            this.queryParams.tagIds.push(tag.tagId);
+          }
+        });
+        this.queryParams.tagIds=this.queryParams.tagIds.join(",");
+      }else {
+        this.queryParams.tagIds=null;
+      }
+
+    },
+    //搜索的标签
+    hangleChangeTags(){
+
+      this.changeTagDialog.title="搜索的标签"
+      this.changeTagDialog.open=true;
+
+      // 获取 tagListFormIndex 中的所有 tagId，用于快速查找
+      const selectedTagIds = new Set(
+          (this.selectTags || []).map(tagItem => tagItem?.tagId)
+      );
+
+      this.queryTagParams.name=null;
+
+      this.getPageListTagGroup();
+
+      setTimeout(() => {
+        for (let i = 0; i < this.tagGroupList.length; i++) {
+          for (let x = 0; x < this.tagGroupList[i].tag.length; x++) {
+            this.tagGroupList[i].tag[x].isSelected = selectedTagIds.has(this.tagGroupList[i].tag[x].tagId);
+          }
+        }
+      }, 200);
+
+
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.id)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加企业微信客户";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids
+      getExternalContact(id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改企业微信客户";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateExternalContact(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addExternalContact(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$confirm('是否确认删除企业微信客户编号为"' + ids + '"的数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          return delExternalContact(ids);
+        }).then(() => {
+          this.getList();
+          this.msgSuccess("删除成功");
+        }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      //验证是否选择企业
+      if(!this.queryParams.companyId){
+        return this.$message.warning({
+          message: "请先选择企业！",
+          duration: 3000
+        })
+      }
+      const queryParams = this.queryParams;
+      this.$confirm('是否确认导出所有企业微信客户数据项?', "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.exportLoading = true;
+          return exportExternalContact(queryParams);
+        }).then(response => {
+          this.download(response.msg);
+          this.exportLoading = false;
+        }).catch(() => {});
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* CSS 样式 */
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+/* CSS 样式 */
+.tag-container {
+  display: flex;
+  flex-wrap: wrap; /* 超出宽度时自动换行 */
+  gap: 8px; /* 设置标签之间的间距 */
+}
+.name-background {
+  display: inline-block;
+  background-color: #abece6; /* 背景颜色 */
+  padding: 4px 8px; /* 调整内边距，让背景包裹文字 */
+  border-radius: 4px; /* 可选：设置圆角 */
+}
+.tag-box {
+  padding: 8px 12px;
+  border: 1px solid #989797;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+
+.tag-selected {
+  background-color: #00bc98;
+  color: #fff;
+  border-color: #00bc98;
+}
+
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+
+
+
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>