Workbench.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  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="
  61. dataCount.refuseAudit + dataCount.passAudit > 0
  62. ? ((dataCount.passAudit / (dataCount.refuseAudit + dataCount.passAudit)) * 100).toFixed(2) + '%'
  63. : '0%'
  64. "
  65. >
  66. <a-tooltip title="指标说明" slot="action">
  67. <a-icon type="info-circle-o" />
  68. </a-tooltip>
  69. <!-- <div>
  70. <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
  71. </div> -->
  72. <template slot="footer">
  73. <span> 通过率涨幅</span>
  74. </template>
  75. </chart-card>
  76. </a-col>
  77. </a-row>
  78. <!-- <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
  79. <div class="salesCard">
  80. <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
  81. <div class="extra-wrapper" slot="tabBarExtraContent">
  82. <div class="extra-item">
  83. <a>今日</a>
  84. <a>本周</a>
  85. <a>本月</a>
  86. <a>本年</a>
  87. </div>
  88. <a-range-picker :style="{ width: '256px' }" />
  89. </div>
  90. <a-tab-pane loading="true" tab="销售额" key="1">
  91. <a-row>
  92. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  93. <bar title="销售额排行" :dataSource="barData" />
  94. </a-col>
  95. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  96. <rank-list title="门店销售排行榜" :list="rankList" />
  97. </a-col>
  98. </a-row>
  99. </a-tab-pane>
  100. <a-tab-pane tab="访问量" key="2">
  101. <a-row>
  102. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  103. <bar title="销售额趋势" :dataSource="barData" />
  104. </a-col>
  105. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  106. <rank-list title="门店销售排行榜" :list="rankList" />
  107. </a-col>
  108. </a-row>
  109. </a-tab-pane>
  110. </a-tabs>
  111. </div>
  112. </a-card>
  113. <a-row>
  114. <a-col :span="24">
  115. <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
  116. <a-row>
  117. <a-col :span="6">
  118. <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
  119. </a-col>
  120. <a-col :span="2">
  121. <a-spin class="circle-cust">
  122. <a-icon slot="indicator" type="environment" style="font-size: 24px" />
  123. </a-spin>
  124. </a-col>
  125. <a-col :span="6">
  126. <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
  127. </a-col>
  128. <a-col :span="2">
  129. <a-spin class="circle-cust">
  130. <a-icon slot="indicator" type="team" style="font-size: 24px" />
  131. </a-spin>
  132. </a-col>
  133. <a-col :span="6">
  134. <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
  135. </a-col>
  136. <a-col :span="2">
  137. <a-spin class="circle-cust">
  138. <a-icon slot="indicator" type="rise" style="font-size: 24px" />
  139. </a-spin>
  140. </a-col>
  141. </a-row>
  142. <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
  143. </a-card>
  144. </a-col>
  145. </a-row> -->
  146. </div>
  147. </template>
  148. <script>
  149. import ChartCard from '@/components/ChartCard'
  150. import ACol from 'ant-design-vue/es/grid/Col'
  151. import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
  152. import MiniArea from '@/components/chart/MiniArea'
  153. import MiniBar from '@/components/chart/MiniBar'
  154. import MiniProgress from '@/components/chart/MiniProgress'
  155. import RankList from '@/components/chart/RankList'
  156. import Bar from '@/components/chart/Bar'
  157. import LineChartMultid from '@/components/chart/LineChartMultid'
  158. import HeadInfo from '@/components/tools/HeadInfo.vue'
  159. import Trend from '@/components/Trend'
  160. import { getAction } from '@/api/manage'
  161. import { mapGetters } from 'vuex'
  162. const barData = []
  163. for (let i = 0; i < 12; i += 1) {
  164. barData.push({
  165. x: `${i + 1}月`,
  166. y: Math.floor(Math.random() * 1000) + 200
  167. })
  168. }
  169. export default {
  170. name: 'Workbench',
  171. components: {
  172. ATooltip,
  173. ACol,
  174. ChartCard,
  175. MiniArea,
  176. MiniBar,
  177. MiniProgress,
  178. RankList,
  179. Bar,
  180. Trend,
  181. LineChartMultid,
  182. HeadInfo
  183. },
  184. data: function() {
  185. return {
  186. title: '工作台',
  187. loginfo: {},
  188. barData,
  189. visitInfo: [],
  190. visitFields: ['ip', 'visit'],
  191. loading: false,
  192. rankList: [],
  193. dataCount: {},
  194. a: ''
  195. }
  196. },
  197. methods: {
  198. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  199. toList(key) {
  200. localStorage.setItem('key', key)
  201. this.$router.replace({ path: '/modules/material/materialList' })
  202. }
  203. },
  204. created() {
  205. getAction('/ctop/materialInfo/report', { userId: this.userInfo().id }).then(res => {
  206. this.dataCount = res
  207. })
  208. // /ctop/materialInfo/report
  209. }
  210. }
  211. </script>