pbl-teacher-table/src/components/pages/components/workData.vue

<template>
  <div>
    <div class="cp_title" v-if="false">
      <span>{{ dataJson.title }}</span>
    </div>
    <div class="cp_title" v-if="false">
      <span>{{ "教师姓名:" + dataJson.uname }}</span>
    </div>
    <div class="data_body" v-if="false">
      <div class="data_c">
        <WorkData :workJson="workJson" :chapters="chapters"></WorkData>
      </div>
      <div class="data_c">
        <ProblelmData
          :problemJson="problemJson"
          :chapters="chapters"
        ></ProblelmData>
      </div>
      <div class="data_c">
        <ToolsData :toolsJson="toolsJson" :tools="tools"></ToolsData>
      </div>
      <div class="data_c">
        <ScoreData :scoreJson="scoreJson"></ScoreData>
      </div>
    </div>
    <div class="sd_class" v-if="false">
      <div class="sd_tTitle">课堂表现</div>
      <div class="wd_class_body">
        <div class="wd_module">
          <div class="sd_module_content">
            <div
              class="sd_module_children"
              style="
                font-size: 25px;
                padding: 0 25px;
                box-sizing: border-box;
                text-align: center;
              "
            >
              <span>课程人数:共100人,已完成人数{{ randomNum(50, 100) }}人</span>
            </div>
            <div class="sd_module_children">
              <span class="s">课堂时长</span>
              <span class="s2">
                <span>{{ randomNum(5, 15) }}</span
                >次 <span>{{ randomNum(1, 60) }}</span
                >分 <span>{{ randomNum(1, 59) }}</span
                >秒
              </span>
              <span>已经击败99%教师</span>
            </div>
            <div class="sd_module_children">
              <span class="s">课堂节数</span>
              <span class="s2">
                <span>{{ randomNum(5, 20) }}</span
                >节
              </span>
              <span>已经击败99%教师</span>
            </div>
          </div>
          <div style="width: 45%; position: relative">
            <div
              id="gauge_canvas"
              class="echart"
              style="width: 100%; height: 100%"
            ></div>
            <div
              style="
                position: absolute;
                bottom: 25px;
                display: flex;
                justify-content: space-between;
                font-size: 20px;
                width: 100%;
                padding: 0 100px;
                box-sizing: border-box;
              "
            >
              <span>教师为中心</span>
              <span>学生为中心</span>
            </div>
          </div>
          <div class="sd_module_content">
            <div class="sd_module_children">
              <span class="s">课堂互动</span>
              <span class="s2">
                <span>{{ randomNum(10, 20) }}</span
                >次
              </span>
              <span>已经击败99%教师</span>
            </div>
            <div class="sd_module_children">
              <span class="s">课堂生成</span>
              <span class="s2">
                <span>{{ randomNum(7, 15) }}</span
                >节
              </span>
              <span>已经击败99%教师</span>
            </div>
            <div class="sd_module_children">
              <span class="s">自主活动</span>
              <span class="s2">
                <span>{{ randomNum(10, 20) }}</span
                >分 <span>{{ randomNum(10, 59) }}</span
                >秒
              </span>
              <span>已经击败99%教师</span>
            </div>
          </div>
        </div>
        <div class="wd_bottom">
          <div class="bdiv">
            <div
              id="line_canvas"
              class="echart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div class="bdiv">
            <div
              id="bar_canvas"
              class="echart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
      <!-- <img src="../../../assets/data/tu1.png" alt style="width:100%" /> -->
    </div>
    <div class="sd_class">
      <div class="sd_tTitle" v-if="false">班级学生能力分析</div>
      <div style="background: #fff; padding: 10px 0">
        <div class="sd_person_button" v-if="false">
          <span @click="setType(1)" :class="{ active: type == 1 }">语文</span>
          <span @click="setType(2)" :class="{ active: type == 2 }">数学</span>
          <span @click="setType(3)" :class="{ active: type == 3 }">英语</span>
          <span @click="setType(4)" :class="{ active: type == 4 }"
            >信息科技</span
          >
          <span @click="setType(5)" :class="{ active: type == 5 }">艺术</span>
          <span @click="setType(6)" :class="{ active: type == 6 }"
            >跨学科素养</span
          >
        </div>
        <div style="display: flex; flex-wrap: wrap">
          <div style="width: 50%; height: 500px"  v-if="false">
            <div
              id="sunburst_canvas"
              class="echart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div style="width: 50%; height: 500px" v-if="false">
            <div
              id="scatter_canvas"
              class="echart"
              style="width: 100%; height: 100%"
            ></div>
          </div>
          <div style="width: 100%">
            <div style="display: flex;align-items: center;padding-bottom: 15px;font-size: 14px;color: rgba(0, 0, 0, 0.4);">
              <span @click="pageBack" style="height: 100%;cursor: pointer;">评价管理</span>
              <span style="margin: 0 5px;">
                <i class="el-icon-arrow-right"></i>
              </span>
              <span @click="pageBack" style="height: 100%;cursor: pointer;">查看课程</span>
              <span style="margin: 0 5px;">
                <i class="el-icon-arrow-right"></i>
              </span>
              <div style="font-weight: 600;color: rgba(0, 0, 0, 0.9);">{{ dataJson.title }}</div>
            </div>
            <div class="JsonTit">
              <div style="width:94%;margin: 0 auto;font-size: 26px;">{{ dataJson.title }}</div>
              <div class="JsonTitBtn" v-if="dialogVisible">
                <!-- <el-button @click="exportWorkPdf" type="primary" size="small"
                  >一键导出</el-button
                > -->
                <el-button @click="exportData" type="primary" size="small"
                  >自定义导出</el-button
                >
                <el-button style="margin-left: 20px;" @click="retPage" type="primary" size="small">返回</el-button>
                <!-- <el-button
                  type="primary"
                  size="small"
                  @click="
                    goTo(
                      '/worksDetail?cid=' +
                        dataJson.courseId +
                        '&userid=' +
                        userid +
                        '&oid=' +
                        oid
                    )
                  "
                  >查看作业</el-button
                >-->
              </div>
            </div>
            <!-- <div style="width:94%;margin: 0 auto;font-size: 26px;">{{ dataJson.title }}</div> -->
            <WorksDetail2 ref="WorksDetail2Ref" :DState="dataJson.state" :cid="cid" :uid="uid" :ooid="ooid"></WorksDetail2>
            <!-- <el-table
              ref="table"
              :data="tableData"
              border
              :height="500"
              :fit="true"
              style="width: 100%; height: 60%"
              :header-cell-style="{ background: '#f1f1f1' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="name" label="姓名" min-width="20%" align="center"></el-table-column>
              <el-table-column prop="number" label="学号" min-width="20%" align="center"></el-table-column>
              <el-table-column prop="class" label="班级" min-width="20%" align="center"></el-table-column>
              <el-table-column prop="score" label="分数" min-width="20%" align="center"></el-table-column>
              <el-table-column label="操作" min-width="20%">
                <template>
                  <el-button type="primary" size="small">查看</el-button>
                </template>
              </el-table-column>
            </el-table>-->
          </div>
          <!-- <img src="../../../assets/data/tu3.png" alt style="width:50%" />
          <img src="../../../assets/data/tu2.png" alt style="width:50%" />-->
          <!-- <img src="../../../assets/data/tu4.png" alt style="width:100%" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WorkData from "./data/workData";
import ProblelmData from "./data/problelmData";
import ToolsData from "./data/toolsData";
import ScoreData from "./data/scoreData";
import WorksDetail2 from "./worksDetail2";

export default {
  props: ["dataJson", "cid", "uid", "ooid","dialogVisible","dialogVisibleBao"],
  components: {
    WorkData,
    ProblelmData,
    ToolsData,
    ScoreData,
    WorksDetail2,
  },
  data() {
    return {
      tableData: [
        {
          name: "卓曾向",
          number: "202205311",
          class: "三年级七班",
          score: "100",
        },
        {
          name: "王志成",
          number: "202205411",
          class: "四年级一班",
          score: "99",
        },
        {
          name: "李沛郡",
          number: "202205361",
          class: "三年级六班",
          score: "89",
        },
        {
          name: "李世昌",
          number: "202205321",
          class: "三年级二班",
          score: "88",
        },
        {
          name: "李佳薇",
          number: "202205471",
          class: "四年级七班",
          score: "69",
        },
        {
          name: "叶玉卿",
          number: "202205671",
          class: "六年级七班",
          score: "78",
        },
        {
          name: "冯翊泽",
          number: "202205571",
          class: "五年级七班",
          score: "68",
        },
        { name: "乐舞", number: "202205372", class: "三年级七班", score: "77" },
        {
          name: "关晓辉",
          number: "202205475",
          class: "四年级七班",
          score: "68",
        },
        {
          name: "谭晶陈",
          number: "202205271",
          class: "二年级七班",
          score: "79",
        },
      ],
      Course: this.dataJson,
      courseId: "",
      tools: [],
      chapters: [],
      workJson: [], //多少人提交作业数据
      scoreJson: [], //量规评分数据
      problemJson: [], //问答数据
      toolsJson: [], //工具数据
      type: 6,
      chartObj: null,
      chartObj2: null,
      chartObj3: null,
      chartObj4: null,
      chartObj5: null,
      gaugeOption: {
        series: [
          {
            type: "gauge",
            radius: "100%",
            axisLine: {
              lineStyle: {
                width: 10,
                color: [
                  [
                    100,
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 1,
                          color: "rgb(240,50,243)", // 0% 处的颜色
                        },

                        {
                          offset: 0,
                          color: "rgb(37,61,249)", // 100% 处的颜色
                        },
                      ],
                      global: false, // 缺省为 false
                    },
                  ],
                ],
              },
            },
            pointer: {
              width: 8,
              length: "65%",
              itemStyle: {
                color: "auto",
              },
            },

            axisLabel: {
              color: "auto",
              distance: 20,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value}",
            },
            data: [
              {
                value: 60,
                name: "課堂類型",
                title: {
                  offsetCenter: [0, "80%"],
                  fontSize: 30,
                },
              },
            ],
          },
        ],
      },
      lineOption: {
        title: {
          text: "課堂時間",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["課堂時長", "麻吉星時長"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {},
          // },
        },
        xAxis: {
          type: "category",
          data: ["05-25", "05-26", "05-27", "05-28", "05-29", "05-30", "05-31"],
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value}M",
          },
        },
        series: [
          {
            name: "課堂時長",
            type: "line",
            data: [10, 20, 30, 11, 15, 16, 18],
          },
          {
            name: "麻吉星時長",
            type: "line",
            data: [22, 16, 18, 15, 19, 28, 17],
          },
        ],
      },
      barOption: {
        title: {
          text: "任教班級",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: ["中山五年5班", "中山五年5班"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "圖片",
            type: "bar",
            data: [220, 150],
          },
          {
            name: "視頻",
            type: "bar",
            data: [120, 132],
          },
          {
            name: "互動",
            type: "bar",
            data: [110, 132],
          },
          {
            name: "投票",
            type: "bar",

            data: [120, 132],
          },
          {
            name: "挑戰",
            type: "bar",
            data: [221, 110],
          },
          {
            name: "評估",
            type: "bar",
            data: [120, 133],
          },
          {
            name: "棄權",
            type: "bar",
            data: [105, 132],
          },
        ],
      },
      sunburstOption: {
        //color:colors,
        tooltip: {
          trigger: "item",
        },
        legend: {
          left: "50",
          top: "center",
        },
        series: {
          type: "sunburst",
          data: [],
          radius: [20, "90%"],
          itemStyle: {
            borderRadius: 7,
            borderWidth: 2,
          },
          label: {
            show: true,
            color: "#fff",
          },
        },
      },
      scatterOption: {
        xAxis: {
          type: "category",
          data: ["问题意识", "科学探究", "实践创新", "工程思维", "学习反思"],
          splitLine: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          name: "能力指标",
        },
        yAxis: {
          type: "value",
          name: "分值",
          minInterval: 1,
          max: 5,
          axisLine: {
            show: false,
          },
        },
        grid: {
          left: 100,
          bottom: 50,
          right: 100,
          top: 70,
        },
        legend: {
          color: "rgb(222,126,62)",
          left: "right",
          top: "0%",
        },
        series: [
          {
            name: "学生百分数(单位：%)",
            type: "scatter",
            symbolSize: function (val) {
              return val[2] * 1.5;
            },
            color: "rgb(222,126,62,.5)",
            data: [[1, 2, 50]],
            label: {
              color: "rgb(222,126,62)",
              show: true,
              position: "inside",
              fontSize: 16,
              formatter: function (a, b, c) {
                return a.data[2];
              },
            },
            animationDelay: function (idx) {
              return idx * 5;
            },
          },
        ],
      },
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    retPage(){
      console.log('666');
      this.$emit('cancel');
    },
    exportWorkPdf(){
      this.$refs.WorksDetail2Ref.exportPdfSetAllWork()
    },
    exportData(){
      this.$emit("update:dialogVisibleBao", true);
    },
    pageBack(){
      // console.log('666');
      
      this.$emit("update:dialogVisible", false);
    },
    getData() {
      let params = {
        cid: this.courseId,
      };
      this.ajax
        .get(this.$store.state.api + "getWorkData", params)
        .then((res) => {
          let _data = res.data[1]; //所有作业数据
          let _data2 = res.data[2]; //问答提交数据
          let _data3 = res.data[3]; //工具使用数据
          let workJson = [];
          let scoreJson = [];
          let problemJson = [];
          let toolsJson = [];
          _data.forEach((item, index) => {
            workJson.push({ stage: item.stage, userid: item.userid });
            scoreJson.push({ rate: JSON.parse(item.rate) });
          });
          _data2.forEach((item, index) => {
            problemJson.push({ stage: item.chapterid });
          });
          _data3.forEach((item, index) => {
            toolsJson.push({ tools: item.tools, count: item.count });
          });
          this.workJson = workJson;
          this.scoreJson = scoreJson;
          this.problemJson = problemJson;
          this.toolsJson = toolsJson;
          this.$forceUpdate();
        })
        .catch((err) => {
          console.error(err);
        });
    },
    setChart() {
      // 雷达图显示的标签
      let newPromise = new Promise((resolve) => {
        resolve();
      });
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        const chartObj = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#gauge_canvas")
        );
        this.gaugeOption.series[0].data[0].value = this.randomNum(10, 100);
        const chartObj2 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#line_canvas")
        );
        var _array1 = [];
        var _array2 = [];
        for (let index = 0; index < 7; index++) {
          _array1.push(this.randomNum(40, 50));
          _array2.push(this.randomNum(40, 50));
        }
        this.lineOption.series[0].data = _array1;
        this.lineOption.series[1].data = _array2;
        const chartObj3 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#bar_canvas")
        );
        var _arraybar1 = [];
        var _arraybar2 = [];
        var _arraybar3 = [];
        var _arraybar4 = [];
        var _arraybar5 = [];
        var _arraybar6 = [];
        var _arraybar7 = [];
        for (let index = 0; index < 7; index++) {
          _arraybar1.push(this.randomNum(20, 70));
          _arraybar2.push(this.randomNum(20, 70));
          _arraybar3.push(this.randomNum(20, 70));
          _arraybar4.push(this.randomNum(20, 70));
          _arraybar5.push(this.randomNum(20, 70));
          _arraybar6.push(this.randomNum(20, 70));
          _arraybar7.push(this.randomNum(20, 70));
        }
        this.barOption.series[0].data = _arraybar1;
        this.barOption.series[1].data = _arraybar2;
        this.barOption.series[2].data = _arraybar3;
        this.barOption.series[3].data = _arraybar4;
        this.barOption.series[4].data = _arraybar5;
        this.barOption.series[5].data = _arraybar6;
        this.barOption.series[6].data = _arraybar7;
        const chartObj4 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#sunburst_canvas")
        );
        this.sunburstOption.series.data = [
          {
            name: "学习反思能力",
            value: 15,
            children: [
              {
                name: "终生学习",
                value: this.randomNum(1, 5),
              },
              {
                name: "自我进步",
                value: this.randomNum(1, 5),
              },
              {
                name: "自我反思",
                value: this.randomNum(1, 5),
              },
            ],
          },
          {
            name: "工程思维能力",
            value: 15,
            children: [
              {
                name: "工程思维能力",
                value: this.randomNum(1, 15),
              },
            ],
          },
          {
            name: "实践创新能力",
            value: 15,
            children: [
              {
                name: "实践创新能力",
                value: this.randomNum(5, 15),
              },
            ],
          },
          {
            name: "科学探究能力",
            value: 15,
            children: [
              {
                name: "科学探究能力",
                value: this.randomNum(5, 15),
              },
            ],
          },
          {
            name: "问题意识",
            value: 15,
            children: [
              {
                name: "问题意识",
                value: this.randomNum(5, 15),
              },
            ],
          },
        ];
        const chartObj5 = this.$echarts.init(
          //劳动课程
          this.$el.querySelector("#scatter_canvas")
        );
        var scatterArray = [];
        for (var i = 0; i < 5; i++) {
          scatterArray[i] = [];
          var a = 0;
          for (var j = 0; j < 5; j++) {
            var b = this.randomNum(0, 20);
            a += b;
            if (j == 4) {
              scatterArray[i].push(100 - a);
              scatterArray[i].sort(function () {
                return Math.random() - 0.5;
              });
            } else {
              scatterArray[i].push(b);
            }
          }
        }

        var _arrayScatter = [];
        for (var i = 0; i < 5; i++) {
          for (var j = 1; j < 6; j++) {
            var x = i;
            var y = j;
            // var z = this.randomNum(0, 100);
            var z = scatterArray[i][j - 1];
            _arrayScatter.push([x, y, z]);
          }
        }
        this.scatterOption.series[0].data = _arrayScatter;
        // 初始化雷达图
        this.chartObj = chartObj;
        this.chartObj2 = chartObj2;
        this.chartObj3 = chartObj3;
        this.chartObj4 = chartObj4;
        this.chartObj5 = chartObj5;
        this.chartObj.setOption(this.gaugeOption);
        this.chartObj2.setOption(this.lineOption);
        this.chartObj3.setOption(this.barOption);
        this.chartObj4.setOption(this.sunburstOption);
        this.chartObj5.setOption(this.scatterOption);
        this.tableData = this.tableData.sort(function () {
          return Math.random() - 0.5;
        });
      });
    },
    randomNum(minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    setType(type) {
      this.type = type;
      this.sunburstOption.series.data = [
        {
          name: "学习反思能力",
          value: 15,
          children: [
            {
              name: "终生学习",
              value: this.randomNum(1, 5),
            },
            {
              name: "自我进步",
              value: this.randomNum(1, 5),
            },
            {
              name: "自我反思",
              value: this.randomNum(1, 5),
            },
          ],
        },
        {
          name: "工程思维能力",
          value: 15,
          children: [
            {
              name: "工程思维能力",
              value: this.randomNum(5, 15),
            },
          ],
        },
        {
          name: "实践创新能力",
          value: 15,
          children: [
            {
              name: "实践创新能力",
              value: this.randomNum(5, 15),
            },
          ],
        },
        {
          name: "科学探究能力",
          value: 15,
          children: [
            {
              name: "科学探究能力",
              value: this.randomNum(5, 15),
            },
          ],
        },
        {
          name: "问题意识",
          value: 15,
          children: [
            {
              name: "问题意识",
              value: this.randomNum(5, 15),
            },
          ],
        },
      ];
      var scatterArray = [];
      for (var i = 0; i < 5; i++) {
        scatterArray[i] = [];
        var a = 0;
        for (var j = 0; j < 5; j++) {
          var b = this.randomNum(0, 20);
          a += b;
          if (j == 4) {
            scatterArray[i].push(100 - a);
            scatterArray[i].sort(function () {
              return Math.random() - 0.5;
            });
          } else {
            scatterArray[i].push(b);
          }
        }
      }

      var _arrayScatter = [];
      for (var i = 0; i < 5; i++) {
        for (var j = 1; j < 6; j++) {
          var x = i;
          var y = j;
          // var z = this.randomNum(0, 100);
          var z = scatterArray[i][j - 1];
          _arrayScatter.push([x, y, z]);
        }
      }
      this.scatterOption.series[0].data = _arrayScatter;
      this.chartObj4.setOption(this.sunburstOption);
      this.chartObj5.setOption(this.scatterOption);
    },
  },
  watch: {
    // 使用监听的方式，监听数据的变化
    dataJson(val) {
      this.Course = val;
      this.courseId = val.courseId;
      var _chapters = JSON.parse(val.chapters);
      this.chapters = [];
      this.tools = [];
      _chapters.forEach((element) => {
        this.chapters.push({
          name: element.dyName,
          id: element.chapterInfo[0].chapterid,
        });
        if (element.chapterInfo[0].toolChoose) {
          this.tools.push(...element.chapterInfo[0].toolChoose);
        }
      });
      this.tools.push(...[1, 1, 1, 1, 2, 2, 2, 2]);
      this.tools = Array.from(new Set(this.tools)).sort();
      this.getData();
    },
  },
  mounted() {
    this.courseId = this.dataJson.courseId;
    var _chapters = JSON.parse(this.dataJson.chapters);
    this.chapters = [];
    this.tools = [];
    _chapters.forEach((element) => {
      this.chapters.push({
        name: element.dyName,
        id: element.chapterInfo[0].chapterid,
      });
      if (element.chapterInfo[0].toolChoose) {
        this.tools.push(...element.chapterInfo[0].toolChoose);
      }
    });
    this.tools = Array.from(new Set(this.tools)).sort();
    this.getData();
    this.setChart();
  },
};
</script>

<style scoped>
.cp_title {
  font-size: 24px;
  margin: 0 auto;
  width: 95%;
}
.data_body {
  display: flex;
  flex-wrap: wrap;
}
.data_body .data_c {
  width: 50%;
}
.sd_class {
  width: 95%;
  margin: 0 auto;
}
.sd_tTitle {
  width: 100%;
  background: rgb(199, 217, 212);
  padding: 10px 10px;
  border-radius: 5px;
  border: 1px solid rgb(165, 182, 177);
  font-size: 18px;
  font-weight: 500;
  margin: 20px 0;
  box-sizing: border-box;
  font-weight: 600;
}

.sd_person_button {
  font-size: 16px;
  display: flex;
  margin-bottom: 10px;
}

.sd_person_button span {
  margin-left: 20px;
  padding: 0 0 6px;
  cursor: pointer;
}

.sd_person_button .active {
  border-bottom: 2px solid rgb(30, 146, 255);
  color: rgb(30, 146, 255);
}

.sd_module_content {
  width: calc(50% / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sd_module_content:nth-child(1) .sd_module_children:nth-child(1) {
  background: rgb(68, 228, 116);
}
.sd_module_content:nth-child(1) .sd_module_children:nth-child(2) {
  background: rgb(244, 132, 101);
}
.sd_module_content:nth-child(1) .sd_module_children:nth-child(3) {
  background: rgb(99, 205, 156);
}
.sd_module_content:nth-child(3) .sd_module_children:nth-child(1) {
  background: rgb(253, 183, 184);
}
.sd_module_content:nth-child(3) .sd_module_children:nth-child(2) {
  background: rgb(60, 174, 254);
}
.sd_module_content:nth-child(3) .sd_module_children:nth-child(3) {
  background: rgb(61, 223, 234);
}
.sd_module_children {
  width: 100%;
  height: 130px;
  position: relative;
  border-radius: 5px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sd_module_children + .sd_module_children {
  margin-top: 20px;
}
.sd_module_children .s {
  position: absolute;
  font-size: 16px;
  top: 10px;
  left: 10px;
}
.sd_module_children .s2 span {
  font-size: 45px;
  margin-right: 3px;
}

.wd_class_body {
  background: rgb(242, 242, 242);
  padding: 20px 0;
  border-radius: 5px;
}
.wd_module {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
}

.wd_bottom {
  display: flex;
  justify-content: space-between;
  height: 500px;
  margin: 20px 0 0 0;
  width: 95%;
  margin: 20px auto 0;
}

.wd_bottom .bdiv {
  width: 48%;
}
.el-table >>> .even_row {
  background-color: #f1f1f1;
}
.JsonTit{
  width: 100%;
  padding: 20px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.JsonTitBtn{
  display: flex;
  align-items: center;
}
</style>