API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Feb 12th, 2019
87
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 30.40 KB | None | 0 0
raw download clone embed print report
  1. <template>
  2.   <div class="col-12 container-summary">
  3. <<<<<<< HEAD
  4.     <div class="header-summary-box col-9 center">
  5.       <div class="summary-box">
  6.         <div class="title">
  7.           <p>Saldo a
  8.             <span>Liberar</span>
  9.           </p>
  10.         </div>
  11.         <div class="summary-box-content">R$ 169.325,12</div>
  12.       </div>
  13.       <div class="summary-box">
  14.         <div class="title">
  15.           <p>Saldo
  16.             <span>Cartão Pré-Pago</span>
  17.           </p>
  18.         </div>
  19.         <div class="summary-box-content secondary-color-text">Mostrar saldo</div>
  20.         <div class="summary-box-description">Alguma descrição</div>
  21.       </div>
  22.       <div class="summary-box">
  23.         <div class="title">
  24.           <p>Saldo de
  25.             <span>Microcrédito</span>
  26.           </p>
  27.         </div>
  28.         <div class="summary-box-content">R$ 169.325,12</div>
  29.         <div class="summary-box-description secondary-color-text">Alguma descrição</div>
  30.       </div>
  31.       <div class="withdraw-box primary-dark-border-color">
  32.         <div class="title primary-dark-color-text">
  33.           <p>Saldo disponível para
  34.             <span>SAQUE</span>
  35.           </p>
  36.         </div>
  37.         <div class="withdraw-box-content primary-dark-color-text">R$ 12.233.232,12</div>
  38.       </div>
  39.     </div>
  40.     <div class="primary-dark-color-bg col-12">
  41.       <div class="col-9 col-sm-12 col-s-12 center summary-index select-box-summary">
  42.         <div class="summary-box-list col-8">
  43.             <div class="first box-transactions">
  44.                 <growth-item period="1 dia" :growth="dayGrowth" :date="getDate('day')" :selected="selectDay" @click="selectPeriod('day')"/>
  45.             </div>
  46.             <div class="box-transactions">
  47.                 <growth-item period="7 dias" :growth="weekGrowth" :date="getDate('week')" :selected="selectWeek" @click="selectPeriod('week')"/>
  48.             </div>
  49.             <div class="box-transactions">
  50.                 <growth-item period="30 dias" :growth="monthGrowth" :date="getDate('month')" :selected="selectMonth" @click="selectPeriod('month')"/>
  51.             </div>
  52.  
  53.            
  54.         </div>
  55.         <div class="summary-buttons relative">
  56.           <div class="export-box secondary-border-color secondary-color-text">
  57.             <img alt="Exportar" src="../assets/new/transactions/summary/extract-icon.svg">
  58.             <p>Extrato</p>
  59.           </div>
  60.           <div class="export-box secondary-border-color secondary-color-text"
  61.             onclick="window.print();return false;">
  62.             <img alt="Exportar" src="../assets/new/transactions/summary/withdraw-icon.svg">
  63.             <p>Saque</p>
  64.           </div>
  65.         </div>
  66.       </div>
  67.     </div>
  68.     <div class="summary-content col-9 center">
  69.       <div class="period-plan-summary">
  70.         <div class="time-chosen">
  71.           <p>Período
  72.             <span>{{ period }}</span>
  73.           </p>
  74.         </div>
  75.         <div class="plan-chosen">
  76.           <div class="plan-icon">
  77.             <img src="../assets/new/transactions/summary/plan-icon.svg">
  78.           </div>
  79.           <div>
  80.             <p>Plano contratado
  81.               <span>Ativo</span>
  82.             </p>
  83.             <p>Plano D14
  84.               <span class="light-font">- Liberação em 14 dias</span>
  85.             </p>
  86.           </div>
  87.         </div>
  88.       </div>
  89.       <div class="receipt-summary">
  90.         <div class="receipt-summary-title">
  91.           <p>Resumo de
  92.             <span>Transações</span>
  93.           </p>
  94.         </div>
  95.         <!-- <div class="receipt-summary-content">
  96.           <div class="selected-box finance-box">
  97.             <div class="box-title blue">
  98.               <p>Volume
  99.                 <br>
  100.                 <span>Financeiro</span>
  101.               </p>
  102.             </div>
  103.             <div class="box-content finance">
  104.               <p>R$ 100.000.000,00</p>
  105.             </div>
  106.           </div>
  107.           <div class="selected-box blue-style-box primary-color-bg">
  108.             <div class="box-title">
  109.               <p>Total de
  110.                 <br>
  111.                 <span>Transações</span>
  112.               </p>
  113.             </div>
  114.             <div class="box-content">
  115.               <p>530</p>
  116.             </div>
  117.           </div>
  118.           <div class="selected-box blue-style-box primary-color-bg">
  119.             <div class="box-title">
  120.               <p>Transações
  121.                 <br>
  122.                 <span>Pagas</span>
  123.               </p>
  124.             </div>
  125.             <div class="box-content">
  126.               <p>490</p>
  127.             </div>
  128.           </div>
  129.           <div class="selected-box blue-style-box primary-color-bg">
  130.             <div class="box-title">
  131.               <p>Transações
  132.                 <br>
  133.                 <span>Recusadas</span>
  134.               </p>
  135.             </div>
  136.             <div class="box-content">
  137.               <p>020</p>
  138.             </div>
  139.           </div>
  140.           <div class="selected-box blue-style-box primary-color-bg">
  141.             <div class="box-title">
  142.               <p>Transações
  143.                 <br>
  144.                 <span>Estornadas</span>
  145.               </p>
  146.             </div>
  147.             <div class="box-content">
  148.               <p>010</p>
  149.             </div>
  150.           </div>
  151.         </div> -->
  152.         <div class="graphs-content">
  153.           <div class="graph">
  154.             <my-graph
  155.               :firstValue="10"
  156.               :secondValue="20"
  157.               :thirdValue="22"
  158.               title="Cobranças"
  159.               insideTitle="Cobranças Enviadas"
  160.               value="2.165.120,33"
  161.               quantity="199.035"
  162.               subTitle="Total Enviadas"
  163.             ></my-graph>
  164.             <my-indicator
  165.               classColor="blue-darker-indicator"
  166.               text="Cobranças"
  167.               boldText="PAGAS"
  168.               value="1.121.212,00"
  169.               :percentage="55"
  170.               :quantity="109.469"
  171.             ></my-indicator>
  172.             <my-indicator
  173.               classColor="blue-light-indicator"
  174.               text="Cobranças"
  175.               boldText="A RECEBER"
  176.               value="1.121.212,00"
  177.               :percentage="55"
  178.               :quantity="109.469"
  179.             ></my-indicator>
  180.             <my-indicator
  181.               classColor="red-indicator"
  182.               text="Cobranças"
  183.               boldText="ATRASADAS "
  184.               value="1.121.212,00"
  185.               :percentage="55"
  186.               :quantity="109.469"
  187.             ></my-indicator>
  188.           </div>
  189.           <div class="graph">
  190.             <my-graph
  191.               :firstValue="30"
  192.               :secondValue="3"
  193.               :thirdValue="22"
  194.               title="Boletos"
  195.               insideTitle="Boletos Enviados"
  196.               value="2.120,33"
  197.               quantity="1.035"
  198.               subTitle="Total Enviados"
  199.             ></my-graph>
  200.             <my-indicator
  201.               classColor="blue-darker-indicator"
  202.               text="Boletos"
  203.               boldText="PAGAS"
  204.               value="1.121.212,00"
  205.               :percentage="55"
  206.               :quantity="109.469"
  207.             ></my-indicator>
  208.             <my-indicator
  209.               classColor="blue-light-indicator"
  210.               text="Boletos"
  211.               boldText="A RECEBER"
  212.               value="1.121.212,00"
  213.               :percentage="55"
  214.               :quantity="109.469"
  215.             ></my-indicator>
  216.             <my-indicator
  217.               classColor="red-indicator"
  218.               text="Boletos"
  219.               boldText="ATRASADAS "
  220.               value="1.121.212,00"
  221.               :percentage="55"
  222.               :quantity="109.469"
  223.             ></my-indicator>
  224.           </div>
  225.           <div class="graph">
  226.             <my-graph
  227.               :firstValue="250"
  228.               :secondValue="200"
  229.               :thirdValue="22"
  230.               title="Monetinha"
  231.               insideTitle="Boletos Enviadas"
  232.               value="165.120,33"
  233.               quantity="9.035"
  234.               subTitle="Transações"
  235.             ></my-graph>
  236.             <my-indicator
  237.               classColor="blue-darker-indicator"
  238.               text="Transações"
  239.               boldText="PAGAS"
  240.               value="1.121.212,00"
  241.               :percentage="55"
  242.               :quantity="109.469"
  243.             ></my-indicator>
  244.             <my-indicator
  245.               classColor="blue-light-indicator"
  246.               text="Transações"
  247.               boldText="RECUSADAS"
  248.               value="1.121.212,00"
  249.               :percentage="55"
  250.               :quantity="109.469"
  251.             ></my-indicator>
  252.             <my-indicator
  253.               classColor="red-indicator"
  254.               text="Transações"
  255.               boldText="ESTORNADAS"
  256.               value="1.121.212,00"
  257.               :percentage="55"
  258.               :quantity="109.469"
  259.             ></my-indicator>
  260.           </div>
  261.         </div>
  262.         <div class="horizontal-graphs-container">
  263.             <div class="horizontal-graph-box graph">
  264.                 <div class="graph-title receipt-summary-title">
  265.                     <p>Resumo de <br><span>Maquininha Virtual</span></p>
  266.                 </div>
  267.                 <horizontal-graph
  268.                     :first-value="55"
  269.                     :second-value="20"
  270.                     :third-value="25"
  271.                     :quantity="52.345"
  272.                     value="158.710,00"
  273.                 ></horizontal-graph>
  274.                 <my-indicator
  275.                     classColor="blue-darker-indicator"
  276.                     text="Boletos"
  277.                     boldText="PAGAS"
  278.                     value="1.121.212,00"
  279.                     :percentage="55"
  280.                     :quantity="109.469"
  281.                 ></my-indicator>
  282.                 <my-indicator
  283.                     classColor="blue-light-indicator"
  284.                     text="Boletos"
  285.                     boldText="A RECEBER"
  286.                     value="1.121.212,00"
  287.                     :percentage="55"
  288.                     :quantity="109.469"
  289.                 ></my-indicator>
  290.                 <my-indicator
  291.                     classColor="red-indicator"
  292.                     text="Boletos"
  293.                     boldText="ATRASADAS "
  294.                     value="1.121.212,00"
  295.                     :percentage="55"
  296.                     :quantity="109.469"
  297.                 ></my-indicator>
  298.             </div>
  299. =======
  300.     <div class="header-summary-box col-9 col-sm-12 col-s-12 center">
  301.       <div class="summary-box">
  302.         <div class="title">
  303.           <p>Saldo a
  304.             <span>Liberar</span>
  305.           </p>
  306.         </div>
  307.         <div class="summary-box-content">R$ 169.325,12</div>
  308.       </div>
  309.       <div class="summary-box">
  310.         <div class="title">
  311.           <p>Saldo
  312.             <span>Cartão Pré-Pago</span>
  313.           </p>
  314.         </div>
  315.         <div class="summary-box-content secondary-color-text">Mostrar saldo</div>
  316.         <div class="summary-box-description">Alguma descrição</div>
  317.       </div>
  318.       <div class="summary-box">
  319.         <div class="title">
  320.           <p>Saldo de
  321.             <span>Microcrédito</span>
  322.           </p>
  323.         </div>
  324.         <div class="summary-box-content">R$ 169.325,12</div>
  325.         <div class="summary-box-description secondary-color-text">Alguma descrição</div>
  326.       </div>
  327.       <div class="withdraw-box primary-dark-border-color">
  328.         <div class="title primary-dark-color-text">
  329.           <p>Saldo disponível para
  330.             <span>SAQUE</span>
  331.           </p>
  332.         </div>
  333.         <div class="withdraw-box-content primary-dark-color-text">R$ 12.233.232,12</div>
  334.       </div>
  335.     </div>
  336.     <div class="primary-dark-color-bg col-12">
  337.       <div class="col-9 col-s-12 col-sm-12 center summary-index select-box-summary">
  338.         <div class="summary-box-list col-8">
  339.             <div class="first box-transactions">
  340.                 <growth-item period="1 dia" :growth="1" :date="new Date()" :selected="true"/>
  341.             </div>
  342.             <div class="box-transactions">
  343.                 <growth-item period="1 dia" :growth="1" :date="new Date()" :selected="true"/>
  344.             </div>
  345.             <div class="box-transactions">
  346.                 <growth-item period="1 dia" :growth="1" :date="new Date()" :selected="true"/>
  347.             </div>
  348.         </div>
  349.         <div class="summary-buttons relative">
  350.           <div class="export-box secondary-border-color secondary-color-text">
  351.             <img alt="Exportar" src="../assets/new/transactions/summary/extract-icon.svg">
  352.             <p>Extrato</p>
  353.           </div>
  354.           <div class="export-box secondary-border-color secondary-color-text"
  355.             onclick="window.print();return false;">
  356.             <img alt="Exportar" src="../assets/new/transactions/summary/withdraw-icon.svg">
  357.             <p>Saque</p>
  358.           </div>
  359.         </div>
  360.       </div>
  361.     </div>
  362.     <div class="summary-content col-9 col-sm-12 col-s-12">
  363.       <div class="period-plan-summary">
  364.         <div class="time-chosen">
  365.           <p>Período
  366.             <span>test dias</span>
  367.           </p>
  368.         </div>
  369.         <div class="plan-chosen">
  370.           <div class="plan-icon">
  371.             <img src="../assets/new/transactions/summary/plan-icon.svg">
  372.           </div>
  373.           <div>
  374.             <p>Plano contratado
  375.               <span>Ativo</span>
  376.             </p>
  377.             <p>Plano D14
  378.               <span class="light-font">- Liberação em 14 dias</span>
  379.             </p>
  380.           </div>
  381.         </div>
  382.       </div>
  383.       <div class="receipt-summary col-sm-12 col-s-12">
  384.         <div class="receipt-summary-title">
  385.           <p>Resumo de
  386.             <span>Transações</span>
  387.           </p>
  388.         </div>
  389.         <div class="receipt-summary-content">
  390.             <div class="selected-box finance-box">
  391.                 <div class="box-title blue">
  392.                     <p>Volume<br><span>Financeiro</span></p>
  393.                 </div>
  394.                 <div class="box-content finance">
  395.                     <p>R$ 100.000.000,00</p>
  396.                 </div>
  397.             </div>
  398.             <div class="selected-box blue-style-box primary-color-bg">
  399.                 <div class="box-title">
  400.                 <p>Total de<br><span>Transações</span>
  401.                 </p>
  402.                 </div>
  403.                 <div class="box-content">
  404.                 <p>530</p>
  405.                 </div>
  406.             </div>
  407.             <div class="selected-box blue-style-box primary-color-bg">
  408.                 <div class="box-title">
  409.                 <p>Transações
  410.                     <br>
  411.                     <span>Pagas</span>
  412.                 </p>
  413.                 </div>
  414.                 <div class="box-content">
  415.                 <p>490</p>
  416.                 </div>
  417.             </div>
  418.             <div class="selected-box blue-style-box primary-color-bg">
  419.                 <div class="box-title">
  420.                 <p>Transações
  421.                     <br>
  422.                     <span>Recusadas</span>
  423.                 </p>
  424.                 </div>
  425.                 <div class="box-content">
  426.                 <p>020</p>
  427.                 </div>
  428.             </div>
  429.             <div class="selected-box blue-style-box primary-color-bg">
  430.                 <div class="box-title">
  431.                 <p>Transações
  432.                     <br>
  433.                     <span>Estornadas</span>
  434.                 </p>
  435.                 </div>
  436.                 <div class="box-content">
  437.                 <p>010</p>
  438.                 </div>
  439.             </div>
  440.         </div>
  441.         <div class="graphs-content">
  442.           <div class="graph wow bounceInUp" data-wow-duration="1s">
  443.             <my-graph
  444.               :firstValue="10"
  445.               :secondValue="20"
  446.               :thirdValue="22"
  447.               title="Cobranças"
  448.               insideTitle="Cobranças Enviadas"
  449.               value="2.165.120,33"
  450.               quantity="199.035"
  451.               subTitle="Total Enviadas"
  452.             ></my-graph>
  453.             <my-indicator
  454.               classColor="blue-darker-indicator"
  455.               text="Cobranças"
  456.               boldText="PAGAS"
  457.               value="1.121.212,00"
  458.               :percentage="55"
  459.               :quantity="109.469"
  460.             ></my-indicator>
  461.             <my-indicator
  462.               classColor="blue-light-indicator"
  463.               text="Cobranças"
  464.               boldText="A RECEBER"
  465.               value="1.121.212,00"
  466.               :percentage="55"
  467.               :quantity="109.469"
  468.             ></my-indicator>
  469.             <my-indicator
  470.               classColor="red-indicator"
  471.               text="Cobranças"
  472.               boldText="ATRASADAS "
  473.               value="1.121.212,00"
  474.               :percentage="55"
  475.               :quantity="109.469"
  476.             ></my-indicator>
  477.           </div>
  478.           <div class="graph wow bounceInUp" data-wow-duration="1s">
  479.             <my-graph
  480.               :firstValue="30"
  481.               :secondValue="3"
  482.               :thirdValue="22"
  483.               title="Boletos"
  484.               insideTitle="Boletos Enviados"
  485.               value="2.120,33"
  486.               quantity="1.035"
  487.               subTitle="Total Enviados"
  488.             ></my-graph>
  489.             <my-indicator
  490.               classColor="blue-darker-indicator"
  491.               text="Boletos"
  492.               boldText="PAGAS"
  493.               value="1.121.212,00"
  494.               :percentage="55"
  495.               :quantity="109.469"
  496.             ></my-indicator>
  497.             <my-indicator
  498.               classColor="blue-light-indicator"
  499.               text="Boletos"
  500.               boldText="A RECEBER"
  501.               value="1.121.212,00"
  502.               :percentage="55"
  503.               :quantity="109.469"
  504.             ></my-indicator>
  505.             <my-indicator
  506.               classColor="red-indicator"
  507.               text="Boletos"
  508.               boldText="ATRASADAS "
  509.               value="1.121.212,00"
  510.               :percentage="55"
  511.               :quantity="109.469"
  512.             ></my-indicator>
  513.           </div>
  514.           <div class="graph wow bounceInUp" data-wow-duration="1s">
  515.             <my-graph
  516.               :firstValue="250"
  517.               :secondValue="200"
  518.               :thirdValue="22"
  519.               title="Monetinha"
  520.               insideTitle="Boletos Enviadas"
  521.               value="165.120,33"
  522.               quantity="9.035"
  523.               subTitle="Transações"
  524.             ></my-graph>
  525.             <my-indicator
  526.               classColor="blue-darker-indicator"
  527.               text="Transações"
  528.               boldText="PAGAS"
  529.               value="1.121.212,00"
  530.               :percentage="55"
  531.               :quantity="109.469"
  532.             ></my-indicator>
  533.             <my-indicator
  534.               classColor="blue-light-indicator"
  535.               text="Transações"
  536.               boldText="RECUSADAS"
  537.               value="1.121.212,00"
  538.               :percentage="55"
  539.               :quantity="109.469"
  540.             ></my-indicator>
  541.             <my-indicator
  542.               classColor="red-indicator"
  543.               text="Transações"
  544.               boldText="ESTORNADAS"
  545.               value="1.121.212,00"
  546.               :percentage="55"
  547.               :quantity="109.469"
  548.             ></my-indicator>
  549.           </div>
  550.         </div>
  551.         <div class="horizontal-graphs-container">
  552.             <div class="horizontal-graph-box graph wow bounceInUp" data-wow-duration="1s">
  553.                 <div class="graph-title receipt-summary-title">
  554.                     <p>Resumo de <br><span>Maquininha Virtual</span></p>
  555.                 </div>
  556.                 <horizontal-graph
  557.                     :first-value="55"
  558.                     :second-value="20"
  559.                     :third-value="25"
  560.                     :quantity="52.345"
  561.                     value="158.710,00"
  562.                 ></horizontal-graph>
  563.                 <my-indicator
  564.                     classColor="blue-darker-indicator"
  565.                     text="Boletos"
  566.                     boldText="PAGAS"
  567.                     value="1.121.212,00"
  568.                     :percentage="55"
  569.                     :quantity="109.469"
  570.                 ></my-indicator>
  571.                 <my-indicator
  572.                     classColor="blue-light-indicator"
  573.                     text="Boletos"
  574.                     boldText="A RECEBER"
  575.                     value="1.121.212,00"
  576.                     :percentage="55"
  577.                     :quantity="109.469"
  578.                 ></my-indicator>
  579.                 <my-indicator
  580.                     classColor="red-indicator"
  581.                     text="Boletos"
  582.                     boldText="ATRASADAS "
  583.                     value="1.121.212,00"
  584.                     :percentage="55"
  585.                     :quantity="109.469"
  586.                 ></my-indicator>
  587.             </div>
  588. >>>>>>> de5404d89d505addc97396668369786762ddad27
  589.  
  590.         <div class="horizontal-graph-box graph wow bounceInUp" data-wow-duration="1s">
  591.             <div class="graph-title receipt-summary-title">
  592.               <p>Resumo de
  593.                 <br>
  594.                 <span>Moneto Pay (QR Code)</span>
  595.               </p>
  596.             </div>
  597.             <horizontal-graph
  598.               :first-value="15"
  599.               :second-value="20"
  600.               :third-value="45"
  601.               :quantity="52.345"
  602.               value="158.710,00"
  603.             ></horizontal-graph>
  604.             <my-indicator
  605.               classColor="blue-darker-indicator"
  606.               text="Boletos"
  607.               boldText="PAGAS"
  608.               value="1.121.212,00"
  609.               :percentage="55"
  610.               :quantity="109.469"
  611.             ></my-indicator>
  612.             <my-indicator
  613.               classColor="blue-light-indicator"
  614.               text="Boletos"
  615.               boldText="A RECEBER"
  616.               value="1.121.212,00"
  617.               :percentage="55"
  618.               :quantity="109.469"
  619.             ></my-indicator>
  620.             <my-indicator
  621.               classColor="red-indicator"
  622.               text="Boletos"
  623.               boldText="ATRASADAS "
  624.               value="1.121.212,00"
  625.               :percentage="55"
  626.               :quantity="109.469"
  627.             ></my-indicator>
  628.         </div>
  629.  
  630.         <div class="last-payments wow bounceInUp" data-wow-duration="1s">
  631.             <div class="last-payments-title">Ultimos Pagamentos</div>
  632.             <div class="last-payments-list">
  633.                 <last-payment
  634.                     type="Envio de Cobrança" date="05/02/2019"
  635.                     value="1.234,56" installments="Pago em 10x"
  636.                 ></last-payment>
  637.                 <last-payment
  638.                     type="Envio de Cobrança" date="05/02/2019"
  639.                     value="1.234,56" installments="Boleto"
  640.                 ></last-payment>                    <last-payment
  641.                     type="Envio de Boleto" date="05/02/2019"
  642.                     value="1.209090934,56" installments="Boleto"
  643.                 ></last-payment>                    <last-payment
  644.                     type="Moneto Pay" date="05/02/2019"
  645.                     value="1.234,56" installments="QR Code"
  646.                 ></last-payment>                    <last-payment
  647.                     type="Maquininha Virtual" date="05/02/2019"
  648.                     value="1.234,56" installments="Cartão 05x"
  649.                 ></last-payment>                    <last-payment
  650.                     type="Monetinha MPOS" date="05/02/2019"
  651.                     value="1.234,56" installments="Cartão Débito"
  652.                 ></last-payment>
  653.             </div>
  654.         </div>
  655.             <div class="payment-methods wow bounceInUp" data-wow-duration="1s">
  656.                 <p class="default-text payment-methods-title">Índice por
  657.                 <b>Meio de pagamento</b>
  658.                 </p>
  659.                 <div class="container-payment-methods">
  660.                     <div class="graph-and-details-container">
  661.                         <div class="title-and-graph-container">
  662.                         <div class="container-graph-title">
  663.                             <div class="period">
  664.                             <p class="period-title default-text">Período</p>
  665.                             <p class="period-content default-text">1 dia</p>
  666.                             </div>
  667.                             <div class="value">
  668.                             <p class="default-text value-title">R$ 158.710,00</p>
  669.                             <p class="default-text transactions">52.345 Transações</p>
  670.                             </div>
  671.                         </div>
  672.                         <div class="doughnut-graph relative">
  673.                             <doughnut-chart
  674.                             :chart-data="chartData"
  675.                             :options="{
  676.                                 responsive: true,
  677.                                 maintainAspectRatio: true,
  678.                                 cutoutPercentage: 50,
  679.                                 legend:{display: false}}"
  680.                             ></doughnut-chart>
  681.                         </div>
  682.                         </div>
  683.                         <div class="container-detail-rows">
  684.                         <div class="indicator flex">
  685.                             <p class="default-text index">1</p>
  686.                             <my-indicator
  687.                                 classColor="blue-alt-indicator"
  688.                                 text="Envio de Cobranças"
  689.                                 value="1.121.212,00"
  690.                                 :percentage="55"
  691.                                 :quantity="109.469"
  692.                             ></my-indicator>
  693.                         </div>
  694.                         <div class="indicator flex">
  695.                             <p class="default-text index">2</p>
  696.                             <my-indicator
  697.                                 classColor="red-alt-indicator"
  698.                                 text="Envio de Boleto"
  699.                                 value="1.121.212,00"
  700.                                 :percentage="55"
  701.                                 :quantity="109.469"
  702.                             ></my-indicator>
  703.                         </div>
  704.                         <div class="indicator flex">
  705.                             <p class="default-text index">3</p>                      
  706.                             <my-indicator
  707.                                 classColor="yellow-alt-indicator"
  708.                                 text="Maquininha Virtual"
  709.                                 value="1.121.212,00"
  710.                                 :percentage="55"
  711.                                 :quantity="109.469"
  712.                             ></my-indicator>
  713.                         </div>
  714.                         <div class="indicator flex">
  715.                             <p class="default-text index">4</p>
  716.                             <my-indicator
  717.                                 classColor="green-alt-indicator"
  718.                                 text="Monetinha (MPos)"
  719.                                 value="1.121.212,00"
  720.                                 :percentage="55"
  721.                                 :quantity="109.469"
  722.                             ></my-indicator>
  723.                         </div>
  724.                         <div class="indicator flex">
  725.                             <p class="default-text index">5</p>
  726.                             <my-indicator
  727.                                 classColor="orange-alt-indicator"
  728.                                 text="Moneto Pay (QR Code)"
  729.                                 value="1.121.212,00"
  730.                                 :percentage="55"
  731.                                 :quantity="109.469"
  732.                             ></my-indicator>
  733.                         </div>
  734.                         </div>
  735.                     </div>
  736.                 </div>
  737.               </div>
  738.             </div>
  739.             </div>
  740.         </div>
  741.     </div>
  742. </template>
  743. <script>
  744. import { mapGetters } from 'vuex';
  745. import GrowthTransaction from "../components/layout/items/GrowthTransaction.vue";
  746. import MyGraph from "../components/layout/items/TransactionGraph.vue";
  747. import MyIndicator from "../components/layout/items/graphs/TransactionIndicator.vue";
  748. import HorizontalGraph from "../components/layout/items/HorizontalChart.vue";
  749. import DoughnutChart from "../components/layout/items/graphs/DoughnutChart.vue";
  750. import LastPayment from "../components/layout/items/LastPayment.vue";
  751.  
  752. import WOW from 'wow.js';
  753.  
  754. new WOW().init();
  755. export default {
  756.   components: {
  757.     "growth-item": GrowthTransaction,
  758.     "my-graph": MyGraph,
  759.     "my-indicator": MyIndicator,
  760.     "last-payment": LastPayment,
  761.     HorizontalGraph,
  762.     DoughnutChart
  763.   },
  764.   data() {
  765. <<<<<<< HEAD
  766.     return {
  767.       chartData: {
  768.         labels: [
  769.           "Envio de Cobranças",
  770.           "Envio de Boleto",
  771.           "Maquininha Virtual",
  772.           "Monetinha (MPos)",
  773.           "Moneto Pay (QR Code)"
  774.         ],
  775.         datasets: [
  776.           {
  777.             backgroundColor: ["#4187ED", "#E0423C", "#F6B33B", "#009D5F", "#FF6B27"],
  778.             data: [10, 20, 30, 20, 20]
  779.           }
  780.         ],
  781.       },
  782.         newDayStatement:'',
  783.         oldDayStatement:'',
  784.         dayGrowth:'',
  785.  
  786.         newWeekStatement:'',
  787.         oldWeekStatement:'',
  788.         weekGrowth:'',
  789.  
  790.         newMonthStatement:'',
  791.         oldMonthStatement:'',
  792.         monthGrowth:'',
  793.  
  794.         selectedStatement:'',
  795.         period:'1 dia',
  796.  
  797.         filters:{
  798.               type:'',
  799.               status:'',
  800.               since:'',
  801.               until:''
  802.         },
  803.  
  804.         financeVolume: 0,
  805.         totalTransactions: 0,
  806.         paid: 0,
  807.         refused: 0,
  808.         reversal: 0,
  809.         selectDay: true,
  810.         selectMonth: false,
  811.         selectWeek: false,
  812.  
  813.         isLoading: false,
  814.  
  815.     };
  816.   },
  817.   methods: {
  818.     getInitialStatements(){
  819.       Promise.all([
  820.         this.getStatement('day').then((response) => this.newDayStatement = this.statement.summary),
  821.         this.getStatement('before-day').then((response) =>  this.oldDayStatement = this.statement.summary),
  822.  
  823.         this.getStatement('month').then((response) => this.newMonthStatement = this.statement.summary),
  824.         this.getStatement('before-month').then((response) =>  this.oldMonthStatement = this.statement.summary),
  825.  
  826.         this.getStatement('week').then((response) =>  this.newWeekStatement = this.statement.summary),
  827.         this.getStatement('before-week').then((response) =>  this.oldWeekStatement = this.statement.summary)])
  828.       .then(() => {
  829.         this.isLoading = false;
  830.         this.setAllGrowths();
  831.         if(localStorage.getItem('filtersForSearch') && localStorage.getItem('periodOfSearch')){
  832.             this.filters = JSON.parse(localStorage.getItem('filtersForSearch'));
  833.             if(localStorage.getItem('periodOfSearch') == '"1 dia"') this.selectPeriod('day');
  834.  
  835.             else if(localStorage.getItem('periodOfSearch') == '"7 dias"') this.selectPeriod('week');
  836.  
  837.             else if(localStorage.getItem('periodOfSearch') == '"30 dias"') this.selectPeriod('month');
  838.             else this.selectPeriod('customize');
  839.         }else this.selectPeriod('day');
  840.  
  841.         localStorage.removeItem('filtersForSearch');
  842.         localStorage.removeItem('periodOfSearch');
  843.       });
  844.     },
  845.     getStatement(period){
  846.        this.isLoading = true;
  847.           var date = this.createDate(period);
  848.           var endDate = this.formatDate(date.end);  
  849.           var startDate = this.formatDate(date.start);
  850.           // this.filters.since = startDate;
  851.           // this.filters.until = endDate;
  852.           return this.$store.dispatch('get_receipts_summary', { since : startDate, until : endDate })
  853.           .then((response) => response);  
  854.     },
  855.     createDate(period){
  856.       var end = new Date();
  857.       var start = new Date();
  858.       if(period === 'before-day'){
  859.           start.setDate(start.getDate());
  860.           end.setDate(end.getDate());
  861.       }
  862.       if(period === 'week') start.setDate(start.getDate() - 7);
  863.       if(period === 'before-week'){
  864.           start.setDate(start.getDate() -13);
  865.           end.setDate(end.getDate() - 6);
  866.       }
  867.       if(period === 'month') start.setDate(start.getDate() -30);
  868.       if(period === 'before-month'){
  869.           start.setDate(start.getDate() -60);
  870.           end.setDate(end.getDate() - 30);
  871.       }
  872.       var date = {start : start, end : end};
  873.       return date;
  874.     },
  875.     formatDate(date){
  876.       return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  877.     },
  878.     getDate(period){
  879.       var today = new Date();
  880.       if(period == 'day'){
  881.           var months = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
  882.           return `${("0" + today.getDate()).slice(-2)} de ${months[today.getMonth()]}`;
  883.       }else if(period == 'week'){
  884.           var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate()-6);
  885.           return `De ${("0" + today.getDate()).slice(-2)}/${("0" + (today.getMonth() + 1)).slice(-2)} à ${("0" + lastWeek.getDate()).slice(-2)}/${("0" + (lastWeek.getMonth() + 1)).slice(-2)}`;
  886.       }else if(period == 'month'){
  887.           var lastMonth = new Date();
  888.           lastMonth.setDate(lastMonth.getDate()-30);
  889.           return `De ${("0" + today.getDate()).slice(-2)}/${("0" + (today.getMonth() + 1)).slice(-2)} à ${("0" + lastMonth.getDate()).slice(-2)}/${("0" + lastMonth.getMonth() + 1).slice(-2)}/${lastMonth.getFullYear()}`;
  890.       }
  891.     },
  892.     selectPeriod(period){
  893.       this.selectDay = this.selectMonth = this.selectWeek = false;          
  894.       if(period == 'day'){
  895.           this.period = '1 dia';
  896.           this.selectedStatement = this.newDayStatement;
  897.           this.selectDay = true;
  898.           var date = this.createDate('day');
  899.           this.filters.since = this.formatDate(date.start);
  900.           this.filters.until = this.formatDate(date.end);  
  901.           this.filters.status = 'total';
  902.       }
  903.       if(period == 'week'){
  904.           this.period = '7 dias';
  905.           this.selectedStatement = this.newWeekStatement;
  906.           this.selectWeek = true;
  907.           var date = this.createDate('week');
  908.           this.filters.since = this.formatDate(date.start);
  909.           this.filters.until = this.formatDate(date.end);  
  910.           this.filters.status = 'total';
  911.       }
  912.       if(period == 'month'){
  913.           this.period = '30 dias';
  914.           this.selectedStatement = this.newMonthStatement;
  915.           this.selectMonth = true;
  916.           var date = this.createDate('month');
  917.           this.filters.since = this.formatDate(date.start);
  918.           this.filters.until = this.formatDate(date.end);  
  919.           this.filters.status = 'total';
  920.       }
  921.      
  922.       this.financeVolume=  this.selectedStatement.executed;
  923.       this.totalTransactions = this.selectedStatement.total;
  924.       this.paid = this.selectedStatement.paid;
  925.       this.refused = this.selectedStatement.error;
  926.       this.reversal = this.selectedStatement.reversed;
  927.     }  
  928.   }, computed: {
  929.         ...mapGetters([
  930.         'statement',
  931.         ]),
  932.     }
  933. =======
  934.     return {
  935.       chartData: {
  936.         labels: [
  937.           "Envio de Cobranças",
  938.           "Envio de Boleto",
  939.           "Maquininha Virtual",
  940.           "Monetinha (MPos)",
  941.           "Moneto Pay (QR Code)"
  942.         ],
  943.         datasets: [
  944.           {
  945.             backgroundColor: ["#4187ED", "#E0423C", "#F6B33B", "#009D5F", "#FF6B27"],
  946.             data: [10, 20, 30, 20, 20]
  947.           }
  948.         ]
  949.       }
  950.     };
  951.   }
  952. >>>>>>> de5404d89d505addc97396668369786762ddad27
  953. };
  954. </script>
  955.  
  956. <style>
  957. @import "../../public/style/css/newStyle.css";
  958. @import "../../public/style/css/themes/newAllThemes.css";
  959. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!