daily pastebin goal
35%
SHARE
TWEET

Untitled

a guest Feb 12th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top