123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284 |
- <template>
- <div class="dashboard-editor-container">
- <!-- <github-corner class="github-corner" /> -->
- <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" />-->
- <el-row :gutter="20">
- <!-- <el-col :span="8">
- <el-card class="box-card">
- <div slot="header" class="clearfixs">
- <span></span>
- </div>
- <instruChart style="height: 150px"/>
- </el-card>
- </el-col> -->
- <el-col style="margin-bottom: 20px;" :span="24">
- <el-card class="box-card">
- <div slot="header" class="clearfixs">
- <span>GPU使用率</span>
- </div>
- <LineChart :data="chartData" style="height: 350px"></LineChart>
- </el-card>
- </el-col>
- <el-col :span="16">
- <el-card class="box-card">
- <div slot="header" class="clearfixs header_sel">
- <span>知识库构成</span>
- <div>
- <el-select
- v-model="kenValue"
- @change="kenChange"
- placeholder="请选择"
- >
- <el-option
- v-for="item in kenList"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- >
- </el-option>
- </el-select>
- </div>
- </div>
- <!-- <LineChart :data="chartData" style="height: 350px"></LineChart> -->
- <BarChart :kenValue="kenVal" style="height: 350px"></BarChart>
- </el-card>
- </el-col>
- <el-col :span="8">
- <el-card class="box-card">
- <div slot="header" class="clearfixs">
- <span>文件种类占比</span>
- </div>
- <pie-chart style="height: 366px" />
- </el-card>
- </el-col>
- </el-row>
- <el-row :gutter="20" style="margin-top: 20px">
- <!-- <el-col :span="8">
- <el-card class="box-card">
- <div slot="header" class="clearfixs">
- <span>知识库热门标签</span>
- </div>
- <TagCloud :tags="tags" />
- </el-card>
- </el-col> -->
- <el-col :span="24">
- <el-card class="box-card">
- <div slot="header" class="clearfixs">
- <span>最近访问的文件</span>
- </div>
- <RecentFile style="height: 350px" />
- </el-card>
- </el-col>
- </el-row>
- <!-- <transaction-table /> -->
- </div>
- </template>
- <script>
- import GithubCorner from "@/components/GithubCorner";
- import PanelGroup from "./components/PanelGroup";
- import LineChart from "./components/LineChart";
- import RaddarChart from "./components/RaddarChart";
- import PieChart from "./components/PieChart";
- import BarChart from "./components/BarChart";
- import TransactionTable from "./components/TransactionTable";
- import TodoList from "./components/TodoList";
- import BoxCard from "./components/BoxCard";
- import TagCloud from "./components/tagCloud.vue";
- import RecentFile from "./components/recentFile.vue";
- import instruChart from "./components/instruChart.vue"
- import { listBuckets, structure_count } from "@/api/knowledge";
- import { mapState } from 'vuex';
- const lineChartData = {
- newVisitis: {
- expectedData: [100, 120, 161, 134, 105, 160, 165],
- actualData: [120, 82, 91, 154, 162, 140, 145],
- },
- messages: {
- expectedData: [200, 192, 120, 144, 160, 130, 140],
- actualData: [180, 160, 151, 106, 145, 150, 130],
- },
- purchases: {
- expectedData: [80, 100, 121, 104, 105, 90, 100],
- actualData: [120, 90, 100, 138, 142, 130, 130],
- },
- shoppings: {
- expectedData: [130, 140, 141, 142, 145, 150, 160],
- actualData: [120, 82, 91, 154, 162, 140, 130],
- },
- };
- export default {
- name: "DashboardAdmin",
- components: {
- GithubCorner,
- PanelGroup,
- LineChart,
- RaddarChart,
- PieChart,
- BarChart,
- TransactionTable,
- TodoList,
- BoxCard,
- TagCloud,
- RecentFile,
- instruChart
- },
- data() {
- return {
- lineChartData: lineChartData.newVisitis,
- tags: [
- "Figma",
- "Adobe XD",
- "PSD Editor",
- "Employer",
- "Online Jobs",
- "Remote Work",
- "Salary",
- "Tips",
- "Income",
- "Develop",
- "App",
- "Digital",
- "Marketing",
- "CEO",
- ],
- kenList: [],
- kenValue: null,
- kenVal: {},
- refreshInterval: null,
- isOnDashboard: false,
- chartData: [
- /* { date: "00:00", value: 12 },
- { date: "01:00", value: 14 },
- { date: "02:00", value: 8 },
- { date: "03:00", value: 15 },
- { date: "04:00", value: 22 },
- { date: "05:00", value: 9 },
- { date: "06:00", value: 12 },
- { date: "07:00", value: 16 },
- { date: "08:00", value: 13 },
- { date: "09:00", value: 18 },
- { date: "10:00", value: 24 },
- { date: "11:00", value: 23 },
- { date: "12:00", value: 19 },
- { date: "13:00", value: 14 },
- { date: "14:00", value: 12 },
- { date: "15:00", value: 15 },
- { date: "16:00", value: 14 },
- { date: "17:00", value: 12 },
- { date: "18:00", value: 10 },
- { date: "19:00", value: 8 },
- { date: "20:00", value: 10 },
- { date: "21:00", value: 11 } */
- ]
- };
- },
- computed: {
- ...mapState({
- route: state => state.tagsView.visitedViews
- })
- },
- watch: {
- $route: {
- immediate: true,
- handler(newRoute) {
- this.isOnDashboard = newRoute.path === '/dashboard';
- this.handleRouteChange();
- }
- }
- },
- mounted() {
- this.init();
- /* this.startRefreshInterval(); */
- },
- beforeDestroy() {
- this.stopRefreshInterval();
- },
- methods: {
- handleRouteChange() {
- if (this.isOnDashboard) {
- this.refreshData();
- }
- },
- /* 选择知识库 */
- kenChange(val) {
- this.kenVal = this.kenList.find((el) => el.id === val);
- },
- handleSetLineChartData(type) {
- this.lineChartData = lineChartData[type];
- },
- startRefreshInterval() {
- this.refreshInterval = setInterval(() => {
- this.refreshData();
- }, 30000); // 30 seconds
- },
- stopRefreshInterval() {
- if (this.refreshInterval) {
- clearInterval(this.refreshInterval);
- }
- },
- refreshData() {
- structure_count().then((res) => {
- if (res.status !== 200) return;
- this.kenList = res.data;
- if (this.kenList.length > 0) {
- this.kenValue = this.kenList[0].id;
- this.kenVal = this.kenList[0];
- }
- });
- },
- init() {
- this.refreshData();
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .dashboard-editor-container {
- padding: 32px;
- min-height: 100%;
- /* background-color: rgb(240, 242, 245); */
- position: relative;
- .github-corner {
- position: absolute;
- top: 0px;
- border: 0;
- right: 0;
- }
- .clearfixs {
- span {
- font-size: 16px;
- font-weight: 600;
- }
- }
- .header_sel {
- display: flex;
- align-items: center;
- justify-content: space-between;
- }
- .chart-wrapper {
- background: #fff;
- padding: 16px 16px 0;
- margin-bottom: 32px;
- }
- ::v-deep .el-card__body {
- padding-top: 0;
- }
- }
- @media (max-width: 1024px) {
- .chart-wrapper {
- padding: 8px;
- }
- }
- </style>
|