SHARE
TWEET

Untitled

a guest Apr 24th, 2019 572 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div id="pageDashboard">
  3.     <v-container grid-list-xl fluid>
  4.       <v-layout row wrap>
  5.         <!-- mini statistic start -->
  6.         <v-flex lg3 sm6 xs12>
  7.           <mini-statistic
  8.             icon="fa fa-facebook"
  9.             title="100+"
  10.             sub-title="Likes"
  11.             color="indigo"      
  12.           >
  13.           </mini-statistic>  
  14.         </v-flex>
  15.         <v-flex lg3 sm6 xs12>
  16.           <mini-statistic
  17.             icon="fa fa-google"
  18.             title="150+"
  19.             sub-title="Connections"
  20.             color="red"      
  21.           >
  22.           </mini-statistic>          
  23.         </v-flex>          
  24.         <v-flex lg3 sm6 xs12>
  25.           <mini-statistic
  26.             icon="fa fa-twitter"
  27.             title="200+"
  28.             sub-title="Followers"
  29.             color="light-blue"      
  30.           >
  31.           </mini-statistic>            
  32.         </v-flex>        
  33.         <v-flex lg3 sm6 xs12>
  34.           <mini-statistic
  35.             icon="fa fa-instagram"
  36.             title="50+"
  37.             sub-title="Shots"
  38.             color="purple"      
  39.           >
  40.           </mini-statistic>            
  41.         </v-flex>  
  42.         <!-- mini statistic  end -->  
  43.         <v-flex lg8 sm12 xs12>
  44.           <v-widget title="Site Traffic" content-bg="white">
  45.             <v-btn icon slot="widget-header-action">
  46.               <v-icon class="text--secondary">refresh</v-icon>
  47.             </v-btn>
  48.             <div slot="widget-content">
  49.                 <e-chart
  50.                 :path-option="[
  51.                   ['dataset.source', siteTrafficData],
  52.                   ['color', [color.lightBlue.base, color.green.lighten1]],
  53.                   ['legend.show', true],
  54.                   ['xAxis.axisLabel.show', true],
  55.                   ['yAxis.axisLabel.show', true],
  56.                   ['grid.left', '2%'],
  57.                   ['grid.bottom', '5%'],
  58.                   ['grid.right', '3%'],
  59.                   ['series[0].type', 'bar'],
  60.                   ['series[0].areaStyle', {}],
  61.                   ['series[0].smooth', true],
  62.                   ['series[1].smooth', true],
  63.                   ['series[1].type', 'bar'],
  64.                   ['series[1].areaStyle', {}],
  65.                 ]"
  66.                 height="400px"
  67.                 width="100%"
  68.                 >
  69.                 </e-chart>    
  70.             </div>
  71.           </v-widget>  
  72.         </v-flex>
  73.         <v-flex lg4 sm12 xs12>
  74.           <v-widget title="Top Location" content-bg="white">
  75.             <div slot="widget-content">
  76.                 <e-chart
  77.                 :path-option="[
  78.                   ['dataset.source', locationData],
  79.                   ['legend.bottom', '0'],
  80.                   ['color', [color.lightBlue.base, color.indigo.base, color.pink.base, color.green.base, color.cyan.base, color.teal.base]],
  81.                   ['xAxis.show', false],
  82.                   ['yAxis.show', false],
  83.                   ['series[0].type', 'pie'],
  84.                   ['series[0].avoidLabelOverlap', true],        
  85.                   ['series[0].radius', ['50%', '70%']],                      
  86.                 ]"
  87.                 height="400px"
  88.                 width="100%"
  89.                 >
  90.                 </e-chart>    
  91.             </div>
  92.           </v-widget>  
  93.         </v-flex>
  94.         <!-- social/weather card start -->
  95.         <v-flex lg4 sm12 xs12>
  96.           <profile-card>
  97.           </profile-card>
  98.         </v-flex>        
  99.         <v-flex lg4 sm12 xs12>
  100.           <box-chart
  101.             card-color="indigo"
  102.             title="Trending"
  103.             sub-title="10%"
  104.             icon="trending_up"
  105.             :data="siteTrafficData"
  106.             :chart-color="[color.indigo.lighten1]"
  107.             type="line"
  108.           >
  109.           </box-chart>
  110.           <box-chart class="mt-4"
  111.             card-color="pink"
  112.             title="Page views"
  113.             sub-title="10%"
  114.             icon="trending_up"
  115.             :data="siteTrafficData"
  116.             :chart-color="[color.pink.darken1, 'rgba(255,255,255,0.3)']"
  117.             gradient
  118.             type="area"
  119.           >
  120.           </box-chart>          
  121.         </v-flex>
  122.         <!-- statistic section -->
  123.         <v-flex lg4 sm12 xs12>
  124.           <linear-statistic
  125.             title="Sales"
  126.             sub-title="Sales increase"
  127.             icon="trending_up"
  128.             color="success"
  129.             :value="15"
  130.           >
  131.           </linear-statistic>
  132.           <linear-statistic class="my-4"
  133.             title="Orders"
  134.             sub-title="Increase"
  135.             icon="trending_up"
  136.             color="pink"
  137.             :value="30"
  138.           >
  139.           </linear-statistic>          
  140.           <linear-statistic class="my-4"
  141.             title="Revenue"
  142.             sub-title="Revenue increase"
  143.             icon="trending_up"
  144.             color="primary"
  145.             :value="50"
  146.           >
  147.           </linear-statistic>          
  148.           <linear-statistic class="mt-4"
  149.             title="Cost"
  150.             sub-title="Cost reduce"
  151.             icon="trending_down"
  152.             color="orange"
  153.             :value="25"
  154.           >
  155.           </linear-statistic>          
  156.         </v-flex>
  157.         <!-- Circle statistic -->
  158.         <v-flex lg4 sm12 xs12 v-for="(item,index) in trending" :key="'c-trending'+index">
  159.           <circle-statistic
  160.             :title="item.subheading"
  161.             :sub-title="item.headline"
  162.             :caption="item.caption"
  163.             :icon="item.icon.label"
  164.             :color="item.linear.color"
  165.             :value="item.linear.value"
  166.           >
  167.           </circle-statistic>            
  168.         </v-flex>    
  169.         <!-- acitivity/chat widget -->
  170.         <v-flex lg6 sm12 xs12>
  171.           <chat-window height="308px"></chat-window>
  172.         </v-flex>
  173.         <v-flex lg6 sm12 xs12>
  174.           <v-widget title="Activities" contentBg="white">
  175.             <div slot="widget-content">
  176.               <ol class="timeline timeline-activity timeline-point-sm timeline-content-right">
  177.                 <li class="timeline-block" v-for="(item, index) in activity" :key="index">
  178.                   <div class="timeline-point">
  179.                     <v-circle dot large :color="item.color"></v-circle>
  180.                   </div>
  181.                   <div class="timeline-content">
  182.                     <time datetime="2018" class="subheading">{{item.timeString}}</time>
  183.                     <div class="py-2 text--secondary" v-html="item.text"></div>
  184.                   </div>
  185.                 </li>
  186.               </ol>              
  187.             </div>
  188.           </v-widget>          
  189.         </v-flex>
  190.         <v-flex lg7 sm12 xs12>
  191.           <plain-table></plain-table>
  192.         </v-flex>
  193.         <v-flex lg5 sm12 xs12>
  194.           <plain-table-order></plain-table-order>
  195.         </v-flex>              
  196.       </v-layout>
  197.     </v-container>
  198.   </div>
  199. </template>
  200.  
  201. <script>
  202. import API from '@/api';
  203. import EChart from '@/components/chart/echart';
  204. import MiniStatistic from '@/components/widgets/statistic/MiniStatistic';
  205. import PostListCard from '@/components/widgets/card/PostListCard';
  206. import ProfileCard from '@/components/widgets/card/ProfileCard';
  207. import PostSingleCard from '@/components/widgets/card/PostSingleCard';
  208. import WeatherCard from '@/components/widgets/card/WeatherCard';
  209. import PlainTable from '@/components/widgets/list/PlainTable';
  210. import PlainTableOrder from '@/components/widgets/list/PlainTableOrder';
  211. import VWidget from '@/components/VWidget';
  212. import Material from 'vuetify/es5/util/colors';
  213. import VCircle from '@/components/circle/VCircle';
  214. import BoxChart from '@/components/widgets/chart/BoxChart';
  215. import ChatWindow from '@/components/chat/ChatWindow';
  216. import CircleStatistic from '@/components/widgets/statistic/CircleStatistic';
  217. import LinearStatistic from '@/components/widgets/statistic/LinearStatistic';
  218. export default {
  219.   components: {
  220.     VWidget,
  221.     MiniStatistic,
  222.     ChatWindow,
  223.     VCircle,
  224.     WeatherCard,
  225.     PostSingleCard,
  226.     PostListCard,
  227.     ProfileCard,
  228.     EChart,
  229.     BoxChart,
  230.     CircleStatistic,
  231.     LinearStatistic,
  232.     PlainTable,
  233.     PlainTableOrder    
  234.   },
  235.   data: () => ({
  236.     color: Material,
  237.     selectedTab: 'tab-1',
  238.     linearTrending: [
  239.       {
  240.         subheading: 'Sales',
  241.         headline: '2,55',
  242.         caption: 'increase',
  243.         percent: 15,
  244.         icon: {
  245.           label: 'trending_up',
  246.           color: 'success'
  247.         },
  248.         linear: {
  249.           value: 15,
  250.           color: 'success'
  251.         }
  252.       },
  253.       {
  254.         subheading: 'Revenue',
  255.         headline: '6,553',
  256.         caption: 'increase',
  257.         percent: 10,
  258.         icon: {
  259.           label: 'trending_down',
  260.           color: 'error'
  261.         },
  262.         linear: {
  263.           value: 15,
  264.           color: 'error'
  265.         }
  266.       },
  267.       {
  268.         subheading: 'Orders',
  269.         headline: '5,00',
  270.         caption: 'increase',
  271.         percent: 50,
  272.         icon: {
  273.           label: 'arrow_upward',
  274.           color: 'info'
  275.         },
  276.         linear: {
  277.           value: 50,
  278.           color: 'info'
  279.         }
  280.       }
  281.     ],    
  282.     trending: [
  283.       {
  284.         subheading: 'Email',
  285.         headline: '15+',
  286.         caption: 'email opens',
  287.         percent: 15,
  288.         icon: {
  289.           label: 'email',
  290.           color: 'info'
  291.         },
  292.         linear: {
  293.           value: 15,
  294.           color: 'info'
  295.         }
  296.       },        
  297.       {
  298.         subheading: 'Tasks',
  299.         headline: '90%',
  300.         caption: 'tasks completed.',
  301.         percent: 90,
  302.         icon: {
  303.           label: 'list',
  304.           color: 'primary'
  305.         },
  306.         linear: {
  307.           value: 90,
  308.           color: 'success'
  309.         }
  310.       },        
  311.       {
  312.         subheading: 'Issues',
  313.         headline: '100%',
  314.         caption: 'issues fixed.',
  315.         percent: 100,
  316.         icon: {
  317.           label: 'bug_report',
  318.           color: 'primary'
  319.         },
  320.         linear: {
  321.           value: 100,
  322.           color: 'error'
  323.         }
  324.       },        
  325.     ]    
  326.   }),
  327.   computed: {
  328.     activity () {
  329.       return API.getActivity();
  330.     },
  331.     posts () {
  332.       return API.getPost(3);
  333.     },
  334.     siteTrafficData () {
  335.       return API.getMonthVisit;
  336.     },
  337.     locationData () {
  338.       return API.getLocation;
  339.     }
  340.   },
  341.  
  342. };
  343. </script>
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top