68个表格在1366*768下的适配，保安单位情况智能分析中的图表的适配以及其按钮会被遮住不能点击

liuyg

2022-02-15 a38281e697cde9f45926a6af0c88bec14501fec0

 src/views/securityAnalysis/index.vue

@@ -5,44 +5,117 @@
      <!-- 保安员审查情况统计
        <div>饼图</div> -->
      <!-- </div> -->
      

      <div class="examinesBtn" v-if="examineBtnVisiable">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" size="small" @change="handleClick">
        <!-- <el-radio-group
          v-model="tabPosition"
          size="small"
          @change="handleClick"
        >
          <el-radio-button label="1">保安员审查情况统计</el-radio-button>
          <el-radio-button label="2">企业登录预警情况统计</el-radio-button>
        </el-radio-group>
        </el-radio-group> -->
        <el-dropdown class="examinesBtnChouse" @command="handleClick">
          <span class="el-dropdown-link">
            {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">保安员审查情况统计</el-dropdown-item>
            <el-dropdown-item command="2"
              >企业登录预警情况统计</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <div class="examinesBtnChouse">
          {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
        </div> -->
      </div>
        <div id="ech1" class="examines"  ref="ech1" style="visibility:visible;z-index:666">
        </div>
        <div id="ech1s" class="examiness"  ref="ech1s" style="visibility:hidden;z-index:333">
        </div>
        <!-- 保安员审查情况统计
        <div>饼图</div> -->
      
      <div class="certificate" ref="ech2">
        <!-- 保安员持证情况统计
        <div>饼图</div> -->
      <div class="examines" v-show="showECH1">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员审查情况明细', 1)"
        />
        <div id="ech1" class="examinesin" ref="ech1">1</div>
      </div>
      <div class="examiness" v-show="!showECH1">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('企业登录情况明细', 7)"
        />
        <div id="ech1s" class="examinessin" ref="ech1s"></div>
      </div>
      <!-- 保安员审查情况统计
        <div>饼图</div> -->
      <div class="certificate">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员持证情况明细', 2)"
        />
        <div class="certificatein" ref="ech2">
          <!-- 保安员持证情况统计
        <div>饼图</div> -->
        </div>
      </div>

      <!-- <div class="czbut"></div> -->
    </div>
    <div class="securityAnalysiscenter">
      <div class="examination" ref="ech3">
        <!-- 保安员考试情况统计
      <div class="examination">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员考试情况明细', 3)"
        />
        <div class="examinationin" ref="ech3">
          <!-- 保安员考试情况统计
        <div>堆叠面积图</div> -->
        </div>
      </div>
      <div class="dispatchUnit" ref="ech4">
        <!-- 派遣服务单位统计

      <div class="dispatchUnit">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('派遣服务单位明细', 4)"
        />
        <div class="dispatchUnitin" ref="ech4">
          <!-- 派遣服务单位统计
        <div>柱状图</div> -->
        </div>
      </div>
    </div>
    <div class="securityAnalysisright">
      <div class="dispatchSecurity" ref="ech5">
        <!-- 保安员年龄分布情况统计
      <div class="dispatchSecurity">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员年龄分布情况明细', 5)"
        />
        <div class="dispatchSecurityin" ref="ech5">
          <!-- 保安员年龄分布情况统计
        <div>饼图</div> -->
        </div>
      </div>
      <div class="socialSecurity" ref="ech6">
        <!-- 社保缴纳情况统计
      <div class="socialSecurity">
        <img
          src="http://223.82.109.183:2080/img/table.png"
          alt=""
          class="myToolbox"
          @click="openMyToolBox('保安员学历分布情况明细', 6)"
        />
        <div class="socialSecurityin" ref="ech6">
          <!-- 社保缴纳情况统计
        <div>饼图</div> -->
        </div>
      </div>
    </div>
    <div>
@@ -62,10 +135,7 @@
          <!-- 保安员审查情况统计 -->
        </situation>

        <loginRecord
          :card="{ jurisdiction: jurisdiction }"
          v-if="sees == 7"
        >
        <loginRecord :card="{ jurisdiction: jurisdiction }" v-if="sees == 7">
          <!-- 保安员审查情况统计 -->
        </loginRecord>

@@ -117,6 +187,7 @@
  getEducationStatistics,
  getLoginDataStatistics
} from "@/api/securityAnalysis/securityAnalysis";
import { mapGetters } from "vuex";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";
import certificate from "./child/certificate.vue";
@@ -146,36 +217,40 @@
      EC5: "", //保安派遣情况统计 // 饼图
      EC6: "", //社保缴纳情况统计 // 饼图
      deptid: "",
      oneVisiable:true,
      examineBtnVisiable:true,
      oneVisiable: true,
      examineBtnVisiable: true,
      jurisdiction: "",
      tabPosition: 1,
      examinetionTitle:"保安员审查情况统计",
      examinetionTitle: "保安员审查情况统计",
      examine1: [],
      dialogVisible: false,
      titles: "",
      sees: "",
      colors: ["#29C093", "#F34A4A"], //[正常，异常]；
      showECH1: true, //显示保安员审查情况统计或企业登录预警情况统计
      changeSizeTime: null,
      examinesBtnChousetext: "保安员审查情况统计"
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userInfo: state => state.user.userInfo
    }),
    ...mapGetters(["windowWidth", "windowHeight"]),
    ids1() {
      let ids1 = [];
      this.selectionList1.forEach((ele) => {
      this.selectionList1.forEach(ele => {
        ids1.push(ele.id);
      });
      return ids1.join(",");
    },
    ids2() {
      let ids2 = [];
      this.selectionList2.forEach((ele) => {
      this.selectionList2.forEach(ele => {
        ids2.push(ele.id);
      });
      return ids2.join(",");
    },
    }
  },
  watch: {
    dialogVisible() {
@@ -198,21 +273,58 @@
        this.getEC6();
      }
    },
    windowWidth() {
      let that = this;
      if (that.changeSizeTime) {
        return;
      } else {
        that.changeSizeTime = setTimeout(() => {
          that.changeSize();
          clearTimeout(that.changeSizeTime);
          that.changeSizeTime = null;
        }, 600);
      }
    },
    windowHeight() {
      let that = this;
      if (that.changeSizeTime) {
        return;
      } else {
        that.changeSizeTime = setTimeout(() => {
          that.changeSize();
          clearTimeout(that.changeSizeTime);
          that.changeSizeTime = null;
        }, 600);
      }
    }
  },
  methods: {
    //更新图表尺寸
    changeSize() {
      console.log("更新图表尺寸");
      this.EC1.resize();
      this.EC1s.resize();
      this.EC2.resize();
      this.EC3.resize();
      this.EC4.resize();
      this.EC5.resize();
      this.EC6.resize();
    },
    //tab 切换
    handleClick(val){
      if(val==1){
        document.getElementById("ech1").style.visibility = "visible";
        document.getElementById("ech1s").style.visibility = "hidden";
      }else{
        document.getElementById("ech1").style.visibility = "hidden";
        document.getElementById("ech1s").style.visibility = "visible";
    handleClick(val) {
      // if (val == this.tabPosition) {
      //   return;
      // }
      if (val == 1) {
        this.showECH1 = true;
      } else {
        this.showECH1 = false;
      }
      this.tabPosition = val;
      this.getEC1(val);
    },
    creatOurEcharts() {
      // return;
      this.EC1 = echarts.init(this.$refs.ech1);
      this.EC1s = echarts.init(this.$refs.ech1s);
      this.EC2 = echarts.init(this.$refs.ech2);
@@ -234,23 +346,23 @@
        d = [
          {
            value: yes,
            name: okmsg,
            name: okmsg
          },
          {
            value: not,
            name: nomsg,
          },
            name: nomsg
          }
        ];
      } else {
        d = [
          {
            value: 0,
            name: okmsg,
            name: okmsg
          },
          {
            value: 0,
            name: nomsg,
          },
            name: nomsg
          }
        ];
      }
      // console.log(d, ok, no);
@@ -271,31 +383,41 @@
        ? "0%"
        : Math.round((num / total) * 10000) / 100.0 + "%";
    },
    openMyToolBox(titles, id) {
      var that = this;
      that.dialogVisible = true;
      that.sees = id;
      that.titles = titles;
    },
    gettoolbox(title, titles, id) {
      //由于在1366，,768分辨率下，会被覆盖掉不能点击，所以放弃
      return;
      var that = this;
      return {
        show: true,
        show: false,
        itemSize: 25,
        top: 20,
        right: 20,
        top: 5,
        right: 15,
        feature: {
          myTool1: {
            show: true,
            zlevel: 999,
            z: 999,
            title: "点击查看详情",
            icon: "image://http://223.82.109.183:2080/img/table.png",
            onclick: function () {
            onclick: function() {
              that.dialogVisible = true;
              that.sees = id;
              that.titles = titles;
            },
          },
        },
            }
          }
        }
      };
    },
    setColor(d, color) {
      for (var k in d) {
        var itemStyle = {
          color: color[k],
          color: color[k]
        };
        d[k]["itemStyle"] = itemStyle;
      }
@@ -304,49 +426,52 @@
    },
    getEC1(tab) {
      var that = this;
      if(tab==1){
      if (tab == 1) {
        getinformationselectExtype(this.deptid, this.jurisdiction)
        .then((res) => {
          var a = res.data.data;
          var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
          that.setEC1(b);
        })
        .catch((res) => {
          var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
          that.setEC1(b);
        });
          .then(res => {
            var a = res.data.data;
            var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
            that.setEC1(b);
            that.EC1.resize();
          })
          .catch(res => {
            var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
            that.setEC1(b);
            that.EC1.resize();
          });
      }
      if(tab==2){
        getLoginDataStatistics(this.jurisdiction).then((res)=>{
      if (tab == 2) {
        getLoginDataStatistics(this.jurisdiction).then(res => {
          var b = res.data.data;
          var data = [
            {
              value:b[0],
              name:"近14天登录企业数"
              value: b[0],
              name: "近14天登录企业数"
            },
            {
              value:b[1],
              name:"近14天未登录企业数"
              value: b[1],
              name: "近14天未登录企业数"
            }
          ]
          ];
          that.setEC1s(data);
        })
          that.EC1s.resize();
        });
      }
    },
    setEC1(d) {
      this.examine1 = [
        {
          title: "审查时间：",
          value: this.getTime(),
          value: this.getTime()
        },
        {
          title: "问题保安员人数：",
          value: d[1].value + "人",
          value: d[1].value + "人"
        },
        {
          title: "问题保安员比例：",
          value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value),
        },
          value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value)
        }
      ];
      var option, data;
      data = this.setColor(d, this.colors);
@@ -354,16 +479,16 @@
        title: {
          text: this.examinetionTitle,
          top: 25,
          left: "center",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          trigger: "item"
        },
        legend: {
          x: "center",
          y: "90%",
          y: "90%"
        },
        toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
        // toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
        series: [
          {
            // name: "访问来源",
@@ -374,42 +499,42 @@
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
          },
        ],
                  color: "#999"
                }
              }
            }
          }
        ]
      };

      this.EC1.setOption(option);
    },
    //登录情况统计
    setEC1s(d) {
      var option,data;
      var option, data;
      data = this.setColor(d, this.colors);
      option = {
        title: {
          text: "",
          top: 25,
          left: "center",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          trigger: "item"
        },
        legend: {
          x: "center",
          y: "90%",
          y: "90%"
        },
        toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
        // toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
        series: [
          {
            type: "pie",
@@ -419,32 +544,32 @@
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
          },
        ],
                  color: "#999"
                }
              }
            }
          }
        ]
      };
      this.EC1s.setOption(option);
    },
    getEC2() {
      var that = this;
      getinformationselectHold(this.deptid, this.jurisdiction)
        .then((res) => {
        .then(res => {
          var a = res.data.data;
          var b = that.changedata(a, "cz", "wcz", "持证", "未持证");
          that.setEC2(b);
        })
        .catch((res) => {
        .catch(res => {
          var b = that.changedata([], "cz", "wcz", "持证", "未持证");
          that.setEC2(b);
        });
@@ -459,18 +584,18 @@
          text: "保安员持证情况统计",
          // subtext: "纯属虚构",
          top: 25,
          left: "center",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          trigger: "item"
        },
        legend: {
          // orient: "vertical",
          // left: "left", x: "center",
          x: "center",
          y: "83%",
          y: "83%"
        },
        toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
        // toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
        series: [
          {
            // name: "访问来源",
@@ -481,26 +606,26 @@
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{name|{b}}\n({d}%)",
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
          },
        ],
                  color: "#999"
                }
              }
            }
          }
        ]
      };

      this.EC2.setOption(option);
    },
    getEC3() {
      getExamStatisInfo(this.deptid, this.jurisdiction).then((res) => {
      getExamStatisInfo(this.deptid, this.jurisdiction).then(res => {
        this.setEC3(res.data.data);
      });
    },
@@ -508,16 +633,16 @@
    setEC3(data) {
      //获取年份
      const seriesdata = [];
      data.forEach((item) => {
      data.forEach(item => {
        if (item.type == 1) {
          seriesdata.push({
            name: item.name + "-合格人数",
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series",
              focus: "series"
            },
            data: item.examSocreStatis,
            data: item.examSocreStatis
          });
        }
        if (item.type == 2) {
@@ -526,38 +651,38 @@
            type: "bar",
            stack: item.name,
            emphasis: {
              focus: "series",
              focus: "series"
            },
            data: item.examSocreStatis,
            data: item.examSocreStatis
          });
        }
      });
      var datetime = [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ]
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ];
      //echarts 图表数据
      var option = {
        title: {
          text: "保安员考试情况统计",
          left: "center",
          top: 20,
          top: 20
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
            type: "shadow"
          }
        },
        color: ["#91CD76", "#EF6667"],
        legend: {
@@ -565,27 +690,27 @@
          icon: "circle",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
          itemGap: 20
        },
        toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
        // toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: datetime
          },
          }
        ],
        yAxis: [
          {
            type: "value",
          },
            type: "value"
          }
        ],
        series: seriesdata,
        series: seriesdata
      };

      this.EC3.setOption(option);
@@ -594,7 +719,7 @@
      var date = new Date();
      var nowYear = date.getFullYear();
      var that = this;
      getinformationselectDis(this.deptid, this.jurisdiction).then((res) => {
      getinformationselectDis(this.deptid, this.jurisdiction).then(res => {
        var a = res.data,
          d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

@@ -639,7 +764,7 @@
        "9月",
        "10月",
        "11月",
        "12月",
        "12月"
      ];
      var date = new Date();
      var d = date.getFullYear();
@@ -648,52 +773,51 @@
        title: {
          text: "派遣服务单位统计",
          top: 20,
          left: "center",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: xxd,
          data: xxd
          // data: xd,
        },
        toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4),
        // toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4),
        yAxis: {
          type: "value",
          type: "value"
        },
        tooltip: {
          trigger: "item",
          formatter: d + "年{b} : {c} 个",
          formatter: d + "年{b} : {c} 个"
        },
        series: [
          {
            data: data,
            type: "bar",
          },
        ],
            type: "bar"
          }
        ]
      };
      this.EC4.setOption(option);
    },
    getEC5() {
      var that = this;
      getAgeStatistics(this.deptid, this.jurisdiction)
        .then((res) => {
          var data = res.data.data;
          var a = [
            {
              value:data[0],
              name:"18-30周岁"
            },
            {
              value:data[1],
              name:"30-45周岁"
            },
            {
              value:data[2],
              name:"45-60周岁"
            },
          ]
          console.log(a, "111111");
          this.setEC5(a);
        });
      getAgeStatistics(this.deptid, this.jurisdiction).then(res => {
        var data = res.data.data;
        var a = [
          {
            value: data[0],
            name: "18-30周岁"
          },
          {
            value: data[1],
            name: "30-45周岁"
          },
          {
            value: data[2],
            name: "45-60周岁"
          }
        ];
        console.log(a, "111111");
        this.setEC5(a);
      });
    },
    setEC5(d) {
      var option;
@@ -703,15 +827,19 @@
          text: "保安员年龄分布情况统计",
          // subtext: "纯属虚构",
          top: 25,
          left: "center",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          trigger: "item"
        },
        toolbox: this.gettoolbox("保安员年龄分布情况查询", "保安员年龄分布情况明细", 5),
        // toolbox: this.gettoolbox(
        //   "保安员年龄分布情况查询",
        //   "保安员年龄分布情况明细",
        //   5
        // ),
        legend: {
          x: "center",
          y: "90%",
          y: "90%"
        },
        series: [
          {
@@ -722,25 +850,24 @@
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              formatter: "{b}\n({d}%)",
            },
          },
        ],
              formatter: "{b}\n({d}%)"
            }
          }
        ]
      };

      this.EC5.setOption(option);
    },
    getEC6() {
      var that = this;
      getEducationStatistics(this.deptid, this.jurisdiction)
        .then((res) => {
          var a = res.data.data;
          that.setEC6(a);
        });
      getEducationStatistics(this.deptid, this.jurisdiction).then(res => {
        var a = res.data.data;
        that.setEC6(a);
      });
    },
    setEC6(d) {
      var option;
@@ -749,17 +876,21 @@
        title: {
          text: "保安员学历分布情况统计",
          top: 25,
          left: "center",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          trigger: "item"
        },
        toolbox: this.gettoolbox("保安员学历分布情况查询", "保安员学历分布情况明细", 6),
        // toolbox: this.gettoolbox(
        //   "保安员学历分布情况查询",
        //   "保安员学历分布情况明细",
        //   6
        // ),
        legend: {
          // orient: "vertical",
          // left: "left",
          x: "center",
          y: "83%",
          y: "83%"
        },
        series: [
          {
@@ -771,8 +902,8 @@
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            label: {
              // alignTo: "edge",
@@ -783,12 +914,12 @@
              rich: {
                time: {
                  fontSize: 10,
                  color: "#999",
                },
              },
            },
          },
        ],
                  color: "#999"
                }
              }
            }
          }
        ]
      };

      this.EC6.setOption(option);
@@ -806,21 +937,24 @@
      // this.setEC4();
      // this.setEC5();
      // this.setEC6();
    },
    }
  },
  created(){
    if(this.userInfo.role_name == "保安公司管理员" || this.userInfo.role_name == "分公司管理员"){
  created() {
    if (
      this.userInfo.role_name == "保安公司管理员" ||
      this.userInfo.role_name == "分公司管理员"
    ) {
      this.examinetionTitle = "保安员审查情况统计";
      this.examineBtnVisiable = false;
    }else {
    } else {
      this.examinetionTitle = "";
    }
  },
  mounted() {
    this.$nextTick(() => {
      var roleIds = this.userInfo.role_id.split(",");
      roleIds.forEach((roleId) => {
        getRoleDetail(roleId).then((res) => {
      roleIds.forEach(roleId => {
        getRoleDetail(roleId).then(res => {
          var roleAlias = res.data.data.roleAlias;
          var roleName = res.data.data.roleName;
          if (roleName != "保安公司管理员" && roleName != "分公司管理员") {
@@ -834,7 +968,7 @@
        });
      });
    });
  },
  }
};
</script>

@@ -842,20 +976,22 @@
$widths: 20%;
.securityAnalysis {
  width: 100%;
  height: 100%;
  height: calc(100% - 35px);
  // border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;

  .securityAnalysisleft,
  .securityAnalysiscenter,
  .securityAnalysisright {
    // border: 1px solid #000;
    //   // border: 1px solid #000;
    position: relative;
    width: 29%;
    height: 100%;
    box-sizing: border-box;
    // border: 1px solid red;
    //   box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
@@ -868,6 +1004,7 @@
  .dispatchUnit,
  .dispatchSecurity,
  .socialSecurity {
    position: relative;
    width: 100%;
    height: 49%;
    // border: 1px solid #000;
@@ -875,62 +1012,65 @@
    background-color: #fff;
  }

  .certificate{
  .certificate {
    position: relative;
    width: 100%;
    height: 49%;
    top: 13.30rem;
    // top: 13.3rem;
    box-sizing: border-box;
    background-color: #fff;
  }

  .examinesBtn{
  .examinesBtn {
    top: 0;
    left: 0;
    position: absolute;
    top: 1.5rem;
    z-index: 999;
    left: 8rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    .examinesBtnChouse {
      background-color: #409eff;
      padding: 5px 10px;
      border-radius: 5px;
      color: #fff;
      position: relative;
      top: 20px;
      z-index: 900;
      text-align: center;
    }
  }
  .examines{
    position: absolute;
    top: 0.25rem;
  .examines,
  .examiness {
    width: 100%;
    height: 49%;
    box-sizing: border-box;
    // display: flex;
    // align-items: center;
    background-color: #fff;
  }
  .examiness{
    position: absolute;
    top: 0.25rem;

  //myself
  .examinesin,
  .examinessin,
  .certificatein,
  .examinationin,
  .dispatchUnitin,
  .dispatchSecurityin,
  .socialSecurityin {
    width: 100%;
    height: 49%;
    box-sizing: border-box;
    background-color: #fff;
    height: 100%;
  }
  // .examines {
  //   width: 100%;
  //   height: 49%;
  //   display: flex;
  //   align-items: center;
  //   background-color: #fff;
  // }
  // .examine {
  //   width: 100%;
  //   height: 100%;
  // }
  // .examine1 {
  //   width: 200px;
  //   div {
  //     margin-bottom: 10px;
  //   }
  // }
  // .securityAnalysisleft {
  //   width: $widths;
  // }
  // .securityAnalysiscenter {
  //   width: $widths;
  // }
  // .securityAnalysisright {
  //   width: $widths;
  // }
  .myToolbox {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
    &:hover {
    }
  }
}
</style>
</style>