IndexChart.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. <template>
  2. <div class="page-header-index-wide">
  3. <a-row :gutter="24">
  4. <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
  5. <chart-card :loading="loading" total="所有任务">
  6. <div>
  7. <trend flag style="margin-right: 16px;">
  8. <div @click="zhengchang(1)">
  9. <span slot="term">待办</span>
  10. 12
  11. </div>
  12. </trend>
  13. <trend flag style="margin-right: 16px;">
  14. <div @click="zhengchang(2)">
  15. <span slot="term">进行中</span>
  16. 13
  17. </div>
  18. </trend>
  19. <trend flag>
  20. <div @click="zhengchang(3)">
  21. <span slot="term">完成</span>
  22. 11
  23. </div>
  24. </trend>
  25. </div>
  26. </chart-card>
  27. <span class="recent">[近30天]</span>
  28. <div class="numRecent">
  29. <div style="font-size:35px; color: #e91111;">123</div>
  30. <div style="font-size:20px; padding-top:8%; padding-left:5px;">项</div>
  31. </div>
  32. </a-col>
  33. <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
  34. <chart-card :loading="loading" total="待办任务">
  35. </chart-card>
  36. <div class="numRecent">
  37. <div style="font-size:35px; color: #e91111;">12</div>
  38. <div style="font-size:20px; padding-top:8%; padding-left:5px;">项</div>
  39. </div>
  40. </a-col>
  41. <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
  42. <chart-card :loading="loading" total="快捷入口">
  43. <div>
  44. <trend flag style="margin-right: 16px;">
  45. <a slot="term" @click="$router.push({path:'/itdmGongdanMaster/itdmGongdanMasterList'})">拆解工单</a>
  46. </trend>
  47. <trend flag style="margin-right: 16px;">
  48. <a slot="term" @click="$router.push({path:'/gongdandetail/itdmGongdanDetailList'})">工单确认</a>
  49. </trend>
  50. <trend flag>
  51. <a slot="term" @click="$router.push({path:'/gongdanshuju/ItdmGongdanShujuList'})">数据确认</a>
  52. </trend>
  53. </div>
  54. </chart-card>
  55. </a-col>
  56. </a-row>
  57. <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
  58. <div class="salesCard">
  59. <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
  60. <a-tab-pane loading="true" :tab="tab" key="1">
  61. <a-row>
  62. <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
  63. <bar title="销售额排行" :dataSource="barData"/>
  64. </a-col>
  65. <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
  66. <rank-list title="门店销售排行榜" :list="rankList"/>
  67. </a-col>
  68. </a-row>
  69. </a-tab-pane>
  70. </a-tabs>
  71. </div>
  72. </a-card>
  73. </div>
  74. </template>
  75. <script>
  76. import ChartCard from '@/components/ChartCard'
  77. import ACol from "ant-design-vue/es/grid/Col"
  78. import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  79. import MiniArea from '@/components/chart/MiniArea'
  80. import MiniBar from '@/components/chart/MiniBar'
  81. import MiniProgress from '@/components/chart/MiniProgress'
  82. import RankList from '@/components/chart/RankList'
  83. import Bar from '@/components/chart/Bar'
  84. import LineChartMultid from '@/components/chart/LineChartMultid'
  85. import HeadInfo from '@/components/tools/HeadInfo.vue'
  86. import Trend from '@/components/Trend'
  87. import { getLoginfo,getVisitInfo } from '@/api/api'
  88. const rankList = []
  89. for (let i = 0; i < 7; i++) {
  90. rankList.push({
  91. name: '白鹭岛 ' + (i+1) + ' 号店',
  92. total: 1234.56 - i * 100
  93. })
  94. }
  95. const barData = []
  96. for (let i = 0; i < 12; i += 1) {
  97. barData.push({
  98. x: `${i + 1}月`,
  99. y: Math.floor(Math.random() * 1000) + 200
  100. })
  101. }
  102. export default {
  103. name: "IndexChart",
  104. components: {
  105. ATooltip,
  106. ACol,
  107. ChartCard,
  108. MiniArea,
  109. MiniBar,
  110. MiniProgress,
  111. RankList,
  112. Bar,
  113. Trend,
  114. LineChartMultid,
  115. HeadInfo
  116. },
  117. data() {
  118. return {
  119. loading: true,
  120. tab: '待办',
  121. center: null,
  122. rankList,
  123. barData,
  124. loginfo:{},
  125. visitFields:['ip','visit'],
  126. visitInfo:[],
  127. indicator: <a-icon type="loading" style="font-size: 24px" spin />
  128. }
  129. },
  130. created() {
  131. setTimeout(() => {
  132. this.loading = !this.loading
  133. }, 1000)
  134. this.initLogInfo();
  135. },
  136. methods: {
  137. initLogInfo () {
  138. getLoginfo(null).then((res)=>{
  139. if(res.success){
  140. Object.keys(res.result).forEach(key=>{
  141. res.result[key] =res.result[key]+""
  142. })
  143. this.loginfo = res.result;
  144. }
  145. })
  146. getVisitInfo().then(res=>{
  147. if(res.success){
  148. this.visitInfo = res.result;
  149. }
  150. })
  151. },
  152. zhengchang(num){
  153. console.log(num)
  154. if (num == 1) {
  155. this.tab = '待办'
  156. }
  157. if (num == 2) {
  158. this.tab = '进行中'
  159. }
  160. if (num == 3) {
  161. this.tab = '完成'
  162. }
  163. // this.deviceOptions = []
  164. // console.log(this.deviceOptions)
  165. // var deOption = this.allDevOptions
  166. // if( !num && num == undefined ){
  167. // this.deviceOptions = this.allDevOptions
  168. // return false
  169. // }
  170. // for (var i = 0; i < deOption.length; i++) {
  171. // console.log(deOption[i].deviceStatus)
  172. // if(deOption[i].deviceStatus == num){
  173. // this.deviceOptions.push(deOption[i])
  174. // console.log(this.deviceOptions)
  175. // }
  176. // }
  177. },
  178. }
  179. }
  180. </script>
  181. <style lang="less" scoped>
  182. ::v-deep .total{
  183. width: 50%;
  184. }
  185. .recent{
  186. position: absolute;
  187. top: 29%;
  188. left: 32%;
  189. }
  190. .numRecent{
  191. height: 30%;
  192. width: 40%;
  193. // background-color: aquamarine;
  194. position: absolute;
  195. top: 12%;
  196. right: 8%;
  197. display: flex;
  198. justify-content: flex-end;
  199. }
  200. .circle-cust{
  201. position: relative;
  202. top: 28px;
  203. left: -100%;
  204. }
  205. .extra-wrapper {
  206. line-height: 55px;
  207. padding-right: 24px;
  208. .extra-item {
  209. display: inline-block;
  210. margin-right: 24px;
  211. a {
  212. margin-left: 24px;
  213. }
  214. }
  215. }
  216. /* 首页访问量统计 */
  217. .head-info {
  218. position: relative;
  219. text-align: left;
  220. padding: 0 32px 0 0;
  221. min-width: 125px;
  222. &.center {
  223. text-align: center;
  224. padding: 0 32px;
  225. }
  226. span {
  227. color: rgba(0, 0, 0, .45);
  228. display: inline-block;
  229. font-size: .95rem;
  230. line-height: 42px;
  231. margin-bottom: 4px;
  232. }
  233. p {
  234. line-height: 42px;
  235. margin: 0;
  236. a {
  237. font-weight: 600;
  238. font-size: 1rem;
  239. }
  240. }
  241. }
  242. </style>