index.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
  1. <template>
  2. <div class="dashboard-editor-container">
  3. <!-- <github-corner class="github-corner" /> -->
  4. <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
  5. <el-row :gutter="20">
  6. <!-- <el-col :span="8">
  7. <el-card class="box-card">
  8. <div slot="header" class="clearfixs">
  9. <span></span>
  10. </div>
  11. <instruChart style="height: 150px"/>
  12. </el-card>
  13. </el-col> -->
  14. <el-col style="margin-bottom: 20px;" :span="24">
  15. <el-card class="box-card">
  16. <div slot="header" class="clearfixs">
  17. <span>GPU使用率</span>
  18. </div>
  19. <LineChart :data="chartData" style="height: 350px"></LineChart>
  20. </el-card>
  21. </el-col>
  22. <el-col :span="16">
  23. <el-card class="box-card">
  24. <div slot="header" class="clearfixs header_sel">
  25. <span>知识库构成</span>
  26. <div>
  27. <el-select
  28. v-model="kenValue"
  29. @change="kenChange"
  30. placeholder="请选择"
  31. >
  32. <el-option
  33. v-for="item in kenList"
  34. :key="item.id"
  35. :label="item.name"
  36. :value="item.id"
  37. >
  38. </el-option>
  39. </el-select>
  40. </div>
  41. </div>
  42. <!-- <LineChart :data="chartData" style="height: 350px"></LineChart> -->
  43. <BarChart :kenValue="kenVal" style="height: 350px"></BarChart>
  44. </el-card>
  45. </el-col>
  46. <el-col :span="8">
  47. <el-card class="box-card">
  48. <div slot="header" class="clearfixs">
  49. <span>文件种类占比</span>
  50. </div>
  51. <pie-chart style="height: 366px" />
  52. </el-card>
  53. </el-col>
  54. </el-row>
  55. <el-row :gutter="20" style="margin-top: 20px">
  56. <!-- <el-col :span="8">
  57. <el-card class="box-card">
  58. <div slot="header" class="clearfixs">
  59. <span>知识库热门标签</span>
  60. </div>
  61. <TagCloud :tags="tags" />
  62. </el-card>
  63. </el-col> -->
  64. <el-col :span="24">
  65. <el-card class="box-card">
  66. <div slot="header" class="clearfixs">
  67. <span>最近访问的文件</span>
  68. </div>
  69. <RecentFile style="height: 350px" />
  70. </el-card>
  71. </el-col>
  72. </el-row>
  73. <!-- <transaction-table /> -->
  74. </div>
  75. </template>
  76. <script>
  77. import GithubCorner from "@/components/GithubCorner";
  78. import PanelGroup from "./components/PanelGroup";
  79. import LineChart from "./components/LineChart";
  80. import RaddarChart from "./components/RaddarChart";
  81. import PieChart from "./components/PieChart";
  82. import BarChart from "./components/BarChart";
  83. import TransactionTable from "./components/TransactionTable";
  84. import TodoList from "./components/TodoList";
  85. import BoxCard from "./components/BoxCard";
  86. import TagCloud from "./components/tagCloud.vue";
  87. import RecentFile from "./components/recentFile.vue";
  88. import instruChart from "./components/instruChart.vue"
  89. import { listBuckets, structure_count } from "@/api/knowledge";
  90. import { mapState } from 'vuex';
  91. const lineChartData = {
  92. newVisitis: {
  93. expectedData: [100, 120, 161, 134, 105, 160, 165],
  94. actualData: [120, 82, 91, 154, 162, 140, 145],
  95. },
  96. messages: {
  97. expectedData: [200, 192, 120, 144, 160, 130, 140],
  98. actualData: [180, 160, 151, 106, 145, 150, 130],
  99. },
  100. purchases: {
  101. expectedData: [80, 100, 121, 104, 105, 90, 100],
  102. actualData: [120, 90, 100, 138, 142, 130, 130],
  103. },
  104. shoppings: {
  105. expectedData: [130, 140, 141, 142, 145, 150, 160],
  106. actualData: [120, 82, 91, 154, 162, 140, 130],
  107. },
  108. };
  109. export default {
  110. name: "DashboardAdmin",
  111. components: {
  112. GithubCorner,
  113. PanelGroup,
  114. LineChart,
  115. RaddarChart,
  116. PieChart,
  117. BarChart,
  118. TransactionTable,
  119. TodoList,
  120. BoxCard,
  121. TagCloud,
  122. RecentFile,
  123. instruChart
  124. },
  125. data() {
  126. return {
  127. lineChartData: lineChartData.newVisitis,
  128. tags: [
  129. "Figma",
  130. "Adobe XD",
  131. "PSD Editor",
  132. "Employer",
  133. "Online Jobs",
  134. "Remote Work",
  135. "Salary",
  136. "Tips",
  137. "Income",
  138. "Develop",
  139. "App",
  140. "Digital",
  141. "Marketing",
  142. "CEO",
  143. ],
  144. kenList: [],
  145. kenValue: null,
  146. kenVal: {},
  147. refreshInterval: null,
  148. isOnDashboard: false,
  149. chartData: [
  150. /* { date: "00:00", value: 12 },
  151. { date: "01:00", value: 14 },
  152. { date: "02:00", value: 8 },
  153. { date: "03:00", value: 15 },
  154. { date: "04:00", value: 22 },
  155. { date: "05:00", value: 9 },
  156. { date: "06:00", value: 12 },
  157. { date: "07:00", value: 16 },
  158. { date: "08:00", value: 13 },
  159. { date: "09:00", value: 18 },
  160. { date: "10:00", value: 24 },
  161. { date: "11:00", value: 23 },
  162. { date: "12:00", value: 19 },
  163. { date: "13:00", value: 14 },
  164. { date: "14:00", value: 12 },
  165. { date: "15:00", value: 15 },
  166. { date: "16:00", value: 14 },
  167. { date: "17:00", value: 12 },
  168. { date: "18:00", value: 10 },
  169. { date: "19:00", value: 8 },
  170. { date: "20:00", value: 10 },
  171. { date: "21:00", value: 11 } */
  172. ]
  173. };
  174. },
  175. computed: {
  176. ...mapState({
  177. route: state => state.tagsView.visitedViews
  178. })
  179. },
  180. watch: {
  181. $route: {
  182. immediate: true,
  183. handler(newRoute) {
  184. this.isOnDashboard = newRoute.path === '/dashboard';
  185. this.handleRouteChange();
  186. }
  187. }
  188. },
  189. mounted() {
  190. this.init();
  191. /* this.startRefreshInterval(); */
  192. },
  193. beforeDestroy() {
  194. this.stopRefreshInterval();
  195. },
  196. methods: {
  197. handleRouteChange() {
  198. if (this.isOnDashboard) {
  199. this.refreshData();
  200. }
  201. },
  202. /* 选择知识库 */
  203. kenChange(val) {
  204. this.kenVal = this.kenList.find((el) => el.id === val);
  205. },
  206. handleSetLineChartData(type) {
  207. this.lineChartData = lineChartData[type];
  208. },
  209. startRefreshInterval() {
  210. this.refreshInterval = setInterval(() => {
  211. this.refreshData();
  212. }, 30000); // 30 seconds
  213. },
  214. stopRefreshInterval() {
  215. if (this.refreshInterval) {
  216. clearInterval(this.refreshInterval);
  217. }
  218. },
  219. refreshData() {
  220. structure_count().then((res) => {
  221. if (res.status !== 200) return;
  222. this.kenList = res.data;
  223. if (this.kenList.length > 0) {
  224. this.kenValue = this.kenList[0].id;
  225. this.kenVal = this.kenList[0];
  226. }
  227. });
  228. },
  229. init() {
  230. this.refreshData();
  231. },
  232. },
  233. };
  234. </script>
  235. <style lang="scss" scoped>
  236. .dashboard-editor-container {
  237. padding: 32px;
  238. min-height: 100%;
  239. /* background-color: rgb(240, 242, 245); */
  240. position: relative;
  241. .github-corner {
  242. position: absolute;
  243. top: 0px;
  244. border: 0;
  245. right: 0;
  246. }
  247. .clearfixs {
  248. span {
  249. font-size: 16px;
  250. font-weight: 600;
  251. }
  252. }
  253. .header_sel {
  254. display: flex;
  255. align-items: center;
  256. justify-content: space-between;
  257. }
  258. .chart-wrapper {
  259. background: #fff;
  260. padding: 16px 16px 0;
  261. margin-bottom: 32px;
  262. }
  263. ::v-deep .el-card__body {
  264. padding-top: 0;
  265. }
  266. }
  267. @media (max-width: 1024px) {
  268. .chart-wrapper {
  269. padding: 8px;
  270. }
  271. }
  272. </style>