index.js 14 KB

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