新分档页面完成

src/components/EchartRender.vue

@@ -28,7 +28,7 @@ export default {
             "barReverse",
             "pie",
             "line",
-            "darkLine",
+            "darkLines",
             "barGroup",
             "lineGroup"
           ].indexOf(value) !== -1
@@ -184,23 +184,66 @@ export default {
         ]
       };
     },
-    getDarkLineOption(datas) {
-      let labels = [],
-        vals = [];
-      datas.map(item => {
-        labels.push(item.name);
-        vals.push(item.value);
-      });
-      const linearColor = new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+    getDarkLinesOption(datas) {
+      if (!datas.length) return;
+      const labels = datas[0].data.map(item => item.name);
+      const colors = [
         {
-          offset: 1,
-          color: "rgba(21, 91, 146,1)"
+          color: "rgba(204, 70, 53,1)",
+          lineColor: "rgba(204, 70, 53,0.6)",
+          linearColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            {
+              offset: 1,
+              color: "rgba(204, 70, 53,1)"
+            },
+            {
+              offset: 0,
+              color: "rgba(204, 70, 53,0)"
+            }
+          ]),
+          z: 3
         },
         {
-          offset: 0,
-          color: "rgba(21, 91, 146,0)"
+          color: "rgba(21, 91, 146,1)",
+          lineColor: "rgba(21, 91, 146,0.6)",
+          linearColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+            {
+              offset: 1,
+              color: "rgba(21, 91, 146,1)"
+            },
+            {
+              offset: 0,
+              color: "rgba(21, 91, 146,0)"
+            }
+          ]),
+          z: 4
         }
-      ]);
+      ];
+
+      const series = datas.map(function(item, index) {
+        const data = item.data.map(function(elem) {
+          return elem.value;
+        });
+        const color = colors[index];
+        return {
+          name: item.name,
+          type: "line",
+          smooth: true,
+          data: data,
+          symbol: "circle",
+          symbolSize: 6,
+          z: color.z,
+          itemStyle: {
+            color: color.color
+          },
+          lineStyle: {
+            color: color.lineColor
+          },
+          areaStyle: {
+            color: color.linearColor
+          }
+        };
+      });
 
       return {
         animation: this.animationIsOpen,
@@ -211,7 +254,19 @@ export default {
           right: "3%"
         },
         tooltip: {
-          show: true
+          show: true,
+          formatter: function(params) {
+            return params.value + "%";
+          }
+        },
+        legend: {
+          data: datas.map(data => data.name),
+          right: "3%",
+          itemWidth: 14,
+          textStyle: {
+            color: "#9d9c9c",
+            fontSize: 14
+          }
         },
         xAxis: {
           type: "category",
@@ -251,31 +306,14 @@ export default {
           },
           axisLabel: {
             fontSize: 12,
-            color: "#9d9c9c"
+            color: "#9d9c9c",
+            formatter: "{value}%"
           },
           axisTick: {
             show: false
           }
         },
-        series: [
-          {
-            name: "数量",
-            type: "line",
-            smooth: true,
-            data: vals,
-            symbol: "circle",
-            symbolSize: 8,
-            itemStyle: {
-              color: "rgba(21, 91, 146, 1)"
-            },
-            lineStyle: {
-              color: "rgba(21, 91, 146, 0.6)"
-            },
-            areaStyle: {
-              color: linearColor
-            }
-          }
-        ]
+        series: series
       };
     },
     getPieOption(datas) {

src/modules/grading/leader/LeaderStatistics.vue

@@ -56,7 +56,7 @@
       <h3>考区试卷数量分布图</h3>
       <echart-render
         :chart-data="lineChartData"
-        chart-type="darkLine"
+        chart-type="darkLines"
         v-if="lineChartData"
       ></echart-render>
     </div>
@@ -100,7 +100,13 @@ export default {
     };
   },
   computed: {
-    ...mapState("marker", ["paramsSet", "curSubject", "curArea", "steps"]),
+    ...mapState("marker", [
+      "paramsSet",
+      "curSubject",
+      "curArea",
+      "steps",
+      "areas"
+    ]),
     showPaperRelateCount() {
       return !!this.paramsSet["showPaperCount"];
     }
@@ -139,10 +145,27 @@ export default {
         return item;
       });
 
-      this.lineChartData = this.levelData.map(item => {
+      const groups = [
+        {
+          key: "levelProp",
+          label: "考区"
+        },
+        {
+          key: "gpercent",
+          label: "全部"
+        }
+      ];
+      const groupList = this.areas.length === 1 ? groups.slice(0, 1) : groups;
+      this.lineChartData = groupList.map(group => {
+        const data = this.levelData.map(item => {
+          return {
+            name: item.code,
+            value: item[group.key]
+          };
+        });
         return {
-          name: item.code,
-          value: item.levelProp
+          name: group.label,
+          data
         };
       });
     },

src/modules/grading/marker/MarkerGrading.vue

@@ -180,7 +180,6 @@ export default {
       workSubject: {},
       curStandardGradeId: "",
       levels: [],
-      curArea: {},
       papers: [],
       curPaper: {},
       curPaperIndex: 0,
@@ -195,7 +194,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("marker", ["paramsSet", "page", "steps", "curStep"]),
+    ...mapState("marker", ["paramsSet", "page", "steps", "curStep", "curArea"]),
     markerImageListClasses() {
       return ["marker-image-list", `marker-image-list-${this.page.size}`];
     }
@@ -213,6 +212,7 @@ export default {
       "setParamSet",
       "setPage",
       "setSteps",
+      "setCurArea",
       "setCurStep",
       "clearState"
     ]),
@@ -298,7 +298,8 @@ export default {
         if (undoIndex === -1) {
           curStep = levelStep[0];
         } else {
-          curStep = otherStep[0];
+          const firstStep = otherStep.find(item => item.count);
+          curStep = firstStep || levelStep[0];
         }
         this.setCurStep(curStep);
       } else {
@@ -362,7 +363,7 @@ export default {
       }
     },
     async areaChange(curArea) {
-      this.curArea = curArea;
+      this.setCurArea(curArea);
       this.filter.questionId = curArea.id;
       await this.getStepLevels();
       this.toPage(1);

src/modules/grading/marker/MarkerHeader.vue

@@ -110,14 +110,16 @@
               :key="step.type"
               :name="step.name"
             >
-              {{ step.name }}（{{ step.count }}）
+              <i>{{ step.name }}</i>
+              <i v-if="showPaperRelateCount">（{{ step.count }}）</i>
             </DropdownItem>
             <DropdownItem
               v-for="step in steps.levelStep"
               :key="step.name"
               :name="step.name"
             >
-              {{ step.name }}（{{ step.count }}）
+              <i>{{ step.name }}</i>
+              <i v-if="showPaperRelateCount">（{{ step.count }}）</i>
             </DropdownItem>
           </DropdownMenu>
         </Dropdown>
@@ -176,17 +178,25 @@ export default {
       },
       curUserRoleType: "",
       username: this.$ls.get("user", { loginName: "" }).loginName,
-      areas: [],
-      curArea: { areaName: "校区" },
       pageVisible: false,
       pageSizeList: [2, 3, 4, 6, 8, 9, 10, 12, 15, 16, 20, 24],
       pageNo: 1
     };
   },
   computed: {
-    ...mapState("marker", ["page", "curStep", "steps"]),
+    ...mapState("marker", [
+      "paramsSet",
+      "page",
+      "curStep",
+      "steps",
+      "curArea",
+      "areas"
+    ]),
     IS_MARK_LEADER() {
       return this.curUserRoleType === "MARK_LEADER";
+    },
+    showPaperRelateCount() {
+      return !!this.paramsSet["showPaperCount"];
     }
   },
   mounted() {
@@ -197,25 +207,26 @@ export default {
     this.getAreaList();
   },
   methods: {
-    ...mapMutations("marker", ["setPage"]),
+    ...mapMutations("marker", ["setPage", "setAreas"]),
     async getAreaList() {
       const data = await areaList(this.filter);
-      this.areas = data.map(item => {
+      const areas = data.map(item => {
         return {
           id: item.id,
           areaName: item.areaName,
           areaCode: item.areaCode
         };
       });
+      this.setAreas(areas);
 
       if (!this.curArea.id) {
-        this.curArea = this.areas[0];
-        this.$emit("area-change", this.curArea);
+        this.$emit("area-change", areas[0]);
       }
     },
     areaClick(val) {
-      this.curArea = this.areas.find(item => item.id === val);
-      this.$emit("area-change", this.curArea);
+      if (this.curArea.id === val) return;
+      const curArea = this.areas.find(item => item.id === val);
+      this.$emit("area-change", curArea);
     },
     stepClick(val) {
       const curStep = [...this.steps.levelStep, ...this.steps.otherStep].find(

src/modules/grading/marker/MarkerStatistics.vue

@@ -33,10 +33,9 @@
     </div>
     <div class="marker-statistics-chart">
       <h3>分档数量分布图</h3>
-      <!-- TODO:考区与个人曲线图 -->
       <echart-render
         :chart-data="lineChartData"
-        chart-type="darkLine"
+        chart-type="darkLines"
         v-if="lineChartData"
       ></echart-render>
     </div>
@@ -71,10 +70,26 @@ export default {
       }
     },
     initData() {
-      this.lineChartData = this.steps.levelStep.map(item => {
+      const groups = [
+        {
+          key: "percent",
+          label: "当前批次评卷员"
+        },
+        {
+          key: "gpercent",
+          label: "考区定档"
+        }
+      ];
+      this.lineChartData = groups.map(group => {
+        const data = this.steps.levelStep.map(item => {
+          return {
+            name: item.name,
+            value: item[group.key]
+          };
+        });
         return {
-          name: item.name,
-          value: item.count
+          name: group.label,
+          data
         };
       });
     },

src/modules/grading/marker/store.js

@@ -8,6 +8,7 @@ const state = {
   },
   steps: {},
   curStep: { name: "", count: 0 },
+  areas: [],
   curArea: {},
   curSubject: {}
 };
@@ -24,6 +25,9 @@ const mutations = {
   setCurStep(state, curStep) {
     state.curStep = curStep;
   },
+  setAreas(state, areas) {
+    state.areas = areas;
+  },
   setCurArea(state, curArea) {
     state.curArea = curArea;
   },