<template> <v-container> <v-navigation-drawer v-model="drawerRight" fixed right clipped app > <!-- <v-list dense>--> <!-- <v-list-tile @click.stop="right = !right">--> <!-- <v-list-tile-action>--> <!-- <v-icon>exit_to_app</v-icon>--> <!-- </v-list-tile-action>--> <!-- <v-list-tile-content>--> <!-- <v-list-tile-title>Ope Temporary Drawer</v-list-tile-title>--> <!-- </v-list-tile-content>--> <!-- </v-list-tile>--> <v-list subheader> <v-subheader>列表</v-subheader> <v-list-tile v-for="item in items" :key="item.title" @click="switchTable(item)" avatar > <v-list-tile-action> <svg class="icon" aria-hidden="true"> <use :xlink:href="item.iconName"></use> </svg> </v-list-tile-action> <v-list-tile-content> <v-list-tile-title v-html="item.title"></v-list-tile-title> </v-list-tile-content> <v-list-tile-action> <v-icon v-show="item.active" color="green" >check </v-icon> </v-list-tile-action> </v-list-tile> </v-list> </v-navigation-drawer> <v-toolbar fixed app clipped-right > <!-- <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>--> <v-toolbar-title>仪表盘</v-toolbar-title> <v-spacer></v-spacer> <span class="body-2" @click.stop="drawerRight = !drawerRight" > <svg class="icon" aria-hidden="true" style="vertical-align: middle; margin-right: 5px"><use :xlink:href="selectedItem.iconName"></use></svg> <span style="vertical-align: middle; margin-right: 2px" v-text="selectedItem.title"></span> <v-icon style="vertical-align: middle">menu</v-icon> </span> <!-- <v-btn large--> <!-- left--> <!-- @click.stop="drawerRight = !drawerRight">--> <!-- 未返还税金分析--> <!-- <v-icon>menu</v-icon>--> <!-- </v-btn>--> <!-- <v-toolbar-side-icon @click.stop="drawerRight = !drawerRight"></v-toolbar-side-icon>--> </v-toolbar> <v-container ma-0 pa-0> <Tableau :url="chartUrl" width="100%" ref="tableau" :apiUrl="tableauApiUrl" > </Tableau> </v-container> </v-container> </template> <script> import Tableau from './Tableau' export default { data: () => ({ chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax', tableauApiUrl: require('../assets/tableaujs.js'), // tableauApiUrl: 'https://public.tableau.com/javascripts/api/tableau-2.2.2.min.js', drawer: null, drawerRight: null, right: false, left: false, items: [ { iconName: '#d-iconyihuankuanbufen', active: false, title: '税种未返还税金分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax', }, { iconName: '#d-iconyihuankuanbufen', active: false, title: '地区未返还税金分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictUnreturnedTax', }, { iconName: '#d-iconCompare', active: false, title: '未返还/返还后税金比较', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauUnreturnedAndReturnedTax', }, { iconName: '#d-iconCompare', active: false, title: '费用分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCostAnalysis', }, { iconName: '#d-iconhuaban', active: false, title: '地区利润总额/亏损额', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictProfitAndLoss', }, { iconName: '#d-iconhuaban', active: false, title: '公司利润总额/亏损额', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCompanyProfitAndLoss', }, { iconName: '#d-iconqita1', active: false, title: '司机/员工人数', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDriverAndEmployee', }, { iconName: '#d-iconqita1', active: false, title: '业务线GMV及补贴统计', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGmvAndSubsidy', }, { iconName: '#d-iconqita1', active: false, title: '档案归档情况', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauFileArrangement', }, { iconName: '#d-iconqita1', active: false, title: '国际税全球概览', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalOverview', }, { iconName: '#d-iconqita1', active: false, title: '国际税业务数据', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalBusiness', }, { iconName: "#d-iconmexico", active: false, title: '墨西哥税务分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauMexicanTax', }, { iconName: '#d-iconaodaliya', active: false, title: '澳洲税务分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauAustralianTax', }, { iconName: '#d-iconbaxi', active: false, title: '巴西税务分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauBrazilianTax', }, { iconName: '#d-iconqita', active: false, title: '其他国家税务分析', chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauOtherTaxAnalysis', }, ], selectedItem: null }), props: { source: String }, components: { Tableau }, created() { this.selectTable(this.items[0]) // Axios使用示例 // this.$axios({ // method: 'get', // url: 'https://api.coindesk.com/v1/bpi/currentprice.json', // }).then((response) => { //这里使用了ES6的语法 // console.log(response) //请求成功返回的数据 // }).catch((error) => { // console.log(error) //请求失败返回的数据 // }) }, mounted() { // console.log(process.env.VUE_APP_TABLEAU_API) }, methods: { selectTable(item) { if (this.selectedItem != null) { this.selectedItem.active = false } item.active = true this.selectedItem = item }, switchTable(item) { this.selectTable(item) this.drawerRight = !this.drawerRight this.chartUrl = this.selectedItem.chartUrl } } } </script> <style scoped> </style>