index.js 14 KB

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