index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
  1. <template>
  2. <div class="dashboard-editor-container">
  3. <!--超级管理员-->
  4. <div v-if="userType==10000">
  5. <!--网站,内容,公共栏目数量 start------------------------------------------>
  6. <el-row :gutter="32">
  7. <el-col :xs="24" :sm="24" :lg="8">
  8. <div class="topWindowBox">
  9. <div class="twbTitle">
  10. <div class="twbIconbgRed">
  11. <img src="@/assets/index/twbIconbgBlue.png"/>
  12. </div>
  13. 网站数量
  14. </div>
  15. <div class="twbNumber">{{topData.website.count}}</div>
  16. <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +12% <span>较上周</span></div> -->
  17. </div>
  18. </el-col>
  19. <el-col :xs="24" :sm="24" :lg="8">
  20. <div class="topWindowBox">
  21. <div class="twbTitle">
  22. <div class="twbIconbgBlue">
  23. <img src="@/assets/index/twbIconbgRed.png"/>
  24. </div>
  25. 文章发布数量
  26. </div>
  27. <div class="twbNumber">{{topData.article.count}}</div>
  28. <!-- <div class="twbStatus"><img src="@/assets/index/arrow-up.png"/> +18% <span>较昨天</span></div> -->
  29. </div>
  30. </el-col>
  31. <el-col :xs="24" :sm="24" :lg="8">
  32. <div class="topWindowBox">
  33. <div class="twbTitle">
  34. <div class="twbIconbgPurple">
  35. <img src="@/assets/index/twbIconbgPurple.png"/>
  36. </div>
  37. 公共栏目数量
  38. </div>
  39. <div class="twbNumber">{{topData.category.count}}</div>
  40. <!-- <div class="twbStatusDown"><img src="@/assets/index/arrow-down.png"/> -2% <span>较上个月</span></div> -->
  41. </div>
  42. </el-col>
  43. </el-row>
  44. <!--网站,内容,公共栏目数量 end------------------------------------------>
  45. <!--chart start------------------------------------------>
  46. <el-row :gutter="32">
  47. <el-col :xs="24" :sm="24" :lg="16">
  48. <div class="chartBox">
  49. <div class="chartTitle">平台文章增长数量</div>
  50. <el-row style="background:#fff;padding:16px 16px 0;">
  51. <line-chart :chart-data="chartData.lineChartData"/>
  52. </el-row>
  53. </div>
  54. </el-col>
  55. <el-col :xs="24" :sm="24" :lg="8">
  56. <div class="chartBox">
  57. <div class="chartTitle">用户类型</div>
  58. <div class="chart-wrapper">
  59. <ring-chart :chart-data="chartData.ringChartData"/>
  60. </div>
  61. </div>
  62. </el-col>
  63. </el-row>
  64. <!--chart end------------------------------------------>
  65. </div>
  66. <!--调研员-->
  67. <div v-if="userType==4">
  68. <el-row :gutter="32">
  69. <el-col :xs="24" :sm="24" :lg="24">
  70. <div class="chartBox">
  71. <div class="chartTitle">投诉举报增长数量</div>
  72. <el-row style="background:#fff;padding:16px 16px 0;">
  73. <line-chart :chart-data="chartData.lineChartData"/>
  74. </el-row>
  75. </div>
  76. </el-col>
  77. </el-row>
  78. </div>
  79. <!--个人会员-->
  80. <div v-if="userType==1">
  81. <el-row :gutter="32">
  82. <el-col :xs="24" :sm="24" :lg="24">
  83. <div class="noData">
  84. 欢迎使用恒星管理平台
  85. </div>
  86. </el-col>
  87. </el-row>
  88. </div>
  89. </div>
  90. </template>
  91. <script>
  92. // import GithubCorner from '@/components/GithubCorner'
  93. // import PanelGroup from './components/PanelGroup'
  94. import LineChart from './components/LineChart'//折线图
  95. // import RaddarChart from './components/RaddarChart'
  96. // import PieChart from './components/PieChart'
  97. // import BarChart from './components/BarChart'
  98. // import TransactionTable from './components/TransactionTable'
  99. // import TodoList from './components/TodoList'
  100. // import BoxCard from './components/BoxCard'
  101. import RingChart from './components/RingChart'//圆环图
  102. export default {
  103. name: 'DashboardAdmin',
  104. components: {
  105. // GithubCorner,
  106. // PanelGroup,
  107. LineChart,
  108. // RaddarChart,
  109. // PieChart,
  110. // BarChart,
  111. // TransactionTable,
  112. // TodoList,
  113. // BoxCard,
  114. RingChart
  115. },
  116. data() {
  117. return {
  118. userType:0,//用户身份
  119. topData:{
  120. website:{//网站
  121. count:0,//总数
  122. growth_rate:0//增长数
  123. },
  124. article:{//文章
  125. count:0,//总数
  126. growth_rate:0//增长数
  127. },
  128. category:{//栏目
  129. count:0,//总数
  130. growth_rate:0//增长数
  131. }
  132. },
  133. chartData:{
  134. lineChartData:[],//折线图数据
  135. ringChartData:[]//圆环图数据
  136. }
  137. }
  138. },
  139. methods: {
  140. //获取用户身份信息
  141. getUserInfo(fun){
  142. this.$store.dispatch('public/getInfo').then(res=> {
  143. console.log(res)
  144. this.userType = res.data.type_id;
  145. //if(res.data.type_id==10000){}//管理员
  146. //if(res.data.type_id==4){}//调研员
  147. //个人会员=1 政务会员=2 企业会员=3 调研员=4 管理员=10000 游客=20000
  148. }).catch(() => {
  149. this.$message({
  150. type: 'info',
  151. message: '网络错误,请重试!'
  152. });
  153. })
  154. fun();
  155. },
  156. getData(){
  157. //获取首页数据
  158. this.$store.dispatch('public/getAdminIndex').then(res=> {
  159. //如果是调研员就不显示其他的
  160. if(this.userType==4){
  161. this.chartData.lineChartData = res.data.letterOfComplaintList;
  162. }else{
  163. this.topData.article.count = res.data.article.count;
  164. this.topData.category.count = res.data.category.count;
  165. this.topData.website.count = res.data.website.count;
  166. this.chartData.lineChartData = res.data.monthArticle;
  167. this.chartData.ringChartData = res.data.userType;
  168. }
  169. })
  170. },
  171. },
  172. mounted(){
  173. //先获取用户身份
  174. this.getUserInfo(this.getData)
  175. //再获取数据
  176. // this.getData()
  177. }
  178. }
  179. </script>
  180. <style lang="less" scoped>
  181. @title: #212227;
  182. @bgColor: #FFFFFF;
  183. .topWindowBox{
  184. background:@bgColor;
  185. border-Radius:20px;
  186. height:160px;
  187. width:100%;
  188. margin-bottom:30px;
  189. padding:25px;
  190. box-sizing: border-box;
  191. .twbTitle {
  192. display:flex;
  193. align-items: center;
  194. font-size:16px;
  195. color:@title;
  196. .twbIconbgRed,.twbIconbgBlue,.twbIconbgPurple{
  197. width: 40px;
  198. height: 40px;
  199. border-radius: 50%;
  200. margin-right: 15px;
  201. }
  202. // .twbIconbgRed {
  203. // background: #EA79BA;
  204. // }
  205. // .twbIconbgBlue {
  206. // background: #6DACE7;
  207. // }
  208. // .twbIconbgPurple{
  209. // background: #AA7AEB;
  210. // }
  211. }
  212. .twbNumber {
  213. font-size: 30px;
  214. margin-top:32px;
  215. font-weight: 1000;
  216. }
  217. .twbStatus,.twbStatusDown {
  218. font-size:14px;
  219. margin-top: 35px;
  220. display:flex;
  221. img {
  222. display: block;
  223. margin-right: 4px;
  224. }
  225. span {
  226. color:#707B81;
  227. margin-left: 8px;
  228. }
  229. }
  230. .twbStatus {
  231. color:#23C581;
  232. }
  233. .twbStatusDown {
  234. color:#E74545
  235. }
  236. }
  237. .chartBox {
  238. width: 100%;
  239. height: 440px;
  240. border-radius: 20px;
  241. overflow: hidden;
  242. background-color: @bgColor;
  243. .chartTitle {
  244. color: @title;
  245. padding: 30px 30px 0 30px;
  246. font-size: 16px;
  247. }
  248. }
  249. .noData {
  250. color: #CCCCCC;
  251. font-size: 32px;
  252. font-weight: bold;
  253. text-align: center;
  254. height: 740px;
  255. line-height: 740px;
  256. }
  257. .dashboard-editor-container {
  258. padding: 32px;
  259. background-color: rgb(240, 242, 245);
  260. position: relative;
  261. .github-corner {
  262. position: absolute;
  263. top: 0px;
  264. border: 0;
  265. right: 0;
  266. }
  267. .chart-wrapper {
  268. background: #fff;
  269. padding: 16px 16px 0;
  270. margin-bottom: 32px;
  271. }
  272. }
  273. @media (max-width:1024px) {
  274. .chart-wrapper {
  275. padding: 8px;
  276. }
  277. }
  278. </style>