KindergartenUI/src/views/system/survey/index.vue

<template>
  <div class="app-container">
    <el-form
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="所属幼儿园" prop="categoryName" v-if="showyey">
        <el-button
          @click="kindergartenshow = true"
          v-if="kindergartenName == '请选择幼儿园'"
          style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
          >{{ kindergartenName }}</el-button
        >
        <el-button
          @click="kindergartenshow = true"
          style="width: 250px; text-align: left; height: 32px"
          v-else
          >{{ kindergartenName }}</el-button
        >
      </el-form-item>

      <el-form-item label="所属批次" prop="categoryName" label-width="70px">
        <el-button
          @click="batchCodeshowclick"
          style="width: 250px; text-align: left; height: 32px; color: #c0c4cc"
          v-if="batchCodeName == '请选择批次'"
          >{{ batchCodeName }}</el-button
        >
        <el-button
          @click="batchCodeshowclick"
          style="width: 250px; text-align: left; height: 32px"
          v-else
          >{{ batchCodeName }}</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <!-- //批次 -->
    <el-dialog
      width="500px"
      title="选择批次"
      :visible.sync="batchCodeshow"
      append-to-body
      style="margin-top: 20px"
      :before-close="batchCodecancel"
    >
      <el-table :data="testScorelist" align="center" style="margin-top: 0px">
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 20px; height: 20px"
              v-if="batchCodeId == scope.row.id"
              circle
              @click="batchCodeclick(scope.row)"
            ></el-button>
            <el-button
              v-else
              style="width: 15px; height: 15px"
              circle
              @click="batchCodeclick(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column
          property="batchCode"
          label="批次编号"
          width="190"
          align="center"
        />
        <el-table-column
          property="batchName"
          label="批次名称"
          width="190"
          align="center"
        />
      </el-table>
      <pagination
        v-show="total4 > 0"
        :total="total4"
        :page.sync="testqueryParams.pageNum"
        :limit.sync="testqueryParams.pageSize"
        @pagination="testScore"
      />
    </el-dialog>

    <!-- //幼儿园 -->
    <el-dialog
      width="850px"
      title="选择所属幼儿园"
      :visible.sync="kindergartenshow"
      append-to-body
      :before-close="kindergartencancel"
    >
      <el-table :data="kindergartenList">
        <el-table-column label="请选择" width="70" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              style="width: 15px; height: 15px"
              circle
              @click="kindergartenNameclick(scope.row)"
              v-if="kindergartenId == scope.row.id"
            ></el-button>

            <el-button
              v-else
              style="width: 15px; height: 15px"
              circle
              @click="kindergartenNameclick(scope.row)"
            ></el-button>
          </template>
        </el-table-column>

        <el-table-column
          property="kindergartenName"
          label="幼儿园名字"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="kindergartenAddress"
          label="幼儿园地址"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="幼儿园所在组织"
          align="center"
          prop="organizeName"
          width="150"
        >
        </el-table-column>
        <el-table-column
          property="contacts"
          label="联系人"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="phone"
          label="联系电话"
          width="150"
          align="center"
        >
        </el-table-column>
      </el-table>
      <pagination
        v-show="total1 > 0"
        :total="total1"
        :page.sync="kqueryParams.pageNum"
        :limit.sync="kqueryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>

    <el-row v-show="itemshow">
      <div style="display: flex">
        <div style="width: 50%">
          <div
            id="main"
            style="width: 500px; height: 300px; margin: 0 auto"
          ></div>
          <div
            id="main2"
            style="width: 500px; height: 300px; margin: 0 auto"
          ></div>
          <div
            id="main3"
            style="width: 500px; height: 300px; margin: 0 auto"
          ></div>
        </div>
        <div style="width: 50%; margin-top: 50px">
          <el-table
            ref="singleTable"
            :data="studentlist"
            highlight-current-row
            style="margin: 0 auto; width: 530px"
          >
            <el-table-column
              type="index"
              width="130"
              label="排名"
              align="center"
            >
            </el-table-column>
            <el-table-column
              property="studentName"
              label="姓名"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              property="className"
              label="班级"
              width="130"
              align="center"
            >
            </el-table-column>
            <el-table-column
              property="itemFraction"
              label="分数"
              width="140"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-row>
    <el-row :gutter="20" v-if="itemshow2">
      <el-col :span="24" :offset="0">
        <el-card>
          <div slot="header" style="text-align: center">
            <img style="width: 40px" src="@/icons/笑脸.png" alt="" />

            <div><!-- card title -->该批次暂无数据</div>
          </div>
          <!-- card body -->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from "echarts";
import {
  listKindergartenInfo,
  tKindergartenInfo,
} from "@/api/system/kindergartenInfo";
import { getRoleInfo, testScoreBatch } from "@/api/system/quality";
import { StudentList, ClassList } from "@/api/system/survey";

export default {
  name: "KindergartenPhysicalTest",
  components: {},
  data() {
    return {
      itemshow: false,
      itemshow2: false,
      showyey: true,
      total1: 0,
      total4: 0,

      //遮罩层
      kindergartenshow: false,
      batchCodeshow: false,
      // 显示搜索条件
      showSearch: true,
      // 表单参数
      form: {},
      //班级类型
      kindergartenType: "kindergarten_type",
      type: {},
      type2: {},
      //幼儿园查询参数
      kqueryParams: {
        pageNum: 1,
        pageSize: 10,
        organizeId: null,
        kindergartenName: null,
        kindergartenAddress: null,
        kindergartenType: null,
        phone: null,
        contacts: null,
      },
      //幼儿园list
      kindergartenList: [],
      //幼儿园名字
      kindergartenName: "请选择幼儿园",
      //幼儿园ID
      kindergartenId: "",
      //批次名称
      batchCodeName: "请选择批次",
      //批次ID
      batchCodeId: "",
      //批次list
      testScorelist: [],
      //批次编号
      testqueryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      studentlist: [],
      //查询传值
      classqueryParams: {
        kindergartenId: "",
        batchCode: "",
        pageNum: 1,
        pageSize: 10,
        // kindergartenId: "12",
        // batchCode: "PC202208030005",
      },
      studentlistqueryParams: {
        kindergartenId: "",
        batchCode: "",
        pageNum: 1,
        pageSize: 10,
        // kindergartenId: "1",
        // batchCode: "PC202208030005",
      },
      LARGECLASS: "LARGE_CLASS",
      MIDDLECLASS: "MIDDLE_CLASS",
      SMALLCLASS: "SMALL_CLASS",
      yclassname1: [],
      yclassname2: [],
      yclassname3: [],
      classscore1: [],
      classscore2: [],
      classscore3: [],
    };
  },
  mounted() {},
  created() {
    this.getList();
    // this.StudentListinfo();
    // this.ClassListinfo();
  },
  methods: {
    ClassListinfo() {
      ClassList(this.classqueryParams).then((res) => {
        console.log(res.rows.length);
        if (res.rows.length == 0) {
          this.itemshow2 = true;
          this.itemshow = false;
          console.log(
            this.yclassname1,
            this.yclassname2,
            this.yclassname3,
            this.classscore1,
            this.classscore2,
            this.classscore3
          );
          console.log(this.itemshow2);
        } else {
          this.$nextTick((e) => {
            this.yclassname1 = [];
            this.yclassname2 = [];
            this.yclassname3 = [];
            this.classscore1 = [];
            this.classscore2 = [];
            this.classscore3 = [];

            console.log(2);
            res.rows.forEach((e) => {
              if (e.classType == this.LARGECLASS) {
                this.yclassname1.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore1.push(0);
                } else {
                  this.classscore1.push(e.itemScoreAll);
                }
              } else if (e.classType == this.MIDDLECLASS) {
                this.yclassname2.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore2.push(0);
                } else {
                  this.classscore2.push(e.itemScoreAll);
                }
              } else if (e.classType == this.SMALLCLASS) {
                s;
                this.yclassname3.push(e.className);
                if (
                  e.itemScoreAll == "" ||
                  !e.itemScoreAll ||
                  e.itemScoreAll == null
                ) {
                  this.classscore3.push(0);
                } else {
                  this.classscore3.push(e.itemScoreAll);
                }
              }
            });
            console.log(this.yclassname3, this.yclassname2);
            if (this.yclassname1.length != 0) {
              var myChart = echarts.init(document.getElementById("main"));
            }
            if (this.yclassname2.length != 0) {
              var myChart2 = echarts.init(document.getElementById("main2"));
            }
            if (this.yclassname3.length != 0) {
              var myChart3 = echarts.init(document.getElementById("main3"));
            }
            var myChart = echarts.init(document.getElementById("main"));
            var myChart2 = echarts.init(document.getElementById("main2"));
            var myChart3 = echarts.init(document.getElementById("main3"));
            var app = {};

            var option;
            var option2;
            var option3;
            const posList = [
              "left",
              "right",
              "top",
              "bottom",
              "inside",
              "insideTop",
              "insideLeft",
              "insideRight",
              "insideBottom",
              "insideTopLeft",
              "insideTopRight",
              "insideBottomLeft",
              "insideBottomRight",
            ];
            app.configParameters = {
              rotate: {
                min: 0,
                max: 90,
              },
              align: {
                options: {
                  left: "left",
                  center: "center",
                  right: "right",
                },
              },
              verticalAlign: {
                options: {
                  top: "top",
                  middle: "middle",
                  bottom: "bottom",
                },
              },
              position: {
                options: posList.reduce(function (map, pos) {
                  map[pos] = pos;
                  return map;
                }, {}),
              },
              distance: {
                min: 0,
                max: 100,
              },
            };
            app.config = {
              rotate: 0,
              align: "center",
              verticalAlign: "middle",
              position: "top",
              distance: 15,
              onChange: function () {
                const labelOption = {
                  rotate: app.config.rotate,
                  align: app.config.align,
                  verticalAlign: app.config.verticalAlign,
                  position: app.config.position,
                  distance: app.config.distance,
                };
                myChart.setOption({
                  series: [
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                    {
                      label: labelOption,
                    },
                  ],
                });
              },
            };
            const labelOption = {
              show: true,
              position: app.config.position,
              distance: app.config.distance,
              align: app.config.align,
              verticalAlign: app.config.verticalAlign,
              rotate: app.config.rotate,
              formatter: "{c}",
              fontSize: 16,
              rich: {
                name: {},
              },
            };
            option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: {},
              xAxis: [
                {
                  type: "category",
                  axisTick: { show: false },
                  data: this.yclassname1,
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  type: "bar",
                  barGap: 0,
                  color: "#00B050",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: this.classscore1,
                },
              ],
            };
            option2 = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: {},
              xAxis: [
                {
                  type: "category",
                  axisTick: { show: false },
                  data: this.yclassname2,
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  type: "bar",
                  barGap: 0,
                  color: "#00B050",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: this.classscore2,
                },
              ],
            };
            option3 = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              legend: {},
              xAxis: [
                {
                  type: "category",
                  axisTick: { show: false },
                  data: this.yclassname3,
                },
              ],
              yAxis: [
                {
                  type: "value",
                },
              ],
              series: [
                {
                  type: "bar",
                  barGap: 0,
                  color: "#00B050",
                  label: labelOption,
                  emphasis: {
                    focus: "series",
                  },
                  data: this.classscore3,
                },
              ],
            };

            if (this.yclassname1.length != 0) {
              option && myChart.setOption(option);
            }
            if (this.yclassname2.length != 0) {
              option2 && myChart2.setOption(option2);
            }
            if (this.yclassname3.length != 0) {
              option3 && myChart3.setOption(option3);
            }

            // option && myChart.setOption(option);
            // option2 && myChart2.setOption(option2);
            // option3 && myChart3.setOption(option3);
            this.itemshow = true;
            this.itemshow2 = false;
          });
        }
      });
    },
    StudentListinfo() {
      StudentList(this.studentlistqueryParams).then((res) => {
        if (res.rows.length == 0) {
          this.itemshow2 = true;
          this.itemshow = false;
        } else {
          this.studentlist = res.rows;
          this.itemshow2 = false;
          this.itemshow = true;
        }
      });
    },
    //点击批次左边
    batchCodeclick(row) {
      this.batchCodeName = row.batchName;
      this.batchCodeId = row.id;
      this.classqueryParams.batchCode = row.batchCode;
      this.studentlistqueryParams.batchCode = row.batchCode;
      this.batchCodeshow = false;
      this.StudentListinfo();
      this.ClassListinfo();
    },
    //点击批次
    batchCodeshowclick() {
      if (
        this.classqueryParams.kindergartenId == "" ||
        this.classqueryParams.kindergartenId == null
      ) {
        this.$message.error("请先选择幼儿园");
      } else {
        this.testScore();
        this.batchCodeshow = true;
      }
    },
    //批次
    testScore() {
      testScoreBatch(this.testqueryParams).then((res) => {
        this.testScorelist = res.rows;
        this.total4 = res.total;
      });
    },
    //批次关闭
    batchCodecancel() {
      this.batchCodeshow = false;
    },
    //幼儿园关闭
    kindergartencancel() {
      this.kindergartenshow = false;
    },
    //幼儿园左侧点击
    kindergartenNameclick(row) {
      this.classqueryParams.kindergartenId = row.id;
      this.studentlistqueryParams.kindergartenId = row.id;
      this.kindergartenName = row.kindergartenName;
      this.kindergartenId = row.id;
      if (
        this.studentlistqueryParams.batchCode != "" &&
        this.classqueryParams.batchCode != ""
      ) {
        this.StudentListinfo();
        this.ClassListinfo();
      }
      this.kindergartenshow = false;
    },

    getList() {
      tKindergartenInfo(this.kindergartenType).then((res) => {
        this.type = res.data[0];
        this.type2 = res.data[1];
      });
      //用户权限
      getRoleInfo().then((res) => {
        console.log(res);
        this.studentlistqueryParams.kindergartenId = res.data.kindergartenId;
        this.classqueryParams.kindergartenId = res.data.kindergartenId;

        var user = res.data.roleKeys;
        console.log(user);
        if (user.includes("enchou")) {
          this.showyey = false;
          return;
        } else if (user.includes("teacher")) {
          this.showyey = false;
          return;
        } else if (user.includes("parent")) {
          this.showyey = false;
          return;
        }
      });
      //获取幼儿园list
      listKindergartenInfo(this.kqueryParams).then((response) => {
        this.kindergartenList = response.rows;
        this.total1 = response.total;
        // console.log(this.kindergartenList);
      });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>
<style scoped='scss'>
::v-deep .el-card__header {
  border: none;
}
</style>