机构画像

src/main/webapp/WEB-INF/views/modules/userNew/cmClubPortrait.jsp

@@ -23,221 +23,167 @@
     <div class="main-content">
         <div class="flex-header">
             <div class="flex-header-main">
-                <table width="100%">
-                    <tr>
-                        <th>机构Id</th>
-                        <th>联系人</th>
-                        <th>性别</th>
-                        <th>年龄</th>
-                        <th>手机号</th>
-                        <th>身份</th>
-                        <th>注册时间</th>
-                        <th>客户价值</th>
-                        <th>活跃状态</th>
-                        <th>资料完整度</th>
-                        <th>客户来源</th>
-                    </tr>
-                    <tr>
-                        <td>${statistics.clubID}</td>
-                        <td>${statistics.linkMan}</td>
-                        <td>
-                            <c:if test="${not empty statistics.sex}">
-                                ${statistics.sex == '0' ? '男': '女'}
-                            </c:if>
-                            <c:if test="${empty statistics.sex}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.age}">
-                                ${statistics.age}
-                            </c:if>
-                            <c:if test="${empty statistics.age}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.contractMobile}">
-                                ${statistics.contractMobile}
-                            </c:if>
-                            <c:if test="${empty statistics.contractMobile}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.linkManStatus}">
-                                ${statistics.linkManStatus}
-                            </c:if>
-                            <c:if test="${empty statistics.linkManStatus}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>${statistics.registerTime}</td>
-                        <td>
-                            <c:if test="${not empty statistics.customerValues}">
-                                ${statistics.customerValues}
-                            </c:if>
-                            <c:if test="${empty statistics.customerValues}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.activeState}">
-                                ${statistics.activeState}
-                            </c:if>
-                            <c:if test="${empty statistics.activeState}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.clubDataIntegrity}">
-                                ${statistics.clubDataIntegrity}
-                            </c:if>
-                            <c:if test="${empty statistics.clubDataIntegrity}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${empty statistics.customerSource}">
-                                ---
-                            </c:if>
-                            <c:if test="${not empty statistics.customerSource}">
-                                <c:if test="${statistics.customerSource == 0}">公众号</c:if>
-                                <c:if test="${statistics.customerSource == 1}">小红书</c:if>
-                                <c:if test="${statistics.customerSource == 2}">微博</c:if>
-                                <c:if test="${statistics.customerSource == 3}">搜狐</c:if>
-                                <c:if test="${statistics.customerSource == 4}">其他</c:if>
-                            </c:if>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>机构名称</th>
-                        <th>机构地址</th>
-                        <th>机构级别</th>
-                        <th>机构类型</th>
-                    </tr>
-                    <tr>
-                        <td>${statistics.name}</td>
-                        <td>${statistics.address}</td>
-                        <td>${statistics.clubRank}</td>
-                        <td>${statistics.clubType}</td>
-                    </tr>
-                    <tr>
-                        <th>入群状态</th>
-                        <th>微信触达</th>
-                        <th>电话触达</th>
-                    </tr>
-                    <tr>
-                        <td>
-                            <c:if test="${not empty statistics.groupAddition}">
-                                <c:if test="${statistics.groupAddition == 0}">以加群</c:if>
-                                <c:if test="${statistics.groupAddition == 1}">未加群(${statistics.fillTime})</c:if>
-                            </c:if>
-                            <c:if test="${empty statistics.groupAddition}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.wxReach}">
-                                <c:if test="${statistics.wxReach == 0}">触达</c:if>
-                                <c:if test="${statistics.wxReach == 1}">未触达(${statistics.fillTime})</c:if>
-                            </c:if>
-                            <c:if test="${empty statistics.wxReach}">
-                                ---
-                            </c:if>
-                        </td>
-                        <td>
-                            <c:if test="${not empty statistics.mobileReach}">
-                                <c:if test="${statistics.mobileReach == 0}">触达</c:if>
-                                <c:if test="${statistics.mobileReach == 1}">未触达(${statistics.fillTime})</c:if>
-                            </c:if>
-                            <c:if test="${empty statistics.mobileReach}">
-                                ---
-                            </c:if>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th colspan="8">
-                            <div class="header-content">
-                                <div class="header-box">
-                                    <div class="header-title">
-                                        <H4 class="H_tag">客户需求</H4>
-                                    </div>
-                                    <div class="header-tabmain">
-                                        <div class="header-tabs" id="customerDemand">
-                                            <a class="box-tabs-li active" href="javascript: void(0);" data-type="4">全年</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="3">半年</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="2">月</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="1">日</a>
-                                        </div>
-                                        <div class="header-time" id="customerDemandData">
-                                            <div class="time-input">
-                                                <input type="text" placeholder="开始时间" class="input start" id="demandStart">
-                                            </div>
-                                            <span class="line">至</span>
-                                            <div class="time-input">
-                                                <input type="text" placeholder="结束时间" class="input end" id="demandEnd">
-                                            </div>
-                                        </div><br>
-                                        <div id="demand"></div>
-                                    </div>
-                                </div>
-                            </div>
-                            <%--<div class="header-content">
-                                <div class="header-box">
-                                    <div class="header_box-title">
-                                        <H4 class="header_tag">客户需求</H4>
-                                    </div>
-                                    <div class="header_tag_box">
-                                        <div class="header_box-tabs" id="customerDemand">
-                                            <a class="box-tabs-li active" href="javascript: void(0);" data-type="4">全年</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="3">半年</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="2">月</a>
-                                            <a class="box-tabs-li" href="javascript: void(0);" data-type="1">日</a>
-                                        </div>
-                                        <div class="box-time" id="customerDemandData">
-                                            <div class="time-input">
-                                                <input type="text" placeholder="开始时间" class="input start" id="demandStart">
-                                            </div>
-                                            <span class="line">至</span>
-                                            <div class="time-input">
-                                                <input type="text" placeholder="结束时间" class="input end" id="demandEnd">
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div id="demand"></div>
-                                </div>
-                            </div>--%>
-                        </th>
-                    </tr>
-                </table>
-                <%--<c:if test="${statistics.name ne null and statistics.name ne ''}">
-                    <p><i class="icon i1"></i><span>${statistics.name}</span></p>
-                </c:if>
-                <c:if test="${statistics.linkMan ne null and statistics.linkMan ne ''}">
-                    <p><i class="icon i2"></i><span>${statistics.linkMan}</span></p>
-                </c:if>
-                <c:if test="${statistics.linkManStatus ne null and statistics.linkManStatus ne ''}">
-                    <p><i class="icon i3"></i><span>${statistics.linkManStatus}</span></p>
-                </c:if>
-                <c:if test="${statistics.contractMobile ne null and statistics.contractMobile ne ''}">
-                    <p><i class="icon i4"></i><span>${statistics.contractMobile}</span></p>
-                </c:if>
-                <c:if test="${statistics.clubType ne null and statistics.clubType ne ''}">
-                    <p><i class="icon i5"></i><span>${statistics.clubType}</span></p>
-                </c:if>
-                <c:if test="${statistics.province ne null and statistics.province ne ''}">
-                    <p><i class="icon i6"></i><span>${statistics.province}</span><span>${statistics.city}</span><span>${statistics.town}</span></p>
-                </c:if>
-                <c:if test="${statistics.addTime ne null and statistics.addTime ne ''}">
-                    <p><i class="icon i7"></i><span>${statistics.addTime}</span></p>
-                </c:if>--%>
+                <div class="flex-header-tr">
+                    <div class="flex-header-th">机构Id</div>
+                    <div class="flex-header-th">联系人</div>
+                    <div class="flex-header-th">性别</div>
+                    <div class="flex-header-th">年龄</div>
+                    <div class="flex-header-th">手机号</div>
+                    <div class="flex-header-th">身份</div>
+                    <div class="flex-header-th">注册时间</div>
+                    <div class="flex-header-th">客户价值</div>
+                    <div class="flex-header-th">活跃状态</div>
+                    <div class="flex-header-th">资料完整度</div>
+                    <div class="flex-header-th">客户来源</div>
+                </div>
+                <div class="flex-header-tb">
+                    <div class="flex-header-td">${statistics.clubID}</div>
+                    <div class="flex-header-td">${statistics.linkMan}</div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.sex}">
+                            ${statistics.sex == '0' ? '男': '女'}
+                        </c:if>
+                        <c:if test="${empty statistics.sex}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.age}">
+                            ${statistics.age}
+                        </c:if>
+                        <c:if test="${empty statistics.age}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.contractMobile}">
+                            ${statistics.contractMobile}
+                        </c:if>
+                        <c:if test="${empty statistics.contractMobile}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.linkManStatus}">
+                            ${statistics.linkManStatus}
+                        </c:if>
+                        <c:if test="${empty statistics.linkManStatus}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">${statistics.registerTime}</div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.customerValues}">
+                            ${statistics.customerValues}
+                        </c:if>
+                        <c:if test="${empty statistics.customerValues}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.activeState}">
+                            ${statistics.activeState}
+                        </c:if>
+                        <c:if test="${empty statistics.activeState}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.clubDataIntegrity}">
+                            ${statistics.clubDataIntegrity}
+                        </c:if>
+                        <c:if test="${empty statistics.clubDataIntegrity}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${empty statistics.customerSource}">
+                            ---
+                        </c:if>
+                        <c:if test="${not empty statistics.customerSource}">
+                            <c:if test="${statistics.customerSource == 0}">公众号</c:if>
+                            <c:if test="${statistics.customerSource == 1}">小红书</c:if>
+                            <c:if test="${statistics.customerSource == 2}">微博</c:if>
+                            <c:if test="${statistics.customerSource == 3}">搜狐</c:if>
+                            <c:if test="${statistics.customerSource == 4}">其他</c:if>
+                        </c:if>
+                    </div>
+                </div>
+                <div class="flex-header-tr">
+                    <div class="flex-header-th">机构名称</div>
+                    <div class="flex-header-th">机构级别</div>
+                    <div class="flex-header-th">机构类型</div>
+                    <div class="flex-header-th">入群状态</div>
+                    <div class="flex-header-th">微信触达</div>
+                    <div class="flex-header-th">电话触达</div>
+                    <div class="flex-header-th last">机构地址</div>
+                </div>
+                <div class="flex-header-tb">
+                    <div class="flex-header-td">${statistics.name}</div>
+                    <div class="flex-header-td">${statistics.clubRank}</div>
+                    <div class="flex-header-td">${statistics.clubType}</div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.groupAddition}">
+                            <c:if test="${statistics.groupAddition == 0}">以加群</c:if>
+                            <c:if test="${statistics.groupAddition == 1}">未加群(${statistics.fillTime})</c:if>
+                        </c:if>
+                        <c:if test="${empty statistics.groupAddition}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.wxReach}">
+                            <c:if test="${statistics.wxReach == 0}">触达</c:if>
+                            <c:if test="${statistics.wxReach == 1}">未触达(${statistics.fillTime})</c:if>
+                        </c:if>
+                        <c:if test="${empty statistics.wxReach}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td">
+                        <c:if test="${not empty statistics.mobileReach}">
+                            <c:if test="${statistics.mobileReach == 0}">触达</c:if>
+                            <c:if test="${statistics.mobileReach == 1}">未触达(${statistics.fillTime})</c:if>
+                        </c:if>
+                        <c:if test="${empty statistics.mobileReach}">
+                            ---
+                        </c:if>
+                    </div>
+                    <div class="flex-header-td last">${statistics.address}</div>
+                </div>
+            </div>
+        </div>
+        <div class="flex-content">
+            <div class="flex-box box1">
+                <div class="box-title">
+                    <h4 class="H_tag">客户需求</h4>
+                </div>
+                <div class="box-tabmain">
+                    <div class="box-tabs" id="customerDemand">
+                        <a class="box-tabs-li active" href="javascript: void(0);" data-type="4">全年</a>
+                        <a class="box-tabs-li" href="javascript: void(0);" data-type="3">半年</a>
+                        <a class="box-tabs-li" href="javascript: void(0);" data-type="2">月</a>
+                        <a class="box-tabs-li" href="javascript: void(0);" data-type="1">日</a>
+                    </div>
+                    <div class="box-time" id="customerDemandData">
+                        <div class="time-input">
+                            <input type="text" placeholder="开始时间" class="input start" id="demandStart">
+                        </div>
+                        <span class="line">至</span>
+                        <div class="time-input">
+                            <input type="text" placeholder="结束时间" class="input end" id="demandEnd">
+                        </div>
+                    </div>
+                </div>
+                <div class="box-eachts demand" id="demand">
+                <%--   用户需求展示  --%>
+                </div>
             </div>
         </div>
         <div class="flex-content">
             <div class="flex-box">
                 <div class="box-title">
-                    <H4 class="H_tag">订单</H4>
+                    <h4 class="H_tag">订单</h4>
                 </div>
                 <div class="box-title">
                     <span>所有:<a class="line" href="${ctx}/order/orderList?buyer=${cmPortrait.clubName}">￥<c:if test="${!empty portrait.orderTotalAmount}">${portrait.orderTotalAmount}</c:if> <c:if test="${empty portrait.orderTotalAmount}">0</c:if>&nbsp;&nbsp;(<c:if test="${!empty portrait.orderTotal}">${portrait.orderTotal}</c:if><c:if test="${empty portrait.orderTotal}">0</c:if>个)</a></span>

src/main/webapp/static/modules/cmClubPortrait/cmClubEacths.js

@@ -196,7 +196,7 @@ const getDemandData = function (dateType) {
                     // $('#demand').append(text)
                 })
             } else {
-                $('#demand').html('<div>暂无数据</div>')
+                $('#demand').html('<div class="empty">暂无数据</div>')
             }
         }
     })

src/main/webapp/static/modules/cmClubPortrait/cmClubPortrait.css

@@ -12,9 +12,9 @@
 }
 .flex-header{
     width: 1446px;
-    height: 540px;
+    height: 200px;
     box-sizing: border-box;
-    padding: 0 15px;
+    padding: 15px;
 }
 .flex-header-main{
     width: 100%;
@@ -24,60 +24,48 @@
     border-radius: 8px;
     padding: 10px 15px;
 }
-.flex-header-main table{
-    float: left;
+.flex-header-main .flex-header-tr{
+    width: 100%;
+    height: 40px;
+    background: rgba(255,255,255,0.3);
+    border-radius: 8px;
+}
+.flex-header-main .flex-header-th{
+    width: 9%;
+    height: 100%;
+    line-height: 40px;
     font-size: 14px;
-    line-height: 20px;
     color: #FFFFFF;
-    margin: 0;
-    margin-right: 20px;
+    float: left;
+    font-weight: bold;
+    text-align: center;
 }
-.flex-header-main table tr{
-    height: 40px;
+.flex-header-main .flex-header-th.last{
+    width: 36%;
+    text-align: left;
+    padding-left: 20px;
+    box-sizing: border-box;
 }
-.flex-header-main table td{
+.flex-header-main .flex-header-tb{
+    width: 100%;
     height: 40px;
-    text-align: center;
+    border-radius: 8px;
 }
-/*.flex-header-main table tr th{
-    background-color: #00aef1;
-}*/
-
-.flex-header-main table .icon{
-    display: block;
-    width: 20px;
-    height: 20px;
+.flex-header-main .flex-header-td{
+    width: 9%;
+    height: 100%;
+    line-height: 40px;
+    font-size: 12px;
+    color: #FFFFFF;
     float: left;
-    margin-right: 4px;
-}
-/*.flex-header-main p .icon.i1{
-    background: url("./icon/icon-1.png");
-    background-size: cover;
-}
-.flex-header-main p .icon.i2{
-    background: url("./icon/icon-2.png");
-    background-size: cover;
-}
-.flex-header-main p .icon.i3{
-    background: url("./icon/icon-3.png");
-    background-size: cover;
-}
-.flex-header-main p .icon.i4{
-    background: url("./icon/icon-4.png");
-    background-size: cover;
-}
-.flex-header-main p .icon.i5{
-    background: url("./icon/icon-5.png");
-    background-size: cover;
+    text-align: center;
 }
-.flex-header-main p .icon.i6{
-    background: url("./icon/icon-6.png");
-    background-size: cover;
+.flex-header-main .flex-header-td.last{
+    width: 36%;
+    text-align: left;
+    padding-left: 20px;
+    box-sizing: border-box;
 }
-.flex-header-main p .icon.i7{
-    background: url("./icon/icon-7.png");
-    background-size: cover;
-}*/
 .header-content{
     width: 100%;
     height: 250px;
@@ -157,16 +145,6 @@
     display: inline-block;
     float: left;
 }
-#demand {
-   width: 100%;
-   height: 150px;
-}
-.span_tab {
-    background-color: #ef01f8;
-    color: white;
-    margin-left: 10px;
-    padding: 5px;
-}
 .flex-content{
     width: 100%;
     height: 100%;
@@ -183,6 +161,11 @@
     box-sizing: border-box;
     border-radius: 10px;
 }
+.flex-content .flex-box.box1{
+    width: 1415px;
+    height: 150px;
+    margin-top: 0;
+}
 .flex-box .box-title{
     width: 100%;
     height: 24px;
@@ -226,6 +209,10 @@
 .flex-box .box-tabmain .box-tabs-li.active{
     color: #40E0D0;
 }
+.flex-box.box1  .box-tabmain .box-time{
+    float: left;
+    margin-left: 30px;
+}
 .flex-box .box-tabmain .box-time{
     width: 320px;
     height: 40px;
@@ -278,6 +265,32 @@
     float: left;
     position: relative;
 }
+.flex-box .box-eachts.demand{
+    width: 100%;
+    height: auto;
+    box-sizing: border-box;
+    padding: 10px 0;
+}
+.flex-box .box-eachts.demand .empty{
+    font-size: 15px;
+    color: #FFFFFF;
+    text-align: left;
+    box-sizing: border-box;
+    padding-left:10px ;
+    font-weight: bold;
+    line-height: 40px;
+}
+.flex-box .box-eachts.demand .span_tab {
+    display: inline-block;
+    padding: 0 10px;
+    line-height: 28px;
+    font-size: 14px;
+    color: #FFFFFF;
+    background-color:rgba(64,224,208,0.5);
+    border-radius:6px;
+    text-align: center;
+    margin: 8px;
+}
 .flex-box .box-eachts .eachts-total{
     color: #FFFFFF;
     width: 50%;