| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport"
- content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
- <title></title>
- <!-- 引入样式文件 -->
- <link rel="stylesheet"
- href="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012584633/vant.css" />
- <!-- 必须先引入vue, 后使用vant-ui -->
- <script
- src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1742017957144/vue.js"></script>
- <!-- 引入vant的组件库-->
- <!-- 引入 Vant 的 JS 文件 -->
- <script
- src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758012748487/vant.min.js"></script>
- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
- <script src="js/select-date.js"></script>
- <script src="https://wl-1306604067.cos.ap-guangzhou.myqcloud.com/production/ct/103548289110001/1758187289797/echarts.js"></script>
- <script src="js/echarts-wordcloud.js"></script>
- <!-- <script src="js/vconsole.min.js"></script>
- <script>
- var vConsole = new window.VConsole();
- </script> -->
- </head>
- <style>
- body {
- margin: 0;
- padding: 0;
- }
- .box {
- width: 100vw;
- /* height: 100vh; */
- box-sizing: border-box;
- background: #FAFAFA;
- }
- .page4 {
- width: 100vw;
- /* height: 100vh; */
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- }
- .popup_list {
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- display: flex;
- flex-direction: column;
- padding: 44px 30px 10px;
- }
- .popup_item {
- padding: 15px 0;
- font-weight: bold;
- font-size: 16px;
- color: #222222;
- line-height: 24px;
- }
- .popup_line {
- height: 1px;
- background: linear-gradient( 90deg, #000000 0%, rgba(0,0,0,0) 100%);
- opacity: 0.1;
- }
- .mer_item {
- padding: 15px 0;
- font-weight: bold;
- font-size: 16px;
- color: #222222;
- line-height: 24px;
- border-bottom: 1px solid transparent; /* 占位 */
- border-image: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, transparent 100%) 1;
- }
- .mer_item_active {
- color: #1677FF;
- }
- .van-nav-bar__content {
- height: 44px;
- }
- .van-nav-bar__title {
- font-weight: bold;
- font-size: 14px;
- color: #222222;
- }
- .explain_list {
- display: flex;
- flex-direction: column;
- padding: 10px;
- font-weight: 400;
- font-size: 12px;
- color: #FFFFFF;
- line-height: 18px;
- }
- .explain_list div {
- padding-bottom: 10px;
- }
- .explain_list div:last-child {
- padding-bottom: 0;
- }
- .explain_icon {
- width: 20px;
- height: 20px;
- margin-left: 5px;
- }
- .navbar_icon {
- width: 24px;
- height: 24px;
- }
- .van-nav-bar__left {
- padding: 0 10px;
- }
- .van-nav-bar__right {
- padding: 0 10px;
- }
- .van-hairline--bottom::after {
- border-bottom: none;
- }
- .top_data {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px;
- height: 54px;
- background: #FFFFFF;
- box-sizing: border-box;
- position: fixed;
- top: 44px;
- left: 0;
- width: 100%;
- z-index: 2;
- }
- .outlet_data {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- height: 34px;
- background: #FAFAFA;
- box-sizing: border-box;
- position: fixed;
- top: 98px;
- left: 0;
- width: 100%;
- z-index: 1;
- padding-right: 10px;
- }
- .close_icon {
- width: 24px;
- height: 24px;
- }
- .memberReply_title {
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- line-height: 20px;
- background: #FFFFFF;
- display: flex;
- align-items: center;
- justify-content: space-between;
- height: 44px;
- padding: 0 10px;
- width: 100%;
- box-sizing: border-box;
- }
- .pop_content {
- padding: 10px 10px 10px;
- background: #FAFAFA;
- height: calc(100vh - 44px);
- overflow: auto;
- box-sizing: border-box;
- }
- .select_box {
- display: flex;
- margin-bottom: 10px;
- }
- .select_day {
- display: flex;
- align-items: center;
- background: #FFFFFF;
- box-sizing: border-box;
- padding: 10px 15px;
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- margin-right: 10px;
- border-radius: 10px;
- }
- .search_input {
- width: 160px;
- height: 38px;
- border-radius: 10px;
- }
- .van-search__content {
- background: #FFFFFF;
- padding-left: 0;
- }
- .van-search__label {
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- width: unset;
- }
- .van-popover__wrapper {
- height: unset;
- }
- .top_data_title {
- display: flex;
- align-items: center;
- }
- .top_data_title_text {
- font-weight: 500;
- font-size: 14px;
- color: #222222;
- padding-left: 5px;
- }
- .top_data_title_branch {
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- }
- .triangle {
- width: 0;
- height: 0;
- border: 6px solid transparent;
- border-top-color: #222222;
- margin-top: 6px;
- border-radius: 5px;
- margin-left: 5px;
- }
- .page4_content {
- padding: 113px 10px 10px;
- }
- .page4_content2 {
- padding: 131px 10px 10px;
- }
- .box_connect {
- width: 100%;
- background: #FFFFFF;
- padding: 10px 10px 15px;
- box-sizing: border-box;
- border-radius: 10px;
- margin-bottom: 15px;
- }
- .clientCharts_title_box {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .clientCharts_title {
- font-weight: 500;
- font-size: 12px;
- color: #222222;
- display: flex;
- align-items: center;
- margin-bottom: 15px;
- }
- .clientCharts_title::before {
- content: '';
- width: 2px;
- height: 13px;
- background: #1677FF;
- border-radius: 1px;
- margin-right: 5px;
- display: inline-block;
- }
- .clientCharts_title_right {
- font-weight: 400;
- font-size: 12px;
- color: #1677FF;
- text-decoration-line: underline;
- margin-bottom: 15px;
- }
- .all_data {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- margin-top: 15px;
- }
- .add_data_p {
- font-weight: 400;
- font-size: 12px;
- color: #999999;
- padding: 4px 10px;
- background: #FFFFFF;
- border-radius: 5px;
- border: 1px solid #CCCCCC;
- margin-top: 0;
- margin-right: 15px;
- margin-bottom: 10px;
- }
- .allData_bg {
- background: #1677FF;
- border-radius: 5px;
- border: 1px solid #1677FF;
- color: #FFFFFF;
- }
- /* 选择日期组件开始 */
- .select_date {
- display: flex;
- align-items: center;
- }
- .date_list {
- width: 212px;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: #EDF3F8;
- border-radius: 20px;
- padding: 2px;
- }
- .filter_time_item {
- padding: 4px 0 3px;
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- line-height: 17px;
- white-space: nowrap;
- }
- .filter_time1 {
- padding-left: 14px;
- padding-right: 14px;
- }
- .filter_time2 {
- padding-left: 11px;
- padding-right: 11px;
- }
- .filter_time3 {
- padding-left: 7px;
- padding-right: 7px;
- }
- .filter_time4 {
- padding-left: 8px;
- padding-right: 8px;
- }
- .current_date {
- font-weight: 400;
- font-size: 12px;
- color: #1677FF;
- line-height: 17px;
- background: #FFFFFF;
- border-radius: 12px;
- }
- /* 选择日期组件结束 */
- .num_item_title {
- font-weight: 400;
- font-size: 12px;
- line-height: 17px;
- padding-bottom: 5px;
- color: #666666 ;
- }
- .num_item_count {
- font-weight: bold;
- font-size: 16px;
- line-height: 24px;
- padding-bottom: 5px;
- color: #222222;
- }
- .num_item_data {
- display: flex;
- align-items: center;
- font-weight: 400;
- font-size: 10px;
- color: #999999;
- }
- .selected_color {
- color: #1677FF;
- }
- .client_item_icon {
- width: 12px;
- height: 12px;
- }
- .branch_table {
- overflow-x: auto;
- width: 100%;
- }
- .branch_header {
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- background: #F7F9FC;
- border-radius: 10px;
- font-weight: 500;
- font-size: 12px;
- color: #222222;
- min-width: max-content;
- text-align: center;
- }
- .branch_header div{
- min-width: 30px;
- }
- .branch_item {
- padding: 10px;
- display: flex;
- align-items: center;
- justify-content: space-between;
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- border-bottom: 1px solid #E5E8ED;
- text-align: center;
- word-wrap: break-word;
- min-width: max-content;
- }
- .branch_item div{
- min-width: 30px;
- }
- .interact_box_bottom {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .interact_box_bottom {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .interact_line {
- width: 1px;
- /* margin: 0 8px; */
- height: 66px;
- background: linear-gradient( 180deg, rgba(229,232,237,0) 0%, #E5E8ED 51%, rgba(229,232,237,0) 100%);
- }
- .interact_item {
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- }
- .leadGen_box {
- padding: 10px;
- background: #FAFAFA;
- border-radius: 10px;
- }
- .leadGen_box {
- padding: 10px;
- background: #FAFAFA;
- border-radius: 10px;
- }
- .table_carList {
- width: 100%;
- display: flex;
- align-items: center;
- overflow-x: auto;
- margin-bottom: 20px;
- }
- .table_carBox {
- display: flex;
- flex-direction: column;
- align-items: center;
- font-weight: 400;
- font-size: 12px;
- color: #222222;
- border-radius: 34px;
- margin-right: 10px;
- padding: 0 15px;
- }
- .table_carBox_bg {
- background: linear-gradient( #FFFFFF 0%, #E6F0FF 100%);
- }
- .table_car {
- width: 90px;
- height: 45px;
- }
- .table_carline {
- width: 16px;
- height: 3px;
- border-radius: 34px;
- margin-top: 2px;
- }
- .table_carline_bg {
- background: #1677FF;
- }
- .data_tips {
- font-weight: 400;
- font-size: 12px;
- line-height: 17px;
- color: #C4CFDA;
- text-align: center;
- margin: 5px 0 24px;
- }
- .step_list {
- width: 100%;
- display: flex;
- align-items: center;
- overflow-x: auto;
- }
- .step_box {
- min-width: 125px;
- padding: 10px;
- font-weight: 400;
- font-size: 12px;
- color: #666666;
- background: #F7F9FC;
- border-radius: 10px;
- margin-right: 10px;
- }
- .step_box_bg {
- background: #1677FF;
- color: #FFFFFF;
- }
- .step_num {
- font-weight: bold;
- font-size: 16px;
- color: #1677FF;
- padding-top: 10px;
- line-height: 24px;
- }
- .step_num_bg {
- color: #FFFFFF;
- }
- .van_loading {
- height: 400px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- </style>
- <body>
- <div id="box" class="box">
- <!-- 数据查看 -->
- <div class="page4">
- <van-nav-bar :title="jxsName" class="navbar" fixed>
- <template #left>
- <image class="navbar_icon" src="./img/jxs1.png"></image>
- </template>
- <template #right>
- <image class="navbar_icon" src="./img/jxs2.png" @click="handleShowPopup"></image>
- </template>
- </van-nav-bar>
- <div class="top_data">
- <div class="top_data_title">
- <image class="navbar_icon" src="./img/jxs6.png"></image>
- <div class="top_data_title_text">{{pageTitle}}</div>
- </div>
- <div class="top_data_title" v-if="pageTitle === '客户资产'" @click="showPicker = true">
- <div class="top_data_title_branch">网点:{{outletName}}</div>
- <div class="triangle"></div>
- </div>
- <select-date v-else :page-date="pageDate" @change-date="handleChangeDate"></select-date>
- </div>
- <div class="outlet_data" v-show="pageTitle !== '客户资产'" @click="showPicker = true">
- <div class="top_data_title_branch">网点:{{outletName}}</div>
- <div class="triangle"></div>
- </div>
- <van-popup v-model="showPopup" duration="0.2" closeable position="top" :lock-scroll="false" :style="{ height: '100vh' }" @close="handleClosePopup">
- <div class="popup_list" v-show="!showMer">
- <div class="popup_item" @click="handlePage(1)">客户资产</div>
- <div class="popup_line"></div>
- <div class="popup_item" @click="handlePage(2)">聊天分析</div>
- <div class="popup_line"></div>
- <div class="popup_item" @click="handlePage(3)">员工监测</div>
- <div class="popup_line"></div>
- <div class="popup_item" @click="handlePage(4)">运营任务</div>
- <div class="popup_line"></div>
- <div class="popup_item" @click="showMer = true">切换商户</div>
- <div class="popup_line"></div>
- <div class="popup_item" @click="handleLoginOut">退出登录</div>
- </div>
- <div class="popup_list" v-show="showMer">
- <div class="mer_item" :class="{'mer_item_active': tenancyId == item.id}" v-for="(item, index) in merList"
- :key="index" @click="handleSelectMer(item.id)">{{item.name}}</div>
- </div>
- </van-popup>
- <van-popup v-model="showPicker" duration="0.2" round position="bottom">
- <van-picker title="网点" show-toolbar :columns="outletsData" @confirm="onConfirm" @cancel="showPicker = false" />
- </van-popup>
- <!-- 顾问响应统计 -->
- <van-popup v-model="showMemberReply" duration="0.2" position="right" :overlay="false" :lock-scroll="false" :style="{ width: '100%', height: '100vh' }">
- <div class="memberReply_title">
- <image class="close_icon" src="./img/close.png" @click="closeReply"></image>
- <div>顾问响应统计</div>
- <div class="close_icon"></div>
- </div>
- <div class="pop_content">
- <div class="select_box">
- <van-popover v-model="showDatePicker" trigger="click" close-on-click-action close-on-click-outside :actions="actions" @select="onSelect">
- <template #reference>
- <div class="select_day">
- <div class="top_data_title_branch">时间:{{timeData}}</div>
- <div class="triangle"></div>
- </div>
- </template>
- </van-popover>
- <van-search class="search_input" v-model="keyword" search :clearable="false" label="顾问:" left-icon="" right-icon="search" @search="handleSearch" @click-right-icon="handleSearch"></van-search>
- <van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
- :max-date="maxDate" :allow-same-day="true"></van-calendar>
- </div>
- <div class="box_connect">
- <van-loading type="spinner" color="#1989fa" class="van_loading" v-if="loading"></van-loading>
- <div class="branch_table" style="margin-bottom: 20px;" v-if="!loading">
- <div class="branch_header" style="box-sizing: border-box;">
- <div style="width: 80px;">顾问</div>
- <div style="width: 50px;">今日处理<br />消息数</div>
- <div style="width: 40px;">超时<br />消息数</div>
- <div style="width: 50px;">平均响应<br />时间</div>
- <div style="width: 30px;">管理</div>
- </div>
- <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in memberReplyData" :key="index">
- <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
- <div style="width: 50px;">{{item.replyMsg}}</div>
- <div style="width: 40px;">{{item.timeoutMsg}}</div>
- <div style="width: 50px;">{{formatTime(item.avgReplyDuration)}}</div>
- <div style="width: 30px;color: #1677FF;" @click="handleItemMemberReply(item)">详情</div>
- </div>
- </div>
- <van-pagination v-model="currentPage" :total-items="totalItems" :show-page-size="3" force-ellipses @change="handleChangePage" />
- </div>
- </div>
- </van-popup>
- <!-- 顾问响应统计详情 -->
- <van-popup v-model="showItemMemberReply" position="right" duration="0.2" :lock-scroll="false" :overlay="false" :style="{ width: '100%', height: '100vh' }">
- <div class="memberReply_title">
- <image class="close_icon" src="./img/close.png" @click="closeItemMemberReply"></image>
- <div>顾问:{{currentMemberName}}</div>
- <div class="close_icon"></div>
- </div>
- <div class="pop_content">
- <div class="select_box">
- <van-popover v-model="showDatePicker2" trigger="click" close-on-click-action close-on-click-outside
- :actions="actions" @select="onSelect">
- <template #reference>
- <div class="select_day">
- <div class="top_data_title_branch">时间:{{timeData}}</div>
- <div class="triangle"></div>
- </div>
- </template>
- </van-popover>
- <van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
- :max-date="maxDate" :allow-same-day="true"></van-calendar>
- </div>
- <div class="box_connect">
- <van-loading type="spinner" color="#1989fa" class="van_loading" v-if="loading"></van-loading>
- <div class="branch_table" style="margin-bottom: 20px;" v-if="!loading">
- <div class="branch_header">
- <div style="width: 60px;">客户昵称</div>
- <div style="width: 100px;">手机号</div>
- <div style="width: 80px;">最新消息<br />时间</div>
- <div style="width: 60px;">等待时间</div>
- <div style="width: 100px;">最新消息<br />内容</div>
- </div>
- <div class="branch_item" v-for="(item, index) in memberDetailReplyData" :key="index">
- <div style="width: 60px;">{{item.clientName}}</div>
- <div style="width: 100px;">{{item.clientPhone}}</div>
- <div style="width: 80px;">{{timeFormat(item.msgTime)}}</div>
- <div style="width: 60px;">{{formatTime(item.waitSeconds)}}</div>
- <div style="width: 100px;">{{item.content}}</div>
- </div>
- </div>
- <van-pagination v-model="currentItemPage" :total-items="itemTotalItems" :show-page-size="3" force-ellipses
- @change="handleChangeItemPage" />
- </div>
- </div>
- </van-popup>
- <!-- 顾问完成情况统计 -->
- <van-popup v-model="showDoneReply" position="right" duration="0.2" :overlay="false" :lock-scroll="false" :style="{ width: '100%', height: '100vh' }">
- <div class="memberReply_title">
- <image class="close_icon" src="./img/close.png" @click="closeReply"></image>
- <div>顾问完成情况统计</div>
- <div class="close_icon"></div>
- </div>
- <div class="pop_content">
- <div class="select_box">
- <van-popover v-model="showDatePicker3" trigger="click" close-on-click-action close-on-click-outside
- :actions="actions" @select="onSelect">
- <template #reference>
- <div class="select_day">
- <div class="top_data_title_branch">时间:{{timeData}}</div>
- <div class="triangle"></div>
- </div>
- </template>
- </van-popover>
- <van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
- :max-date="maxDate" :allow-same-day="true"></van-calendar>
- </div>
- <div class="box_connect">
- <div class="branch_table" style="margin-bottom: 20px;">
- <div class="branch_header" style="box-sizing: border-box;">
- <div style="width: 60px;">顾问</div>
- <div style="width: 60px;">网点</div>
- <div style="width: 60px;">下发任务数</div>
- <div style="width: 60px;">完成任务数</div>
- </div>
- <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in doneReplyData" :key="index">
- <div style="width: 60px;">{{item.memberName}}</div>
- <div style="width: 60px;">{{item.outletName}}</div>
- <div style="width: 60px;">{{item.taskNum}}</div>
- <div style="width: 60px;">{{item.completeNum}}</div>
- </div>
- </div>
- <van-pagination v-model="currentPage" :total-items="totalItems" :show-page-size="3" force-ellipses
- @change="handleChangePage" />
- </div>
- </div>
- </van-popup>
- <div class="page4_content" v-show="pageTitle === '客户资产'">
- <!-- 客户资产 -->
- <div class="box_connect">
- <div class="clientCharts_title" style="margin-bottom: 0;">总数据
- <van-popover style="height: 20px;" v-model="showPopover" trigger="click" theme="dark" placement="right">
- <div class="explain_list">
- <div>总客户数:添加企微的客户总数</div>
- <div>互动客户数:有产生过客户动态(包括不限于内容浏览、活动浏览、聊天等)的客户数</div>
- <div>留资报名客户数:填写过表单(含留资/活动报名等)的客户数</div>
- <div>到店客户:展厅进店及售后回站客户数</div>
- <div>成交客户:已购车的客户数(不含下订客戶)</div>
- </div>
- <template #reference>
- <image class="explain_icon" src="./img/jxs7.png"></image>
- </template>
- </van-popover>
- </div>
- <div id="funnelChart" :style="{ width: '100%', height: '200px', marginBottom: '20px' }"></div>
- <select-date :page-date="pageDate" @change-date="handleChangeDate"></select-date>
- <div class="all_data">
- <p class="add_data_p" :class="{'allData_bg': index === 1}" @click="handleClickItem(1)">总客户数</p>
- <p class="add_data_p" :class="{'allData_bg': index === 2}" @click="handleClickItem(2)">互动客户数</p>
- <p class="add_data_p" :class="{'allData_bg': index === 3}" @click="handleClickItem(3)">留资/报名客户数</p>
- <p class="add_data_p" :class="{'allData_bg': index === 4}" @click="handleClickItem(4)">邀约到店客户数</p>
- <p class="add_data_p" :class="{'allData_bg': index === 5}" @click="handleClickItem(5)">成交客户数</p>
- </div>
- <div id="adviserChart" v-if="index === 1" style="width: 100%;height: 200px;"></div>
- <div id="labelChart" v-else style="width: 100%;height: 200px;"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">客群包分布</div>
- <div class="table_carList">
- <div class="table_carBox" :class="{'table_carBox_bg': carIndex === index}" v-for="(item, index) in tableList"
- :key="index" @click="handleClickCar(item, index)">
- <image class="table_car" :src="item.carModelImg"></image>
- <div>{{item.carModel}}</div>
- <div class="table_carline" :class="{'table_carline_bg': carIndex === index}"></div>
- </div>
- </div>
- <div class="branch_table" v-if="carStepData.length > 0">
- <div class="branch_header">
- <div style="width: 40px;">阶段</div>
- <div style="width: 60px;" v-for="(item, index) in carStepData[0].packageList[0].cols" :key="index">
- {{item.name}}
- </div>
- </div>
- <div class="branch_item" v-for="(item, index) in carStepData[0].packageList" :key="index">
- <div style="width: 40px;">{{item.stepName}}</div>
- <!-- 此处先循环carStepData[0].packageList[0].cols,是表格头以第一条数据为准 -->
- <div style="min-width: 60px;" v-for="(val, valIndex) in carStepData[0].packageList[0].cols" :key="valIndex">
- <span style="min-width: 60px;" v-for="(col, colIndex) in item.cols" :key="colIndex">
- {{val.name === col.name ? col.value[0] : ''}}
- </span>
- </div>
- </div>
- </div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">意向车型标签排名</div>
- <div id="intentRankChart" style="width: 100%;height: 100%;"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">已购车型标签排名</div>
- <div id="buyRankChart" style="width: 100%;height: 100%;"></div>
- </div>
- <div class="data_tips">—— 每日5:00更新数据 ——</div>
- </div>
- <div class="page4_content2" v-show="pageTitle === '聊天分析'">
- <!-- 聊天分析 -->
- <div class="box_connect">
- <div class="clientCharts_title">总数据</div>
- <div class="leadGen_box">
- <div class="interact_box_bottom">
- <div class="interact_item">
- <div class="num_item_title">私聊客户数</div>
- <div class="num_item_count">{{chatIndicators.total.privateChat}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.privateChat}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">私聊消息数</div>
- <div class="num_item_count">{{chatIndicators.total.privateMsgNum}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.privateMsgNum}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">群消息数</div>
- <div class="num_item_count">{{chatIndicators.total.groupMsgNum}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.groupMsgNum}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- </div>
- </div>
- <div id="interactChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">员工服务</div>
- <div class="leadGen_box">
- <div class="interact_box_bottom">
- <div class="interact_item">
- <div class="num_item_title">主动服务会话数</div>
- <div class="num_item_count">{{chatIndicators.total.proactiveServe}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.proactiveServe}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">客户回复会话数</div>
- <div class="num_item_count">{{chatIndicators.total.clientReply}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.clientReply}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">客户回复率</div>
- <div class="num_item_count">{{chatIndicators.total.clientReplyPercent ? chatIndicators.total.clientReplyPercent + '%' : ''}}</div>
- <div class="num_item_data">
- <div>较昨日:
- <span v-if="chatIndicators.yda.clientReplyPercent" class="selected_color"
- :style="{color: chatIndicators.yda.clientReplyPercent > 0 ? '#1677FF' : '#FF4E4E'}">
- {{chatIndicators.yda.clientReplyPercent > 0 ? '+' : ''}}{{chatIndicators.yda.clientReplyPercent}}%</span>
- </div>
- <image class="client_item_icon" v-if="chatIndicators.yda.clientReplyPercent" :src="chatIndicators.yda.clientReplyPercent > 0 ? './img/jxs-up1.png' : './img/jxs-down2.png'"></image>
- </div>
- </div>
- </div>
- </div>
- <div id="staffChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">客户咨询</div>
- <div class="leadGen_box">
- <div class="interact_box_bottom">
- <div class="interact_item">
- <div class="num_item_title">主动咨询会话数</div>
- <div class="num_item_count">{{chatIndicators.total.proactiveConsult}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.proactiveConsult}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">员工回复会话数</div>
- <div class="num_item_count">{{chatIndicators.total.memberReply}}</div>
- <div class="num_item_data">
- <div>昨日新增:
- <span class="selected_color">{{chatIndicators.yda.memberReply}}</span>
- </div>
- <image class="client_item_icon" src="./img/jxs-up1.png"></image>
- </div>
- </div>
- <div class="interact_line"></div>
- <div class="interact_item">
- <div class="num_item_title">员工平均响应时长</div>
- <div class="num_item_count">{{chatIndicators.total.avgReplyDuration ? formatTime(chatIndicators.total.avgReplyDuration) : ''}}</div>
- <div class="num_item_data">
- <div>较昨日:
- <span v-if="chatIndicators.yda.avgReplyDuration" class="selected_color"
- :style="{color: chatIndicators.yda.avgReplyDuration > 0 ? '#FF4E4E' : '#1677FF'}">
- {{chatIndicators.yda.avgReplyDuration > 0 ? '+' : ''}}{{formatTime(chatIndicators.yda.avgReplyDuration)}}</span>
- </div>
- <image class="client_item_icon" v-if="chatIndicators.yda.avgReplyDuration"
- :src="chatIndicators.yda.avgReplyDuration > 0 ? './img/jxs-up2.png' : './img/jxs-down1.png'"></image>
- </div>
- </div>
- </div>
- </div>
- <div id="clientChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">消息舆情分析</div>
- <div id="opinionChart" style="width: 100%;height: 380px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">客户关注词云图</div>
- <div id="wordCloudChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="data_tips">—— 每日5:00更新数据 ——</div>
- </div>
- <div class="page4_content2" v-show="pageTitle === '员工监测'">
- <div class="box_connect">
- <div class="clientCharts_title">销售进程客户数</div>
- <div class="step_list">
- <div class="step_box" :class="{'step_box_bg': clientIndex === index}" v-for="(item, index) in saleIndicators"
- :key="index" @click="handleClickClient(item, index)">
- <div>{{item.processName}}</div>
- <div class="step_num" :class="{'step_num_bg': clientIndex === index}">{{item.clientNum}}</div>
- </div>
- </div>
- <div id="clientStepChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">销售统计排名</div>
- <div class="branch_table" v-if="saleRankData.length > 0">
- <div class="branch_header">
- <div style="width: 30px;">排名</div>
- <div style="width: 80px;">顾问</div>
- <div style="width: 40px;">网点</div>
- <div style="width: 60px;" v-for="(item, index) in saleRankData[0].cols" :key="index">
- {{item.name}}
- </div>
- </div>
- <div class="branch_item" v-for="(item, index) in saleRankData" :key="index">
- <div style="width: 30px;">{{index + 1}}</div>
- <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
- <div style="width: 40px;">{{item.outletName}}</div>
- <!-- 此处先循环saleRankData[0].cols,是表格头以第一条数据为准 -->
- <div style="min-width: 60px;" v-for="(val, valIndex) in saleRankData[0].cols" :key="valIndex">
- <span style="min-width: 60px;" v-for="(col, colIndex) in item.cols" :key="colIndex">
- {{val.name === col.name ? (col.value ? col.value[0] : '-') : ''}}
- </span>
- </div>
- </div>
- </div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title_box">
- <div class="clientCharts_title">聊天超时监测</div>
- <div class="clientCharts_title_right" @click="handleMemberReply">查看详情</div>
- </div>
- <div id="timeOutTrendChart" style="width: 100%;height: 230px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">聊天排行榜</div>
- <div class="branch_table">
- <div class="branch_header" style="box-sizing: border-box;">
- <div style="width: 30px;">排名</div>
- <div style="width: 80px;">员工</div>
- <div style="width: 50px;">聊天客户数</div>
- <div style="width: 50px;">主动会话<br/>服务数</div>
- <div style="width: 50px;">客户回复<br/>会话数</div>
- </div>
- <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in chatRankData" :key="index">
- <div style="width: 30px;">{{index + 1}}</div>
- <div style="width: 80px;max-width: 80px;">{{item.memberName}}</div>
- <div style="width: 50px;">{{item.privateChat}}</div>
- <div style="width: 50px;">{{item.proactiveServe}}</div>
- <div style="width: 50px;">{{item.clientReply}}</div>
- </div>
- </div>
- </div>
- <div class="data_tips">—— 每日5:00更新数据 ——</div>
- </div>
- <div class="page4_content2" v-show="pageTitle === '运营任务'">
- <div class="box_connect">
- <div class="clientCharts_title_box">
- <div class="clientCharts_title">总数据</div>
- <div class="clientCharts_title_right" @click="handleDoneReply">查看更多</div>
- </div>
- <div class="branch_table">
- <div class="branch_header" style="box-sizing: border-box;">
- <div style="width: 60px;">网点</div>
- <div style="width: 60px;">下发任务数</div>
- <div style="width: 60px;">任务完成率</div>
- <div style="width: 60px;">互动客户数</div>
- <div>激活率</div>
- </div>
- <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in outletCount" :key="index">
- <div style="width: 60px;">{{item.outletName}}</div>
- <div style="width: 60px;">{{item.taskNum}}</div>
- <div style="width: 60px;">{{item.taskCompletePercent ? item.taskCompletePercent + '%' : '-'}}</div>
- <div style="width: 60px;">{{item.interactClient}}</div>
- <div>{{item.activatePercent ? item.activatePercent + '%' : '-'}}</div>
- </div>
- </div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">任务完成率</div>
- <div id="taskCompleteChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">互动客户数</div>
- <div id="opInteractChart" style="width: 100%;height: 200px"></div>
- </div>
- <div class="box_connect">
- <div class="clientCharts_title">素材排行榜</div>
- <div id="contentRank" style="width: 100%;"></div>
- </div>
- <div class="data_tips">—— 每日5:00更新数据 ——</div>
- </div>
- </div>
- </div>
- </body>
- <script>
- new Vue({
- el: '#box',
- data() {
- return {
- httpUrl: '',
- bId: null,
- env: '',
- jxsName: '',
- token: '',
- tenancyId: '',
- showPopup: false,
- showMer: false,
- showDatePicker: false,
- showDatePicker2: false,
- showDatePicker3: false,
- actions: [
- { text: '昨日' }, { text: '近7天' }, { text: '近30天' }, { text: '自定义' }
- ],
- keyword: '',
- showSelfDate: false,
- minDate: '',
- maxDate: '',
- dealerIds: [], // 经销商id列表
- merList: [], // 商户列表
- outletsList: [], // 网点列表
- outletsData: [], // 网点列表数据
- pageTitle: '客户资产',
- showPicker: false,
- outletName: '', // 网点名称
- outletId: null, // 网点id
- clientIndicators: [], // 客户资产-总数据
- pageStartTime: '',
- pageEndTime: '',
- index: 1,
- showPopover: false,
- lineDate: [], // 客户资产-统计趋势图
- saleAdd: [],
- serveAdd: [],
- interactClient: [],
- formClient: [],
- storeClient: [],
- dealClient: [],
- tableList: [], // 客群包阶段车型
- carIndex: 0,
- carStepData: [], // 客群包阶段车型数据
- intentRankData: [], // 意向车型标签排名
- buyRankData: [], // 已购车型标签排名
- chatIndicators: {
- dayList: [], // 聊天分析-日数据
- opinion: {},
- total: {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- },
- yda: {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- },
- },
- interactDate: [], // 聊天分析-总数据图数据
- privateChat: [],
- privateMsgNum: [],
- groupMsgNum: [],
- proactiveServe: [],
- clientReply: [],
- clientReplyPercent: [],
- proactiveConsult: [],
- memberReply: [],
- showItemMemberReply: false, // 显示客户详情响应数据
- currentMemberName: '', // 当前客户名称
- memberId: '', // 当前客户id
- memberDetailReplyData: [], // 客户详情响应数据
- currentItemPage: 1, // 当前客户详情响应数据页码
- itemTotalItems: 0, // 客户详情响应数据总页数
- avgReplyDuration: [],
- totalMsg: [],
- privateMsg: [],
- groupMsg: [],
- maxValue: null,
- wordCloudMap: [], // 客户关注词云图
- saleIndicators: [], // 销售进程客户数
- clientIndex: 0, // 销售进程客户数索引
- clientStepDate: [], // 销售进程客户数-日期
- clientStepNum: [], // 销售进程客户数-客户数
- saleRankData: [], // 销售统计排名数据
- timeOutDate: [], // 聊天超时监测-日期
- timeoutMember: [], // 聊天超时监测-超时客户数
- timeData: '',
- memberStartTime: '',
- memberEndTime: '',
- showDoneReply: false, // 显示已完成响应数据
- doneReplyData: [], // 已完成响应数据
- showMemberReply: false,
- currentPage: 1,
- totalItems: 0,
- memberReplyData: [], // 顾问响应统计数据
- chatRankData: [], // 聊天排行榜数据
- outletCount: [], // 运营任务-总数据
- taskCompleteDate: [], // 运营任务-任务完成率-日期
- taskCompletePercent: [], // 运营任务-任务完成率
- opInteractDate: [], // 运营任务-互动客户数-日期
- opInteractClient: [], // 运营任务-互动客户数
- contentRankData: [], // 运营任务-素材排行榜
- loading: false,
- pageDate: [], // 日期范围
- }
- },
- created() {
- let nowDat = new Date();
- let dateY = nowDat.getFullYear()
- let dateM = nowDat.getMonth()
- let dateD = nowDat.getDate()
- // 设置日期可选最小值minDate、最大值maxDate
- this.minDate = new Date(dateY - 1, dateM, dateD)
- //日历可选范围为一年,dateY + 1
- this.maxDate = new Date(dateY, dateM, dateD - 1)
- this.bId = this.getQueryParam('bId')
- this.env = this.getQueryParam('env')
- if (!this.env || this.env === 'prod') {
- this.httpUrl = 'https://wlapi.wefanbot.com'
- // this.httpUrl = 'http://192.168.1.128:18993'
- } else {
- this.httpUrl = 'http://test.wefanbot.com:18993'
- // this.httpUrl = 'http://192.168.1.128:18993'
- }
- this.token = localStorage.getItem('tokenValue')
- this.tenancyId = localStorage.getItem('tenancyIdValue')
- this.pageStartTime = this.getDateTime(-7)
- this.pageEndTime = this.getDateTime(-1)
- this.memberStartTime = this.getDateTime(-7)
- this.memberEndTime = this.getDateTime(-1)
- this.getDealerIds()
- this.getAdminList()
- },
- methods: {
- // 获取经销商id
- getDealerIds() {
- const headers = new Headers()
- headers.append('token', this.token)
- headers.append('tenancyId', this.tenancyId)
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/getDealers`, {
- method: 'GET',
- headers: headers
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.dealerIds = data || []
- if (this.dealerIds && this.dealerIds.length > 0) {
- this.jxsName = this.dealerIds[0].name
- } else {
- this.jxsName = ''
- this.clientIndicators = []
- this.pageStartTime = this.getDateTime(-7)
- this.pageEndTime = this.getDateTime(-1)
- this.index = 1
- }
- this.outletName = ''
- this.outletId = null
- this.getOutletsData()
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- requestData () {
- if (this.pageTitle === '客户资产') {
- this.getClientIndicators() // 客户资产-总数据
- this.getTrend() // 客户资产-统计趋势图
- this.stepStatistic() // 客户资产-客群包分布
- this.getIntentRank() // 意向车型标签排名
- this.getBuyRank() // 已购车型标签排名
- this.$nextTick(() => {
- this.funnelDraw()
- this.passValue()
- this.intentRankChart()
- this.buyRankChart()
- })
- } else if (this.pageTitle === '聊天分析') {
- this.handlePage(2)
- this.$nextTick(() => {
- this.interactChart()
- this.staffChart()
- this.clientChart()
- this.opinionChart()
- this.wordCloudChart()
- })
- } else if (this.pageTitle === '员工监测') {
- this.handlePage(3)
- this.$nextTick(() => {
- this.clientStepChart()
- this.timeOutTrendChart()
- })
- } else if (this.pageTitle === '运营任务') {
- this.handlePage(4)
- this.$nextTick(() => {
- this.taskCompleteChart()
- this.opInteractChart()
- this.contentRankChart()
- })
- }
- },
- // 获取商户列表(右上角)
- getAdminList() {
- const headers = new Headers()
- headers.append('token', this.token)
- fetch(this.httpUrl + `/scrm/v1/user-info/o/adminList`, {
- method: 'GET',
- headers: headers
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.merList = data || []
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 阻止往下执行接口
- noDealerIds() {
- if (!this.dealerIds || !this.dealerIds.length) {
- return true
- }
- return false
- },
- // 获取网点列表
- getOutletsData() {
- const headers = new Headers()
- headers.append('token', this.token)
- headers.append('tenancyId', this.tenancyId)
- this.outletsList = []
- this.outletsData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/getOutlets?dealerId=${this.dealerIds[0].id}`, {
- method: 'GET',
- headers: headers
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.outletsList = data || []
- this.outletsData = data && data.length > 0 ? data.map(item => item.name) : []
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- if (this.outletsList.length === 1) {
- this.outletName = this.outletsData[0]
- this.outletId = this.outletsList.find(item => item.name === this.outletName).id || null
- } else if (this.outletsList.length === 0 || this.outletsList.length > 1) {
- this.outletsData.unshift('全部')
- this.outletName = '全部'
- this.outletId = null
- }
- this.requestData()
- })
- },
- onConfirm (val) {
- if (this.noDealerIds()) {
- return
- }
- this.outletName = val
- if (this.outletName === '全部') {
- this.outletId = null
- } else {
- this.outletId = this.outletsList.find(item => item.name === this.outletName).id || null
- }
- this.showPicker = false
- if (this.pageTitle === '客户资产') {
- this.getClientIndicators() // 客户资产-总数据
- this.getTrend() // 客户资产-统计趋势图
- this.stepStatistic() // 客户资产-客群包分布
- this.getIntentRank() // 意向车型标签排名
- this.getBuyRank() // 已购车型标签排名
- } else if (this.pageTitle === '聊天分析') {
- this.handlePage(2)
- } else if (this.pageTitle === '员工监测') {
- this.handlePage(3)
- } else if (this.pageTitle === '运营任务') {
- this.handlePage(4)
- }
- },
- handlePage(index) {
- switch (index) {
- case 1:
- this.pageTitle = '客户资产'
- this.getDealerIds()
- break
- case 2:
- this.pageTitle = '聊天分析'
- this.getChatIndicators() // 聊天分析 - 总数据
- this.getWordCloudMap() // 聊天分析 - 词云图
- break
- case 3:
- this.pageTitle = '员工监测'
- this.getSaleIndicators() // 员工监测 - 销售进程
- this.getSaleRank() // 员工监测 - 销售统计排名
- this.getTimeOutTrendChart() // 员工监测 - 聊天超时监测
- this.getChatRank() // 员工监测 - 聊天统计排名
- break
- case 4:
- this.pageTitle = '运营任务'
- this.getOutletCount() // 运营任务 - 总数据
- this.getTaskCompleteChart() // 运营任务 - 任务完成率
- this.getOpInteractChart() // 运营任务 - 互动客户数
- this.getContentRank() // 运营任务 - 素材排行榜
- break
- }
- this.showPopup = false
- },
- // 客户资产-总数据
- getClientIndicators () {
- this.clientIndicators = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/clientIndicators`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.clientIndicators = data.reverse() || []
- this.$nextTick(() => {
- this.funnelDraw()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
-
- // 客户资产-总数据(梯形图)
- funnelDraw() {
- let clientIndicators = this.clientIndicators
- let funnelChart = echarts.getInstanceByDom(document.getElementById('funnelChart'))
- if (funnelChart == null) {
- funnelChart = echarts.init(document.getElementById('funnelChart'))
- }
- window.addEventListener('resize', function () {
- funnelChart.resize()
- })
- funnelChart.setOption({
- tooltip: {
- trigger: 'item',
- formatter(param) {
- let label = ''
- clientIndicators.forEach(item => {
- if (item.name === param.data.name) {
- label = item.value
- }
- })
- return param.data.name + ':' + label
- }
- },
- series: [
- {
- type: 'funnel',
- min: 0,
- max: 100,
- width: '50%',
- minSize: '0%', //漏斗最小值的宽度
- maxSize: '100%', //漏斗最大值的宽度
- left: '0%',
- right: '8%',
- top: '8%',
- bottom: '2%',
- gap: 2,
- label: {
- show: false,
- position: 'inside',
- color: '#fff',
- },
- data: clientIndicators.map((item, index) => {
- return {
- value: 40 + (index + 1) * 10,
- name: item.name,
- itemStyle: {
- color: `hsl(215, 100%, ${54 + index * 8}%)`
- },
- }
- })
- },
- {
- type: 'funnel',
- label: {
- position: 'right',
- lineHeight: 20,
- padding: [0, 0, 0, 10],
- formatter: function (param) {
- let label = ''
- let percent = ''
- clientIndicators.forEach(item => {
- if (item.name === param.data.name) {
- label = item.value
- percent = item.percent
- }
- });
- return [
- `{firstLine|${param.data.name}:}{secondLine|${label}人}`,
- `{thirdLine|占比:${percent ? percent + '%' : ''}}`
- ].join('\n');
- },
- // 新增 rich 样式定义
- rich: {
- firstLine: {
- color: '#899EB2', // 第一行颜色
- fontSize: 12, // 第一行字号
- lineHeight: 20 // 保持与外层 lineHeight 一致
- },
- secondLine: {
- color: '#1677FF', // 第二行颜色(示例用红色)
- fontWeight: 'bold',
- fontSize: 14, // 第二行字号
- lineHeight: 20 // 保持与外层 lineHeight 一致
- },
- thirdLine: {
- color: '#1677FF', // 第二行颜色(示例用红色)
- fontSize: 10, // 第二行字号
- lineHeight: 10, // 保持与外层 lineHeight 一致
- }
- }
- },
- labelLine: {
- show: true,
- length: 40, // label拉线的长度根据自己的场景进行设置即可
- lineStyle: {
- width: 1,
- type: 'solid'
- }
- },
- min: 0,
- max: 100,
- minSize: '0%',
- maxSize: 0,
- left: '-20%',
- right: '8%',
- top: '10%',
- bottom: '2%',
- z: 1,
- gap: 2,
- data: clientIndicators.map((item, index) => {
- return {
- value: 40 + (index + 1) * 10,
- name: item.name,
- itemStyle: {
- color: `hsl(215, 100%, ${54 + index * 8}%)`
- },
- }
- })
- }
- ]
- }, true)
- },
- // 切换日期范围
- handleChangeDate(date) {
- this.pageStartTime = date[0]
- this.pageEndTime = date[1]
- this.pageDate = date
- if (this.noDealerIds()) {
- return
- }
- if (this.pageTitle === '客户资产') {
- this.getTrend() // 客户资产-统计趋势图
- } else if (this.pageTitle === '聊天分析') {
- this.handlePage(2)
- } else if (this.pageTitle === '员工监测') {
- this.handlePage(3)
- } else if (this.pageTitle === '运营任务') {
- this.handlePage(4)
- }
- },
- // 客户资产-统计趋势图
- getTrend() {
- this.lineDate = []
- this.saleAdd = []
- this.serveAdd = []
- this.interactClient = []
- this.formClient = []
- this.storeClient = []
- this.dealClient = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/trend`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (data && data.length > 0) {
- data.forEach(item => {
- this.lineDate.push(item.time.split('T')[0])
- this.saleAdd.push(item.saleAdd)
- this.serveAdd.push(item.serveAdd)
- this.interactClient.push(item.interactClient)
- this.formClient.push(item.formClient)
- this.storeClient.push(item.storeClient)
- this.dealClient.push(item.dealClient)
- })
- }
- this.$nextTick(() => {
- this.passValue()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 切换5个模块(总客户数、互动客户数、留资/报名客户数、邀约到店客户数、成交客户数)
- handleClickItem(index) {
- this.index = index
- this.passValue()
- },
- // 切换三个图表(总客户数、一客一群、销售顾问+服务顾问)
- passValue () {
- if (this.index === 1) {
- this.$nextTick(() => {
- this.adviserChart()
- })
- } else {
- this.$nextTick(() => {
- this.labelChart()
- })
- }
- },
- // 互动客户数、留资/报名客户数、邀约到店客户数、成交客户数(趋势图)
- labelChart() {
- let labelChart = echarts.getInstanceByDom(document.getElementById('labelChart'))
- if (labelChart == null) {
- labelChart = echarts.init(document.getElementById('labelChart'))
- }
- window.addEventListener('resize', function () {
- labelChart.resize()
- })
- let dataText = ''
- let labelData = []
- if (this.index === 2) {
- labelData = this.interactClient
- dataText = '互动客户数'
- } else if (this.index === 3) {
- labelData = this.formClient
- dataText = '留资/报名客户数'
- } else if (this.index === 4) {
- labelData = this.storeClient
- dataText = '邀约到店客户数'
- } else if (this.index === 5) {
- labelData = this.dealClient
- dataText = '成交客户数'
- }
- labelChart.setOption({
- legend: {
- data: [dataText],
- orient: 'horizontal',
- x: 'center',
- y: 'top',
- align: 'right',
- itemWidth: 20,
- itemHeight: 5,
- itemGap: 20,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10//图例文字大小
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.lineDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...labelData),
- splitNumber: 5,
- interval: Math.max(...labelData) / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- name: dataText,
- type: 'bar',
- stack: 'total',
- color: '#1677FF ',
- data: labelData,
- itemStyle: {
- // 设置柱形图圆角 [左上角,右上角,右下角,左下角]
- borderRadius: [5, 5, 0, 0]
- }
- }
- ],
- }, true)
- },
- // 销售顾问+服务顾问(趋势图)
- adviserChart() {
- let adviserChart = echarts.getInstanceByDom(document.getElementById('adviserChart'))
- if (adviserChart == null) {
- adviserChart = echarts.init(document.getElementById('adviserChart'))
- }
- window.addEventListener('resize', function () {
- adviserChart.resize()
- })
- adviserChart.setOption({
- legend: {
- show: true,
- data: ['销售', '服务'],
- orient: 'horizontal',
- x: 'center',
- y: 'top',
- align: 'right',
- itemWidth: 20,
- itemHeight: 5,
- itemGap: 20,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10,//图例文字大小
- }
- },
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- },
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: '#666666',
- fontSize: '8',
- },
- data: this.lineDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.saleAdd, ...this.serveAdd) * 2,
- splitNumber: 5,
- interval: Math.max(...this.saleAdd, ...this.serveAdd) * 2 / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: '#222222',
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- name: '销售',
- type: 'bar',
- stack: 'total',
- color: '#1677FF',
- data: this.saleAdd,
- },
- {
- name: '服务',
- type: 'bar',
- stack: 'total',
- color: '#5CE56E ',
- data: this.serveAdd,
- itemStyle: {
- // 设置柱形图圆角 [左上角,右上角,右下角,左下角]
- borderRadius: [5, 5, 0, 0]
- }
- }
- ],
- }, true)
- },
- // 切换车型(客户资产-客群包统计)
- handleClickCar(item, index) {
- this.carIndex = index
- this.carStepData = []
- this.carStepData.push(this.tableList.find(ele => ele.carModel === item.carModel))
- },
- // 客户资产-客群包统计数据
- stepStatistic () {
- this.tableList = []
- this.carStepData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/stepStatistic`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.tableList = data || []
- if (this.tableList.length > 0) {
- this.carStepData.push(this.tableList[0])
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 意向车型标签排名
- getIntentRank() {
- this.intentRankData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/intentRank`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.intentRankData = data || []
- this.$nextTick(() => {
- this.intentRankChart()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- intentRankChart() {
- let intentRankData = this.intentRankData.sort((a, b) => a.clientNum - b.clientNum)
- let rankChart = echarts.getInstanceByDom(document.getElementById('intentRankChart'))
- if (rankChart == null) {
- rankChart = echarts.init(document.getElementById('intentRankChart'))
- }
- rankChart.resize({ height: this.intentRankData.length * 50 + 20 })
- window.addEventListener('resize', function () {
- rankChart.resize()
- })
- rankChart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c}'
- },
- legend: {
- left: 'center',
- icon: 'circle', //小圆点
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10, //间隔
- bottom: '10%',
- },
- grid: {
- bottom: "0",
- top: "0",
- left: "0",
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- color: '#666666',
- fontSize: '8',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed' // 设置为虚线
- }
- },
- },
- yAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: (val) => {
- let c = document.createElement("canvas");
- const ctx = c.getContext("2d");
- ctx.font = "8px"; // 设置画布内的字体,与设置的textStyle一致
- const arr = val.split("");
- arr.map((item) => ctx.measureText(item).width)
- .reduce((pre, next, index) => {
- const nLen = pre + next;
- if (nLen > 60) {
- arr[index - 1] += "\n";
- return next;
- } else {
- return nLen;
- }
- });
- c = null;
- return arr.join("");
- }
- },
- data: this.intentRankData.map(item => {
- return item.tagName
- }) || [],
- },
- series: [
- {
- type: 'bar',
- barWidth: 24,
- barGap: 12,
- itemStyle: {
- color: function (p) {
- // 亮度随索引递增实现渐变
- const lightness = 94 - p.dataIndex * 8;
- return `hsl(127.9, 72.5%, ${Math.min(100, lightness)}%)`;
- }
- },
- data: this.intentRankData.map(item => {
- return item.clientNum
- }) || []
- }
- ]
- })
- },
- // 已购车型标签排名
- getBuyRank() {
- this.buyRankData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/buyRank`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.buyRankData = data || []
- this.$nextTick(() => {
- this.buyRankChart()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- buyRankChart() {
- let buyRankData = this.buyRankData.sort((a, b) => a.clientNum - b.clientNum)
- let rankChart = echarts.getInstanceByDom(document.getElementById('buyRankChart'))
- if (rankChart == null) {
- rankChart = echarts.init(document.getElementById('buyRankChart'))
- }
- rankChart.resize({ height: this.buyRankData.length * 50 + 20 })
- window.addEventListener('resize', function () {
- rankChart.resize()
- })
- rankChart.setOption({
- tooltip: {
- trigger: 'item',
- formatter: '{b}: {c}'
- },
- legend: {
- left: 'center',
- icon: 'circle', //小圆点
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10, //间隔
- bottom: '10%',
- },
- grid: {
- bottom: "0",
- top: "0",
- left: "0",
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- color: '#666666',
- fontSize: '8',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed' // 设置为虚线
- }
- },
- },
- yAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: (val) => {
- let c = document.createElement("canvas");
- const ctx = c.getContext("2d");
- ctx.font = "8px"; // 设置画布内的字体,与设置的textStyle一致
- const arr = val.split("");
- arr.map((item) => ctx.measureText(item).width)
- .reduce((pre, next, index) => {
- const nLen = pre + next;
- if (nLen > 60) {
- arr[index - 1] += "\n";
- return next;
- } else {
- return nLen;
- }
- });
- c = null;
- return arr.join("");
- }
- },
- data: this.buyRankData.map(item => {
- return item.tagName
- }) || [],
- },
- series: [
- {
- type: 'bar',
- barWidth: 24,
- barGap: 12,
- itemStyle: {
- color: function (p) {
- // 亮度随索引递增实现渐变
- const lightness = 87 - p.dataIndex * 8;
- return `hsl(215, 100%, ${Math.min(100, lightness)}%)`;
- }
- },
- data: this.buyRankData.map(item => {
- return item.clientNum
- }) || []
- }
- ]
- })
- },
- // 聊天分析 - 总数据
- getChatIndicators() {
- this.chatIndicators = {
- dayList: [], // 聊天分析-日数据
- opinion: {},
- total: {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- },
- yda: {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- },
- }
- this.interactDate = []
- this.privateChat = []
- this.privateMsgNum = []
- this.groupMsgNum = []
- this.proactiveServe = []
- this.clientReply = []
- this.clientReplyPercent = []
- this.proactiveConsult = []
- this.memberReply = []
- this.avgReplyDuration = []
- this.totalMsg = []
- this.privateMsg = []
- this.groupMsg = []
- this.maxValue = null
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/chatIndicators`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.chatIndicators = {
- dayList: data.dayList || [], // 聊天分析-日数据
- opinion: data.opinion ? data.opinion : {
- negativeGroup: 0,
- positiveGroup: 0,
- neutralGroup: 0,
- negativePrivate: 0,
- positivePrivate: 0,
- neutralPrivate: 0,
- negativeTotal: 0,
- positiveTotal: 0,
- neutralTotal: 0,
- },
- total: data.total ? data.total : {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- },
- yda: data.yda ? data.yda : {
- privateChat: 0,
- privateMsgNum: 0,
- groupMsgNum: 0,
- proactiveServe: 0,
- clientReply: 0,
- clientReplyPercent: 0,
- proactiveConsult: 0,
- memberReply: 0,
- avgReplyDuration: 0,
- }, // 昨日数据
- }
-
- this.interactDate = []
- this.privateChat = []
- this.privateMsgNum = []
- this.groupMsgNum = []
- this.proactiveServe = []
- this.clientReply = []
- this.clientReplyPercent = []
- this.proactiveConsult = []
- this.memberReply = []
- this.avgReplyDuration = []
- if (data.dayList && data.dayList.length > 0) {
- data.dayList.forEach(item => {
- this.interactDate.push(item.time.split('T')[0])
- this.privateChat.push(item.privateChat)
- this.privateMsgNum.push(item.privateMsgNum)
- this.groupMsgNum.push(item.groupMsgNum)
- this.proactiveServe.push(item.proactiveServe)
- this.clientReply.push(item.clientReply)
- this.clientReplyPercent.push(item.clientReplyPercent)
- this.proactiveConsult.push(item.proactiveConsult)
- this.memberReply.push(item.memberReply)
- this.avgReplyDuration.push(item.avgReplyDuration)
- })
- this.$nextTick(() => {
- this.interactChart()
- this.staffChart()
- this.clientChart()
- })
- }
- this.totalMsg = []
- this.privateMsg = []
- this.groupMsg = []
- this.maxValue = null
- if (data.opinion) {
- this.totalMsg = [data.opinion.negativeTotal, data.opinion.positiveTotal, data.opinion.neutralTotal]
- this.privateMsg = [data.opinion.positivePrivate, data.opinion.negativePrivate, data.opinion.neutralPrivate]
- this.groupMsg = [data.opinion.positiveGroup, data.opinion.negativeGroup, data.opinion.neutralGroup]
- this.maxValue = Math.max.apply(null, [...this.totalMsg, ...this.privateMsg, ...this.groupMsg])
- this.$nextTick(() => {
- this.opinionChart()
- })
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 聊天分析-总数据趋势图数据
- interactChart () {
- let interactChart = echarts.getInstanceByDom(document.getElementById('interactChart'))
- if (interactChart == null) {
- interactChart = echarts.init(document.getElementById('interactChart'))
- }
- window.addEventListener('resize', function () {
- interactChart.resize()
- })
- interactChart.setOption({
- legend: {
- x: 'center',
- y: 10,
- align: 'right',
- itemWidth: 20,
- itemHeight: 5,
- itemGap: 20,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10//图例文字大小
- },
- data: [
- {
- name: "私聊客户数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- color: "#fff",
- borderColor: '#1677FF',
- borderWidth: 1,
- },
- },
- {
- name: "私聊消息数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- color: "#fff",
- borderColor: '#5CE56E',
- borderWidth: 1,
- },
- },
- {
- name: "群消息数",
- itemStyle: {
- width: 20,
- height: 5,
- color: "#E6F0FF",
- },
- },
- ]
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- top: '20%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.interactDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.privateMsgNum, ...this.privateChat, ...this.groupMsgNum),
- splitNumber: 5,
- interval: Math.max(...this.privateMsgNum, ...this.privateChat, ...this.groupMsgNum) / 5,
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- name: '私聊客户数',
- type: 'line',
- color: '#1677FF',
- data: this.privateChat,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- },
- {
- name: '私聊消息数',
- type: 'line',
- color: '#5CE56E',
- data: this.privateMsgNum,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- },
- {
- name: '群消息数',
- type: 'bar', //形状为柱状图
- data: this.groupMsgNum,
- itemStyle: {
- color: ' #E6F0FF',
- },
- emphasis: {
- itemStyle: {
- color: 'rgb(0, 157, 255)'
- }
- },
- }
- ],
- }, true)
- },
- // 聊天分析-员工服务趋势图数据
- staffChart () {
- let staffChart = echarts.getInstanceByDom(document.getElementById('staffChart'))
- if (staffChart == null) {
- staffChart = echarts.init(document.getElementById('staffChart'))
- }
- window.addEventListener('resize', function () {
- staffChart.resize()
- })
- staffChart.setOption({
- legend: {
- orient: 'horizontal',
- x: 'center',
- y: 10,
- align: 'right',
- itemWidth: 20,
- itemHeight: 5,
- itemGap: 20,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10//图例文字大小
- },
- data: [
- {
- name: "主动服务会话数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- width: 20,
- height: 5,
- color: "#1677FF",
- },
- },
- {
- name: "客户回复会话数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- width: 20,
- height: 5,
- color: "#5CE56E",
- },
- },
- {
- name: "客户回复率",
- itemStyle: {
- color: "#fff",
- borderColor: '#FFA64E',
- borderWidth: 1,
- },
- },
- ]
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- top: '20%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.interactDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.proactiveServe, ...this.clientReply),
- splitNumber: 5,
- interval: Math.max(...this.proactiveServe, ...this.clientReply) / 5,
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- {// 第二种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.clientReplyPercent),
- splitNumber: 5,
- interval: Math.max(...this.clientReplyPercent) / 5,
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) + ' %'; //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- name: '主动服务会话数',
- type: 'bar', //形状为柱状图
- data: this.proactiveServe,
- itemStyle: {
- color: ' #1677FF',
- borderRadius: [5, 5, 0, 0]
- },
- emphasis: {
- itemStyle: {
- color: 'rgb(0, 157, 255)'
- }
- },
- },
- {
- name: '客户回复会话数',
- type: 'bar', //形状为柱状图
- data: this.clientReply,
- itemStyle: {
- color: ' #5CE56E',
- borderRadius: [5, 5, 0, 0]
- },
- emphasis: {
- itemStyle: {
- color: 'rgb(0, 157, 255)'
- }
- },
- },
- {
- name: '客户回复率',
- type: 'line',
- color: '#FFA64E',
- symbol: 'none',
- yAxisIndex: 1,
- data: this.clientReplyPercent,
- tooltip: {
- valueFormatter: function (value) {
- return value ? value + ' %' : ''
- }
- },
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- // 聊天分析-客户咨询趋势图数据
- clientChart() {
- let clientChart = echarts.getInstanceByDom(document.getElementById('clientChart'))
- if (clientChart == null) {
- clientChart = echarts.init(document.getElementById('clientChart'))
- }
- window.addEventListener('resize', function () {
- clientChart.resize()
- })
- clientChart.setOption({
- legend: {
- orient: 'horizontal',
- x: 'center',
- y: 10,
- align: 'right',
- itemWidth: 16,
- itemHeight: 4,
- itemGap: 10,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10//图例文字大小
- },
- data: [
- {
- name: "主动咨询会话数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- width: 20,
- height: 5,
- color: "#1677FF",
- },
- },
- {
- name: "员工回复会话数",
- // 单独设置图例空心圆,通过设置边框颜色+背景颜色白色实现空心圆
- itemStyle: {
- width: 20,
- height: 5,
- color: "#5CE56E",
- },
- },
- {
- name: "员工平均响应时长",
- itemStyle: {
- color: "#fff",
- borderColor: '#FFA64E',
- borderWidth: 1,
- },
- },
- ]
- },
- tooltip: {
- trigger: 'axis'
- },
- grid: {
- top: '20%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.interactDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.proactiveConsult, ...this.memberReply),
- splitNumber: 5,
- interval: Math.max(...this.proactiveConsult, ...this.memberReply) / 5,
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- {// 第二种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.avgReplyDuration),
- splitNumber: 5,
- interval: Math.max(...this.avgReplyDuration) / 5,
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) + ' s'; //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- name: '主动咨询会话数',
- type: 'bar', //形状为柱状图
- data: this.proactiveConsult,
- itemStyle: {
- color: ' #1677FF',
- borderRadius: [5, 5, 0, 0]
- },
- emphasis: {
- itemStyle: {
- color: 'rgb(0, 157, 255)'
- }
- },
- },
- {
- name: '员工回复会话数',
- type: 'bar', //形状为柱状图
- data: this.memberReply,
- itemStyle: {
- color: ' #5CE56E',
- borderRadius: [5, 5, 0, 0]
- },
- emphasis: {
- itemStyle: {
- color: 'rgb(0, 157, 255)'
- }
- },
- },
- {
- name: '员工平均响应时长',
- type: 'line',
- color: '#FFA64E',
- symbol: 'none',
- yAxisIndex: 1,
- tooltip: {
- valueFormatter: function (value) {
- return value ? value.toFixed(0) + ' s' : ''
- }
- },
- data: this.avgReplyDuration,
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- // 聊天分析-消息舆情分析
- opinionChart () {
- let opinionChart = echarts.getInstanceByDom(document.getElementById('opinionChart'))
- if (opinionChart == null) {
- opinionChart = echarts.init(document.getElementById('opinionChart'))
- }
- window.addEventListener('resize', function () {
- opinionChart.resize()
- })
- opinionChart.setOption({
- legend: {
- orient: 'horizontal',
- align: 'right',
- itemWidth: 20,
- itemHeight: 4,
- itemGap: 20,
- textStyle: {//图例文字的样式
- color: '#666666', //图例文字颜色
- fontSize: 10//图例文字大小
- }
- },
- radar: {
- indicator: [
- { name: '负面', max: this.maxValue },
- { name: '中性', max: this.maxValue },
- { name: '正面', max: this.maxValue },
- ],
- radius: 150,
- },
- series: [
- {
- type: 'radar',
- color: '#1677FF',
- data: [
- {
- value: this.totalMsg,
- name: '全部消息',
- itemStyle: {
- color: '#1677FF',
- lineStyle: {
- color: '#1677FF',
- },
- },
- },
- {
- value: this.privateMsg,
- name: '单聊消息',
- itemStyle: {
- color: '#5CE56E',
- lineStyle: {
- color: '#5CE56E',
- },
- },
- },
- {
- value: this.groupMsg,
- name: '群聊消息',
- itemStyle: {
- color: '#FFA64E',
- lineStyle: {
- color: '#FFA64E',
- },
- },
- }
- ]
- },
- ]
- }, true)
- },
- // 聊天分析-词云图
- getWordCloudMap () {
- this.wordCloudMap = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/wordCloudMap`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.wordCloudMap = data || []
- this.$nextTick(() => {
- this.wordCloudChart()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- wordCloudChart () {
- let wordCloudChart = echarts.getInstanceByDom(document.getElementById('wordCloudChart'))
- if (wordCloudChart == null) {
- wordCloudChart = echarts.init(document.getElementById('wordCloudChart'))
- }
- window.addEventListener('resize', function () {
- wordCloudChart.resize()
- })
- wordCloudChart.setOption({
- series: [{
- type: 'wordCloud',
- //maskImage: maskImage,
- sizeRange: [12, 24],
- rotationRange: [0, 0],
- rotationStep: 45,
- gridSize: 8,
- shape: 'pentagon',
- width: '100%',
- height: '100%',
- textStyle: {
- fontFamily: '微软雅黑',
- color: (v) => {
- switch (true) {
- case v.dataIndex <= 5:
- return '#1677FF'
- case 5 < v.dataIndex && v.dataIndex <= 10:
- return 'rgba(22, 119, 255, 0.6)'
- default:
- return 'rgba(22, 119, 255, 0.4)'
- }
- }
- },
- data: this.wordCloudMap,
- }]
- }, true)
- },
- // 销售进程客户数
- getSaleIndicators () {
- this.saleIndicators = []
- this.clientStepDate = []
- this.clientStepNum = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/saleIndicators`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.saleIndicators = data || []
- if (data && data.length) {
- data[0].dayList.forEach(item => {
- this.clientStepDate.push(item.date.split('T')[0])
- this.clientStepNum.push(item.clientNum)
- })
- this.$nextTick(() => {
- this.clientStepChart()
- })
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- handleClickClient (item, index) {
- this.clientIndex = index
- this.clientStepDate = []
- this.clientStepNum = []
- if (item.dayList && item.dayList.length) {
- this.clientStepDate = item.dayList.map(item => item.date.split('T')[0])
- this.clientStepNum = item.dayList.map(item => item.clientNum)
- this.$nextTick(() => {
- this.clientStepChart()
- })
- }
- },
- clientStepChart() {
- let clientStepChart = echarts.getInstanceByDom(document.getElementById('clientStepChart'))
- if (clientStepChart == null) {
- clientStepChart = echarts.init(document.getElementById('clientStepChart'))
- }
- window.addEventListener('resize', function () {
- clientStepChart.resize()
- })
- let text = this.saleIndicators[this.clientIndex].processName
- clientStepChart.setOption({
- legend: {
- show: false,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- return params[0].name + '<br>'
- + text + ': ' + params[0].value
- }
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.clientStepDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.clientStepNum),
- splitNumber: 5,
- interval: Math.max(...this.clientStepNum) / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- type: 'line',
- color: '#1677FF',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(22,119,255,0.43)' },
- { offset: 1, color: 'rgba(22,119,255,0)' }
- ])
- }, //填充区域样式
- data: this.clientStepNum,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- // 销售统计排名
- getSaleRank() {
- this.saleRankData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/saleRank`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.saleRankData = data || []
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 聊天超时监测
- getTimeOutTrendChart () {
- this.timeOutDate = []
- this.timeoutMember = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/timeOutTrend`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (data && data.length) {
- data.forEach(item => {
- this.timeOutDate.push(item.time.split('T')[0])
- this.timeoutMember.push(item.timeoutMember)
- })
- this.$nextTick(() => {
- this.timeOutTrendChart()
- })
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- timeOutTrendChart () {
- let timeOutTrendChart = echarts.getInstanceByDom(document.getElementById('timeOutTrendChart'))
- if (timeOutTrendChart == null) {
- timeOutTrendChart = echarts.init(document.getElementById('timeOutTrendChart'))
- }
- window.addEventListener('resize', function () {
- timeOutTrendChart.resize()
- })
- timeOutTrendChart.setOption({
- legend: {
- show: false,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- return params[0].name + ': ' + params[0].value
- }
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.timeOutDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.timeoutMember),
- splitNumber: 5,
- interval: Math.max(...this.timeoutMember) / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- type: 'line',
- color: '#FF4E4E',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(255, 78, 78,0.43)' },
- { offset: 1, color: 'rgba(255, 78, 78,0)' }
- ])
- }, //填充区域样式
- data: this.timeoutMember,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- returnOutsideDate () {
- this.memberStartTime = this.pageStartTime
- this.memberEndTime = this.pageEndTime
- if (this.pageStartTime === this.getDateTime(-1) && this.pageEndTime === this.getDateTime(-1)) {
- this.timeData = '昨日'
- } else if (this.pageStartTime === this.getDateTime(-7) && this.pageEndTime === this.getDateTime(-1)) {
- this.timeData = '近7天'
- } else if (this.pageStartTime === this.getDateTime(-30) && this.pageEndTime === this.getDateTime(-1)) {
- this.timeData = '近30天'
- } else {
- this.timeData = '自定义'
- }
- },
- // 顾问响应统计
- handleMemberReply () {
- this.showMemberReply = true
- this.returnOutsideDate()
- this.getMemberReply()
- },
- getMemberReply () {
- this.loading = true
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReply`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.memberStartTime,
- endTime: this.memberEndTime,
- page: this.currentPage,
- pageCount: 10,
- keyword: this.keyword,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.memberReplyData = data.records || []
- this.totalItems = data.total || 0
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- this.loading = false
- })
- },
- onSelect (val) {
- this.timeData = val.text
- if (this.timeData === '自定义') {
- this.showSelfDate = true
- } else {
- if (this.timeData === '昨日') {
- this.memberStartTime = this.getDateTime(-1)
- this.memberEndTime = this.getDateTime(-1)
- } else if (this.timeData === '近7天') {
- this.memberStartTime = this.getDateTime(-7)
- this.memberEndTime = this.getDateTime(-1)
- } else if (this.timeData === '近30天') {
- this.memberStartTime = this.getDateTime(-30)
- this.memberEndTime = this.getDateTime(-1)
- }
- this.$nextTick(() => {
- if (this.showDoneReply) {
- this.getDoneReply()
- } else {
- if (this.memberId) {
- this.handleItemMemberReplyDetail()
- } else {
- this.getMemberReply()
- }
- }
- })
- }
- },
- onSelfConfirm (date) {
- const [start, end] = date
- if (this.formatDate(new Date()) === this.formatDate(end)) {
- this.formatDate(end) = this.formatDate(start)
- }
- this.memberStartTime = this.formatDate(start)
- this.memberEndTime = this.formatDate(end)
- this.showSelfDate = false
- if (this.showDoneReply) {
- this.getDoneReply()
- } else {
- if (this.memberId) {
- this.handleItemMemberReplyDetail()
- } else {
- this.getMemberReply()
- }
- }
- },
- formatDate(date) {
- return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
- },
- handleSearch () {
- this.getMemberReply()
- },
- handleChangePage (val) {
- this.currentPage = val
- if (this.showDoneReply) {
- this.getDoneReply()
- } else {
- this.getMemberReply()
- }
- },
- closeReply () {
- this.currentPage = 1
- this.totalItems = 0
- this.keyword = ''
- this.timeData = '近7天'
- this.memberStartTime = this.getDateTime(-7)
- this.memberEndTime = this.getDateTime(-1)
- this.memberReplyData = []
- this.showMemberReply = false
- this.showDoneReply = false
- },
- handleItemMemberReply (item) {
- this.showItemMemberReply = true
- this.currentMemberName = item.memberName
- this.memberId = item.memberId
- this.currentItemPage = 1
- this.itemTotalItems = 0
- this.memberDetailReplyData = []
- this.handleItemMemberReplyDetail(item)
- },
- closeItemMemberReply () {
- this.showItemMemberReply = false
- },
- handleChangeItemPage (val) {
- this.currentItemPage = val
- this.handleItemMemberReplyDetail()
- },
- // 顾客响应统计-详情
- handleItemMemberReplyDetail() {
- this.loading = true
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReplyDetail`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.memberStartTime,
- endTime: this.memberEndTime,
- page: this.currentItemPage,
- pageCount: 10,
- memberId: this.memberId,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.memberDetailReplyData = data.records || []
- this.itemTotalItems = data.total || 0
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- }).finally(() => {
- this.loading = false
- })
- },
- // 顾客完成情况统计
- handleDoneReply () {
- this.showDoneReply = true
- this.returnOutsideDate()
- this.getDoneReply()
- },
- getDoneReply () {
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/operationMemberCnt`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.memberStartTime,
- endTime: this.memberEndTime,
- page: this.currentPage,
- pageCount: 10,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.doneReplyData = data.records || []
- this.totalItems = data.total || 0
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 聊天排行榜
- getChatRank () {
- this.chatRankData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/chatRank`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.chatRankData = data || []
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 运营任务-总数据
- getOutletCount () {
- this.outletCount = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/outletCount`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.outletCount = data || []
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- // 运营任务-任务完成率
- getTaskCompleteChart() {
- this.taskCompleteDate = []
- this.taskCompletePercent = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/taskCompletePercent`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (data && data.length) {
- data.forEach(item => {
- this.taskCompleteDate.push(item.time.split('T')[0])
- this.taskCompletePercent.push(item.taskCompletePercent)
- })
- this.$nextTick(() => {
- this.taskCompleteChart()
- })
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- taskCompleteChart() {
- let taskCompleteChart = echarts.getInstanceByDom(document.getElementById('taskCompleteChart'))
- if (taskCompleteChart == null) {
- taskCompleteChart = echarts.init(document.getElementById('taskCompleteChart'))
- }
- window.addEventListener('resize', function () {
- taskCompleteChart.resize()
- })
- taskCompleteChart.setOption({
- legend: {
- show: false,
- },
- tooltip: {
- trigger: 'axis',
- valueFormatter: function (value) {
- return value ? value.toFixed(2) + ' %' : ''
- }
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.taskCompleteDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.taskCompletePercent),
- splitNumber: 5,
- interval: Math.max(...this.taskCompletePercent) / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- type: 'line',
- color: '#1677FF',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(22,119,255,0.43)' },
- { offset: 1, color: 'rgba(22,119,255,0)' }
- ])
- }, //填充区域样式
- data: this.taskCompletePercent,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- // 运营任务 - 互动客户数
- getOpInteractChart() {
- this.opInteractDate = []
- this.opInteractClient = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/interact`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- if (data && data.length) {
- data.forEach(item => {
- this.opInteractDate.push(item.time.split('T')[0])
- this.opInteractClient.push(item.interactClient)
- })
- this.$nextTick(() => {
- this.opInteractChart()
- })
- }
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- opInteractChart () {
- let opInteractChart = echarts.getInstanceByDom(document.getElementById('opInteractChart'))
- if (opInteractChart == null) {
- opInteractChart = echarts.init(document.getElementById('opInteractChart'))
- }
- window.addEventListener('resize', function () {
- opInteractChart.resize()
- })
- opInteractChart.setOption({
- legend: {
- show: false,
- },
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- return params[0].name + '<br>'
- + '互动客户数: ' + params[0].value
- }
- },
- grid: {
- top: '10%',
- left: '10%',
- right: '10%',
- bottom: '10%'
- },
- xAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#666666",
- fontSize: '8',
- },
- data: this.opInteractDate,
- },
- yAxis: [
- {// 第一种方式
- type: 'value',
- min: 0,
- max: Math.max(...this.opInteractClient),
- splitNumber: 5,
- interval: Math.max(...this.opInteractClient) / 5,
- position: 'left',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: function (v) {
- return v.toFixed(0) //0表示小数为0位,1表示1位小数,2表示2位小数
- }
- },
- splitLine: { //网格线
- lineStyle: {
- type: 'dashed'//设置网格线类型 dotted:虚线 solid:实线
- },
- },
- axisTick: { show: false },
- },
- ],
- series: [
- {
- type: 'line',
- color: '#FFA64E',
- areaStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: 'rgba(255, 166, 78 ,0.43)' },
- { offset: 1, color: 'rgba(255, 166, 78 ,0)' }
- ])
- }, //填充区域样式
- data: this.opInteractClient,
- symbol: 'none', //去掉折线图中的节点
- smooth: true, //true 为平滑曲线,false为直线
- }
- ],
- }, true)
- },
- // 运营任务 - 素材排行榜
- getContentRank () {
- this.contentRankData = []
- if (this.noDealerIds()) {
- return
- }
- fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/contentRank`, {
- method: 'post',
- body: JSON.stringify({
- dealerId: this.dealerIds[0].id,
- outletId: this.outletId,
- startTime: this.pageStartTime,
- endTime: this.pageEndTime,
- }),
- headers: {
- 'Content-Type': 'application/json',
- 'token': this.token,
- 'tenancyId': this.tenancyId
- }
- }).then(res => {
- return res.json()
- }).then(result => {
- let { data, code, msg } = result
- if (code === 1) {
- this.contentRankData = data.reverse() || []
- this.$nextTick(() => {
- this.contentRankChart()
- })
- } else if (code === 10001) {
- this.loginOut()
- } else {
- vant.Toast.fail(msg)
- }
- })
- },
- contentRankChart() {
- let contentRankData = this.contentRankData.sort((a, b) => a.clientNum - b.clientNum)
- let rankChart = echarts.getInstanceByDom(document.getElementById('contentRank'))
- if (rankChart == null) {
- rankChart = echarts.init(document.getElementById('contentRank'))
- }
- rankChart.resize({ height: this.contentRankData.length * 50 + 20 })
- window.addEventListener('resize', function () {
- rankChart.resize()
- })
- rankChart.setOption({
- tooltip: {
- trigger: 'item',
- confine: true,
- extraCssText: 'max-width:200px; white-space:pre-wrap',
- formatter: '{b}: {c}'
- },
- legend: {
- left: 'center',
- icon: 'circle', //小圆点
- itemWidth: 10,
- itemHeight: 10,
- itemGap: 10, //间隔
- bottom: '10%',
- },
- grid: {
- bottom: "0",
- top: "0",
- left: "0",
- containLabel: true,
- },
- xAxis: {
- type: 'value',
- axisLabel: {
- show: true,
- color: '#666666',
- fontSize: '8',
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed' // 设置为虚线
- }
- },
- },
- yAxis: {
- type: 'category',
- axisLabel: {
- show: true,
- color: "#222222",
- fontSize: '8',
- formatter: (val) => {
- let c = document.createElement("canvas");
- const ctx = c.getContext("2d");
- ctx.font = "8px"; // 设置画布内的字体,与设置的textStyle一致
- const arr = val.split("");
- arr.map((item) => ctx.measureText(item).width)
- .reduce((pre, next, index) => {
- const nLen = pre + next;
- if (nLen > 60) {
- arr[index - 1] += "\n";
- return next;
- } else {
- return nLen;
- }
- });
- c = null;
- return arr.join("");
- }
- },
- data: this.contentRankData.map(item => {
- return item.title
- }) || [],
- },
- series: [
- {
- type: 'bar',
- barWidth: 24,
- barGap: 12,
- itemStyle: {
- color: function (p) {
- // 亮度随索引递增实现渐变
- const lightness = 87 - p.dataIndex * 8;
- return `hsl(215, 100%, ${Math.min(100, lightness)}%)`;
- }
- },
- data: this.contentRankData.map(item => {
- return item.readNum
- }) || []
- }
- ]
- })
- },
- // 打开右上角弹窗
- handleShowPopup () {
- this.showPopup = true
- },
- // 关闭右上角弹窗
- handleClosePopup () {
- this.showPopup = false
- this.showMer = false
- },
- // 切换商户
- handleSelectMer(id) {
- localStorage.setItem('tenancyIdValue', id)
- this.tenancyId = id
- this.showPopup = false
- this.showMer = false
- this.getDealerIds()
- },
- // 退出登录
- handleLoginOut() {
- localStorage.removeItem('tokenValue')
- var currentQueryParams = window.location.search
- window.location.replace('jxsLogin.html' + currentQueryParams)
- },
- // token过期,退出登录
- loginOut() {
- vant.Toast({
- message: '登录信息过期,请重新登录',
- })
- this.handleLoginOut()
- },
- formatTime(seconds) {
- if (seconds === undefined || seconds === '' || seconds === null) {
- return '--'
- }
- if (seconds >= 3600) {
- // 转换为小时并保留整数部分
- const hour = this.formatNumber(seconds / 3600);
- return `${hour}小时`;
- } else if (seconds >= 60) {
- // 转换为分钟并保留整数部分
- const minutes = this.formatNumber(seconds / 60);
- return `${minutes}分钟`;
- } else {
- return `${seconds}秒`;
- }
- },
- formatNumber(num) {
- const number = Number(num);
- if (isNaN(number) || !isFinite(number)) {
- return num;
- }
- // 整数直接返回
- if (Number.isInteger(number)) {
- return number.toString();
- }
- // 非整数处理:先保留两位小数,再移除末尾的零
- let str = number.toFixed(2);
- // 正则表达式移除末尾的零(保留有效小数位)
- return str.replace(/(\.[1-9]?0+)$|(\.[1-9])0+$/g, '$1$2');
- },
- // 日期格式处理
- getDateTime(day) {
- let today = new Date()
- let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
- today.setTime(targetday_milliseconds)
- let tYear = today.getFullYear()
- let tMonth = today.getMonth() + 1
- let tDate = today.getDate()
- if (tMonth < 10) {
- tMonth = '0' + tMonth
- }
- if (tDate < 10) {
- tDate = '0' + tDate
- }
- return tYear + '-' + tMonth + '-' + tDate
- },
- // 截取url中的数据
- getQueryParam(paramName) {
- // 获取当前URL的查询字符串部分
- const queryString = window.location.search;
- // 创建一个URLSearchParams对象
- const urlParams = new URLSearchParams(queryString);
- // 返回指定参数的值,如果不存在则返回null
- return urlParams.get(paramName);
- },
- timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
- if (time === undefined || time === '' || time === null) {
- return '--'
- } else {
- const date = new Date(time)
- const o = {
- 'M+': date.getMonth() + 1,
- 'd+': date.getDate(),
- 'h+': date.getHours(),
- 'm+': date.getMinutes(),
- 's+': date.getSeconds(),
- 'q+': Math.floor((date.getMonth() + 3) / 3),
- 'S': date.getMilliseconds()
- }
- if (/(y+)/.test(format)) {
- format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
- }
- for (let k in o) {
- if (new RegExp('(' + k + ')').test(format)) {
- format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
- }
- }
- return format
- }
- },
- }
- })
- </script>
- </html>
|