完成除ranklist之外的contest页面

进一步复用problem、status页面
2024-12-29 16:01:51 +00:00 · 2017-08-01 16:56:46 +08:00 · 2017-08-01 16:56:46 +08:00 · 0104a6b8c5
commit 0104a6b8c5
parent c4b239f66f
12 changed files with 217 additions and 117 deletions
--- a/oj/build/webpack.base.conf.js
+++ b/oj/build/webpack.base.conf.js
@ -32,7 +32,8 @@ module.exports = {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        // include: [resolve('src'), resolve('test')],
+        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
--- a/oj/package-lock.json
+++ b/oj/package-lock.json
@ -2186,6 +2186,14 @@
        "jsbn": "0.1.1"
      }
    },
+    "echarts": {
+      "version": "3.6.2",
+      "resolved": "http://registry.npm.taobao.org/echarts/download/echarts-3.6.2.tgz",
+      "integrity": "sha1-hilUyLWBC/+HpIsN4EFu2MS7HDY=",
+      "requires": {
+        "zrender": "3.5.2"
+      }
+    },
    "editorconfig": {
      "version": "0.13.2",
      "resolved": "http://registry.npm.taobao.org/editorconfig/download/editorconfig-0.13.2.tgz",
@ -4893,6 +4901,11 @@
      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
      "dev": true
    },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "http://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
    "lodash.memoize": {
      "version": "4.1.2",
      "resolved": "http://registry.npm.taobao.org/lodash.memoize/download/lodash.memoize-4.1.2.tgz",
@ -7401,6 +7414,15 @@
        "codemirror": "5.27.2"
      }
    },
+    "vue-echarts": {
+      "version": "2.4.0",
+      "resolved": "http://registry.npm.taobao.org/vue-echarts/download/vue-echarts-2.4.0.tgz",
+      "integrity": "sha1-KGVAaepM+ax0JqsPX3I8d7jNXzY=",
+      "requires": {
+        "echarts": "3.6.2",
+        "lodash.debounce": "4.0.8"
+      }
+    },
    "vue-highlightjs": {
      "version": "1.3.3",
      "resolved": "http://registry.npm.taobao.org/vue-highlightjs/download/vue-highlightjs-1.3.3.tgz",
@ -7779,6 +7801,11 @@
          "dev": true
        }
      }
+    },
+    "zrender": {
+      "version": "3.5.2",
+      "resolved": "http://registry.npm.taobao.org/zrender/download/zrender-3.5.2.tgz",
+      "integrity": "sha1-53DL6Xi19JgcG5PZuEFHo0dPIdI="
    }
  }
 }
--- a/oj/package.json
+++ b/oj/package.json
@ -12,11 +12,13 @@
  },
  "dependencies": {
    "axios": "^0.16.2",
+    "echarts": "^3.6.2",
    "font-awesome": "^4.7.0",
    "iview": "^2.0.0-rc.17",
    "moment": "^2.18.1",
    "vue": "^2.3.3",
    "vue-codemirror": "^3.0.8",
+    "vue-echarts": "^2.4.0",
    "vue-highlightjs": "^1.3.3",
    "vue-router": "^2.6.0"
  },
--- a/oj/src/App.vue
+++ b/oj/src/App.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <Navbar></Navbar>
-    <breadcrumb></breadcrumb>
+    <!--<breadcrumb></breadcrumb>-->
    <div class="content-app">
      <router-view></router-view>
      <div class="footer">
@ -52,12 +52,12 @@
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    overflow: auto;
    -webkit-font-smoothing: antialiased;
-    background-color: #edf0f2;;
+    background-color: #eee;;
    overflow-y: scroll;
  }

  .content-app {
-    padding-top: 20px;
+    padding-top: 80px;
    padding-right: 10px;
    padding-left: 10px;
  }
@ -67,4 +67,7 @@
    text-align: center;
    font-size: small;
  }
+  .ivu-table-wrapper {
+    border: 0;
+  }
 </style>
--- a/oj/src/api.js
+++ b/oj/src/api.js
@ -156,13 +156,9 @@ export default {
      }
    })
  },
-  submitCode(problemId, language, code) {
+  submitCode(data) {
    return ajax('submission', 'post', {
-      data: {
-        problem_id: problemId,
-        language,
-        code
-      }
+      data
    })
  },
  getSubmissionList(offset, limit, params) {
--- a/oj/src/components/NavBar.vue
+++ b/oj/src/components/NavBar.vue
@ -1,45 +1,36 @@
 <template>
  <div id="header">
-    <Row type="flex" justify="space-around">
-      <Col span="3">
-      <div class="logo"><span>QduOJ</span></div>
-      </Col>
-
-      <Col span="14">
-      <Menu theme="light" mode="horizontal" @on-select="handleRoute" :active-name="activeMenu">
-        <Menu-item name="/problems">Problems</Menu-item>
-        <Menu-item name="/contests">Contests</Menu-item>
-        <Menu-item name="/status">Status</Menu-item>
-        <Menu-item name="/3">Rank</Menu-item>
-        <Menu-item name="/4">About</Menu-item>
-        <Menu-item name="/test">Test</Menu-item>
+      <Menu theme="light" mode="horizontal" @on-select="handleRoute" :active-name="activeMenu" class="oj-menu">
+        <div class="logo"><span>OJ</span></div>
+        <Menu-item name="/test"><Icon type="home"></Icon>Home</Menu-item>
+        <Menu-item name="/problems"><Icon type="ios-keypad"></Icon>Problems</Menu-item>
+        <Menu-item name="/contests"><Icon type="trophy"></Icon>Contests</Menu-item>
+        <Menu-item name="/status"><Icon type="ios-pulse-strong"></Icon>Status</Menu-item>
+        <Menu-item name="/3"><Icon type="podium"></Icon>Rank</Menu-item>
+        <Menu-item name="/4"><Icon type="information-circled"></Icon>About</Menu-item>
+        <template v-if="!isAuthed">
+          <div class="btn-menu">
+            <Button type="ghost" shape="circle" @click="handleRoute('/login')">Login</Button>
+            <Button type="ghost" shape="circle" @click="handleRoute('/register')" style="margin-left: 5px;">Register
+            </Button>
+          </div>
+        </template>
+        <template v-else>
+          <Dropdown class="drop-menu" @on-click="handleRoute">
+            <Button class="btn-menu" type="text">{{ username }}
+              <Icon type="arrow-down-b"></Icon>
+            </Button>
+            <Dropdown-menu slot="list">
+              <Dropdown-item>Home</Dropdown-item>
+              <Dropdown-item>Submissions</Dropdown-item>
+              <Dropdown-item name="/settings">Settings</Dropdown-item>
+              <Dropdown-item divided name="/logout">Logout</Dropdown-item>
+            </Dropdown-menu>
+          </Dropdown>
+        </template>
      </Menu>
-      </Col>

-      <Col span="4">
-      <template v-if="!isAuthed">
-        <div class="btn-menu">
-          <Button type="ghost" shape="circle" @click="handleRoute('/login')">Login</Button>
-          <Button type="ghost" shape="circle" @click="handleRoute('/register')" style="margin-left: 5px;">Register
-          </Button>
-        </div>
-      </template>

-      <template v-else>
-        <Dropdown class="right" @on-click="handleRoute">
-          <Button class="btn-menu" type="text">{{ username }}
-            <Icon type="arrow-down-b"></Icon>
-          </Button>
-          <Dropdown-menu slot="list">
-            <Dropdown-item>Home</Dropdown-item>
-            <Dropdown-item>Submissions</Dropdown-item>
-            <Dropdown-item name="/settings">Settings</Dropdown-item>
-            <Dropdown-item divided name="/logout">Logout</Dropdown-item>
-          </Dropdown-menu>
-        </Dropdown>
-      </template>
-      </Col>
-    </Row>
  </div>
 </template>

@ -102,27 +93,36 @@
 </script>

 <style lang="less" scoped>
-  .right {
-    float: right;
-  }
-
  #header {
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    height: 60px;
+    width: 100%;
+    z-index: 10;
    background-color: #fff;
    border-bottom: 1px solid #dddee1;
+    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
+    .oj-menu {
+      background: #fdfdfd;
+    }
    .logo {
-      margin-left: 20px;
+      margin-left: 5%;
+      margin-right:2%;
      font-size: 20px;
      float: left;
      line-height: 60px;
    }
+    .drop-menu {
+      float: right;
+      margin-top: 10px;
+    }
+    .btn-menu {
+      font-size: 16px;
+      float: right;
+      margin-right: 10px;
+    }
  }

-  .ivu-menu-horizontal.ivu-menu-light:after {
-    height: 0;
-  }
-
-  .btn-menu {
-    font-size: 16px;
-    margin-top: 13px;
-  }
 </style>
--- a/oj/src/views/contest/ContestDetail.vue
+++ b/oj/src/views/contest/ContestDetail.vue
@ -1,24 +1,24 @@
 <template>
  <Row type="flex" justify="space-around">
    <Col :span="23">
-    <Card :padding="10" id="progress" dis-hover>
-      <Row>
-        <Col :span="8">
-        3 Hours
-        </Col>
-        <Col :span="8">
-        <p class="center">
-          Not started
-        </p>
-        </Col>
-        <Col :span="8">
-        <p class="right">
-          -00:01:15
-        </p>
-        </Col>
-      </Row>
-      <Progress :percent="35" status="normal" :stroke-width="5" hide-info></Progress>
-    </Card>
+    <!--<Card :padding="10" id="progress" dis-hover>-->
+      <!--<Row>-->
+        <!--<Col :span="8">-->
+        <!--3 Hours-->
+        <!--</Col>-->
+        <!--<Col :span="8">-->
+        <!--<p class="center">-->
+          <!--Not started-->
+        <!--</p>-->
+        <!--</Col>-->
+        <!--<Col :span="8">-->
+        <!--<p class="right">-->
+          <!-- -00:01:15-->
+        <!--</p>-->
+        <!--</Col>-->
+      <!--</Row>-->
+      <!--<Progress :percent="35" status="normal" :stroke-width="5" hide-info></Progress>-->
+    <!--</Card>-->
    </Col>

    <Col :lg="18" :md="18" :sm="17" :xm="16">
@ -57,7 +57,7 @@
      </VerticalMenu-item>

      <VerticalMenu-item :disabled="isDisabled" route="">
-        <Icon type="pie-graph"></Icon>
+        <Icon type="stats-bars"></Icon>
        Ranklist
      </VerticalMenu-item>

--- a/oj/src/views/contest/ContestList.vue
+++ b/oj/src/views/contest/ContestList.vue
@ -1,7 +1,7 @@
 <template>
  <Row type="flex" justify="space-around">
    <Col :span="23">
-    <Card :padding="0" id="contest-card" dis-hover>
+    <Card :padding="0" id="contest-card" shadow>
      <span slot="title" id="header">{{query.rule_type === ''? 'All' : query.rule_type}} Contests</span>
      <div slot="extra">
        <Dropdown @on-click="onRuleChange">
--- a/oj/src/views/problem/Problem.vue
+++ b/oj/src/views/problem/Problem.vue
@ -200,7 +200,13 @@
        this.result = {result: 9}
        this.submitting = true
        this.statusVisible = true
-        api.submitCode(this.problemID, this.language, this.code).then(res => {
+        let data = {
+          problem_id: this.problemID,
+          language: this.language,
+          code: this.code,
+          contest_id: this.contestID
+        }
+        api.submitCode(data).then(res => {
          this.submissionId = res.data.data.submission_id
          // 定时检查状态
          this.refreshStatus = setInterval(() => {
@ -213,6 +219,8 @@
              }
            })
          }, 1000)
+        }, res => {
+          this.submitting = false
        })
      }
    },
--- a/oj/src/views/problem/ProblemList.vue
+++ b/oj/src/views/problem/ProblemList.vue
@ -1,35 +1,35 @@
 <template>
  <Row type="flex" justify="space-around">
-    <Col :span=18>
-    <Card :bordered="false" dis-hover :padding="0">
-      <div slot="title">
-        <Form id="filterForm" ref="filterForm" :model="filterForm">
-          <Row type="flex" justify="space-between">
-            <Col :span="9">
-            <Form-item prop="keyword">
-              <Input icon="search" type="text" placeholder="keyword or problemID"/>
-            </Form-item>
-            </Col>
-            <Col :span="6">
-            <Form-item prop="difficulty">
-              <Select v-model="filterForm.difficulty">
-                <Option value="Low">Low</Option>
-                <Option value="Mid">Mid</Option>
-                <Option value="High">High</Option>
-              </Select>
-            </Form-item>
-            </Col>
-            <Col :span="7">
-            <Form-item style="float: right">
-              <Button type="ghost" @click="onReset" style="margin-right: 10px;">Reset</Button>
-              <Button type="primary" @click="onFilter">Filter</Button>
-            </Form-item>
-            </Col>
-          </Row>
-        </Form>
-      </div>
-    </Card>
-      <Table style="width: 100%; font-size: 16px;" :columns="problemTableColumns" :data="problemList" size="large" disabled-hover></Table>
+    <Col :span=19>
+    <!--<Card :bordered="false" dis-hover :padding="0">-->
+      <!--<div slot="title">-->
+        <!--<Form id="filterForm" ref="filterForm" :model="filterForm">-->
+          <!--<Row type="flex" justify="space-between">-->
+            <!--<Col :span="9">-->
+            <!--<Form-item prop="keyword">-->
+              <!--<Input icon="search" type="text" placeholder="keyword or problemID"/>-->
+            <!--</Form-item>-->
+            <!--</Col>-->
+            <!--<Col :span="6">-->
+            <!--<Form-item prop="difficulty">-->
+              <!--<Select v-model="filterForm.difficulty">-->
+                <!--<Option value="Low">Low</Option>-->
+                <!--<Option value="Mid">Mid</Option>-->
+                <!--<Option value="High">High</Option>-->
+              <!--</Select>-->
+            <!--</Form-item>-->
+            <!--</Col>-->
+            <!--<Col :span="7">-->
+            <!--<Form-item style="float: right">-->
+              <!--<Button type="ghost" @click="onReset" style="margin-right: 10px;">Reset</Button>-->
+              <!--<Button type="primary" @click="onFilter">Filter</Button>-->
+            <!--</Form-item>-->
+            <!--</Col>-->
+          <!--</Row>-->
+        <!--</Form>-->
+      <!--</div>-->
+    <!--</Card>-->
+      <Table style="width: 100%; font-size: 16px;" :columns="problemTableColumns" :data="problemList"  disabled-hover></Table>
    <Pagination :total="total" :page-size="pageSize" @on-change="changePage"></Pagination>

    </Col>
@ -182,4 +182,5 @@
    }
  }

+
 </style>
--- a/oj/src/views/submission/SubmissionList.vue
+++ b/oj/src/views/submission/SubmissionList.vue
@ -1,6 +1,6 @@
 <template>
  <Row type="flex" justify="space-around">
-    <Col :span="23">
+    <Col :span="24">
    <Table stripe :disabled-hover="true" :columns="columns" :data="submissions"></Table>
    <Pagination :total="total" :pageSize="pageSize" @on-change="changePage"></Pagination>
    </Col>
--- a/oj/src/views/test.vue
+++ b/oj/src/views/test.vue
@ -1,16 +1,75 @@
 <template>
-  <div>
-    Hello
-  </div>
+  <ECharts :options="polar"></ECharts>
 </template>

 <script>
+  import ECharts from 'vue-echarts/components/ECharts.vue'
+
+  import 'echarts/lib/chart/bar'
+  import 'echarts/lib/chart/line'
+  import 'echarts/lib/chart/pie'
+  import 'echarts/lib/chart/map'
+  import 'echarts/lib/chart/radar'
+  import 'echarts/lib/chart/scatter'
+  import 'echarts/lib/chart/effectScatter'
+  import 'echarts/lib/component/tooltip'
+  import 'echarts/lib/component/polar'
+  import 'echarts/lib/component/geo'
+  import 'echarts/lib/component/legend'
+  import 'echarts/lib/component/title'
+  import 'echarts/lib/component/visualMap'
+
  //  import api from '@/api'
  export default {
    name: 'test',
-    components: {},
+    components: {
+      ECharts
+    },
    data() {
-      return {}
+      let data = []
+
+      for (let i = 0; i <= 360; i++) {
+        let t = i / 180 * Math.PI
+        let r = Math.sin(2 * t) * Math.cos(2 * t)
+        data.push([r, i])
+      }
+
+      return {
+        polar: {
+          title: {
+            text: '极坐标双数值轴'
+          },
+          legend: {
+            data: ['line']
+          },
+          polar: {
+            center: ['50%', '54%']
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'cross'
+            }
+          },
+          angleAxis: {
+            type: 'value',
+            startAngle: 0
+          },
+          radiusAxis: {
+            min: 0
+          },
+          series: [
+            {
+              coordinateSystem: 'polar',
+              name: 'line',
+              type: 'line',
+              showSymbol: false,
+              data: data
+            }
+          ],
+          animationDuration: 2000
+        }
+      }
    },
    mounted() {
    }
@ -18,4 +77,7 @@
 </script>

 <style scoped lang="less">
+  .echarts {
+    height: 300px;
+  }
 </style>