index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723
  1. function formatNumber(n) {
  2. const str = n.toString();
  3. return str[1] ? str : `0${str}`;
  4. }
  5. export function formatTime(date) {
  6. if (date.length <= 11) {
  7. date = date * 1000;
  8. }
  9. var date = new Date(date);
  10. const year = date.getFullYear();
  11. const month = date.getMonth() + 1;
  12. const day = date.getDate();
  13. const hour = date.getHours();
  14. return year + "/" + month + "/" + day;
  15. }
  16. export function formatTimeAnother(date) {
  17. var date = new Date(date* 1000);
  18. const year = date.getFullYear();
  19. const month = date.getMonth() + 1;
  20. const day = date.getDate();
  21. const hour = date.getHours();
  22. return year + "-" + month + "-" + day;
  23. }
  24. export function formatAllTime(date) {
  25. if (date.length <= 11) {
  26. date = date * 1000;
  27. }
  28. var date = new Date(date);
  29. const year = date.getFullYear();
  30. const month = date.getMonth() + 1;
  31. const day = date.getDate();
  32. const hour = date.getHours();
  33. const minutes = date.getMinutes();
  34. return year + "/" + month + "/" + day + " " + hour + ":" + minutes;
  35. }
  36. export function formatTimeForSeconds(date) {
  37. if (date.length <= 11) {
  38. date = date * 1000;
  39. }
  40. var date = new Date(date);
  41. const year = date.getFullYear();
  42. const month = date.getMonth() + 1;
  43. const day = date.getDate();
  44. const hour = date.getHours();
  45. const minute = date.getMinutes();
  46. return year + "/" + month + "/" + day + " " + hour + ":" + minute;
  47. }
  48. export function timestampTwoNum(timestamp) {
  49. var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  50. var Y = date.getFullYear() + ".";
  51. var M =
  52. (date.getMonth() + 1 < 10 ?
  53. "0" + (date.getMonth() + 1) :
  54. date.getMonth() + 1) + ".";
  55. // (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds())
  56. var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) ;
  57. // var h = date.getHours() + ":";
  58. // var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) ;
  59. // var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
  60. return (Y + M + D );
  61. }
  62. export function formatValidityTime(date) {
  63. if (date.toString().length <= 11) {
  64. date = date * 1000;
  65. }
  66. var date = new Date(date);
  67. const year = date.getFullYear();
  68. const month = date.getMonth() + 1;
  69. const day = date.getDate();
  70. const hour = date.getHours();
  71. return year + "/" + month + "/" + day + " " + hour + "时";
  72. }
  73. export function formatBirthday(date) {
  74. var date = new Date(date * 1000);
  75. const year = date.getFullYear();
  76. const month = date.getMonth() + 1;
  77. const day = date.getDate();
  78. const hour = date.getHours();
  79. const t1 = [year, month, day].map(formatNumber).join("-");
  80. return `${t1}`;
  81. }
  82. // 专注力与放松力图表 小乌龟
  83. function getLineOption(lineData_att, lineData_med) {
  84. const that = this;
  85. var option = {
  86. color: ["#FFB400", "#D4327A"],
  87. legend: {
  88. data: ["Att(专注度)", "Med(放松度)"],
  89. top: -5,
  90. left: 210,
  91. // left: 'center',
  92. orient: "horizontal",
  93. icon: "circle",
  94. itemWidth: 8,
  95. itemGap: 5,
  96. // 解决部分安卓手机图例字体显示太小的问题
  97. textStyle: {
  98. // fontWeight: 'bold',
  99. fontSize: 10,
  100. color: "#CFCFCF",
  101. },
  102. selectedMode: false,
  103. show: false,
  104. },
  105. grid: {
  106. left: 20,
  107. right: 20,
  108. bottom: 16,
  109. top: 16,
  110. // show:true,
  111. containLabel: true,
  112. zlevel: 1,
  113. },
  114. tooltip: {
  115. show: true,
  116. trigger: "axis",
  117. },
  118. yAxis: {
  119. x: "center",
  120. type: "value",
  121. splitLine: {
  122. lineStyle: {
  123. type: "dashed",
  124. },
  125. },
  126. axisLine: {
  127. lineStyle: {
  128. color: "#ccc",
  129. },
  130. show: false,
  131. },
  132. axisLabel: {
  133. color: "#ccc",
  134. },
  135. max: 100,
  136. // data: ["0", "20", "40", "60", "80", "100"]
  137. // show: false
  138. },
  139. xAxis: {
  140. type: "category",
  141. boundaryGap: false,
  142. splitLine: {
  143. lineStyle: {
  144. type: "dashed",
  145. },
  146. },
  147. axisLine: {
  148. lineStyle: {
  149. color: "#ccc",
  150. },
  151. },
  152. axisLabel: {
  153. color: "#ccc",
  154. },
  155. show: false,
  156. },
  157. series: [{
  158. name: "Att(专注度)",
  159. symbol: "none", //取消折点圆圈
  160. type: "line",
  161. smooth: true,
  162. data: lineData_att,
  163. },
  164. {
  165. name: "Med(放松度)",
  166. symbol: "none", //取消折点圆圈
  167. type: "line",
  168. smooth: true,
  169. data: lineData_med,
  170. },
  171. ],
  172. animation: false,
  173. };
  174. return option;
  175. }
  176. // 基本脑波图
  177. function getBaseOption(delta, theta, alpha, beta) {
  178. console.log('delta是否有值~~~~~~~', delta)
  179. const that = this;
  180. var option = {
  181. color: ["#00ccff", "#0cda2e", "#f8a117", "#d1d310"],
  182. legend: {
  183. data: ["Delta", "Theta", "Alpha", "Beta"],
  184. left: "center",
  185. bottom: 20,
  186. icon: "circle",
  187. itemWidth: 8,
  188. itemGap: 25,
  189. // 解决部分安卓手机图例字体显示太小的问题
  190. textStyle: {
  191. // fontWeight: 'bold',
  192. fontSize: 10,
  193. color: "#CFCFCF",
  194. },
  195. show: false,
  196. },
  197. grid: {
  198. left: 20,
  199. right: 20,
  200. bottom: 16,
  201. top: 16,
  202. // show:false,
  203. containLabel: true,
  204. },
  205. tooltip: {
  206. show: true,
  207. trigger: "axis",
  208. },
  209. yAxis: {
  210. x: "center",
  211. type: "value",
  212. splitLine: {
  213. lineStyle: {
  214. type: "dashed",
  215. },
  216. },
  217. axisLine: {
  218. lineStyle: {
  219. color: "#ccc",
  220. },
  221. show: false,
  222. },
  223. axisLabel: {
  224. color: "#ccc",
  225. },
  226. // max: 100,
  227. // data: ["0", "20", "40", "60", "80", "100"]
  228. // show: false
  229. },
  230. xAxis: {
  231. type: "category",
  232. boundaryGap: false,
  233. splitLine: {
  234. lineStyle: {
  235. type: "dashed",
  236. },
  237. },
  238. axisLine: {
  239. lineStyle: {
  240. color: "#ccc",
  241. },
  242. },
  243. axisLabel: {
  244. color: "#ccc",
  245. },
  246. show: false,
  247. },
  248. series: [{
  249. name: "Delta",
  250. symbol: "none", //取消折点圆圈
  251. type: "line",
  252. smooth: true,
  253. data: delta,
  254. },
  255. {
  256. name: "Theta",
  257. symbol: "none", //取消折点圆圈
  258. type: "line",
  259. smooth: true,
  260. data: theta,
  261. },
  262. {
  263. name: "Alpha",
  264. symbol: "none", //取消折点圆圈
  265. type: "line",
  266. smooth: true,
  267. data: alpha,
  268. },
  269. {
  270. name: "Beta",
  271. symbol: "none", //取消折点圆圈
  272. type: "line",
  273. smooth: true,
  274. data: beta,
  275. },
  276. ],
  277. animation: false,
  278. };
  279. return option;
  280. }
  281. export function formatSeconds(value) {
  282. var secondTime = parseInt(value); // 秒
  283. var minuteTime = 0; // 分
  284. var hourTime = 0; // 小时
  285. if (secondTime > 60) {
  286. //如果秒数大于60,将秒数转换成整数
  287. //获取分钟,除以60取整数,得到整数分钟
  288. minuteTime = parseInt(secondTime / 60);
  289. //获取秒数,秒数取佘,得到整数秒数
  290. secondTime = parseInt(secondTime % 60);
  291. //如果分钟大于60,将分钟转换成小时
  292. if (minuteTime > 60) {
  293. //获取小时,获取分钟除以60,得到整数小时
  294. hourTime = parseInt(minuteTime / 60);
  295. //获取小时后取佘的分,获取分钟除以60取佘的分
  296. minuteTime = parseInt(minuteTime % 60);
  297. }
  298. }
  299. var result = "" + parseInt(secondTime) + "秒";
  300. if (minuteTime > 0) {
  301. result = "" + parseInt(minuteTime) + "分" + result;
  302. }
  303. if (hourTime > 0) {
  304. result = "" + parseInt(hourTime) + "小时" + result;
  305. }
  306. return result;
  307. }
  308. //获取等级名称
  309. function get_level_name($level_id) {
  310. let $level = [
  311. "普通用户",
  312. "体验会员",
  313. "黄金会员",
  314. "白金会员",
  315. "钻石会员",
  316. "创客代理",
  317. "区域代理",
  318. "合伙人",
  319. "店员",
  320. "店长",
  321. "老师",
  322. ];
  323. return $level[$level_id];
  324. }
  325. export function cal_down_time($final_time) {
  326. let $today = new Date().getTime();
  327. let $differ = $final_time * 1000 - $today;
  328. //计算出相差天数
  329. var days = Math.floor($differ / (24 * 3600 * 1000));
  330. //计算出小时数
  331. var leave1 = $differ % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
  332. var hours = Math.floor(leave1 / (3600 * 1000));
  333. //计算相差分钟数
  334. var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
  335. var minutes = Math.floor(leave2 / (60 * 1000));
  336. //计算相差秒数
  337. var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
  338. var seconds = Math.round(leave3 / 1000);
  339. return {
  340. differ: $differ,
  341. days,
  342. hours,
  343. minutes,
  344. seconds,
  345. };
  346. }
  347. export function getHightPieChartOption($params, $total) {
  348. let $option = {
  349. tooltip: {
  350. // trigger: 'item'
  351. show: false,
  352. },
  353. series: [{
  354. name: "访问来源",
  355. type: "pie",
  356. radius: "80%",
  357. labelLine: {
  358. show: false,
  359. },
  360. data: [
  361. // {value: $params, name: '高专注占比'},
  362. // {value: Math.abs(100-$params), name: '直接访问'},
  363. {
  364. value: $params,
  365. name: ''
  366. },
  367. {
  368. value: Math.abs($total - $params),
  369. name: ''
  370. },
  371. ]
  372. }]
  373. };
  374. return $option;
  375. }
  376. // 雷达图
  377. export function getRadarChartOption($params) {
  378. let $option = {
  379. tooltip: {
  380. },
  381. color: "#ffb72d",
  382. radar: {
  383. radius: "55%",
  384. name: {
  385. textStyle: {
  386. color: "#fff",
  387. backgroundColor: "#999",
  388. borderRadius: 3,
  389. padding: [3, 5],
  390. },
  391. },
  392. indicator: [{
  393. name: "专注力平均值指数",
  394. max: 100
  395. },
  396. {
  397. name: "专注力广度指数",
  398. max: 100
  399. },
  400. {
  401. name: "专注力爆发指数",
  402. max: 100
  403. },
  404. {
  405. name: "专注力抗性指数",
  406. max: 100
  407. },
  408. {
  409. name: "专注力启动指数",
  410. max: 100
  411. },
  412. {
  413. name: "高专注力占比指数",
  414. max: 100
  415. },
  416. ],
  417. splitArea: {
  418. show: true,
  419. areaStyle: {
  420. color: ['#423b97', '#5b55a6', '#7570b4', '#a6a3ce', '#dddcec'],
  421. // 图表背景网格的颜色
  422. }
  423. },
  424. },
  425. series: [{
  426. name: "预算 vs 开销(Budget vs spending)",
  427. type: "radar",
  428. lineStyle: {
  429. // color: "#D28885",
  430. color: "#ffda93",
  431. },
  432. data: [{
  433. value: $params,
  434. // name: '实际开销(Actual Spending)'
  435. name: "专注力要素分析数据",
  436. },],
  437. },],
  438. };
  439. return $option;
  440. }
  441. //获取饼状图图属性
  442. export function getPieChartsOption($pie_datas) {
  443. if ($pie_datas) {
  444. console.log($pie_datas);
  445. let option = {
  446. tooltip: {
  447. trigger: "item",
  448. formatter: "{a} \r\n {b}: {c} ({d}%)",
  449. },
  450. legend: {
  451. orient: "vertical",
  452. right: "10%",
  453. top: "20%",
  454. data: $pie_datas["legends"],
  455. },
  456. series: [{
  457. name: "访问来源",
  458. type: "pie",
  459. radius: ["40%", "70%"],
  460. avoidLabelOverlap: false,
  461. label: {
  462. show: false,
  463. position: "center",
  464. },
  465. right: "40%",
  466. emphasis: {
  467. label: {
  468. show: true,
  469. fontSize: "30",
  470. fontWeight: "bold",
  471. },
  472. },
  473. labelLine: {
  474. show: true,
  475. },
  476. data: $pie_datas["datas"],
  477. },],
  478. };
  479. return option;
  480. }
  481. }
  482. //过滤饼状数据
  483. export function filterPieData(datas) {
  484. let $this = this;
  485. let legends = [];
  486. let $att_region = [{
  487. min: 0,
  488. max: 20,
  489. },
  490. {
  491. min: 21,
  492. max: 40,
  493. },
  494. {
  495. min: 41,
  496. max: 60,
  497. },
  498. {
  499. min: 61,
  500. max: 80,
  501. },
  502. {
  503. min: 81,
  504. max: 100,
  505. },
  506. ];
  507. datas.forEach(($val, $index) => {
  508. legends.push(
  509. $att_region[$index]["min"] +
  510. "-" +
  511. $att_region[$index]["max"] +
  512. ":" +
  513. formatSeconds($val)
  514. );
  515. let _data = {
  516. name: $att_region[$index]["min"] +
  517. "-" +
  518. $att_region[$index]["max"] +
  519. ":" +
  520. formatSeconds($val),
  521. value: $val,
  522. };
  523. datas[$index] = _data;
  524. });
  525. return {
  526. datas,
  527. legends
  528. };
  529. }
  530. // 受干扰次数 getInterfereChartsOption 小乌龟
  531. export function getInterfereChartsOption(interfere_datas) {
  532. // console.log('干扰初始化', interfere_datas)
  533. if (interfere_datas) {
  534. let option = {
  535. color: '#23CC92',
  536. // 标题
  537. title: {
  538. // left: 1220,
  539. },
  540. // 提示
  541. tooltip: {
  542. trigger: "axis",
  543. axisPointer: {
  544. type: "shadow",
  545. },
  546. },
  547. grid: {
  548. top: 20,
  549. bottom: 20
  550. },
  551. // x轴数据显示
  552. xAxis: {
  553. type: 'category',
  554. boundaryGap: false,
  555. // data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20'],
  556. splitNumber: 11,
  557. },
  558. // y轴坐标显示
  559. yAxis: {
  560. color: '#23CC92',
  561. type: "value",
  562. splitNumber: 5,
  563. min: -100,
  564. max: 0,
  565. axisLabel: {
  566. formatter: '{value}',
  567. textStyle: {
  568. color: '#23CC92'
  569. }
  570. }
  571. },
  572. //数据配置项
  573. series: [{
  574. data: interfere_datas,
  575. type: "line",
  576. large: true,
  577. areaStyle: {}
  578. },],
  579. }
  580. return option
  581. }
  582. }
  583. // 能力调整 getAdjustmentChartsOption
  584. export function getAdjustmentChartsOption(interfere_datas) {
  585. // console.log('调整初始化', interfere_datas)
  586. if (interfere_datas) {
  587. let option = {
  588. color: '#F3A100',
  589. // 标题
  590. title: {
  591. // left: 1220,
  592. },
  593. grid: {
  594. top: 20,
  595. bottom: 20
  596. },
  597. // 提示
  598. tooltip: {
  599. trigger: "axis",
  600. axisPointer: {
  601. type: "shadow",
  602. },
  603. },
  604. // x轴数据显示
  605. xAxis: {
  606. type: 'category',
  607. boundaryGap: false,
  608. },
  609. // y轴坐标显示
  610. yAxis: {
  611. // x: "center",
  612. type: "value",
  613. splitNumber: 5,
  614. min: 0,
  615. max: 100,
  616. axisLabel: {
  617. formatter: '{value}',
  618. textStyle: {
  619. color: '#F3A100'
  620. }
  621. }
  622. },
  623. //数据配置项
  624. series: [{
  625. data: interfere_datas,
  626. type: "line",
  627. large: true,
  628. areaStyle: {}
  629. },],
  630. }
  631. return option
  632. }
  633. }
  634. // 时间戳转化成时间格式
  635. export function timestampToTimeS(timestamp) {
  636. var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  637. var Y = date.getFullYear() + "-";
  638. var M =
  639. (date.getMonth() + 1 < 10 ?
  640. "0" + (date.getMonth() + 1) :
  641. date.getMonth() + 1) + "-";
  642. var D = date.getDate() + " ";
  643. var h = date.getHours() + ":";
  644. var m = date.getMinutes() + ":";
  645. var s = date.getSeconds();
  646. return Y + M + D + h + m + s;
  647. }
  648. // 成绩记录干扰图表数据处理
  649. export function interfereAction($data) {
  650. if ($data) {
  651. let $interfereArr = []
  652. let $objData = {};
  653. // 自定义的对象 1200s 20分钟
  654. for (var i = 0; i < 1200; i++) {
  655. $objData[i] = 0;
  656. }
  657. console.log($objData);
  658. var $newObj = Object.assign($objData, $data);
  659. // 对象转数组
  660. console.log($newObj);
  661. for (const key in $newObj) {
  662. $interfereArr.push($newObj[key]);
  663. }
  664. console.log($interfereArr);
  665. return $interfereArr
  666. } else {
  667. console.log("无数据", $data)
  668. }
  669. }
  670. export default {
  671. formatNumber,
  672. formatTime,
  673. getLineOption,
  674. getBaseOption,
  675. get_level_name,
  676. timestampToTimeS,
  677. interfereAction
  678. };