Panel.vue 9.18 KB
Newer Older
Cheng's avatar
Cheng committed
1
<template>
sam.x.wang's avatar
sam.x.wang committed
2
    <v-container>
Cheng's avatar
Cheng committed
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
        <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>-->
sam.x.wang's avatar
sam.x.wang committed
19
            <v-list subheader >
Cheng's avatar
Cheng committed
20 21 22 23 24 25 26
                <v-subheader>列表</v-subheader>
                <v-list-tile
                        v-for="item in items"
                        :key="item.title"
                        @click="switchTable(item)"
                        avatar
                >
sam.x.wang's avatar
sam.x.wang committed
27
                    <v-list-tile-action >
Cheng's avatar
Cheng committed
28 29 30 31 32
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="item.iconName"></use>
                        </svg>
                    </v-list-tile-action>

sam.x.wang's avatar
sam.x.wang committed
33
                    <v-list-tile-content  >
Cheng's avatar
Cheng committed
34 35 36 37 38
                        <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"
sam.x.wang's avatar
sam.x.wang committed
39
                                color="#333333"
Cheng's avatar
Cheng committed
40 41 42 43 44 45 46 47 48 49 50
                        >check
                        </v-icon>
                    </v-list-tile-action>
                </v-list-tile>
            </v-list>

        </v-navigation-drawer>
        <v-toolbar
                fixed
                app
                clipped-right
sam.x.wang's avatar
sam.x.wang committed
51
                height="45"
sam.x.wang's avatar
sam.x.wang committed
52
                color="#ffffff"
53
                style="border-bottom: 1px solid #dddddd"
Cheng's avatar
Cheng committed
54
        >
sam.x.wang's avatar
sam.x.wang committed
55 56 57
            <!--<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
            <v-toolbar-title></v-toolbar-title>
            <v-spacer ></v-spacer>-->
Cheng's avatar
Cheng committed
58 59

            <span class="body-2"
sam.x.wang's avatar
sam.x.wang committed
60
                  @click.stop="drawerRight = !drawerRight" style="vertical-align: middle; margin-right: 5px; width:100%"
Cheng's avatar
Cheng committed
61
            >
sam.x.wang's avatar
sam.x.wang committed
62
                <svg class="icon" aria-hidden="true"  style="height:14px"><use
Cheng's avatar
Cheng committed
63
                        :xlink:href="selectedItem.iconName"></use></svg>
sam.x.wang's avatar
sam.x.wang committed
64 65
                <span style="vertical-align: middle; margin-left: 10px;font-weight:normal; font-size:12px/16px" v-text="selectedItem.title"></span>
                <img src="../assets/menu.svg" style="vertical-align: middle;margin-top:5px;float:right;height:14px;width:14px;color:#333333;"></img>
Cheng's avatar
Cheng committed
66 67 68 69 70 71 72 73 74 75
            </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>
sam.x.wang's avatar
sam.x.wang committed
76
        <v-container ma-0 pa-0 >
Cheng's avatar
Cheng committed
77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
            <Tableau :url="chartUrl"
                     width="100%"
                     ref="tableau"
                     :apiUrl="tableauApiUrl"
            >
            </Tableau>
        </v-container>
    </v-container>
</template>

<script>
    import Tableau from './Tableau'

    export default {
        data: () => ({
Cheng C Yang's avatar
Cheng C Yang committed
92
            chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax',
Cheng's avatar
Cheng committed
93 94 95 96 97 98 99 100 101 102
            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,
sam.x.wang's avatar
sam.x.wang committed
103
                    title: '税负分析',
Cheng C Yang's avatar
Cheng C Yang committed
104
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauTaxCategoryUnreturnedTax',
Cheng's avatar
Cheng committed
105 106 107 108 109
                },
                {
                    iconName: '#d-iconyihuankuanbufen',
                    active: false,
                    title: '地区未返还税金分析',
Cheng C Yang's avatar
Cheng C Yang committed
110
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictUnreturnedTax',
Cheng's avatar
Cheng committed
111 112 113 114 115
                },
                {
                    iconName: '#d-iconCompare',
                    active: false,
                    title: '未返还/返还后税金比较',
Cheng C Yang's avatar
Cheng C Yang committed
116
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauUnreturnedAndReturnedTax',
Cheng's avatar
Cheng committed
117 118 119 120 121
                },
                {
                    iconName: '#d-iconCompare',
                    active: false,
                    title: '费用分析',
Cheng C Yang's avatar
Cheng C Yang committed
122
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCostAnalysis',
Cheng's avatar
Cheng committed
123 124 125 126
                },
                {
                    iconName: '#d-iconhuaban',
                    active: false,
Cheng's avatar
Cheng committed
127
                    title: '地区利润总额/亏损额',
Cheng C Yang's avatar
Cheng C Yang committed
128
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDistrictProfitAndLoss',
Cheng's avatar
Cheng committed
129 130 131 132 133
                },
                {
                    iconName: '#d-iconhuaban',
                    active: false,
                    title: '公司利润总额/亏损额',
Cheng C Yang's avatar
Cheng C Yang committed
134
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauCompanyProfitAndLoss',
Cheng's avatar
Cheng committed
135 136 137 138
                },
                {
                    iconName: '#d-iconqita1',
                    active: false,
Cheng's avatar
Cheng committed
139
                    title: '司机/员工人数',
Cheng C Yang's avatar
Cheng C Yang committed
140
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauDriverAndEmployee',
Cheng's avatar
Cheng committed
141 142
                },
                {
Cheng's avatar
Cheng committed
143 144 145
                    iconName: '#d-iconqita1',
                    active: false,
                    title: '业务线GMV及补贴统计',
Cheng C Yang's avatar
Cheng C Yang committed
146
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGmvAndSubsidy',
Cheng's avatar
Cheng committed
147 148 149
                },
                {
                    iconName: '#d-iconqita1',
Cheng's avatar
Cheng committed
150 151
                    active: false,
                    title: '档案归档情况',
Cheng C Yang's avatar
Cheng C Yang committed
152
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauFileArrangement',
Cheng's avatar
Cheng committed
153 154
                },
                {
Cheng's avatar
Cheng committed
155
                    iconName: '#d-iconqita1',
Cheng's avatar
Cheng committed
156
                    active: false,
Cheng's avatar
Cheng committed
157
                    title: '国际税全球概览',
Cheng C Yang's avatar
Cheng C Yang committed
158
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalOverview',
Cheng's avatar
Cheng committed
159
                },
Cheng's avatar
Cheng committed
160

Cheng's avatar
Cheng committed
161
                {
Cheng's avatar
Cheng committed
162
                    iconName: '#d-iconqita1',
Cheng's avatar
Cheng committed
163
                    active: false,
Cheng's avatar
Cheng committed
164
                    title: '国际税业务数据',
Cheng C Yang's avatar
Cheng C Yang committed
165
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauGlobalBusiness',
Cheng's avatar
Cheng committed
166 167 168 169 170
                },
                {
                    iconName: "#d-iconmexico",
                    active: false,
                    title: '墨西哥税务分析',
Cheng C Yang's avatar
Cheng C Yang committed
171
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauMexicanTax',
Cheng's avatar
Cheng committed
172 173 174 175 176
                },
                {
                    iconName: '#d-iconaodaliya',
                    active: false,
                    title: '澳洲税务分析',
Cheng C Yang's avatar
Cheng C Yang committed
177
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauAustralianTax',
Cheng's avatar
Cheng committed
178 179 180 181 182
                },
                {
                    iconName: '#d-iconbaxi',
                    active: false,
                    title: '巴西税务分析',
Cheng C Yang's avatar
Cheng C Yang committed
183
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauBrazilianTax',
Cheng's avatar
Cheng committed
184 185 186 187 188
                },
                {
                    iconName: '#d-iconqita',
                    active: false,
                    title: '其他国家税务分析',
Cheng C Yang's avatar
Cheng C Yang committed
189
                    chartUrl: process.env.VUE_APP_TABLEAU_API + 'getTableauOtherTaxAnalysis',
Cheng's avatar
Cheng committed
190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205
                },
            ],
            selectedItem: null
        }),

        props: {
            source: String
        },

        components: {
            Tableau
        },

        created() {
            this.selectTable(this.items[0])

Cheng C Yang's avatar
Cheng C Yang committed
206 207 208 209 210 211 212 213 214
            // 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)       //请求失败返回的数据
            // })
Cheng's avatar
Cheng committed
215 216 217 218 219

        },

        mounted() {

Cheng C Yang's avatar
Cheng C Yang committed
220
            // console.log(process.env.VUE_APP_TABLEAU_API)
Cheng's avatar
Cheng committed
221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247

        },

        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>

sam.x.wang's avatar
sam.x.wang committed
248

Cheng's avatar
Cheng committed
249
</style>