Workbench.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <style></style>
  2. <template>
  3. <div class="Workbench">
  4. <a-row class="image-list-heading vm-panel">
  5. <a-row>
  6. <div class="panel-heading">{{ title }}</div>
  7. </a-row>
  8. </a-row>
  9. <a-row :gutter="24" style="margin-top:15px">
  10. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  11. <chart-card :loading="loading" title="未审核数量" :total="dataCount.waitAudit + ''">
  12. <a-tooltip title="指标说明" slot="action">
  13. <a-icon type="info-circle-o" />
  14. </a-tooltip>
  15. <!-- <div>
  16. <trend flag="up" style="margin-right: 16px;">
  17. <span slot="term">周同比</span>
  18. 12%
  19. </trend>
  20. <trend flag="down">
  21. <span slot="term">日同比</span>
  22. 11%
  23. </trend>
  24. </div> -->
  25. <template slot="footer">
  26. <a href="javascript:;" @click="toList('0')">查看详情</a>
  27. </template>
  28. </chart-card>
  29. </a-col>
  30. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  31. <chart-card :loading="loading" title="审核通过" :total="dataCount.passAudit + ''">
  32. <a-tooltip title="指标说明" slot="action">
  33. <a-icon type="info-circle-o" />
  34. </a-tooltip>
  35. <!-- <div>
  36. <mini-area />
  37. </div> -->
  38. <template slot="footer">
  39. <a href="javascript:;" @click="toList('1')">查看详情</a>
  40. </template>
  41. </chart-card>
  42. </a-col>
  43. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  44. <chart-card :loading="loading" title="待修改" :total="dataCount.refuseAudit + ''">
  45. <a-tooltip title="指标说明" slot="action">
  46. <a-icon type="info-circle-o" />
  47. </a-tooltip>
  48. <!-- <div>
  49. <mini-bar :height="40" />
  50. </div> -->
  51. <template slot="footer">
  52. <a href="javascript:;" @click="toList('2')">查看详情</a>
  53. </template>
  54. </chart-card>
  55. </a-col>
  56. <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
  57. <chart-card
  58. :loading="loading"
  59. title="运营审核通过率"
  60. :total="((dataCount.passAudit / (dataCount.refuseAudit + dataCount.passAudit)) * 100).toFixed(2) + '%'"
  61. >
  62. <a-tooltip title="指标说明" slot="action">
  63. <a-icon type="info-circle-o" />
  64. </a-tooltip>
  65. <!-- <div>
  66. <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
  67. </div> -->
  68. <template slot="footer">
  69. <span> 通过率涨幅</span>
  70. </template>
  71. </chart-card>
  72. </a-col>
  73. </a-row>
  74. <!-- <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
  75. <div class="salesCard">
  76. <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
  77. <div class="extra-wrapper" slot="tabBarExtraContent">
  78. <div class="extra-item">
  79. <a>今日</a>
  80. <a>本周</a>
  81. <a>本月</a>
  82. <a>本年</a>
  83. </div>
  84. <a-range-picker :style="{ width: '256px' }" />
  85. </div>
  86. <a-tab-pane loading="true" tab="销售额" key="1">
  87. <a-row>
  88. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  89. <bar title="销售额排行" :dataSource="barData" />
  90. </a-col>
  91. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  92. <rank-list title="门店销售排行榜" :list="rankList" />
  93. </a-col>
  94. </a-row>
  95. </a-tab-pane>
  96. <a-tab-pane tab="访问量" key="2">
  97. <a-row>
  98. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  99. <bar title="销售额趋势" :dataSource="barData" />
  100. </a-col>
  101. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  102. <rank-list title="门店销售排行榜" :list="rankList" />
  103. </a-col>
  104. </a-row>
  105. </a-tab-pane>
  106. </a-tabs>
  107. </div>
  108. </a-card>
  109. <a-row>
  110. <a-col :span="24">
  111. <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
  112. <a-row>
  113. <a-col :span="6">
  114. <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
  115. </a-col>
  116. <a-col :span="2">
  117. <a-spin class="circle-cust">
  118. <a-icon slot="indicator" type="environment" style="font-size: 24px" />
  119. </a-spin>
  120. </a-col>
  121. <a-col :span="6">
  122. <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
  123. </a-col>
  124. <a-col :span="2">
  125. <a-spin class="circle-cust">
  126. <a-icon slot="indicator" type="team" style="font-size: 24px" />
  127. </a-spin>
  128. </a-col>
  129. <a-col :span="6">
  130. <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
  131. </a-col>
  132. <a-col :span="2">
  133. <a-spin class="circle-cust">
  134. <a-icon slot="indicator" type="rise" style="font-size: 24px" />
  135. </a-spin>
  136. </a-col>
  137. </a-row>
  138. <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
  139. </a-card>
  140. </a-col>
  141. </a-row> -->
  142. </div>
  143. </template>
  144. <script>
  145. import ChartCard from '@/components/ChartCard'
  146. import ACol from 'ant-design-vue/es/grid/Col'
  147. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  148. import MiniArea from '@/components/chart/MiniArea'
  149. import MiniBar from '@/components/chart/MiniBar'
  150. import MiniProgress from '@/components/chart/MiniProgress'
  151. import RankList from '@/components/chart/RankList'
  152. import Bar from '@/components/chart/Bar'
  153. import LineChartMultid from '@/components/chart/LineChartMultid'
  154. import HeadInfo from '@/components/tools/HeadInfo.vue'
  155. import Trend from '@/components/Trend'
  156. import { getAction } from '@/api/manage'
  157. import { mapGetters } from 'vuex'
  158. const barData = []
  159. for (let i = 0; i < 12; i += 1) {
  160. barData.push({
  161. x: `${i + 1}月`,
  162. y: Math.floor(Math.random() * 1000) + 200
  163. })
  164. }
  165. export default {
  166. name: 'Workbench',
  167. components: {
  168. ATooltip,
  169. ACol,
  170. ChartCard,
  171. MiniArea,
  172. MiniBar,
  173. MiniProgress,
  174. RankList,
  175. Bar,
  176. Trend,
  177. LineChartMultid,
  178. HeadInfo
  179. },
  180. data: function() {
  181. return {
  182. title: '工作台',
  183. loginfo: {},
  184. barData,
  185. visitInfo: [],
  186. visitFields: ['ip', 'visit'],
  187. loading: false,
  188. rankList: [],
  189. dataCount: {},
  190. a: ''
  191. }
  192. },
  193. methods: {
  194. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  195. toList(key) {
  196. localStorage.setItem('key', key)
  197. this.$router.replace({ path: '/modules/material/materialList' })
  198. }
  199. },
  200. created() {
  201. getAction('/ctop/materialInfo/report', { userId: this.userInfo().id }).then(res => {
  202. this.dataCount = res
  203. })
  204. // /ctop/materialInfo/report
  205. }
  206. }
  207. </script>