FIX:领料单sqlbug

src/views/system/jbdScan/goods/caigourukudan.vue

@@ -290,7 +290,7 @@ export default {
         let sql = `select * FROM t_wljsysjlb WHERE id_='${item}'`;
         repostCurd("sql", sql).then((res) => {
           let data = res.variables.data;
-          // let s2 = `select NAME_,CREATE_TIME_ FROM ibps_party_employee where id_ =(select CREATE_BY_ FROM ibps_bpm_oper_log WHERE PROC_INST_ID_ = (SELECT PROC_INST_ID_ FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}' )AND NODE_ID_ = 'Activity_1pha4py' ORDER BY CREATE_TIME_ DESC LIMIT 1)`;
+          // let s2 = `select NAME_,CREATE_TIME_ FROM ibps_party_employee where id_ =(select CREATE_BY_ FROM ibps_bpm_oper_log WHERE PROC_INST_ID_ = (SELECT PROC_INST_ID_ FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}' LIMIT 1)AND NODE_ID_ = 'Activity_1pha4py' ORDER BY CREATE_TIME_ DESC LIMIT 1)`;
           let s2 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}') AND b.NODE_ID_ = 'Activity_1pha4py' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
           repostCurd("sql", s2).then((res) => {
             name2 = res.variables.data[0].NAME_ || 0;
@@ -300,8 +300,8 @@ export default {
             let addhanshuiheji = 0;
             let addjine = 0;
             let addshuie = 0;
-            // let s3 = `select NAME_,CREATE_TIME_ FROM ibps_party_employee where id_ =(select CREATE_BY_ FROM ibps_bpm_oper_log WHERE PROC_INST_ID_ = (SELECT PROC_INST_ID_ FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}' )AND NODE_ID_ = 'Activity_04ff3k5' ORDER BY CREATE_TIME_ DESC LIMIT 1)`;
-            let s3 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}') AND b.NODE_ID_ = 'Activity_04ff3k5' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
+            // let s3 = `select NAME_,CREATE_TIME_ FROM ibps_party_employee where id_ =(select CREATE_BY_ FROM ibps_bpm_oper_log WHERE PROC_INST_ID_ = (SELECT PROC_INST_ID_ FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}' LIMIT 1)AND NODE_ID_ = 'Activity_04ff3k5' ORDER BY CREATE_TIME_ DESC LIMIT 1)`;
+            let s3 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item}' LIMIT 1) AND b.NODE_ID_ = 'Activity_04ff3k5' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
             repostCurd("sql", s3).then((res) => {
               name3 = res.variables.data[0].NAME_ || 0;
               time3 = res.variables.data[0].CREATE_TIME_ || 0;

src/views/system/jbdScan/goods/chnangguirukudan.vue

@@ -280,13 +280,13 @@ export default {
           let sql1 = `select * FROM t_cgysjlb  WHERE FIND_IN_SET(wai_jian_,'${item.id_}')`;
           repostCurd("sql", sql1).then((res) => {
             let data = res.variables.data;
-            let s2 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}') AND b.NODE_ID_ = 'Activity_04lhxla' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
+            let s2 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}' LIMIT 1) AND b.NODE_ID_ = 'Activity_04lhxla' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
             repostCurd("sql", s2).then((res) => {
               name2 = res.variables.data[0].NAME_;
               time2 = res.variables.data[0].CREATE_TIME_;
               data["name2"] = name2;
               data["time2"] = time2;
-              let s3 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}') AND b.NODE_ID_ = 'Activity_1dk76gy' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
+              let s3 = `select a.NAME_,DATE_FORMAT(b.CREATE_TIME_,'%Y-%m-%d') AS CREATE_TIME_ FROM ibps_party_employee  as a join ibps_bpm_oper_log as b on a.ID_ = b.CREATE_BY_ where b.PROC_INST_ID_ = ( SELECT  PROC_INST_ID_  FROM ibps_bpm_bus_rel WHERE BUSINESSKEY_ = '${item.id_}' LIMIT 1) AND b.NODE_ID_ = 'Activity_1dk76gy' ORDER BY b.CREATE_TIME_ DESC LIMIT 1`;
               repostCurd("sql", s3).then((res) => {
                 name3 = res.variables.data[0].NAME_;
                 time3 = res.variables.data[0].CREATE_TIME_;

src/views/system/jbdScan/goods/neishenzhuangtai.vue

@@ -0,0 +1,720 @@
+<template>
+  <div class="bg">
+    <el-dialog
+      width="60vw"
+      height="50vh"
+      :modal-append-to-body="false"
+      title="内部审核流程"
+      :visible.sync="scanVisible"
+    >
+      <!-- 表单是否显示 -->
+      <div style="height: 75vh; width: 100%">
+        <div id="box">
+          <div class="overall">
+            <!-- 步骤条盒子 -->
+            <div class="steps-box">
+              <!-- 步骤条 -->
+              <div class="Article-steps">
+                <!-- 步骤条背景进度条 -->
+                <div class="line">
+                  <span
+                    class="plan"
+                    :style="`width:${
+                      activeIndex * (100 / (stepList.length - 1)) -
+                      100 / (stepList.length - 1) / 2
+                    }%`"
+                  ></span>
+                </div>
+                <!-- 每步部分底部文字描述 -->
+                <span
+                  class="step"
+                  v-for="(i, index) in stepList"
+                  :key="index"
+                  :class="
+                    activeIndex == i.stepIndex || i.stepIndex <= activeIndex
+                      ? 'step-active'
+                      : ''
+                  "
+                >
+                  <span class="step-num">
+                    <p cla>{{ i.title }}</p>
+
+                    <!-- <span class="num">{{ i.stepIndex }}</span> -->
+                  </span>
+                  <p class="title"></p>
+                </span>
+              </div>
+              <!-- 步骤条对应内容 -->
+              <div class="Article-content"></div>
+            </div>
+          </div>
+          <div style="width: 90%; margin: 0 auto">
+            <div class="main">
+              <div class="wheel-title">内审核查完成率</div>
+              <div id="main"></div>
+            </div>
+          </div>
+
+          <div class="cnas">
+            <div style="width: 90%; margin: 0 auto; line-height: 35px">
+              内审不符合项(CNAS)
+            </div>
+            <el-table
+              :data="tableData"
+              border
+              style="width: 90%; margin: 0 auto"
+            >
+              <el-table-column
+                prop="bu_fu_he_xiang_mi"
+                label="不符合项描述"
+                width="300"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="ping_shen_yi_ju_"
+                label="评审依据"
+                width="250"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="tiao_kuan_bian_ha"
+                label="条款编号"
+                width="70"
+              >
+              </el-table-column>
+              <el-table-column prop="nei_shen_yuan_" label="内审员" width="60">
+                <template slot-scope="scope"
+                  >{{ scope.row.nei_shen_yuan_ | emfiltes(employeeList) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="ze_ren_shi_" label="责任室" width="60">
+              </el-table-column>
+              <el-table-column prop="fu_ze_ren_" label="负责人" width="60">
+                <template slot-scope="scope"
+                  >{{ scope.row.fu_ze_ren_ | emfiltes(employeeList) }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="bu_fu_he_cheng_du"
+                label="不符合程度"
+                width="80"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="cma">
+            <div style="width: 90%; margin: 0 auto; line-height: 35px">
+              内审不符合项(CMA)
+            </div>
+            <el-table
+              :data="CMAtable"
+              border
+              style="width: 90%; margin: 0 auto"
+            >
+              <el-table-column
+                prop="bu_fu_he_xiang_mi"
+                label="不符合项描述"
+                width="300"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="ping_shen_yi_ju_"
+                label="评审依据"
+                width="250"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="tiao_kuan_bian_ha"
+                label="条款编号"
+                width="70"
+              >
+              </el-table-column>
+              <el-table-column :prop="nei_shen_yuan_" label="内审员" width="60">
+                <template slot-scope="scope"
+                  >{{ scope.row.nei_shen_yuan_ | emfiltes(employeeList) }}
+                </template>
+              </el-table-column>
+              <el-table-column prop="ze_ren_shi_" label="责任室" width="60">
+              </el-table-column>
+              <el-table-column prop="fu_ze_ren_" label="负责人" width="60">
+                <template slot-scope="scope"
+                  >{{ scope.row.fu_ze_ren_ | emfiltes(employeeList) }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="bu_fu_he_cheng_du"
+                label="不符合程度"
+                width="80"
+              >
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="table-echarts">
+            <div class="in-echarts">
+              <div>不符合项条款统计</div>
+              <div id="in-echarts"></div>
+            </div>
+            <div class="department">
+              <div>不符合项部门统计</div>
+              <div id="department"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import repostCurd from "@/business/platform/form/utils/custom/joinCURD.js";
+export default {
+  components: {},
+  props: {
+    obj: {
+      default: [],
+      type: Array,
+    },
+    scanVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      value: "",
+      id: "",
+      visible: true,
+      jieduanValue: 0,
+      //当前位置
+      activeIndex: 1,
+      //步骤条步数
+      stepList: [
+        {
+          stepIndex: 10,
+          title: "内审开始",
+        },
+        {
+          stepIndex: 20,
+          title: "检查表编制",
+        },
+        {
+          stepIndex: 30,
+          title: "首次会议",
+        },
+        {
+          stepIndex: 40,
+          title: "内部检查",
+        },
+        {
+          stepIndex: 50,
+          title: "末次会议",
+        },
+        {
+          stepIndex: 60,
+          title: "不符合项整改",
+        },
+        {
+          stepIndex: 70,
+          title: "内审报告",
+        },
+        // {
+        //   stepIndex: 8,
+        //   title: "不符合项跟踪",
+        // },
+        {
+          stepIndex: 80,
+          title: "内审结束",
+        },
+      ],
+      tableData: [], //cnas
+      CMAtable: [], //CMA
+      source: [],
+      pieData: [],
+      employeeList: [],
+    };
+  },
+  filters: {
+    emfiltes: function (value, arr) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].ID_ == value) {
+          return arr[i].NAME_;
+        }
+      }
+    },
+  },
+  watch: {
+    obj() {
+      this.getInit();
+      this.getLoadEcharts();
+    },
+    scanVisible(news, old) {
+    },
+  },
+  created() {
+    this.getInit();
+    this.getEmployee();
+  },
+  mounted() {
+    this.getLoadEcharts();
+  },
+  methods: {
+    //仪表盘
+    getLoadEcharts() {
+      var chartDom = document.getElementById("main");
+      const setEchartWH = {
+        //设置控制图表大小变量
+        width: 500,
+        height: 350,
+      };
+
+      var myChart = echarts.init(chartDom, null, setEchartWH);
+      var option;
+      let this_ = this;
+      option = {
+        series: [
+          {
+            type: "gauge",
+            min: 0,
+            max: 80,
+            axisLine: {
+              lineStyle: {
+                width: 30,
+                color: [
+                  [0.3, "#fd666d"],
+                  [0.7, "#37a2da"],
+                  [1, "#67e0e3"],
+                ],
+              },
+            },
+            pointer: {
+              itemStyle: {
+                color: "auto",
+              },
+            },
+            axisTick: {
+              distance: -30,
+              length: 8,
+              lineStyle: {
+                color: "#fff",
+                width: 2,
+              },
+            },
+            splitLine: {
+              distance: -30,
+              length: 30,
+              lineStyle: {
+                color: "#fff",
+                width: 4,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: "{value} %",
+              color: "auto",
+            },
+            data: [{ value: 100 }],
+          },
+        ],
+      };
+      setInterval(function () {
+        myChart.setOption({
+          series: [
+            {
+              data: [
+                {
+                  value: this_.jieduanValue,
+                },
+              ],
+            },
+          ],
+        });
+      }, 2000);
+
+      option && myChart.setOption(option);
+    },
+
+    //指定数据到坐标轴的映射
+    getLoadEchartsTwo() {
+      var chartDom = document.getElementById("in-echarts");
+      const setEchartWH = {
+        //设置控制图表大小变量
+        width: 500,
+        height: 350,
+      };
+
+      var myChart = echarts.init(chartDom, null, setEchartWH);
+      var option;
+
+      option = {
+        dataset: {
+          source: this.source,
+        },
+        grid: { containLabel: true },
+        xAxis: { name: "不符合项" },
+        yAxis: { type: "category" },
+        visualMap: {
+          orient: "horizontal",
+          left: "center",
+          show: false,
+          min: 10,
+          max: 100,
+          // text: ["High Score", "Low Score"],
+          // Map the score column to color
+          dimension: 0,
+          inRange: {
+            color: ["#65B581", "#FFCE34", "#FD665F"],
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            encode: {
+              // Map the "amount" column to X axis.
+              x: "amount",
+              // Map the "product" column to Y axis
+              y: "product",
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    //部门饼图
+    getLoadEchartsthree() {
+      var chartDom = document.getElementById("department");
+      const setEchartWH = {
+        //设置控制图表大小变量
+        width: 500,
+        height: 350,
+      };
+
+      var myChart = echarts.init(chartDom, null, setEchartWH);
+      var option;
+      option = {
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: this.pieData, //[{1:2,3:4}]
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    //人员
+    async getEmployee() {
+      let this_ = this;
+      let sql = "select ID_,NAME_,CREATE_TIME_ FROM ibps_party_employee ";
+      await repostCurd("sql", sql).then((res) => {
+        this_.employeeList = res.variables.data;
+      });
+    },
+    jieduan(value) {
+      if (value.includes("1")) {
+        return 11;
+      } else if (value.includes("2")) {
+        return 21;
+      } else if (value.includes("3")) {
+        return 31;
+      } else if (value.includes("4")) {
+        return 41;
+      } else if (value.includes("5")) {
+        return 50;
+      } else if (value.includes("6")) {
+        return 61;
+      } else if (value.includes("7")) {
+        return 71;
+      } else if (value.includes("8")) {
+        return 81;
+      } else if (value.includes("9")) {
+        return 100;
+      } else {
+        return 0;
+      }
+    },
+    //不符合项条款统计数据
+    getNoData(arr) {
+      let firstArr = [];
+      let secondArr = [];
+      arr.forEach((it) => {
+        if (firstArr.length == 0) {
+          secondArr.push("score");
+          secondArr.push("不符合项");
+          secondArr.push("product");
+          firstArr.push(secondArr);
+          secondArr = [];
+          secondArr.push(1);
+          secondArr.push(1);
+          secondArr.push(it.tiao_kuan_bian_ha);
+          firstArr.push(secondArr);
+          secondArr = [];
+        } else {
+          for (var i in firstArr) {
+            let a = firstArr[i][2];
+            let b = it.tiao_kuan_bian_ha;
+            if (firstArr[i][2] == it.tiao_kuan_bian_ha) {
+              firstArr[i][0] = firstArr[i][0] + 1;
+              firstArr[i][1] = firstArr[i][1] + 1;
+              break;
+            } else if (i == firstArr.length - 1) {
+              secondArr.push(1);
+              secondArr.push(1);
+              secondArr.push(it.tiao_kuan_bian_ha);
+              firstArr.push(secondArr);
+              secondArr = [];
+              break;
+            }
+          }
+        }
+      });
+      this.source = firstArr;
+      this.getLoadEchartsTwo();
+    },
+    //饼图数据
+    async getPieData(arr) {
+      let arrr = arr;
+      this.pieData = [];
+      let newarr = [];
+      let obj = {};
+      let sql = "select ID_,NAME_ FROM  ibps_party_org";
+      await repostCurd("sql", sql).then((res) => {
+        let arr1 = res.variables.data;
+        arr.forEach((item, index) => {
+          arr1.forEach((it) => {
+            if (item.ze_ren_shi_ == it.ID_) {
+              arr[index].ze_ren_shi_ = it.NAME_;
+            }
+          });
+        });
+      });
+      let map = new Map();
+      for (let item of arr) {
+        if (!map.has(item.ze_ren_shi_)) {
+          map.set(item.ze_ren_shi_, item);
+        }
+      }
+      arr = [...map.values()];
+      arr.forEach((item, index) => {
+        let add = 0;
+        for (var i = 0; i < arrr.length; i++) {
+          if (item.ze_ren_shi_ == arrr[i].ze_ren_shi_) {
+            add++;
+          }
+        }
+        obj.value = add;
+        obj.name = item.ze_ren_shi_;
+        newarr.push(obj);
+        obj = {};
+      });
+
+      this.pieData = newarr;
+      this.getLoadEchartsthree();
+    },
+    getInit() {
+      let data = this.obj;
+      console.log(data)
+      if(!data.jie_dian_ren_wu_){
+        
+      }
+      let jieduanvalue = data.jie_dian_ren_wu_||1
+      this.activeIndex = this.jieduan(jieduanvalue);
+      this.jieduanValue = this.activeIndex;
+      this.gettable(data.ji_hua_zong_wai_j);
+    },
+    async gettable(id) {
+      let this_ = this;
+      let sql =
+        "select * FROM t_nsbfhxjlhzb WHERE wai_jian_ =(SELECT id_  FROM t_nshyjyb WHERE ji_hua_zong_wai_j ='" +
+        id +
+        "' ORDER BY create_time_ DESC LIMIT 1)";
+      await repostCurd("sql", sql).then((res) => {
+        let data = res.variables.data;
+        data.forEach((item) => {
+          if (item.ping_shen_yi_ju_.includes("RB")) {
+            this_.CMAtable.push(item);
+          } else {
+            this_.tableData.push(item);
+          }
+        });
+        this_.getNoData(this_.tableData);
+        this_.getPieData(this_.tableData);
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bg {
+  .main {
+    width: 500px;
+    height: 350px;
+    position: relative;
+    top: 16px;
+    margin: 0 auto;
+    .wheel-title {
+      position: absolute;
+
+      top: 60px;
+      left: -8px;
+      // color: #000;
+      // font-weight: bold;
+    }
+  }
+  #main {
+    width: 100%;
+    height: 100%;
+  }
+  .steps-box {
+    user-select: none;
+    width: 90%;
+    height: 2px;
+    position: relative;
+    margin: 10px auto;
+    // <!-- 步骤条背景进度条 -->
+    .line {
+      display: block;
+      margin: 0 auto;
+      position: absolute;
+      top: 24px;
+      left: 5%;
+      background: #3377db;
+      width: 95%;
+      height: 2px;
+      overflow: hidden;
+      .plan {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 2px;
+        transition: 0.5s;
+        background: #8ab4f3;
+      }
+    }
+    .Article-steps {
+      display: flex;
+      justify-content: space-between;
+      .step {
+        .title {
+          font-size: 17px;
+          font-weight: bold;
+          color: #808080;
+          margin-top: 5px;
+        }
+        .step-num {
+          position: absolute;
+          width: 50px;
+          height: 50px;
+          display: inline-block;
+          line-height: 50px;
+          background: #808080;
+          // clip-path: polygon(50% 0, 100% 85%, 0 85%);
+          color: white;
+          font-weight: bold;
+          z-index: 999;
+          border-radius: 50%;
+          text-align: center;
+          // transition: 0.5s;
+          font-size: 10px;
+          display: flex;
+          align-items: center;
+          p {
+            line-height: 20px;
+            width: 40px;
+            overflow: hidden;
+            line-height: 18px;
+            white-space: normal;
+            margin: 0 auto;
+            text-align: center;
+          }
+          .num {
+            transition: 0.5s;
+            display: inline-block;
+          }
+        }
+      }
+    }
+
+    //当前所在位置样式
+    .step-active {
+      .step-num {
+        background: #2d7df5 !important;
+        //   transform: rotate(90deg);
+        //   .num {
+        //     // transform: rotate(-90deg);
+        //   }
+      }
+      .title {
+        color: #2d7df5 !important;
+      }
+    }
+    .Article-content {
+      padding: 20px;
+      .btn {
+        width: 150px;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 10px;
+        background: #2d7df5;
+        color: white;
+        padding: 10px;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .content {
+        padding: 20px;
+      }
+    }
+  }
+  .cnas {
+    margin: 0 auto;
+  }
+  .cma {
+    margin: 10px auto;
+  }
+  .table-echarts {
+    width: 90%;
+    margin: 10px auto 0px;
+  }
+  .table-echarts {
+    width: 90%;
+    display: flex;
+    justify-content: space-between;
+    .in-echarts {
+      width: 500px;
+      height: 400px;
+    }
+    #in-echarts {
+      width: 100%;
+      height: 100%;
+    }
+    .department {
+      width: 500px;
+      height: 400px;
+    }
+    #department {
+      width: 500px;
+      height: 400px;
+    }
+  }
+}
+</style>