index.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
  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>cpu使用率</span>
  10. </div>
  11. <instruChart style="height: 350px" :percentage="currentPercentage" />
  12. </el-card>
  13. </el-col>
  14. <el-col style="margin-bottom: 20px" :span="16">
  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 {
  90. listBuckets,
  91. structure_count,
  92. GET_Rbq,
  93. gpu_info,
  94. } from "@/api/knowledge";
  95. import { mapState } from "vuex";
  96. const lineChartData = {
  97. newVisitis: {
  98. expectedData: [100, 120, 161, 134, 105, 160, 165],
  99. actualData: [120, 82, 91, 154, 162, 140, 145],
  100. },
  101. messages: {
  102. expectedData: [200, 192, 120, 144, 160, 130, 140],
  103. actualData: [180, 160, 151, 106, 145, 150, 130],
  104. },
  105. purchases: {
  106. expectedData: [80, 100, 121, 104, 105, 90, 100],
  107. actualData: [120, 90, 100, 138, 142, 130, 130],
  108. },
  109. shoppings: {
  110. expectedData: [130, 140, 141, 142, 145, 150, 160],
  111. actualData: [120, 82, 91, 154, 162, 140, 130],
  112. },
  113. };
  114. export default {
  115. name: "DashboardAdmin",
  116. components: {
  117. GithubCorner,
  118. PanelGroup,
  119. LineChart,
  120. RaddarChart,
  121. PieChart,
  122. BarChart,
  123. TransactionTable,
  124. TodoList,
  125. BoxCard,
  126. TagCloud,
  127. RecentFile,
  128. instruChart,
  129. },
  130. data() {
  131. return {
  132. lineChartData: lineChartData.newVisitis,
  133. tags: [
  134. "Figma",
  135. "Adobe XD",
  136. "PSD Editor",
  137. "Employer",
  138. "Online Jobs",
  139. "Remote Work",
  140. "Salary",
  141. "Tips",
  142. "Income",
  143. "Develop",
  144. "App",
  145. "Digital",
  146. "Marketing",
  147. "CEO",
  148. ],
  149. kenList: [],
  150. kenValue: null,
  151. kenVal: {},
  152. currentPercentage: 11,
  153. refreshInterval: null,
  154. isOnDashboard: false,
  155. chartData: [
  156. /* { date: "00:00", value: 12 },
  157. { date: "01:00", value: 14 },
  158. { date: "02:00", value: 8 },
  159. { date: "03:00", value: 15 },
  160. { date: "04:00", value: 22 },
  161. { date: "05:00", value: 9 },
  162. { date: "06:00", value: 12 },
  163. { date: "07:00", value: 16 },
  164. { date: "08:00", value: 13 },
  165. { date: "09:00", value: 18 },
  166. { date: "10:00", value: 24 },
  167. { date: "11:00", value: 23 },
  168. { date: "12:00", value: 19 },
  169. { date: "13:00", value: 14 },
  170. { date: "14:00", value: 12 },
  171. { date: "15:00", value: 15 },
  172. { date: "16:00", value: 14 },
  173. { date: "17:00", value: 12 },
  174. { date: "18:00", value: 10 },
  175. { date: "19:00", value: 8 },
  176. { date: "20:00", value: 10 },
  177. { date: "21:00", value: 11 } */
  178. ],
  179. };
  180. },
  181. computed: {
  182. ...mapState({
  183. route: (state) => state.tagsView.visitedViews,
  184. }),
  185. },
  186. watch: {
  187. $route: {
  188. immediate: true,
  189. handler(newRoute) {
  190. this.isOnDashboard = newRoute.path === "/dashboard";
  191. this.handleRouteChange();
  192. },
  193. },
  194. },
  195. mounted() {
  196. this.init();
  197. /* this.startRefreshInterval(); */
  198. },
  199. beforeDestroy() {
  200. this.stopRefreshInterval();
  201. },
  202. methods: {
  203. handleRouteChange() {
  204. if (this.isOnDashboard) {
  205. this.refreshData();
  206. }
  207. },
  208. /* 选择知识库 */
  209. kenChange(val) {
  210. this.kenVal = this.kenList.find((el) => el.id === val);
  211. },
  212. handleSetLineChartData(type) {
  213. this.lineChartData = lineChartData[type];
  214. },
  215. startRefreshInterval() {
  216. this.refreshInterval = setInterval(() => {
  217. this.refreshData();
  218. }, 30000); // 30 seconds
  219. },
  220. stopRefreshInterval() {
  221. if (this.refreshInterval) {
  222. clearInterval(this.refreshInterval);
  223. }
  224. },
  225. refreshData() {
  226. structure_count().then((res) => {
  227. if (res.status !== 200) return;
  228. this.kenList = res.data;
  229. if (this.kenList.length > 0) {
  230. this.kenValue = this.kenList[0].id;
  231. this.kenVal = this.kenList[0];
  232. }
  233. });
  234. GET_Rbq().then((res) => {
  235. console.log(res);
  236. });
  237. gpu_info().then((res) => {
  238. const total = res.data.data.cpu.memory.total;
  239. const used = res.data.data.cpu.memory.used;
  240. this.currentPercentage = Number((used / total).toFixed(2));
  241. });
  242. },
  243. init() {
  244. this.refreshData();
  245. },
  246. },
  247. };
  248. </script>
  249. <style lang="scss" scoped>
  250. .dashboard-editor-container {
  251. padding: 32px;
  252. min-height: 100%;
  253. /* background-color: rgb(240, 242, 245); */
  254. position: relative;
  255. .github-corner {
  256. position: absolute;
  257. top: 0px;
  258. border: 0;
  259. right: 0;
  260. }
  261. .clearfixs {
  262. span {
  263. font-size: 16px;
  264. font-weight: 600;
  265. }
  266. }
  267. .header_sel {
  268. display: flex;
  269. align-items: center;
  270. justify-content: space-between;
  271. }
  272. .chart-wrapper {
  273. background: #fff;
  274. padding: 16px 16px 0;
  275. margin-bottom: 32px;
  276. }
  277. ::v-deep .el-card__body {
  278. padding-top: 0;
  279. }
  280. }
  281. @media (max-width: 1024px) {
  282. .chart-wrapper {
  283. padding: 8px;
  284. }
  285. }
  286. </style>