Analysis.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  1. <template>
  2. <div class="page-header-index-wide">
  3. <div v-if="roleCode == 'operator' || roleCode == 'touTiaoOperationManager'">
  4. <a-row :gutter="24">
  5. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  6. <chart-card :loading="loading" title="总销售额" total="¥126,560">
  7. <a-tooltip title="指标说明" slot="action">
  8. <a-icon type="info-circle-o" />
  9. </a-tooltip>
  10. <div>
  11. <trend flag="up" style="margin-right: 16px;">
  12. <span slot="term">周同比</span>
  13. 12%
  14. </trend>
  15. <trend flag="down">
  16. <span slot="term">日同比</span>
  17. 11%
  18. </trend>
  19. </div>
  20. <template slot="footer">
  21. 日均销售额
  22. <span>¥ 234.56</span>
  23. </template>
  24. </chart-card>
  25. </a-col>
  26. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  27. <chart-card :loading="loading" title="访问量" :total="8846 | NumberFormat">
  28. <a-tooltip title="指标说明" slot="action">
  29. <a-icon type="info-circle-o" />
  30. </a-tooltip>
  31. <div>
  32. <mini-area />
  33. </div>
  34. <template slot="footer">
  35. 日访问量
  36. <span>{{ '1234' | NumberFormat }}</span>
  37. </template>
  38. </chart-card>
  39. </a-col>
  40. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  41. <chart-card :loading="loading" title="支付笔数" :total="6560 | NumberFormat">
  42. <a-tooltip title="指标说明" slot="action">
  43. <a-icon type="info-circle-o" />
  44. </a-tooltip>
  45. <div>
  46. <mini-bar :height="40" />
  47. </div>
  48. <template slot="footer">
  49. 转化率
  50. <span>60%</span>
  51. </template>
  52. </chart-card>
  53. </a-col>
  54. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  55. <chart-card :loading="loading" title="运营活动效果" total="78%">
  56. <a-tooltip title="指标说明" slot="action">
  57. <a-icon type="info-circle-o" />
  58. </a-tooltip>
  59. <div>
  60. <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
  61. </div>
  62. <template slot="footer">
  63. <trend flag="down" style="margin-right: 16px;">
  64. <span slot="term">同周比</span>
  65. 12%
  66. </trend>
  67. <trend flag="up">
  68. <span slot="term">日环比</span>
  69. 80%
  70. </trend>
  71. </template>
  72. </chart-card>
  73. </a-col>
  74. </a-row>
  75. <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
  76. <div class="salesCard">
  77. <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
  78. <div class="extra-wrapper" slot="tabBarExtraContent">
  79. <div class="extra-item">
  80. <a>今日</a>
  81. <a>本周</a>
  82. <a>本月</a>
  83. <a>本年</a>
  84. </div>
  85. <a-range-picker :style="{ width: '256px' }" />
  86. </div>
  87. <a-tab-pane loading="true" tab="销售额" key="1">
  88. <a-row>
  89. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  90. <bar title="销售额排行" :dataSource="barData" />
  91. </a-col>
  92. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  93. <rank-list title="门店销售排行榜" :list="rankList" />
  94. </a-col>
  95. </a-row>
  96. </a-tab-pane>
  97. <a-tab-pane tab="访问量" key="2">
  98. <a-row>
  99. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  100. <bar title="销售额趋势" :dataSource="barData" />
  101. </a-col>
  102. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  103. <rank-list title="门店销售排行榜" :list="rankList" />
  104. </a-col>
  105. </a-row>
  106. </a-tab-pane>
  107. </a-tabs>
  108. </div>
  109. </a-card>
  110. <a-row>
  111. <a-col :span="24">
  112. <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
  113. <a-row>
  114. <a-col :span="6">
  115. <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
  116. </a-col>
  117. <a-col :span="2">
  118. <a-spin class="circle-cust">
  119. <a-icon slot="indicator" type="environment" style="font-size: 24px" />
  120. </a-spin>
  121. </a-col>
  122. <a-col :span="6">
  123. <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
  124. </a-col>
  125. <a-col :span="2">
  126. <a-spin class="circle-cust">
  127. <a-icon slot="indicator" type="team" style="font-size: 24px" />
  128. </a-spin>
  129. </a-col>
  130. <a-col :span="6">
  131. <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
  132. </a-col>
  133. <a-col :span="2">
  134. <a-spin class="circle-cust">
  135. <a-icon slot="indicator" type="rise" style="font-size: 24px" />
  136. </a-spin>
  137. </a-col>
  138. </a-row>
  139. <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
  140. </a-card>
  141. </a-col>
  142. </a-row>
  143. </div>
  144. <!-- <newHome v-if="roleCode == 'operator' || roleCode == 'touTiaoOperationManager'" /> -->
  145. <statistics v-else-if="roleCode == 'kuaishouOperationManager'" />
  146. <statistics v-else-if="roleCode == 'sale'||roleCode=='saleDirector'" />
  147. <statistics v-else-if="roleCode == 'admin'" />
  148. <Workbench v-else-if="roleCode == 'clip'" />
  149. <Workbench v-else-if="roleCode == 'plane'" />
  150. <!-- <newHome v-else-if="roleCode == 'admin'" /> -->
  151. </div>
  152. </template>
  153. <script>
  154. import ChartCard from '@/components/ChartCard'
  155. import ACol from 'ant-design-vue/es/grid/Col'
  156. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  157. import MiniArea from '@/components/chart/MiniArea'
  158. import MiniBar from '@/components/chart/MiniBar'
  159. import MiniProgress from '@/components/chart/MiniProgress'
  160. import RankList from '@/components/chart/RankList'
  161. import Bar from '@/components/chart/Bar'
  162. import LineChartMultid from '@/components/chart/LineChartMultid'
  163. import HeadInfo from '@/components/tools/HeadInfo.vue'
  164. import Trend from '@/components/Trend'
  165. import { getLoginfo, getVisitInfo } from '@/api/api'
  166. import newHome from '@/views/modules/Statistics/newHome.vue'
  167. import Workbench from '@/views/dashboard/Workbench.vue'
  168. import Statistics from '@/views/modules/Statistics/Statistics.vue'
  169. const rankList = []
  170. for (let i = 0; i < 7; i++) {
  171. rankList.push({
  172. name: '白鹭岛 ' + (i + 1) + ' 号店',
  173. total: 1234.56 - i * 100
  174. })
  175. }
  176. const barData = []
  177. for (let i = 0; i < 12; i += 1) {
  178. barData.push({
  179. x: `${i + 1}月`,
  180. y: Math.floor(Math.random() * 1000) + 200
  181. })
  182. }
  183. export default {
  184. name: 'Analysis',
  185. components: {
  186. ATooltip,
  187. ACol,
  188. ChartCard,
  189. MiniArea,
  190. MiniBar,
  191. MiniProgress,
  192. RankList,
  193. Bar,
  194. Trend,
  195. LineChartMultid,
  196. HeadInfo,
  197. newHome,
  198. Workbench,
  199. Statistics
  200. },
  201. data() {
  202. return {
  203. loading: true,
  204. center: null,
  205. rankList,
  206. barData,
  207. loginfo: {},
  208. visitFields: ['ip', 'visit'],
  209. visitInfo: [],
  210. indicator: <a-icon type="loading" style="font-size: 24px" spin />,
  211. roleCode: localStorage.getItem('roleCode')
  212. }
  213. },
  214. created() {
  215. setTimeout(() => {
  216. this.loading = !this.loading
  217. }, 1000)
  218. this.initLogInfo()
  219. },
  220. methods: {
  221. initLogInfo() {
  222. getLoginfo(null).then(res => {
  223. if (res.success) {
  224. Object.keys(res.result).forEach(key => {
  225. res.result[key] = res.result[key] + ''
  226. })
  227. this.loginfo = res.result
  228. }
  229. })
  230. getVisitInfo().then(res => {
  231. if (res.success) {
  232. console.log('aaaaaa', res.result)
  233. this.visitInfo = res.result
  234. }
  235. })
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="scss" scoped>
  241. .circle-cust {
  242. position: relative;
  243. top: 28px;
  244. left: -100%;
  245. }
  246. .extra-wrapper {
  247. line-height: 55px;
  248. padding-right: 24px;
  249. .extra-item {
  250. display: inline-block;
  251. margin-right: 24px;
  252. a {
  253. margin-left: 24px;
  254. }
  255. }
  256. }
  257. /* 首页访问量统计 */
  258. .head-info {
  259. position: relative;
  260. text-align: left;
  261. padding: 0 32px 0 0;
  262. min-width: 125px;
  263. &.center {
  264. text-align: center;
  265. padding: 0 32px;
  266. }
  267. span {
  268. color: rgba(0, 0, 0, 0.45);
  269. display: inline-block;
  270. font-size: 0.95rem;
  271. line-height: 42px;
  272. margin-bottom: 4px;
  273. }
  274. p {
  275. line-height: 42px;
  276. margin: 0;
  277. a {
  278. font-weight: 600;
  279. font-size: 1rem;
  280. }
  281. }
  282. }
  283. </style>