Merge branch 'guangxi' of http://121.36.37.70:3000/shaojiahao/examSystem-Anxin into guangxi

src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.html

@@ -1,2 +1,13 @@
-<button (click)="ok1()">按钮1</button>
+
-<button (click)="ok2()">按钮2</button>
+
+<div class="conter">
+   
+    <div class="left">
+        <div class="top">
+         <span (click)="switch('频次')" [ngClass]="{'select': !examinationIndex}">考试频次</span> |
+         <span (click)="switch('人数')" [ngClass]="{'select': examinationIndex}">考试人数</span>   
+        </div>
+        <div id="zhidui">
+        </div>
+    </div>
+</div>

src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.scss

@@ -0,0 +1,84 @@
+.conter{
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #F2F5F6;
+    display: flex;
+    overflow-y: auto;
+    .left{
+      width: 100%;
+      height: 60%;
+      margin: 20px 20px 10px 50px;
+      background-color: #FFFFFF;
+      border-radius: 16px ;
+      .top{
+        width: 100%;
+        box-sizing: border-box;
+        cursor:pointer;
+        // height: 40px;
+        font-size: 18px;
+        line-height: 40px;
+        padding: 0 20px 20px 0;
+        font-weight: 600;
+        color: rgb(161, 161,161);
+        text-align: right;
+      }
+      .select{
+        color: rgb(38,38,38);
+      }
+      #zhidui{
+        width: 100%;
+        height: 50%;
+        position: absolute;
+        top: 120px;
+        //left: 40%;
+        //top: 45%;
+        //transform: translate(-50%,-60%);
+      }
+    }
+    .right{
+      width: 228px;
+      height: 60%;
+      margin: 20px 20px 10px 10px;
+      background-color: #07CDCF;
+      border-radius: 16px ;
+      display: flex;
+      flex-direction: column;
+      .rightone{
+          //margin-top: 80px;
+          margin-left: 24px;
+          color:#FFFFFF;
+          display: flex;
+          flex-direction: column;
+          position: absolute;
+          top: 110px;
+      }
+      .righttwo{
+        margin-top: 100px;
+        margin-left: 24px;
+        button{
+          width: 180px;
+          height: 44px;
+          color: #FFFFFF;
+          background: rgba(255,255,255,0.6);
+          opacity: 1;
+          border-radius: 8px;
+          border: none;
+          font-size: 18px;
+          outline: none;
+          cursor: pointer;
+        }
+        .clickButton{
+          background-color: #FFFFFF;
+          color: #07CDCF;
+        }
+      }
+      .rightthree{
+        width: 100%;
+        margin-top: 110px;
+        img{
+          float: right;
+        }
+      }
+    }
+}

src/app/examiner/statistic-analysis/examStatistics/echarts/echarts.component.ts

@@ -1,21 +1,199 @@
 import { Component, OnInit } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, NavigationExtras } from "@angular/router";
-
+declare var echarts: any;
 @Component({
   selector: "app-echarts",
   templateUrl: "./echarts.component.html",
   styleUrls: ["./echarts.component.scss"],
 })
 export class EchartsComponent implements OnInit {
-  constructor(private router: Router) {}
+  constructor(public router: Router) {}
+
+  ngOnInit(): void {
+    window.setTimeout(() => {
+      this.initCharts();
+    }, 0);
+  }
+
+  zhutu; //柱状图实例
+  zhiNameData = {
+    name: [
+      "南宁支队",
+      "柳州支队",
+      "桂林支队",
+      "梧州支队",
+      "北海支队",
+      "防尘岗支队",
+      "钦州支队",
+      "贵港支队",
+      "玉林支队",
+      "百色支队",
+      "贺州支队",
+      "河池支队",
+      "来宾支队",
+      "崇左支队",
+    ],
+    frequency: [18, 17, 14, 14, 12, 11, 15, 13, 12, 16, 16, 13, 18, 17, 12],
+    number:[180, 170, 140, 140, 120, 110, 150, 130, 120, 160, 160, 130, 180, 170, 120]
+    
+  };
+  daNameData = {
+    name: [
+      "青秀大队",
+      "特勤大队",
+      "兴宁大队",
+      "江南大队",
+      "西乡塘大队",
+      "良庆大队",
+      "邕宁大队",
+      "高新大队",
+      "华侨大队",
+      "经开大队",
+      "武鸣大队",
+      "隆安大队",
+      "马山大队",
+      "上林大队",
+      "宾阳大队",
+      "横县大队",
+    ],
+    frequency: [2, 3, 1, 1, 2, 1, 0, 1, 1, 0, 2, 0, 0, 1, 0],
+    number: [30, 30, 10, 10, 20, 10, 0, 10, 10, 0, 20, 0, 0, 10, 0],
+  };
+  
+  jiuNameData = {
+    name:[
+      "南宁市青秀区仙葫消防救援站",
+      "南宁市青秀区凤岭消防救援站",
+      "南宁市青秀区柳沙消防救援站",
+    ],
+    frequency:[1, 1, 1],
+    number:[8, 11, 11]
+  };
+
+  staticExam = false; //考试统计
+  upStatic = false; //发布考试统计
+  //考试统计按钮
+  staticecam() {
+    this.staticExam = true;
+    this.upStatic = false;
+  }
+  //发布考试按钮
+  upexam() {
+    this.staticExam = false;
+    this.upStatic = true;
+  }
+  title = "考试频次(次)";
+  examinationIndex = false;
+  color = "#41CDFC";
+  //切换
+  switch(e) {
+    if (e == "频次") {
+      this.title = "考试频次(次)";
+      this.examinationIndex = false;
+      this.color = "#41CDFC";
+    } else {
+      this.title = "考试人数(个)";
+      this.examinationIndex = true;
+      this.color = "#FF8678";
+    }
+    this.initCharts();
+  }
+  //点击柱状图
 
-  ngOnInit(): void {}
+  initCharts() {
-  ok1() {
+    var detailPlanEchart = echarts.init(document.getElementById("zhidui"));
-    window.open("/home/statistic-examination/station-examinee")
+    var option = {
-    // this.router.navigate(["/home/statistic-examination/station-examinee"]); //登陆成功跳转页面
+      title: {
+        text: this.title,
+        left: "5%", // 位置
+        textStyle: {
+          color: "#A1A1A1",
+          fontSize: "16px",
+          textAlign: "left",
+        },
+      },
+      xAxis: {
+        type: "category",
+        data: this.zhiNameData.name,
+        axisLabel: {
+          fontSize: 12,
+          lineHeight: 31,
+        },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: "value",
+        axisLabel: {
+          fontSize: 18,
+          lineHeight: 31,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            opacity: 0.6,
+            type: "dashed",
+          },
+        },
+        show: true,
+      },
+      series: [
+        {
+          data: this.examinationIndex?this.zhiNameData.number: this.zhiNameData.frequency,
+          type: "bar",
+          // showBackground: true,
+          backgroundStyle: {
+            color: "#F2F5F6",
+          },
+          barWidth: 40,
+          color: this.color,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true, //开启显示
+                position: "top", //在上方显示
+                textStyle: {
+                  //数值样式
+                  color: "black",
+                  fontSize: 12,
+                },
+              },
+            },
+          },
+
+          // barWidth:"24px"
+        },
+      ],
+    };
+    detailPlanEchart.on("click", (e) => {
+      this.clickFunc(e);
+    });
+    detailPlanEchart.setOption(option);
   }
-  ok2() {
+  clickFunc(e) {
-    window.open("/home/statistic-examination/examinee-papers")
+    console.log(e);
-    // this.router.navigate(["/home/statistic-examination/examinee-papers"]); //登陆成功跳转页面
+
+    if (e.name.indexOf("支队") != -1) {
+      this.zhiNameData = this.daNameData;
+      this.initCharts();
+    } else if (e.name.indexOf("大队") != -1) {
+      this.zhiNameData = this.jiuNameData;
+      this.initCharts();
+    } else {
+      this.router.navigate(["home/statistic-capacity"]);
+    }
   }
 }