heyang

.env.development

@@ -0,0 +1,40 @@
+# 页面标题
+VUE_APP_TITLE = 实验室安全管理系统
+
+# 开发环境配置
+NODE_ENV=development
+VUE_APP_ENV = 'development'
+
+# ####################外网接口配置####################
+# 1.8
+# VUE_APP_BASE_API =  '192.168.1.8:8080'
+# 韩
+# VUE_APP_BASE_API =  '192.168.1.20:8080'
+# 飞
+# VUE_APP_BASE_API =  '192.168.1.17:8080'
+# 高升
+# VUE_APP_BASE_API =  '192.168.1.39:8080'
+# 88服务器
+# VUE_APP_BASE_API = '192.168.1.88/labSystem'
+# 43服务器
+# VUE_APP_BASE_API = '192.168.1.43/labSystem/'
+# 柴
+# VUE_APP_BASE_API = '192.168.1.9:8080'
+# 暨大
+# VUE_APP_BASE_API = 'lab.sxitdlc.com/jndxlabSystem/'
+# 矿大-文昌
+# VUE_APP_BASE_API = 'lab.sxitdlc.com/kdwclabSystem/'
+# 苏大
+# VUE_APP_BASE_API = 'znyj.labcenter.suda.edu.cn/labSystem/'
+# VUE_APP_BASE_API = 'lab.sxitdlc.com/sudalabSystem/'
+# 矿大
+ VUE_APP_BASE_API = 'lab.zjznai.com/labSystem/'
+
+#VUE_APP_BASE_API = 'lab.zjznai.com/zhlabSystem/'
+
+# ####################内网接口配置####################
+
+VUE_APP_BASE_LOCAL_API = '192.168.1.39:8080'
+
+
+

.env.production

@@ -0,0 +1,17 @@
+# 页面标题
+VUE_APP_TITLE = 实验室安全管理系统
+
+# 开发环境配置
+NODE_ENV=production
+VUE_APP_ENV = 'production'
+
+
+# ####################内网接口配置####################
+
+ VUE_APP_BASE_LOCAL_API = '192.168.1.43/labSystem/'
+
+
+# ####################外网接口配置####################
+
+ VUE_APP_BASE_API = 'lab.zjznai.com/labAppTest/'
+

.env.test

@@ -0,0 +1,26 @@
+# 页面标题
+VUE_APP_TITLE = 实验室安全管理系统
+
+# 开发环境配置
+NODE_ENV=production
+VUE_APP_ENV = 'test'
+
+# ####################接口配置####################
+
+# 88服务器
+ VUE_APP_BASE_API = 'http://192.168.1.88/labSystem'
+
+
+# ####################MQTT配置####################
+
+# MQTT地址
+VUE_APP_BASE_MQTT_API = 'ws://180.76.134.43:1884'
+VUE_APP_BASE_MQTT_USERNAME = 'mqtt'
+VUE_APP_BASE_MQTT_PASSWORD = 'mqtt@zd1883'
+
+
+# #####################后台跳转地址#####################
+
+# 后台地址
+VUE_APP_ADMIN_SCREEN_CAMPUS_BASE_API = 'https://www.baidu.com'
+

.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+/bigData

README.md

@@ -0,0 +1,24 @@
+# demo2
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package.json

@@ -0,0 +1,56 @@
+{
+  "name": "labBigData",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.1.3",
+    "core-js": "^3.8.3",
+    "crypto-js": "^4.1.1",
+    "echarts": "^4.4.0",
+    "element-ui": "^2.15.10",
+    "flv.js": "^1.6.2",
+    "jquery": "^3.6.1",
+    "mqtt": "^4.2.8",
+    "node-sass": "^7.0.1",
+    "qs": "^6.11.0",
+    "sass-loader": "^13.0.2",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "swiper": "^4.3.3",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <div id="app">
+    <transition name="fade"
+                mode="out-in">
+      <router-view></router-view>
+    </transition>
+  </div>
+</template>
+
+<style>
+#app {
+  overflow: hidden;
+}
+</style>

src/api/classifyGradeDetail.js

@@ -0,0 +1,35 @@
+import axios from "../utils/request";
+let {get, post,baseUrl} = axios
+
+//基础
+export const requestUrl = baseUrl;
+
+//获取楼栋数据(无权限)
+export const getNoAuthTreeList = data => get(
+    "/laboratory/buildFloor/getNoAuthTreeList",
+    data
+);
+
+//获取楼层数据(无权限)
+export const getBuildOrFloorDetailList = data => get(
+    "/laboratory/buildFloor/getBuildOrFloorDetailList",
+    data
+);
+
+//获取实验室列表数据(无权限)
+export const getNoAuthList = data => get(
+    "/laboratory/buildFloorLayout/getNoAuthList",
+    data
+);
+
+//获取分类数据(无权限)
+export const classIfIedListAll = data => get(
+    "/laboratory/classified/listAll",
+    data
+);
+
+//获取分级数据(无权限)
+export const classTypeListAll = data => get(
+    "/laboratory/classtype/listAll",
+    data
+);

src/api/http.js

@@ -0,0 +1,118 @@
+import axios from "../utils/request";
+let {get, post,baseUrl} = axios
+
+//基础
+export const requestUrl = baseUrl;
+
+//获取logo图片
+export const getLogoInfo = data => get("/system/logo/config/getLogoInfo",data)
+
+//安全隐患统计
+export const optionCharts = data => get("/laboratory/bigview/check/option/charts",data)
+//安全隐患统计-按实验室
+export const optionLabCharts = data => get("/laboratory/bigview/pitfallSubColumn",data)
+//人员违规统计
+export const newStatistics = data => get("/laboratory/violation/bigData/newStatistics",data)
+//安全准入办理统计
+export const listCollegeApplyColumn = data => get("/laboratory/apply/listCollegeApplyColumn",data)
+//预案执行统计
+export const getYearControlInfo = data => get("/laboratory/control/getYearControlInfo",data)
+//危险源统计
+export const queryHazardColumnar = data => get("/laboratory/hazard/queryBigViewHazardList",data)
+//实验室分类
+export const getTypeCount = data => get("/laboratory/subject/getTypeCount",data)
+//实验室分级
+export const getFiedCount = data => get("/laboratory/subject/getFiedCount",data)
+
+//实验室人员
+export const onlineSumByBigView = data => get("/laboratory/bigview/sub/onlineSumByBigView",data)
+//分级管控
+export const workInfo = data => get("/laboratory/bigview/manage/work/info",data)
+//安全检查批次
+export const indexListRelease = data => get("/laboratory/release/indexListRelease",data)
+//实验室信息
+export const mySub = data => get("/laboratory/bigview/my/sub",data)
+//工作通知
+export const listCollegeTz = data => get("/laboratory/notifyplan/listCollegeTz",data)
+//工作计划
+export const listCollegeJh = data => get("/laboratory/notifyplan/listCollegeTz",data)
+//安全检查
+export const safetyInspectTitle = data => get("/zd-security/DataStatistics/bigViewCount",data)
+//安全检查
+export const indexCollegeListCheck = data => get("/zd-security/DataStatistics/bigViewList",data)
+
+//获取报警信息
+export const groupGetList = data => get("/laboratory/plan/group/getList",data)
+//安全准入办理
+export const applyListCollege = data => get("/laboratory/apply/listCollege",data)
+//安全准入办理-图表
+export const applyListCollegeColumn = data => get("/laboratory/apply/listCollegeColumn",data)
+//安全准入办理-查询院系列表
+export const departmentsList = data => get("/system/dept/departments/list",data)
+//安全准入办理-查询实验室
+export const getSubjectDict = data => get("/laboratory/subject/getSubjectDict",data)
+//分级管控
+export const chartDetails = data => get("/laboratory/bigview/manage/work/chartDetails",data)
+//分级管控-图表
+export const workCharts = data => get("/laboratory/bigview/manage/work/charts",data)
+//安全隐患统计
+export const optionChartDetails = data => get("/laboratory/bigview/check/option/chartDetails",data)
+//安全隐患统计-隐患类型
+export const checkOptionList = data => get("/laboratory/checkOption/list",data)
+//人员违规统计
+export const detailSubList = data => get("/laboratory/violation/bigData/detail/subList",data)
+//人员违规统计-图表
+export const detailColumnar = data => get("/laboratory/violation/bigData/detail/columnar",data)
+//查询违规原因
+export const getDictViolation = data => get("/laboratory/violationScoreSite/getDictViolation",data)
+//安全检查-遗留问题
+export const indexCheckDetalsWzg = data => get("/zd-security/DataStatistics/remainList",data)
+//安全检查-本次检查问题
+export const indexCheckDetalsYzg = data => get("/zd-security/DataStatistics/rectificationList",data)
+//进入实验室人员
+export const onlineByBigView = data => get("/laboratory/bigview/sub/onlineByBigView",data)
+//进入实验室人员tip列表查询
+export const onlineDetail = data => get("laboratory/bigview/sub/onlineDetail",data)
+//安全分级
+export const classifiedListAll = data => get("/laboratory/classified/listAll",data)
+//安全分类
+export const classtypeListAll = data => get("/laboratory/classtype/listAll",data)
+//预案执行统计
+export const getRiskPlanList = data => get("/laboratory/control/getRiskPlanList",data)
+//危险源统计
+export const queryHazardList = data => get("/laboratory/hazard/queryHazardList",data)
+//危险源统计-图表
+export const queryHazardColumnarTop = data => get("/laboratory/hazard/queryHazardColumnarTop",data)
+//危险源统计-查询危险源
+export const queryHazardOption = data => get("/laboratory/hazard/queryHazardOption",data)
+//工作通知
+export const notifyplan = data => get("/laboratory/notifyplan/"+data,)
+//工作计划
+export const listIndexJhDetals = data => get("/laboratory/notifyplan/listIndexJhDetals",data)
+
+//预案- 开关给后台传输返回结果 需要MQTT监听是否成功
+export const mangerControl = data => post("/laboratory/subject/manger/control/"+data.id+'/'+data.command,)
+//预案- 获取开关状态
+export const controllerList = data => get("/laboratory/onemachine/"+data+'/controller/list',)
+//预案-获取摄像头列表
+export const startListDeviceIds = data => get("/algorithm/api/play/startList",data,'video')
+//预案-获取报警详情
+export const abnormalLogOrderByList = data => get("/laboratory/plan/log/abnormalLogOrderByList",data)
+//预案-实验室简要信息
+export const bigviewSub = data => get("/laboratory/bigview/"+data+'/sub',)
+//预案-传感器信息
+export const bigviewFunctionList = data => get("/laboratory/onemachine/"+data+'/function/list',)
+//预案-传感器信息
+export const bigviewWarnMessage = data => get("/laboratory/bigview/"+data+'/warn/message',)
+
+
+//查询开发配置
+export const getUrlConfig = data => get("/system/urlConfig",data)
+
+
+
+//验证验证码
+export const verifyCaptcha = data => post("/captcha/verify",data)
+
+//注册(修改密码)
+export const register = data => post("/register/cellphone",data)

src/assets/styles/publicEle.css

@@ -0,0 +1,234 @@
+@charset "UTF-8";
+.el-picker-panel__icon-btn {
+  color: #fff !important; }
+
+.el-table__empty-text {
+  color: rgba(0, 0, 0, 0);
+  width: 100%;
+  height: 100%;
+  background: url("../image/icon_zwsj.png") no-repeat 50% 50%; }
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 1px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px; }
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  background: none; }
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  background: none; }
+
+/*查询条件*/
+.form-box {
+  margin-top: 26px; }
+  .form-box .el-form-item .el-form-item__label {
+    color: #fff; }
+  .form-box .el-form-item .el-form-item__content {
+    /*提交按钮*/
+    /*重置按钮*/
+    /*选择框*/ }
+    .form-box .el-form-item .el-form-item__content .el-button--primary {
+      width: 80px;
+      height: 40px;
+      background-color: #1ED0F8;
+      border-color: #1ED0F8; }
+    .form-box .el-form-item .el-form-item__content .el-button--default {
+      width: 80px;
+      height: 40px;
+      border: 1px solid #486CC2;
+      opacity: 0.3;
+      border-radius: 4px;
+      background: 0;
+      color: #fff; }
+    .form-box .el-form-item .el-form-item__content .el-button {
+      width: 80px;
+      height: 40px; }
+    .form-box .el-form-item .el-form-item__content .el-select {
+      margin-right: 10px; }
+      .form-box .el-form-item .el-form-item__content .el-select .el-input__wrapper {
+        background-color: rgba(30, 208, 248, 0.1); }
+      .form-box .el-form-item .el-form-item__content .el-select .el-input--suffix .el-input__inner {
+        color: #0E9EED;
+        background-color: rgba(30, 208, 248, 0.1);
+        border-color: #1ED0F8; }
+      .form-box .el-form-item .el-form-item__content .el-select .el-input--suffix input::placeholder {
+        color: #999999; }
+    .form-box .el-form-item .el-form-item__content .el-range-editor--small {
+      margin-right: 10px;
+      height: 34px;
+      color: #0E9EED;
+      background-color: rgba(30, 208, 248, 0.1);
+      border-color: #0E9EED; }
+      .form-box .el-form-item .el-form-item__content .el-range-editor--small .el-range-input {
+        background-color: rgba(30, 208, 248, 0);
+        color: #0E9EED; }
+  .form-box .el-date-editor .el-range-input {
+    background-color: rgba(0, 0, 0, 0);
+    color: #0E9EED; }
+
+.el-range-editor--small {
+  height: 40px; }
+  .el-range-editor--small .el-input__inner {
+    height: 40px; }
+
+.el-select-dropdown {
+  background-color: #043668; }
+  .el-select-dropdown .el-select-dropdown__item {
+    color: #0E9EED; }
+
+/*时间控件*/
+.select-big-data-time {
+  background-color: #043668;
+  border-color: #0E9EED;
+  color: #C0C4CC; }
+  .select-big-data-time .el-select-dropdown__empty {
+    color: #fff; }
+  .select-big-data-time .popper__arrow {
+    display: none; }
+  .select-big-data-time .el-select-dropdown__item {
+    color: #0E9EED; }
+  .select-big-data-time .el-select-dropdown__item.hover, .select-big-data-time .el-select-dropdown__item:hover {
+    background-color: #0E9EED;
+    color: #fff; }
+  .select-big-data-time .el-date-range-picker__content.is-left {
+    border-right: 1px solid #0E9EED; }
+  .select-big-data-time .in-range div, .select-big-data-time .end-date div {
+    background-color: rgba(14, 158, 237, 0.5) !important; }
+  .select-big-data-time .el-date-table th {
+    color: #999;
+    border-bottom: 1px solid #0E9EED; }
+  .select-big-data-time .el-date-table td.next-month, .select-big-data-time .el-date-table td.prev-month {
+    color: #606266; }
+
+.select-big-data .el-select-dropdown__empty {
+  color: #fff; }
+.select-big-data .popper__arrow {
+  display: none; }
+.select-big-data .el-select-dropdown__item {
+  padding: 0 10px; }
+.select-big-data .el-select-dropdown__item.hover, .select-big-data .el-select-dropdown__item:hover {
+  background-color: #0E9EED;
+  color: #fff; }
+
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+  border: none; }
+
+/*表*/
+.el-table {
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-direction: column; }
+  .el-table .el-table__row {
+    color: #fff; }
+  .el-table .el-table__header-wrapper th {
+    background: rgba(15, 96, 124, 0.2);
+    color: #FFFFFF; }
+  .el-table .el-table__fixed-header-wrapper th {
+    background: rgba(72, 108, 194, 0.2);
+    color: #486CC2; }
+  .el-table tr {
+    background-color: rgba(0, 0, 0, 0); }
+  .el-table .el-loading-mask {
+    background-color: rgba(0, 0, 0, 0); }
+  .el-table .el-table__body {
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: scroll; }
+  .el-table th.is-leaf, .el-table td {
+    border: none; }
+  .el-table .button-box {
+    text-align: center;
+    width: 69px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #0E9EED;
+    color: #0E9EED;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 0 auto; }
+  .el-table .button-box-two {
+    text-align: center;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #0E9EED;
+    color: #0E9EED;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 0 auto; }
+
+/*表格行颜色*/
+.el-table .warning-row {
+  background: rgba(41, 124, 158, 0.2); }
+
+.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #0F607C; }
+
+/*分页*/
+.is-background {
+  float: right; }
+  .is-background .btn-prev {
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+    background: none !important; }
+  .is-background .btn-next {
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+    background: none !important; }
+
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+  background-color: transparent !important; }
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  border: 1px solid #FFFFFF;
+  border-radius: 4px;
+  background-color: transparent !important; }
+
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
+  background-color: rgba(30, 208, 248, 0.1);
+  border: 1px solid #fff;
+  border-radius: 4px; }
+
+.el-table::before {
+  display: none; }
+
+.el-table--enable-row-hover .el-table__body tr:hover > td {
+  background: none; }
+
+/*进度条*/
+.cell {
+  display: inline-block; }
+  .cell .el-progress {
+    width: 16.25vw;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-items: center; }
+    .cell .el-progress .el-progress-bar .el-progress-bar__outer {
+      display: inline-block; }
+    .cell .el-progress .el-progress__text {
+      width: 5.2083333333vw;
+      display: inline-block; }
+
+.el-progress-bar__outer {
+  margin-right: 0;
+  width: 6.7708333333vw;
+  height: 3.7037037037vh;
+  background: #0A1B34; }
+
+.el-progress-bar__inner {
+  background-image: linear-gradient(to right, #007EFF, #3FFFEA); }
+
+.el-progress__text {
+  color: #fff; }
+
+/*# sourceMappingURL=publicEle.css.map */

src/assets/styles/publicEle.scss

@@ -0,0 +1,309 @@
+@charset "UTF-8";
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+.el-picker-panel__icon-btn{
+  color:#fff!important;;
+}
+.el-table__empty-text{
+  color:rgba(0,0,0,0);
+  width:100%;
+  height:100%;
+  background: url("../image/icon_zwsj.png") no-repeat 50% 50%;
+}
+
+::-webkit-scrollbar {/*滚动条整体样式*/
+  width:1px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height:1px;
+}
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  border-radius:3px;
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: none;
+}
+::-webkit-scrollbar-track {/*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius:3px;
+  background: none;
+}
+/*查询条件*/
+.form-box{
+  margin-top: 26px;
+  .el-form-item{
+    .el-form-item__label{
+      color: #fff;
+    }
+    .el-form-item__content{
+      /*提交按钮*/
+      .el-button--primary{
+        width: 80px;
+        height:40px;
+        background-color: #1ED0F8;
+        border-color: #1ED0F8;
+      }
+      /*重置按钮*/
+      .el-button--default{
+        width: 80px;
+        height:40px;
+        border: 1px solid #486CC2;
+        opacity: 0.3;
+        border-radius: 4px;
+        background: 0;
+        color: #fff;
+      }
+      .el-button{
+        width: 80px;
+        height:40px;
+      }
+      /*选择框*/
+      .el-select{
+        margin-right: 10px;
+        .el-input__wrapper{
+          background-color: rgba(30,208,248, 0.1);
+        }
+        .el-input--suffix{
+          .el-input__inner{
+            color: #0E9EED;
+            background-color: rgba(30,208,248, 0.1);
+            border-color: #1ED0F8;
+          }
+          input::placeholder{
+            color:#999999;
+          }
+        }
+      }
+      .el-range-editor--small{
+        margin-right: 10px;
+        height: 34px;
+        color: #0E9EED;
+        background-color: rgba(30,208,248, 0.1);
+        border-color: #0E9EED;
+        .el-range-input{
+          background-color: rgba(30,208,248, 0);
+          color: #0E9EED;
+        }
+
+      }
+
+    }
+  }
+  .el-date-editor .el-range-input{
+    background-color: rgba(0,0,0,0);
+    color:#0E9EED;
+  }
+}
+.el-range-editor--small{
+  height: 40px;
+  .el-input__inner{
+    height: 40px;
+  }
+}
+.el-select-dropdown{
+  background-color: #043668;
+  .el-select-dropdown__item{
+    color:#0E9EED;
+  }
+}
+/*时间控件*/
+.select-big-data-time{
+  background-color: #043668;
+  border-color: #0E9EED;
+  color: #C0C4CC;
+  .el-select-dropdown__empty{
+    color:#fff;
+  }
+  .popper__arrow{
+    display: none;
+  }
+  .el-select-dropdown__item{
+    color:#0E9EED;
+  }
+  //.el-picker-panel__icon-btn{
+  //  color: red;
+  //}
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+    background-color: #0E9EED;
+    color:#fff;
+  }
+  .el-date-range-picker__content.is-left{
+    border-right:1px solid #0E9EED;
+  }
+  .in-range , .end-date{
+    div{
+      background-color: rgba(14,158,237,0.5)!important;
+    }
+  }
+  .el-date-table th{
+    color: #999;
+    border-bottom:1px solid #0E9EED;
+  }
+  .el-date-table td.next-month, .el-date-table td.prev-month{
+    color:#606266;
+  }
+}
+.select-big-data{
+  //background-color: #0F607C;
+  //border-color: #0F607C;
+  .el-select-dropdown__empty{
+    color:#fff;
+  }
+  .popper__arrow{
+    display: none;
+  }
+  .el-select-dropdown__item{
+    //color:#0E9EED;
+    padding:0 10px;
+  }
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+    background-color: #0E9EED;
+    color:#fff;
+  }
+}
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+  border: none;
+}
+/*表*/
+.el-table{
+  flex:1;
+  background-color: rgba(0,0,0,0);
+  display: flex;
+  flex-direction: column;
+  .el-table__row{
+    color:#fff;
+  }
+  .el-table__header-wrapper th{
+    background: rgba(15, 96, 124, 0.2);
+    color:#FFFFFF;
+  }
+  .el-table__fixed-header-wrapper th{
+    background: rgba(72, 108, 194, 0.2);
+    color:#486CC2;
+  }
+  tr{
+    background-color: rgba(0,0,0,0);
+
+  }
+  .el-loading-mask{
+    background-color: rgba(0,0,0,0);
+  }
+  .el-table__body{
+    flex:1;
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+  th.is-leaf, td{
+    //border-bottom:1px solid #043668;
+    border: none;
+
+  }
+  .button-box{
+    text-align: center;
+    width: 69px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #0E9EED;
+    color:#0E9EED;
+    border-radius: 4px;
+    cursor:pointer;
+    margin:0 auto;
+  }
+  .button-box-two{
+    text-align: center;
+    width: 80px;
+    height: 30px;
+    line-height: 30px;
+    border: 1px solid #0E9EED;
+    color:#0E9EED;
+    border-radius: 4px;
+    cursor:pointer;
+    margin:0 auto;
+  }
+}
+
+/*表格行颜色*/
+.el-table .warning-row {
+  background: rgba(41, 124, 158, 0.2);
+}
+.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+  background-color: #0F607C;
+}
+
+.el-table .success-row {
+
+}
+/*分页*/
+.is-background{
+  float: right;
+  .btn-prev{
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+    background: none !important;
+
+  }
+  .btn-next{
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+    background: none !important;
+  }
+}
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
+  background-color: transparent !important;
+}
+.el-pagination.is-background .el-pager li:not(.disabled).active{
+  border: 1px solid #FFFFFF;
+  border-radius: 4px;
+  background-color: transparent !important;
+}
+.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
+  background-color: rgba(30,208,248, 0.1);
+  border: 1px solid #fff;
+  border-radius: 4px;
+}
+
+.el-table::before{
+  display: none;
+}
+.el-table--enable-row-hover .el-table__body tr:hover>td{
+  background: none;
+}
+/*进度条*/
+.cell{
+  display: inline-block;
+  .el-progress{
+    width: rw(312);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    align-items: center;
+    .el-progress-bar{
+
+      .el-progress-bar__outer{
+        display: inline-block;
+      }
+
+    }
+    .el-progress__text{
+      width: rw(100);
+      display: inline-block;
+    }
+  }
+}
+.el-progress-bar__outer{
+  margin-right: 0;
+  width: rw(130);
+  height: rh(40);
+  background: #0A1B34;
+}
+
+.el-progress-bar__inner{
+  background-image: linear-gradient(to right, #007EFF , #3FFFEA);
+}
+.el-progress__text{
+  color: #fff;
+}

src/components/header.vue

@@ -0,0 +1,78 @@
+<template>
+   <div class="header">
+        <img class="header_l" :src="logoImg"/>
+        <div class="header_c">实验室安全智能监测与控制系统</div>
+        <img class="header_r" src="@/assets/image/index_icon16.png" @click="back"/>
+   </div>
+</template>
+
+<script>
+import {} from "../api/http"
+export default {
+  name: 'heaDer',
+  setup(){
+    return {
+      logoImg:localStorage.getItem('logoImg'),
+    }
+  },
+  methods:{
+    back(){
+      this.$router.push('/')
+    },
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.header {
+  width: 100%;
+  position: absolute;
+  left: rw(0);
+  top: rh(0);
+  z-index: 100;
+  display: flex;
+  justify-content: flex-start;
+
+.header_l {
+  width: rw(182);
+  height: rh(44);
+  margin: rh(10) 0 0 rw(40);
+}
+.header_c {
+  width: rw(1180);
+  height: rh(152);
+  margin-left: rw(136);
+  background: url("~@/assets/image/index_icon2.png") no-repeat;
+  background-size: 100% 100%;
+  font-size: rh(30);
+  font-family: Microsoft YaHei;
+  font-weight: bold;
+  color: #FFFFFF;
+  line-height: rh(30);
+  text-align: center;
+  padding-top: rh(26);
+}
+.header_r {
+  margin-left: rw(264);
+  width: rw(82);
+  height: rh(32);
+  margin-top: rh(18);
+}
+}
+</style>

src/main.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import App from './App.vue'
+import axios from 'axios'
+import routes from './router/index';
+import VueRouter from 'vue-router';
+import echarts from 'echarts';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import '@/assets/styles/publicEle.scss'
+import {judgmentNetworkReturnAddress } from '@/utils/public'
+Vue.prototype.axios = axios
+Vue.prototype.$echarts = echarts;
+Vue.use(VueRouter);
+Vue.use(ElementUI);
+Vue.config.productionTip = false
+Vue.prototype.judgmentNetworkReturnAddress = judgmentNetworkReturnAddress
+
+const router = new VueRouter({
+  routes
+});
+router.beforeEach((to, from, next) => {
+
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,137 @@
+import index from '../views/index.vue';
+import CourtyardHome from '../views/courtyardManage/courtyardHome.vue';
+import AdmittanceDetail from '../views/courtyardManage/admittanceDetail.vue';
+import ControlDetail from '../views/courtyardManage/controlDetail.vue';
+import DangerDetail from '../views/courtyardManage/dangerDetail.vue';
+import IllegalDetail from '../views/courtyardManage/illegalDetail.vue';
+import InspectDetail from '../views/courtyardManage/inspectDetail.vue';
+import LabPersonDetail from '../views/courtyardManage/labPersonDetail.vue';
+import PlanDetail from '../views/courtyardManage/planDetail.vue';
+import RiskDetail from '../views/courtyardManage/riskDetail.vue';
+import WarningDetail from '../views/courtyardManage/warningDetail.vue';
+import WorkInfoDetail from '../views/courtyardManage/workInfoDetail.vue'
+import WorkPlanDetail from '../views/courtyardManage/workPlanDetail.vue';
+import ClassifyGradeDetail from '../views/courtyardManage/classifyGradeDetail.vue';
+
+const router = [
+    {
+      path: '/',
+      component: index,
+      name: 'index',
+      meta: {
+         title: '实验室安全智能监测与控制系统',
+      },
+    },
+    {
+        path: '/courtyardHome',
+        component: CourtyardHome,
+        name: 'courtyardHome',
+        meta: {
+            title: '院级大屏',
+        },
+    },
+    {
+        path: '/admittanceDetail',
+        component: AdmittanceDetail,
+        name: 'admittanceDetail',
+        meta: {
+            title: '安全准入办理统计',
+        },
+    },
+    {
+        path: '/controlDetail',
+        component: ControlDetail,
+        name: 'controlDetail',
+        meta: {
+            title: '分级管控',
+        },
+    },
+    {
+        path: '/dangerDetail',
+        component: DangerDetail,
+        name: 'dangerDetail',
+        meta: {
+            title: '安全隐患统计',
+        },
+    },
+    {
+        path: '/illegalDetail',
+        component: IllegalDetail,
+        name: 'illegalDetail',
+        meta: {
+            title: '人员违规统计',
+        },
+    },
+    {
+        path: '/inspectDetail',
+        component: InspectDetail,
+        name: 'inspectDetail',
+        meta: {
+            title: '安全检查',
+        },
+    },
+    {
+        path: '/labPersonDetail',
+        component: LabPersonDetail,
+        name: 'labPersonDetail',
+        meta: {
+            title: '进入实验室人员',
+        },
+    },
+    {
+        path: '/planDetail',
+        component: PlanDetail,
+        name: 'planDetail',
+        meta: {
+            title: '预案执行统计',
+        },
+    },
+    {
+        path: '/riskDetail',
+        component: RiskDetail,
+        name: 'riskDetail',
+        meta: {
+            title: '危险源统计',
+        },
+    },
+    {
+        path: '/warningDetail',
+        component: WarningDetail,
+        name: 'warningDetail',
+        meta: {
+            title: '预案',
+        },
+    },
+    {
+        path: '/workInfoDetail',
+        component: WorkInfoDetail,
+        name: 'workInfoDetail',
+        meta: {
+            title: '工作通知',
+        },
+    },
+    {
+        path: '/workPlanDetail',
+        component: WorkPlanDetail,
+        name: 'workPlanDetail',
+        meta: {
+            title: '工作计划',
+        },
+    },
+    {
+        path: '/classifyGradeDetail',
+        component: ClassifyGradeDetail,
+        name: 'classifyGradeDetail',
+        meta: {
+            title: '实验室分类分级',
+        },
+    },
+    {
+        path: '/*',
+        redirect: '/',
+    },
+
+]
+
+
+export default router

src/utils/public.js

@@ -0,0 +1,54 @@
+
+export function judgmentNetworkReturnAddress() {
+    /*判断是否是内网IP*/
+    // 获取当前页面url
+    var curPageUrl = window.location.href;
+    // console.log('curPageUrl-0  '+curPageUrl);
+
+    var reg1 = /(http|ftp|https|www):\/\//g;//去掉前缀
+    curPageUrl =curPageUrl.replace(reg1,'');
+    // console.log('curPageUrl-1  '+curPageUrl);
+
+    var reg2 = /\:+/g;//替换冒号为一点
+    curPageUrl =curPageUrl.replace(reg2,'.');
+    // console.log('curPageUrl-2  '+curPageUrl);
+
+    curPageUrl = curPageUrl.split('.');//通过一点来划分数组
+    // console.log(curPageUrl);
+
+
+    var ipAddress = curPageUrl[0]+'.'+curPageUrl[1]+'.'+curPageUrl[2]+'.'+curPageUrl[3];
+
+    var isInnerIp = false;//默认给定IP不是内网IP
+    var ipNum = getIpNum(ipAddress);
+    /**
+     * 私有IP：A类  10.0.0.0    -10.255.255.255
+     *       B类  172.16.0.0  -172.31.255.255
+     *       C类  192.168.0.0 -192.168.255.255
+     *       D类   127.0.0.0   -127.255.255.255(环回地址)
+     **/
+    var aBegin = getIpNum("10.0.0.0");
+    var aEnd = getIpNum("10.255.255.255");
+    var bBegin = getIpNum("172.16.0.0");
+    var bEnd = getIpNum("172.31.255.255");
+    var cBegin = getIpNum("192.168.0.0");
+    var cEnd = getIpNum("192.168.255.255");
+    var dBegin = getIpNum("127.0.0.0");
+    var dEnd = getIpNum("127.255.255.255");
+    isInnerIp = isInner(ipNum,aBegin,aEnd) || isInner(ipNum,bBegin,bEnd) || isInner(ipNum,cBegin,cEnd) || isInner(ipNum,dBegin,dEnd);
+    // console.log('是否是内网:'+isInnerIp);
+    return isInnerIp?process.env.VUE_APP_BASE_LOCAL_API:process.env.VUE_APP_BASE_API;
+    /*获取IP数*/
+    function getIpNum(ipAddress) {
+        var ip = ipAddress.split(".");
+        var a = parseInt(ip[0]);
+        var b = parseInt(ip[1]);
+        var c = parseInt(ip[2]);
+        var d = parseInt(ip[3]);
+        var ipNum = a * 256 * 256 * 256 + b * 256 * 256 + c * 256 + d;
+        return ipNum;
+    }
+    function isInner(userIp,begin,end){
+        return (userIp>=begin) && (userIp<=end);
+    }
+}

src/utils/request.js

@@ -0,0 +1,144 @@
+import axios from "axios";
+import qs from "qs";
+import { Message, Loading } from 'element-ui'
+import {judgmentNetworkReturnAddress } from "@/utils/public";
+let loadingInstance = {};
+let options = {
+    spinner:"",
+    background: 'rgba(255, 255, 255, 0.1)'
+};
+let loadingCount = 0;
+/*
+
+
+*/
+//判定http或者https
+let urlText = window.location.href.split('://')[0]+'://';
+// axios中请求配置有baseURL选项，表示请求URL公共部分
+axios.defaults.baseURL = urlText+judgmentNetworkReturnAddress();
+
+//获取后台浏览器跳转过来的地址携带的token
+let afterUrl = window.location.search.substring(1);
+let identity = afterUrl.substr(9, afterUrl.length);
+if(identity.length>0){
+    //Authorization
+    localStorage.setItem('Authorization',identity)
+    localStorage.setItem('deptLevel','2')////这个是登陆后，刘波给你的院校的类型
+}
+
+
+
+
+//post请求头
+axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
+
+// 表示跨域请求时是否需要使用凭证 允许跨域携带cookie信息
+axios.defaults.withCredentials = false;
+
+// 允许跨域
+axios.defaults.headers.post["Access-Control-Allow-Origin-Type"] = "*";
+axios.defaults.headers.common["Authorization"] = 'Bearer 8872c17c-b38a-4b4b-8c71-01aefe1acefa';//`Bearer ${localStorage.getItem('access_token')`;
+//axios.defaults.headers.common["Authorization"] = 'Bearer '+localStorage.getItem('Authorization')+''
+
+//设置超时
+axios.defaults.timeout = 15000;
+
+axios.interceptors.request.use(
+    config => {
+        loadingInstance = Loading.service(options)
+        loadingCount ++;
+        return config;
+    },
+    error => {
+        loadingCount --;
+        if(loadingCount===0){
+            loadingInstance.close();
+        }
+        return Promise.reject(error);
+    }
+);
+
+axios.interceptors.response.use(
+    response => {
+        loadingCount --;
+        if(loadingCount===0) {
+            loadingInstance.close();
+        }
+        if (response.status == 200) {
+            if(response.data.code == 200){
+                return Promise.resolve(response);
+            }else{
+                // Message({
+                //     message: response.data.msg,
+                //     type: 'error',
+                //     duration: 5 * 1000,
+                //     offset:100
+                // })
+            }
+        } else {
+            Message({
+                message: response.data.msg,
+                type: 'error',
+                duration: 5 * 1000,
+                offset:100
+            })
+        }
+    },
+    error => {
+        loadingCount --;
+        if(loadingCount===0){
+            loadingInstance.close();
+        }
+        Message({
+            message: error,
+            type: 'error',
+            duration: 5 * 1000,
+            offset:100
+        })
+    }
+);
+export default {
+    /**
+     * @param {String} url
+     * @param {Object} data
+     * @returns Promise
+     */
+    post(url, data) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: 'post',
+                url,
+                data: qs.stringify(data),
+            })
+                .then(res => {
+                    resolve(res.data)
+                })
+                .catch(err => {
+                    reject(err)
+                });
+        })
+    },
+
+    get(url, data,type) {
+        if(type=='video'){
+            axios.defaults.baseURL =localStorage.getItem('cameraExtranetAgent')
+        }else{
+            axios.defaults.baseURL = urlText+judgmentNetworkReturnAddress()
+        }
+        return new Promise((resolve, reject) => {
+
+            axios({
+                method: 'get',
+                url,
+                params: data,
+            })
+                .then(res => {
+                    resolve(res.data)
+                })
+                .catch(err => {
+                    reject(err)
+                })
+        })
+    },
+    baseUrl: urlText+judgmentNetworkReturnAddress()
+};

src/utils/secret.js

@@ -0,0 +1,27 @@
+//引入crypto-js
+const CryptoJS = require('crypto-js');
+
+// //十六位十六进制数作为密钥（秘钥为随机生成，必须与后端保持一致！）
+// const key = 'J4ny0Ja678Y7P2so';
+// //十六位十六进制数作为密钥偏移量（秘钥为随机生成，必须与后端保持一致！）
+// const iv = 'pTNorfvZW2UZJbd0';
+
+const key = CryptoJS.enc.Utf8.parse("J4ny0Ja678Y7P2so");  //十六位十六进制数作为密钥
+const iv = CryptoJS.enc.Utf8.parse('pTNorfvZW2UZJbd0');   //十六位十六进制数作为密钥偏移量
+//解密方法
+function Decrypt(word) {
+  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+}
+
+//加密方法
+function Encrypt(word) {
+  let srcs = CryptoJS.enc.Utf8.parse(word);
+  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  return encrypted.ciphertext.toString().toUpperCase();
+}
+
+export {Decrypt , Encrypt}

src/views/courtyardManage/admittanceDetail.vue

@@ -0,0 +1,321 @@
+<template>
+ <div class="main">
+        <Header/>
+        <div class="main_t">
+            <div class="main_t_t">
+                <i class="main_t_t_l">当前位置：首页 &gt;</i>
+                <i>安全准入办理统计</i>
+            </div>
+        </div>
+        <div class="main_b">
+            <!--查询条件-->
+            <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+                <el-form-item label="实验室" prop="dangerId" label-width="98px">
+                    <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
+                        <el-option
+                                v-for="item in labList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期" prop="dateRange" label-width="68px">
+                    <el-date-picker
+                            popper-class="select-big-data-time"
+                            v-model="dateRange"
+                            size="small"
+                            style="width: 240px"
+                           value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item label-width="0">
+                    <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+                    <el-button @click="resetForm('searchForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <!--列表-->
+            <el-table :data="tableData"  style="width: 100%;" height="700"   :row-class-name="tableRowClassName">
+                <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="laboratoryName" label="实验室"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="typeLevel" label="安全分级"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="applyNum" label="申请准入人数"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="approvalNum" label="准入通过人数"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="percent" label="通过率" width="420">
+                    <template slot-scope="scope">
+                        <el-progress :percentage="Number(scope.row.percent)" :stroke-width="20"></el-progress>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    style="margin-top: 14px"
+                    background
+                    @current-change="handleCurrentChange"
+                    :page-sizes="[10, 20, 30, 40]"
+                    :current-page.sync="editForm.pageNum"
+                    :page-size="editForm.pageSize"
+                    layout="total,prev, pager, next"
+                    :total="totalNum">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import {applyListCollege, applyListCollegeColumn, departmentsList, getSubjectDict} from "../../api/http"
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      logoImg:localStorage.getItem('logoImg'),
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//院系id
+        groupDeptId:'',//院系id
+        subjectId:'',//实验室类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+        pageNum:1,
+        pageSize:10
+      },
+      subjectOptions:[],//院系
+      labList:[],//实验室
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      let obj={
+        'deptId':this.editForm.groupDeptId,
+        'subjectId':this.editForm.subId,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+        'beginTime':this.editForm.beginTimeStr,
+        'endTime':this.editForm.endTimeStr,
+      }
+      applyListCollege(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = parseInt(res.total);
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+        }
+      })
+    },
+    getAjaxData: function () {
+      let _this=this;
+      applyListCollegeColumn().then((res) =>{
+        if(res.code==200){
+          let dataX=[];
+          let dataValue=[];//申请准入人数
+          let dataValue2=[];//准入通过人数
+          let data=res.data;
+          for (var i = 0; i < data.listSq.length; i++) {
+            dataX.push( data.listSq[i].applyMonth)
+            let num;
+            let num2;
+            if(data.listSq[i].applyNum==0){
+              num=''
+            }else{
+              num=data.listSq[i].applyNum
+            }
+            if(data.listTg[i].applyNum==0){
+              num2=''
+            }else{
+              num2=data.listTg[i].applyNum
+            }
+            dataValue.push(num)
+            dataValue2.push(num2)
+          }
+
+          // admittanceDetailFun(dataX,dataValue,dataValue2)
+
+        }
+      })
+      //查询院系
+      departmentsList().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.subjectOptions=data
+        }
+      })
+      //查询实验室
+      getSubjectDict().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.labList=data
+
+        }
+      })
+    },
+    /*查询*/
+    onSearch() {
+
+      if(this.dateRange.length>0){
+        this.editForm.beginTimeStr = this.dateRange[0];
+        this.editForm.endTimeStr = this.dateRange[1];
+      }
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+    },
+    /*重置*/
+    resetForm() {
+
+      this.editForm.groupDeptId = "";
+      this.editForm.optionId = "";
+      this.editForm.subId = "";
+      this.editForm.beginTimeStr = "";
+      this.editForm.endTimeStr = "";
+      this.dateRange = [];
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+  },
+  mounted() {
+    this.getAjaxData()
+    this.getAjaxList()
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.main {
+  width: rw(1920);
+  height: rh(1080);
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 50;
+
+  background: #062338;
+
+  .header {
+    width: 100%;
+    position: absolute;
+    left: rw(0);
+    top: rh(0);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-start;
+
+    .header_l {
+      width: rw(182);
+      height: rh(44);
+      margin: rh(10) 0 0 rw(40);
+    }
+    .header_c {
+      width: rw(1180);
+      height: rh(152);
+      margin-left: rw(136);
+      background: url("~@/assets/image/index_icon2.png") no-repeat;
+      background-size: 100% 100%;
+      font-size: rh(30);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(30);
+      text-align: center;
+      padding-top: rh(26);
+    }
+    .header_r {
+      margin-left: rw(264);
+      width: rw(82);
+      height: rh(32);
+      margin-top: rh(18);
+    }
+  }
+  .main_t{
+    /*  background: rgba(9, 55, 81, 0.6);*/
+    width: rw(1852);
+    /*  height: rh(352);*/
+    position: absolute;
+    left: rw(34);
+    top: rh(86);
+    z-index: 200;
+    .main_t_t{
+      margin: rh(20) 0 0 rw(18);
+      >i{
+        font-size: rh(16);
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: rh(16);
+      }
+      >i:nth-of-type(1){
+
+      }
+      >i:nth-of-type(2){
+        color: #1ED0F8;
+      }
+    }
+    .main_t_b{
+      width: rw(1852);
+      height: rh(302);
+    }
+  }
+  .main_b{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(863);
+    position: absolute;
+    left: rw(34);
+    top: rh(168);
+    z-index: 200;
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/courtyardManage/classifyGradeDetail.vue

@@ -0,0 +1,830 @@
+<template>
+    <div class="main">
+        <Header/>
+        <div class="main_t">
+            <div class="main_t_t">
+                <i class="main_t_t_l">当前位置：首页 &gt;</i>
+                <i>实验室分类分级</i>
+            </div>
+            <div class="max-big-box">
+                <div class="left-big-box">
+                    <div class="max-building-box scrollbar-box">
+                        <div class="for-building-box" v-if="item.buildFloorVoList[0]"
+                             v-for="(item,index) in buildingOptions" :key="index">
+                            <p :class="item.id == campusId?'check-item-color':''" class="item-name">{{item.name}}</p>
+                            <div class="min-for-box" @click="buildingButton(index,minIndex)" v-if="minItem.buildFloorVoList[0]"
+                                 v-for="(minItem,minIndex) in item.buildFloorVoList">
+                                <p :class="minItem.id == buildingId?'check-item-back':''"></p>
+                                <p :class="minItem.id == buildingId?'check-item-color':''">{{minItem.name}}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="center-big-box">
+                    <div class="center-map-big-box" ref="centerBox">
+                        <div class="evacuation-shade-map-big-box"
+                             v-if="newMapData"
+                             :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;transform: scale('+newMapData.zoomData+');margin-top:-'+newMapData.height/2+'px;margin-left:-'+newMapData.width/2+'px;'">
+                            <div class="evacuation-shade-map-box"
+                                 :style="'width:'+newMapData.width+'px;height:'+newMapData.height+'px;'">
+                                <div class="evacuation-shade-map-for-box for-map-box-one"
+                                     v-for="(item,index) in newMapData.mapList" :key="index" v-if="item.type == 1"
+                                     :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
+                                    <div class="evacuation-shade-map-min-box">
+                                        <!--名称/实验室名称-->
+                                        <el-tooltip class="item" effect="dark"
+                                                    :content="item.roomType == '-99'?item.roomName:item.subName"
+                                                    placement="top">
+                                            <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
+                                                {{item.roomType == '-99'?item.roomName:item.subName}}</p>
+                                        </el-tooltip>
+                                        <!--编号-->
+                                        <el-tooltip class="item" effect="dark" :content="item.roomNum"
+                                                    placement="top">
+                                            <p class="map-for-num-p">{{item.roomNum}}</p>
+                                        </el-tooltip>
+                                    </div>
+                                </div>
+                                <div class="evacuation-shade-map-for-box for-map-box"
+                                     v-for="(item,indexOne) in newMapData.mapList" :key="indexOne" v-if="item.type == 2"
+                                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
+                                    <div class="evacuation-shade-map-min-box"></div>
+                                </div>
+                                <div class="evacuation-shade-map-for-box for-map-box-two"
+                                     v-for="(item,indexTwo) in newMapData.mapList" :key="indexTwo" v-if="item.type == 3"
+                                     @click="shadeCheckRoomClick(item)"
+                                     :class="item.roomCheckType?'for-map-box-two-check':''"
+                                     :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
+                                    <div class="evacuation-shade-map-min-box"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="center-bottom-max-big-box scrollbar-x-box">
+                        <div class="center-bottom-for-big-box" v-if="mapData.mapList[0]"
+                             :class="mapData.id==floorId?'checkFloor':''"
+                             @click="floorCheck(bigIndex)"
+                             v-for="(mapData,bigIndex) in floorList" :key="mapData.id">
+                            <div class="center-bottom-for-min-box">
+                                <div class="evacuation-shade-map-big-box"
+                                     :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;transform: scale('+mapData.minZoomData+');margin-top:-'+mapData.minHeight/2+'px;margin-left:-'+mapData.minWidth/2+'px;'">
+                                    <div class="evacuation-shade-map-box"
+                                         :style="'width:'+mapData.minWidth+'px;height:'+mapData.minHeight+'px;'">
+                                        <div class="evacuation-shade-map-for-box "
+                                             :class="item.type==1?'for-map-box-one':(item.type==2?'for-map-box':(item.type==3?'for-map-box-two':''))"
+                                             v-for="(item,index) in mapData.mapList" :key="item.key" v-if="item.type == 1 || item.type == 2 || item.type == 3"
+                                             :style="'background:'+item.classifiedColor+';top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
+                                            <div class="evacuation-shade-map-min-box" v-if="item.type == 1">
+                                                <!--名称/实验室名称-->
+                                                <p class="map-for-name-p" :style="'margin-top:'+((item.h/2)-25)+'px;'">
+                                                    {{item.roomType == '-99'?item.roomName:item.subName}}</p>
+                                                <!--编号-->
+                                                <p class="map-for-num-p">{{item.roomNum}}</p>
+                                            </div>
+                                        </div>
+                                        <!--<div class="evacuation-shade-map-for-box for-map-box"-->
+                                             <!--v-for="(item,indexOne) in newMapData.mapList" :key="item.key" v-if="item.type == 2"-->
+                                             <!--:style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">-->
+                                            <!--<div class="evacuation-shade-map-min-box"></div>-->
+                                        <!--</div>-->
+                                        <!--<div class="evacuation-shade-map-for-box for-map-box-two"-->
+                                             <!--v-for="(item,indexTwo) in newMapData.mapList" :key="item.key" v-if="item.type == 3"-->
+                                             <!--@click="shadeCheckRoomClick(item)"-->
+                                             <!--:class="item.roomCheckType?'for-map-box-two-check':''"-->
+                                             <!--:style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">-->
+                                            <!--<div class="evacuation-shade-map-min-box"></div>-->
+                                        <!--</div>-->
+                                    </div>
+                                </div>
+                            </div>
+                            <p class="max-for-name-p">{{mapData.name}}</p>
+                        </div>
+                        <div class="center-bottom-for-big-box-position" ref="minForBox"></div>
+                    </div>
+                </div>
+                <div class="right-big-box">
+                    <div class="lv-max-box scrollbar-box">
+                        <div class="lv-for-box" v-for="(item,index) in lvList" :key="index">
+                            <p :style="'background:'+item.classifiedColor+';'"></p>
+                            <p>{{item.classifiedName}}</p>
+                        </div>
+                    </div>
+                </div>
+                <!--<img class="main_t_b" src="@/assets/image/img_sysbjt.png"/>-->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        getNoAuthTreeList,
+        getBuildOrFloorDetailList,
+        getNoAuthList,
+        classIfIedListAll,
+        classTypeListAll
+    } from "../../api/classifyGradeDetail"
+    import Header from '@/components/header.vue'
+
+    export default {
+        components: {
+            Header
+        },
+        data() {
+            return {
+                //校区ID
+                campusId:null,
+                //楼栋数据
+                buildingOptions:[],
+                buildingId:null,
+                //楼层数据
+                floorList:[],
+                floorId:null,
+                //分级数据
+                lvList: [],
+                //大图缩放比例
+                zoomData: null,
+                //小图缩放比例
+                minZoomData: null,
+                //地图数据
+                newMapData:null,
+                //地图窗口尺寸
+                mapBoxWidth:null,
+                mapBoxHeight:null,
+                //小地图窗口尺寸
+                minMapBoxWidth:null,
+                minMapBoxHeight:null,
+            }
+        },
+        created() {
+
+        },
+        mounted() {
+            this.getNoAuthTreeList();
+            this.classIfIedListAll();
+        },
+        methods: {
+            //楼栋选择
+            buildingButton(index,minIndex){
+                console.log('index==',index)
+                console.log('minIndex==',minIndex)
+                console.log('campusId==',this.campusId)
+                console.log('buildingId==',this.buildingId)
+                if(this.campusId == this.buildingOptions[index].id && this.buildingId == this.buildingOptions[index].buildFloorVoList[minIndex].id){
+
+                }else{
+                    this.getBuildOrFloorDetailList(this.buildingOptions[index].id,this.buildingOptions[index].buildFloorVoList[minIndex].id);
+                }
+            },
+            //获取楼栋数据
+            getNoAuthTreeList() {
+                getNoAuthTreeList().then((response) => {
+                    if (response.code == 200) {
+                        let list = [];
+                        for(let i=0;i<response.data.length;i++){
+                            let num = 0;
+                            for(let o=0;o<response.data[i].buildFloorVoList.length;o++){
+                                for(let x=0;x<response.data[i].buildFloorVoList[o].buildFloorVoList.length;x++){
+                                    num++
+                                }
+                            }
+                            if(num != 0){
+                                list.push(response.data[i]);
+                            }
+                        }
+                        this.$set(this,'buildingOptions',list);
+                        if(list[0]){
+                            this.getBuildOrFloorDetailList(list[0].id,list[0].buildFloorVoList[0].id);
+                        }
+                    }
+                })
+            },
+            //获取楼层数据
+            getBuildOrFloorDetailList(campusId,buildingId) {
+                console.log('campusId',campusId)
+                console.log('buildingId',buildingId)
+                let self = this;
+                this.$set(this,'mapBoxWidth',parseInt(this.$refs.centerBox.getBoundingClientRect().width));
+                this.$set(this,'mapBoxHeight',parseInt(this.$refs.centerBox.getBoundingClientRect().height));
+                this.$set(this,'minMapBoxWidth',parseInt(this.$refs.minForBox.getBoundingClientRect().width));
+                this.$set(this,'minMapBoxHeight',parseInt(this.$refs.minForBox.getBoundingClientRect().height));
+                getBuildOrFloorDetailList({parentId : buildingId}).then((response) => {
+                    if (response.code == 200) {
+                        let list = [];
+                        console.log('response.data',response.data);
+                        for(let i=0;i<response.data.length;i++){
+                            if(response.data[i].buildFloorLayoutVoList[0]){
+                                this.$set(this,'floorId',null);
+                                let obj = {
+                                    id:response.data[i].id,
+                                    name:response.data[i].name,
+                                    parentId:response.data[i].parentId,
+                                    subNum:response.data[i].subNum,
+                                    buildFloorLayoutVoList:response.data[i].buildFloorLayoutVoList,
+                                    checkType:i==0?true:false,
+                                }
+                                let minList = JSON.parse(response.data[i].exitLineVertexList[0].layoutJoinData)
+                                for(let x=0;x<minList.length;x++){
+                                    if(minList[x].type == '1'){
+                                        for(let o=0;o<response.data[i].buildFloorLayoutVoList.length;o++){
+                                            if(minList[x].key == response.data[i].buildFloorLayoutVoList[o].pointName){
+                                                minList[x].id = response.data[i].buildFloorLayoutVoList[o].id;
+                                                minList[x].buildId = response.data[i].buildFloorLayoutVoList[o].buildId;
+                                                minList[x].floorId = response.data[i].buildFloorLayoutVoList[o].floorId;
+                                                minList[x].roomType = response.data[i].buildFloorLayoutVoList[o].roomType;
+                                                minList[x].roomName = response.data[i].buildFloorLayoutVoList[o].roomName;
+                                                minList[x].roomNum = response.data[i].buildFloorLayoutVoList[o].roomNum;
+                                                minList[x].subName = response.data[i].buildFloorLayoutVoList[o].subName;
+                                                minList[x].subId = response.data[i].buildFloorLayoutVoList[o].subId;
+                                                minList[x].classifiedColor = '#062338';
+                                                minList[x].classifiedId = response.data[i].buildFloorLayoutVoList[o].classifiedId?response.data[i].buildFloorLayoutVoList[o].classifiedId:'';
+                                                minList[x].typeId = response.data[i].buildFloorLayoutVoList[o].typeId?response.data[i].buildFloorLayoutVoList[o].typeId:'';
+                                            }
+                                        }
+                                        for(let o=0;o<self.lvList.length;o++){
+                                            if(minList[x].classifiedId == self.lvList[o].id){
+                                                console.log('minList[x]',minList[x])
+                                                minList[x].classifiedColor = self.lvList[o].classifiedColor;
+                                            }
+                                        }
+                                    }
+                                }
+                                let minObj = this.calculateMapMax(minList,this.mapBoxHeight,this.mapBoxWidth);
+                                let minObjTwo = this.calculateMapMax(minList,this.minMapBoxHeight,this.minMapBoxWidth);
+                                obj.width = minObj.maxWidth;
+                                obj.height = minObj.maxHeight;
+                                obj.zoomData = minObj.zoomData;
+                                obj.minWidth = minObjTwo.maxWidth;
+                                obj.minHeight = minObjTwo.maxHeight;
+                                obj.minZoomData = minObjTwo.zoomData;
+                                obj.mapList = JSON.parse(JSON.stringify(minList));
+                                list.push(obj);
+                            }
+                        }
+                        if(list[0]){
+                            this.$set(this,'campusId',campusId);
+                            this.$set(this,'buildingId',buildingId);
+                            this.$set(this,'floorList',list);
+                            this.$set(this,'floorId',list[0].id);
+                            this.floorCheck(0)
+                        }else{
+                            this.$message({
+                                type:'error',
+                                message:'错了哦，这是一条错误消息',
+                                iconClass:'123',
+                            });
+                        }
+                    }else{
+                        this.$message({
+                            type:'error',
+                            message:'错了哦，这是一条错误消息',
+                            iconClass:'123',
+                        });
+                    }
+                })
+            },
+            //选中楼层
+            floorCheck(index){
+                if(index != this.floorId){
+                    this.$set(this,'newMapData',this.floorList[index]);
+                    this.$set(this,'floorId',this.floorList[index].id);
+                    this.$forceUpdate;
+                }
+            },
+            //获取实验室数据
+            getNoAuthList(){
+                getNoAuthList().then((response) => {
+                    if (response.code == 200) {
+
+                    }
+                })
+            },
+            //获取分级数据
+            classIfIedListAll() {
+                classIfIedListAll().then((response) => {
+                    if (response.code == 200) {
+                        this.$set(this, 'lvList', response.data);
+                        console.log('res', response)
+                    }
+                })
+            },
+            //返回按钮
+            back() {
+                this.$router.push('/')
+            },
+            //计算布局最大尺寸
+            calculateMapMax(list, height, width) {
+                //基础参数
+                let maxWidth = 0
+                let maxHeight = 0
+                let zoomData = 1;
+                //参数处理
+                for (let i = 0; i < list.length; i++) {
+                    if ((list[i].x + list[i].w) > maxWidth) {
+                        maxWidth = list[i].x + list[i].w
+                    }
+                    if ((list[i].y + list[i].h) > maxHeight) {
+                        maxHeight = list[i].y + list[i].h
+                    }
+                }
+                //处理等值数据
+                if (maxHeight == height) {
+                    maxHeight++
+                }
+                if (maxWidth == width) {
+                    maxWidth++
+                }
+                //缩放判断
+                let zoomNumOne = height / maxHeight;
+                if (parseInt(this.accMul(zoomNumOne, maxHeight)) <= height && parseInt(this.accMul(zoomNumOne, maxWidth)) <= width) {
+                    zoomData = zoomNumOne;
+                }
+                let zoomNumTwo = width / maxWidth;
+                if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo, maxWidth)) <= width) {
+                    zoomData = zoomNumTwo;
+                }
+                return {maxWidth: maxWidth, maxHeight: maxHeight, zoomData: zoomData}
+            },
+            accMul(arg1, arg2) {
+                var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
+                try {
+                    m += s1.split(".")[1].length
+                } catch (e) {
+                }
+                try {
+                    m += s2.split(".")[1].length
+                } catch (e) {
+                }
+                return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
+            },
+        },
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+    @function rw($px) {
+        @return $px*100/1920 *1vw;
+    }
+
+    @function rh($px) {
+        @return $px*100/1080 *1vh;
+    }
+
+    * {
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+
+    .main {
+        width: rw(1920);
+        height: rh(1080);
+        /* background: url("../img/index_bg.png") no-repeat;
+         background-size: 100% 100%;*/
+        position: relative;
+        left: 0;
+        top: 0;
+        z-index: 50;
+        background: #062338;
+        .main_t {
+            width: rw(1852);
+            height: rh(975);
+            background: #062338;
+            position: absolute;
+            left: rw(34);
+            top: rh(86);
+            z-index: 200;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            .main_t_t {
+                margin: rh(20) 0 0 rw(18);
+                > i {
+                    font-size: rh(16);
+                    font-family: Microsoft YaHei;
+                    font-weight: bold;
+                    color: #FFFFFF;
+                    line-height: rh(16);
+                }
+                > i:nth-of-type(1) {
+
+                }
+                > i:nth-of-type(2) {
+                    color: #1ED0F8;
+                }
+            }
+            .max-big-box {
+                flex: 1;
+                display: flex;
+                overflow: hidden;
+                .left-big-box {
+                    width: rw(290);
+                    height: rh(880);
+                    overflow: hidden;
+                    .max-building-box{
+                        margin-top:rh(80);
+                        margin-right:rw(40);
+                        height: rh(800);
+                        .for-building-box:nth-child(1){
+                            border:none;
+                        }
+                        .for-building-box{
+                            margin-bottom:rh(20);
+                            border-top:rh(1) dashed #fff;
+                            .item-name{
+                                margin-top:rh(20);
+                                flex:1;
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                                color:#fff;
+                                font-size:rh(16);
+                                line-height:rh(20);
+                                margin-bottom:rh(20);
+                            }
+                            .min-for-box{
+                                cursor: pointer;
+                                display: flex;;
+                                margin-bottom:rh(10);
+                                p:nth-child(1){
+                                    width:rw(10);
+                                    height:rw(10);
+                                    margin:rh(5) rw(10) rh(5) rw(20);
+                                    border-radius:50%;
+                                }
+                                p:nth-child(2){
+                                    flex:1;
+                                    display:block;
+                                    overflow:hidden;
+                                    text-overflow:ellipsis;
+                                    white-space:nowrap;
+                                    color:#fff;
+                                    font-size:rh(14);
+                                    line-height:rh(20);
+                                }
+                            }
+                            .check-item-back{
+                                background:#1ED0F8;
+                            }
+                            .check-item-color{
+                                color:#1ED0F8!important;
+                            }
+                        }
+                    }
+                }
+                .center-big-box {
+                    /*background: #fff;*/
+                    display: flex;
+                    flex-direction: column;
+                    flex: 1;
+                    overflow: hidden;
+                    .center-map-big-box {
+                        margin-top: rh(80);
+                        height: rh(600);
+                        /*background: #0E9EED;*/
+                        position: relative;
+                        .evacuation-shade-map-big-box {
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            -webkit-user-select: none;
+                            .evacuation-shade-map-box {
+                                position: relative;
+                                border: 1px dashed #fff;
+                                overflow: hidden;
+                                .evacuation-shade-map-for-box {
+                                    position: absolute;
+                                    display: flex;
+                                    flex-direction: column;
+                                    overflow: hidden;
+                                    .evacuation-shade-map-min-box {
+                                        height: 100%;
+                                        position: relative;
+                                        .map-for-name-p {
+                                            padding: 0 10px;
+                                            height: 20px;
+                                            line-height: 20px;
+                                            font-size: 16px;
+                                            text-align: center;
+                                            color: #fff;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                        }
+                                        .map-for-num-p {
+                                            margin-top:10px;
+                                            padding: 0 10px;
+                                            height: 20px;
+                                            line-height: 20px;
+                                            font-size: 16px;
+                                            text-align: center;
+                                            color: #fff;
+                                            overflow: hidden;
+                                            text-overflow: ellipsis;
+                                            white-space: nowrap;
+                                        }
+                                        .position-box {
+                                            position: absolute;
+                                            font-size: 14px;
+                                            overflow: hidden;
+                                        }
+                                        .center-move-door-p-t {
+                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                            background-size: 100% !important;
+                                            transform: rotate(180deg);
+                                        }
+                                        .center-move-door-p-b {
+                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                            background-size: 100% !important;
+                                        }
+                                        .center-move-door-p-l {
+                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                            background-size: 100% !important;
+                                            transform: rotate(90deg);
+                                        }
+                                        .center-move-door-p-r {
+                                            background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                            background-size: 100% !important;
+                                            transform: rotateZ(270deg);
+                                        }
+                                    }
+                                }
+                                .for-map-box-one {
+                                    /*background: rgba(7, 36, 54, 1);*/
+                                    border: 1px solid #fff;
+                                }
+                                .for-map-box {
+                                    /*background: rgba(1,16,32,1);*/
+                                    /*background: rgba(6, 30, 48, 1);*/
+                                }
+                                .for-map-box-two {
+                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
+                                    background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 0);
+                                    background-size: 80px 80px;
+                                }
+                                .for-map-box-two-check {
+                                    /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
+                                    background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
+                                    background-size: 80px 80px;
+                                }
+                                .room-type-one {
+                                    //选中
+                                    background: rgba(30, 118, 142, 0.4);
+                                }
+                                .room-type-two {
+                                    //报警
+                                    background: rgba(232, 0, 0, 0.4);
+                                    box-shadow: 0 0 10px 1px #E80000 inset;
+                                }
+                                .room-type-three {
+                                    //选中报警
+                                    background: rgba(30, 118, 142, 0.4);
+                                    box-shadow: 0 0 10px 1px #E80000 inset;
+                                }
+                                .room-type-noe {
+                                    /*border:1px solid #666;*/
+                                    /*background: rgba(102,102,102,0.6);*/
+                                }
+                            }
+                        }
+                    }
+                    .center-bottom-max-big-box{
+                        margin-top:rh(40);
+                        width:rw(1270);
+                        height:rh(220);
+                        white-space: nowrap;
+                        .center-bottom-for-big-box:nth-child(1){
+                            margin-left:0;
+                        }
+                        .center-bottom-for-big-box{
+                            cursor: pointer;
+                            margin-left:rw(20);
+                            display: inline-block;
+                            width:rw(300);
+                            height:rh(200);
+                            .center-bottom-for-min-box{
+                                width:rw(302);
+                                height:rh(162);
+                                border:rh(1) solid #666;
+                                position: relative;
+                                .evacuation-shade-map-big-box {
+                                    position: absolute;
+                                    top: 50%;
+                                    left: 50%;
+                                    -webkit-user-select: none;
+                                    .evacuation-shade-map-box {
+                                        position: relative;
+                                        overflow: hidden;
+                                        .evacuation-shade-map-for-box {
+                                            position: absolute;
+                                            display: flex;
+                                            flex-direction: column;
+                                            overflow: hidden;
+                                            .evacuation-shade-map-min-box {
+                                                height: 100%;
+                                                position: relative;
+                                                .map-for-name-p {
+                                                    padding: 0 10px;
+                                                    height: 20px;
+                                                    line-height: 20px;
+                                                    font-size: 16px;
+                                                    text-align: center;
+                                                    color: #fff;
+                                                    overflow: hidden;
+                                                    text-overflow: ellipsis;
+                                                    white-space: nowrap;
+                                                }
+                                                .map-for-num-p {
+                                                    margin-top:10px;
+                                                    padding: 0 10px;
+                                                    height: 20px;
+                                                    line-height: 20px;
+                                                    font-size: 16px;
+                                                    text-align: center;
+                                                    color: #fff;
+                                                    overflow: hidden;
+                                                    text-overflow: ellipsis;
+                                                    white-space: nowrap;
+                                                }
+                                                .position-box {
+                                                    position: absolute;
+                                                    font-size: 14px;
+                                                    overflow: hidden;
+                                                }
+                                                .center-move-door-p-t {
+                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                                    background-size: 100% !important;
+                                                    transform: rotate(180deg);
+                                                }
+                                                .center-move-door-p-b {
+                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                                    background-size: 100% !important;
+                                                }
+                                                .center-move-door-p-l {
+                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                                    background-size: 100% !important;
+                                                    transform: rotate(90deg);
+                                                }
+                                                .center-move-door-p-r {
+                                                    background: url("../../assets/image/icon_pmbjt_m.png") !important;
+                                                    background-size: 100% !important;
+                                                    transform: rotateZ(270deg);
+                                                }
+                                            }
+                                        }
+                                        .for-map-box-one {
+                                            /*background: rgba(7, 36, 54, 1);*/
+                                            border: 1px solid #fff;
+                                        }
+                                        .for-map-box {
+                                            /*background: rgba(1,16,32,1);*/
+                                            /*background: rgba(6, 30, 48, 1);*/
+                                        }
+                                        .for-map-box-two {
+                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(24, 137, 60, 1);*/
+                                            background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(6,35,56,0)!important;
+                                            background-size: 80px 80px;
+                                        }
+                                        .for-map-box-two-check {
+                                            /*background: url("../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 1);*/
+                                            background: url("../../assets/image/icon_jjck.png") center center no-repeat rgba(50, 205, 50, 0);
+                                            background-size: 80px 80px;
+                                        }
+                                        .room-type-one {
+                                            //选中
+                                            background: rgba(30, 118, 142, 0.4);
+                                        }
+                                        .room-type-two {
+                                            //报警
+                                            background: rgba(232, 0, 0, 0.4);
+                                            box-shadow: 0 0 10px 1px #E80000 inset;
+                                        }
+                                        .room-type-three {
+                                            //选中报警
+                                            background: rgba(30, 118, 142, 0.4);
+                                            box-shadow: 0 0 10px 1px #E80000 inset;
+                                        }
+                                        .room-type-noe {
+                                            /*border:1px solid #666;*/
+                                            /*background: rgba(102,102,102,0.6);*/
+                                        }
+                                    }
+                                }
+                            }
+                            .max-for-name-p{
+                                line-height:rh(40);
+                                font-size:rh(18);
+                                color:#fff;
+                                text-align: center;
+                                display:block;
+                                overflow:hidden;
+                                text-overflow:ellipsis;
+                                white-space:nowrap;
+                            }
+                        }
+                        .checkFloor{
+                            .center-bottom-for-min-box{
+                                border:rh(1) solid #1ED0F8!important;
+                            }
+                            .max-for-name-p{
+                                color:#1ED0F8!important;
+                            }
+                        }
+                        .center-bottom-for-big-box-position{
+                            position: absolute;
+                            top:rh(9999);
+                            left:rw(9999);
+                            z-index: -100;
+                            display: inline-block;
+                            width:rw(300);
+                            height:rh(160);
+                        }
+                    }
+                }
+                .right-big-box {
+                    width: rw(290);
+                    height: rh(880);
+                    overflow: hidden;
+                    .lv-max-box {
+                        height: rh(800);
+                        margin-top: rh(80);
+                        margin-left: rw(100);
+                        .lv-for-box {
+                            display: flex;
+                            margin-bottom: rh(18);
+                            p:nth-child(1) {
+                                width: rw(18);
+                                height: rh(18);
+                            }
+                            p:nth-child(2) {
+                                margin-left: rw(20);
+                                color: #fff;
+                                font-size: rh(16);
+                            }
+                        }
+                    }
+                }
+                //滚动条
+                .scrollbar-box{
+                    overflow-y: scroll;
+                }
+                .scrollbar-box::-webkit-scrollbar{
+                    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+                    height: 4px;
+                }
+                .scrollbar-box::-webkit-scrollbar-thumb{
+                    border-radius: 5px;
+                    -webkit-box-shadow: inset 0 0 5px #999;
+                    background: #fff;
+                }
+                .scrollbar-box::-webkit-scrollbar-track{
+                    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+                    border-radius: 0;
+                    background: rgba(255,255,255,0);
+                }
+                .scrollbar-x-box{
+                    overflow-y: hidden;
+                    overflow-x: scroll;
+                }
+                .scrollbar-x-box::-webkit-scrollbar{
+                    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
+                    height: 4px;
+                }
+                .scrollbar-x-box::-webkit-scrollbar-thumb{
+                    border-radius: 5px;
+                    -webkit-box-shadow: inset 0 0 5px #999;
+                    background: #fff;
+                }
+                .scrollbar-x-box::-webkit-scrollbar-track{
+                    -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
+                    border-radius: 0;
+                    background: rgba(255,255,255,0);
+                }
+            }
+            .main_t_b {
+                position: absolute;
+                width: rw(1490);
+                height: rh(794);
+                margin-left: rw(282);
+                margin-top: rh(80);
+            }
+        }
+
+    }
+</style>
+<style lang="scss">
+    li {
+        list-style: none
+    }
+
+    i, em, b {
+        font-style: normal;
+        font-weight: 100;
+    }
+
+    body {
+        margin: 0
+    }
+</style>

src/views/courtyardManage/controlDetail.vue

@@ -0,0 +1,429 @@
+<template>
+ <div class="main" v-cloak>
+        <Header/>
+        <div class="main_t">
+            <div class="main_t_t">
+                <i class="main_t_t_l">当前位置：首页 &gt;</i>
+                <i>分级管控</i>
+            </div>
+            <div class="main_t_b" id="illegal_chart"></div>
+        </div>
+        <div class="main_b">
+            <!--查询条件-->
+            <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+
+                <el-form-item label="实验室" prop="dangerId" label-width="98px">
+                    <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
+                        <el-option
+                                v-for="item in labList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期" prop="dateRange" label-width="68px">
+                    <el-date-picker
+                            popper-class="select-big-data-time"
+                            v-model="dateRange"
+                            size="small"
+                            style="width: 240px"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                            @change="ceshi"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item label-width="0">
+                    <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+                    <el-button @click="resetForm('searchForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <!--列表-->
+            <el-table :data="tableData"  style="width: 100%;" height="420"   :row-class-name="tableRowClassName">
+                <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="subName" label="实验室名称"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="planNum" label="计划执行数"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="finishedNum" label="实际执行数"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="rateNum" label="执行率" width="420">
+                    <template  slot-scope="scope">
+                        <el-progress :percentage="Number(scope.row.rateNum)" :stroke-width="20"></el-progress>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-pagination
+                    style="margin-top: 14px"
+                    background
+                    @current-change="handleCurrentChange"
+                    :page-sizes="[10, 20, 30, 40]"
+                    :current-page.sync="editForm.pageNum"
+                    :page-size="editForm.pageSize"
+                    layout="total,prev, pager, next"
+                    :total="totalNum">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import {chartDetails, departmentsList, getSubjectDict, workCharts} from "../../api/http"
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        groupDeptId:'',//院系id
+        subId:'',//实验室类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+        pageNum:1,
+        pageSize:10
+      },
+      subjectOptions:[],//院系
+      labList:[],//实验室
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+
+    }
+  },
+  methods: {
+    ceshi(){
+      console.log(this.dateRange)
+    },
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({ rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      let obj={
+        'subId':this.editForm.subId,
+        'type':localStorage.getItem('deptLevel'),
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+        'startTime':this.editForm.beginTimeStr,
+        'endTime':this.editForm.endTimeStr,
+      }
+      //列表
+      chartDetails(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = parseInt(res.total);
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+          console.log(_this.tableData)
+        }
+      })
+
+    },
+    getAjaxData: function () {
+      let _this=this;
+      //图表
+      workCharts().then((res) =>{
+        if(res.code==200){
+          let dataX= ['product', '计划执行', '实际执行',]
+          let dataValue=[];
+          let data=res.data;
+          dataValue=data
+          dataValue.unshift(dataX)
+
+          console.log(dataValue)
+          _this.illegalDetailFun(dataValue)
+
+        }
+      })
+      //查询院系
+      departmentsList().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.subjectOptions=data
+        }
+      })
+      //查询实验室
+      getSubjectDict().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.labList=data
+
+        }
+      })
+    },
+    /*查询*/
+    onSearch() {
+
+      if(this.dateRange.length>0){
+        this.editForm.beginTimeStr = this.dateRange[0];
+        this.editForm.endTimeStr = this.dateRange[1];
+      }
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+      this.getAjaxData();
+    },
+    /*重置*/
+    resetForm() {
+
+      this.editForm.subId = "";
+      this.editForm.groupDeptId = "";
+      this.editForm.beginTimeStr = "";
+      this.editForm.endTimeStr = "";
+      this.dateRange = [];
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+    /*安全隐患详情图表*/
+     illegalDetailFun:function(dataValue) {
+      let illegalOption = {
+
+        color: ['#E47732','#1D67EE',],
+        legend: {
+          type: 'scroll',
+
+          itemGap:20,
+          itemWidth :14,
+          textStyle:{
+            color:'#fff'
+          },
+          right: '5%',
+          top: '4%',
+        },
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        dataset: {
+          source:dataValue
+          /* source: [
+               ['product', '计划执行', '实际执行',],
+               ['星期一 - 1月1日', 43.3, 85.8, ],
+               ['星期二 - 1月2日', 83.1, 73.4,],
+               ['星期三 - 1月4日', 86.4, 65.2, ],
+               ['星期四 - 1月4日', 72.4, 53.9, ]
+           ]*/
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            textStyle: {//改变X轴字体颜色
+              color: '#fff',
+
+            }
+          },
+          axisTick:{//去掉X轴刻度
+            show:false,
+          },
+          axisLine:{
+            lineStyle:{
+              color:'#0D1F43',//改变X轴颜色
+
+            }
+          },
+
+
+
+
+        },
+        yAxis: {
+          axisLabel: {
+            textStyle: {//改变X轴字体颜色
+              color: '#fff',
+
+            }
+          },
+          splitLine: {           // 分隔线
+            show: false,        // 默认显示，属性show控制显示与否
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+              color: ['#fff'],
+              width: 1,
+              type: 'solid',
+              opacity:0.15
+            },
+
+          },
+          axisTick:{//去掉X轴刻度
+            show:false,
+          },
+          axisLine:{
+            show:true,
+            lineStyle:{
+              color:'#0D1F43',//改变X轴颜色
+
+            }
+          },
+        },
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [
+          { type: 'bar',barWidth: '10%', itemStyle: { normal: { barBorderRadius: 8}},"label": {
+              "normal": {
+                "show": true,
+                "position": "top",
+                fontSize: 14,
+                fontWeight: '500',
+                color: '#fff',
+                padding:[2,2,2,0],
+              }
+            },},
+          { type: 'bar' ,barWidth: '10%', itemStyle: { normal: { barBorderRadius: 8}},"label": {
+              "normal": {
+                "show": true,
+                "position": "top",
+                fontSize: 14,
+                fontWeight: '500',
+                color: '#fff',
+                padding:[2,2,2,0],
+              }
+            },},
+        ]
+      };
+      var illegal_chart = this.$echarts.init(document.getElementById('illegal_chart'));
+      illegal_chart.setOption(illegalOption);
+}
+  },
+  mounted() {
+    this.getAjaxData()
+    this.getAjaxList()
+  },
+
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.main {
+  width: rw(1920);
+  height: rh(1080);
+  /* background: url("../img/index_bg.png") no-repeat;
+   background-size: 100% 100%;*/
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 50;
+
+  background: #062338;
+
+  .header {
+    width: 100%;
+    position: absolute;
+    left: rw(0);
+    top: rh(0);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-start;
+
+    .header_l {
+      width: rw(182);
+      height: rh(44);
+      margin: rh(10) 0 0 rw(40);
+    }
+    .header_c {
+      width: rw(1180);
+      height: rh(152);
+      margin-left: rw(136);
+      background: url("~@/assets/image/index_icon2.png") no-repeat;
+      background-size: 100% 100%;
+      font-size: rh(30);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(30);
+      text-align: center;
+      padding-top: rh(26);
+    }
+    .header_r {
+      margin-left: rw(264);
+      width: rw(82);
+      height: rh(32);
+      margin-top: rh(18);
+    }
+  }
+  .main_t{
+    background: rgba(9, 55, 81, 0.6);
+    width: rw(1852);
+    height: rh(352);
+    position: absolute;
+    left: rw(34);
+    top: rh(86);
+    z-index: 200;
+    .main_t_t{
+      margin: rh(20) 0 0 rw(18);
+      >i{
+        font-size: rh(16);
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: rh(16);
+      }
+      >i:nth-of-type(1){
+
+      }
+      >i:nth-of-type(2){
+        color: #1ED0F8;
+      }
+    }
+    .main_t_b{
+      width: rw(1852);
+      height: rh(302);
+    }
+  }
+  .main_b{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(602);
+    position: absolute;
+    left: rw(34);
+    top: rh(468);
+    z-index: 200;
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/courtyardManage/dangerDetail.vue

@@ -0,0 +1,569 @@
+<template>
+  <div class="main" v-cloak>
+    <Header/>
+    <div class="main_t">
+      <div class="main_t_t">
+        <i class="main_t_t_l">当前位置：首页 &gt;</i>
+        <i>安全隐患统计</i>
+      </div>
+      <div class="main_t_b" id="danger_chart"></div>
+    </div>
+    <div class="main_btn">
+      <i :key="index"  :class='currentIndex==index?"active":""'  v-for="(item,index) in btnList" @click="btnFun(index)">{{item}}</i>
+    </div>
+    <div class="main_b">
+      <!--查询条件-->
+      <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+        <el-form-item label="隐患类型" prop="dangerId" label-width="98px">
+          <el-select v-model="editForm.optionId" popper-class="select-big-data" placeholder="请选择隐患类型">
+            <el-option
+                v-for="item in dangerList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="实验室" prop="dangerId" label-width="98px">
+          <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
+            <el-option
+                v-for="item in labList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="日期" prop="dateRange" label-width="68px">
+          <el-date-picker
+              popper-class="select-big-data-time"
+              v-model="dateRange"
+              size="small"
+              style="width: 240px"
+              value-format="yyyy-MM-dd"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+          <el-button @click="resetForm('searchForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!--列表-->
+      <el-table :data="tableData"  style="width: 100%" height="420" :row-class-name="tableRowClassName">
+        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="optionName" label="隐患类型"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="subName" label="实验室名称"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="count" label="数量"></el-table-column>
+      </el-table>
+      <el-pagination
+          style="margin-top: 14px"
+          background
+          @current-change="handleCurrentChange"
+          :page-sizes="[10, 20, 30, 40]"
+          :current-page.sync="editForm.pageNum"
+          :page-size="editForm.pageSize"
+          layout="total,prev, pager, next"
+          :total="totalNum">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  checkOptionList,
+  departmentsList,
+  getSubjectDict,
+  optionChartDetails,
+  optionCharts, optionLabCharts
+} from "../../api/http"
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        schoolDeptId:'',//院系id
+        optionId:'',//隐患类型
+        subId:'',//实验室类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+        pageNum:1,
+        pageSize:10
+      },
+
+      subjectOptions:[],//院系
+      dangerList:[],//隐患类型
+      labList:[],//实验室
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+      btnList:['按隐患类型统计','按实验室统计'],
+      currentIndex:0,
+    }
+  },
+  methods: {
+    btnFun(index){
+      this.currentIndex = index
+      console.log(this.currentIndex)
+      if(this.currentIndex==0){
+        this.getAjaxData()
+      }else{
+        this.getLabAjaxData()
+      }
+    },
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({ rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //隐患类型
+    checkOptionList:function () {
+      let _this=this;
+      checkOptionList({}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.dangerList=data
+        }
+      })
+    },
+    //查询院系
+    departmentsList:function () {
+      let _this=this;
+      departmentsList().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.subjectOptions=data
+        }
+      })
+    },
+    //查询实验室
+    getSubjectDict:function () {
+      let _this=this;
+      getSubjectDict().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.labList=data
+
+        }
+      })
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      //列表
+      let obj={
+        'type':localStorage.getItem('deptLevel'),
+        'optionId':this.editForm.optionId,
+        'subId':this.editForm.subId,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+        'startTime':this.editForm.beginTimeStr,
+        'endTime':this.editForm.endTimeStr,
+      }
+      optionChartDetails(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = parseInt(res.total);
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+        }
+      })
+    },
+    //查询图表
+    getAjaxData: function () {
+      let _this=this;
+
+      //人员违规统计图表
+      let obj={
+        'type':localStorage.getItem('deptLevel'),
+        'subId':this.editForm.subId,
+        'optionId':this.editForm.optionId,
+        'startTime':this.editForm.beginTimeStr,
+        'endTime':this.editForm.endTimeStr,
+      }
+      optionCharts(obj).then((res) =>{
+        if(res.code==200){
+          let dataX=[];
+          let dataCount=[];
+          let data=res.data.list;
+          for (var i = 0; i < data.length; i++) {
+            dataX.push( data[i].optionName)
+            dataCount.push(data[i].count)
+          }
+          _this.safetyDetailFun(dataX,dataCount,false)
+
+        }
+      })
+    },
+    getLabAjaxData: function () {
+      let _this=this;
+      //人员违规统计图表
+      let obj={
+        'pageNum':1,
+        'pageSize':50,
+      }
+      optionLabCharts(obj).then((res) =>{
+        if(res.code==200){
+          let dataX=[];
+          let dataCount=[];
+          let data=res.data;
+          for (var i = 0; i < data.length; i++) {
+            dataX.push( data[i].subName)
+            dataCount.push(data[i].count)
+          }
+          _this.safetyDetailFun(dataX,dataCount,true)
+
+        }
+      })
+    },
+    /*查询*/
+    onSearch() {
+      if(this.dateRange.length>0){
+        this.editForm.beginTimeStr = this.dateRange[0];
+        this.editForm.endTimeStr = this.dateRange[1];
+      }
+      this.editForm.pageNum =1;
+      this.currentIndex=0;
+      this.getAjaxList();
+      this.getAjaxData();
+    },
+    /*重置*/
+    resetForm() {
+      this.editForm.schoolDeptId = "";
+      this.editForm.optionId = "";
+      this.editForm.subId = "";
+      this.editForm.beginTimeStr = "";
+      this.editForm.endTimeStr = "";
+      this.dateRange = [];
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+    /*安全隐患详情图表*/
+    safetyDetailFun:function (dataX,dataCount,SlideType) {
+      let safetydetailOption = {
+
+        color: ['#3398DB'],
+        tooltip : {
+          /* trigger: 'axis',
+           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+           }*/
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '8%',
+          containLabel: true
+        },
+        xAxis : [
+          {
+            type : 'category',
+            data : dataX,
+            axisLabel: {
+              textStyle: {//改变X轴字体颜色
+                color: '#fff',
+
+              },
+              //设置一行显示几个字,自己设置
+              formatter: function (params) {
+                var newParamsName = "";
+                var paramsNameNumber = params.length;
+                var provideNumber = 6;
+                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+                if (paramsNameNumber > provideNumber) {
+                  for (var p = 0; p < rowNumber; p++) {
+                    var tempStr = "";
+                    var start = p * provideNumber;
+                    var end = start + provideNumber;
+                    if (p == rowNumber - 1) {
+                      tempStr = params.substring(start, paramsNameNumber);
+                    } else {
+                      tempStr = params.substring(start, end) + "\n";
+                    }
+                    newParamsName += tempStr;
+                  }
+                } else {
+                  newParamsName = params;
+                }
+                return newParamsName;
+              }
+            },
+            lineStyle: {
+              "color": "#486CC2",
+              width:2,
+            },
+            axisTick: {
+              show: false,
+
+            },
+            axisLine:{
+              lineStyle:{
+                color:'#2E4C74',//改变X轴颜色
+                width:2,
+
+              }
+            },
+
+          }
+        ],
+        yAxis : [
+          {
+            type : 'value',
+
+
+            splitLine: {           // 分隔线
+              show: false,        // 默认显示，属性show控制显示与否
+              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+                color: ['#fff'],
+                width: 1,
+                type: 'solid',
+                opacity:0.15
+              },
+
+            },
+            axisLabel: {
+              textStyle: {//改变X轴字体颜色
+                color: '#fff',
+
+              },
+            },
+            axisTick:{//去掉X轴刻度
+              show:false,
+            },
+            axisLine:{
+              show:true,
+              lineStyle:{
+                color:'#2E4C74',//改变X轴颜色
+                width: '2',
+
+              }
+            },
+
+          }
+
+        ],
+        dataZoom: [
+          {
+            type: "slider",
+            show: SlideType,
+            xAxisIndex: [0],
+            start: 0,
+            end: 50,
+            bottom:'-4%',
+            textStyle:{
+              color:"#ccd7d7"
+            }
+          },
+        ],
+
+
+        series : [
+          {
+            name:'安全隐患',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff',
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: 'rgba(22, 31, 63, 0.5)'},
+
+                      {offset: 1, color: '#00D1FF'}
+                    ]
+                )
+              },
+
+            },
+            type:'bar',
+            barWidth: '60%',
+            barMaxWidth: '10%',
+            data:dataCount
+          }
+        ]
+      };
+      var danger_chart = this.$echarts.init(document.getElementById('danger_chart'));
+      danger_chart.setOption(safetydetailOption);
+    }
+  },
+  mounted() {
+    this.checkOptionList()
+    this.departmentsList()
+    this.getSubjectDict()
+    this.getAjaxData()
+    this.getAjaxList()
+  },
+
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.main {
+  width: rw(1920);
+  height: rh(1080);
+  /* background: url("../img/index_bg.png") no-repeat;
+   background-size: 100% 100%;*/
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 50;
+
+  background: #062338;
+  .main_btn{
+    position: absolute;
+    top: rh(140);
+    right: rw(102);
+    z-index: 1000;
+    width: rw(260);
+    height: rh(40);
+    border: 1px solid #1ED0F8;
+    border-radius: 0px rw(4) rh(4) 0px;
+    display: flex;
+    overflow: hidden;
+    >i{
+      flex: 1;
+      font-size: rh(14);
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #999999;
+      background: none;
+      line-height:rh(40);
+      text-align: center;
+    }
+    .active{
+      color: #FFFFFF;
+      background: #1ED0F8;
+    }
+  }
+
+  .header {
+    width: 100%;
+    position: absolute;
+    left: rw(0);
+    top: rh(0);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-start;
+
+    .header_l {
+      width: rw(182);
+      height: rh(44);
+      margin: rh(10) 0 0 rw(40);
+    }
+    .header_c {
+      width: rw(1180);
+      height: rh(152);
+      margin-left: rw(136);
+      background: url("~@/assets/image/index_icon2.png") no-repeat;
+      background-size: 100% 100%;
+      font-size: rh(30);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(30);
+      text-align: center;
+      padding-top: rh(26);
+    }
+    .header_r {
+      margin-left: rw(264);
+      width: rw(82);
+      height: rh(32);
+      margin-top: rh(18);
+    }
+  }
+  .main_t{
+    width: rw(1852);
+    height: rh(352);
+    position: absolute;
+    left: rw(34);
+    top: rh(86);
+    z-index: 200;
+    background: rgba(9, 55, 81, 0.6);
+    .main_t_t{
+      margin: rh(20) 0 0 rw(18);
+      >i{
+        font-size: rh(16);
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: rh(16);
+      }
+      >i:nth-of-type(1){
+
+      }
+      >i:nth-of-type(2){
+        color: #1ED0F8;
+      }
+    }
+    .main_t_b{
+      width: rw(1852);
+      height: rh(302);
+    }
+  }
+  .main_b{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(602);
+    position: absolute;
+    left: rw(34);
+    top: rh(468);
+    z-index: 200;
+
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/courtyardManage/illegalDetail.vue

@@ -0,0 +1,496 @@
+<template>
+  <div class="main" v-cloak>
+
+        <Header/>
+        <div class="main_t">
+            <div class="main_t_t">
+                <i class="main_t_t_l">当前位置：首页 &gt;</i>
+                <i>人员违规统计</i>
+            </div>
+            <div class="main_t_b" id="illegal_chart"></div>
+        </div>
+        <div class="main_b">
+            <!--查询条件-->
+            <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+                <el-form-item label="实验室" prop="dangerId" label-width="98px">
+                    <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
+                        <el-option
+                                v-for="item in labList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="违规原因" prop="dangerId" label-width="98px">
+                    <el-select v-model="editForm.violationType" popper-class="select-big-data" placeholder="请选择违规原因">
+                        <el-option
+                                v-for="item in causeList"
+                                :key="item.id"
+                                :label="item.violationName"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="日期" prop="dateRange" label-width="68px">
+                    <el-date-picker
+                            popper-class="select-big-data-time"
+                            v-model="dateRange"
+                            size="small"
+                            style="width: 240px"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="-"
+                            start-placeholder="开始日期"
+                            end-placeholder="结束日期"
+                    ></el-date-picker>
+                </el-form-item>
+                <el-form-item label-width="0">
+                    <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+                    <el-button @click="resetForm('searchForm')">重置</el-button>
+                </el-form-item>
+            </el-form>
+            <!--列表-->
+            <el-table :data="tableData"  style="width: 100%"  height="420" :row-class-name="tableRowClassName">
+                <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="subName" label="实验室"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="classifiedName" label="安全分级"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="content" label="违规原因"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="num" label="违规次数"></el-table-column>
+            </el-table>
+            <el-pagination
+                    style="margin-top: 14px"
+                    background
+                    @current-change="handleCurrentChange"
+                    :page-sizes="[10, 20, 30, 40]"
+                    :current-page.sync="param.pageNum"
+                    :page-size="param.pageSize"
+                    layout="total,prev, pager, next"
+                    :total="totalNum">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+  departmentsList,
+  detailColumnar,
+  detailSubList,
+  getDictViolation,
+  getSubjectDict,
+} from "../../api/http"
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+     //查询条件
+      param:{
+        pageNum:1,
+        pageSize:5
+      },
+      editForm:{
+        pageNum:1,
+        pageSize:5,
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//实验室
+        violationType:'',//违规类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+      },
+      subjectOptions:[],//院系
+      causeList:[],//违规原因
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+      labList:[],//实验室
+      endDay:new Date(2019,11,0).getDate()
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({ rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+    },
+    indexMethod(index) {
+      return (this.param.pageNum - 1) * this.param.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      //列表
+      let obj={
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+        'subjectId':this.editForm.subId,
+        'violationType':this.editForm.violationType,
+        'beginTimeStr':this.editForm.beginTimeStr,
+        'endTimeStr':this.editForm.endTimeStr,
+      }
+      detailSubList(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = res.total;
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+        }
+      })
+    },
+    getAjaxData: function () {
+      let _this=this;
+      //人员违规统计图表
+
+      let obj={
+        'deptLevel':localStorage.getItem('deptLevel'),
+        'subjectId':this.editForm.subId,
+        'violationType':this.editForm.violationType,
+        'beginTimeStr':this.editForm.beginTimeStr,
+        'endTimeStr':this.editForm.endTimeStr,
+      }
+      detailColumnar(obj).then((res) =>{
+        if(res.code==200){
+          var illegalDetailData=[];
+          let data=res.data;
+          let dataLength=0;
+          let dataNum=[];
+
+          if(data.length<=1){
+            illegalDetailData=[
+              ['product', '离开未打卡', '未佩戴护目镜', '未佩戴实验手套', '非法闯入', '未穿着实验服','实验室清洁'],
+              ['第一季度', 0, 0, 0,0,0,0],
+              ['第二季度', 0, 0, 0,0,0,0],
+              ['第三季度', 0, 0, 0,0,0,0],
+              ['第四季度', 0, 0, 0,0,0,0],
+
+            ]
+            dataNum= [
+              { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} ,"label": {"normal": {"show": true,"position": "top",fontSize: 14,color: '#fff',}},},
+              { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}},
+              { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} },
+              { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}},
+              { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} },
+              { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}}
+            ]
+
+          }else{
+            illegalDetailData=data
+            illegalDetailData[0].unshift('product')
+            dataLength=illegalDetailData[0].length-1
+            for(var i=0;i<dataLength;i++){
+              dataNum.push({ type: 'bar',barMaxWidth: "20", itemStyle: { normal: { barBorderRadius: 8}},"label": {"normal": {"show": true,"position": "top",fontSize: 14,color: '#fff',}}, },)
+            }
+          }
+          _this.illegalDetailFun(illegalDetailData,dataNum)
+
+        }
+      })
+
+      //查询院系
+      departmentsList().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.subjectOptions=data
+        }
+      })
+      //查询实验室
+      getSubjectDict().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.labList=data
+
+        }
+      })
+      //查询违规原因
+      getDictViolation().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.causeList=data
+
+        }
+      })
+    },
+    /*查询*/
+    onSearch() {
+
+      if(this.dateRange.length>0){
+        this.editForm.beginTimeStr = this.dateRange[0];
+        this.editForm.endTimeStr = this.dateRange[1];
+      }
+      this.getAjaxList();
+      this.getAjaxData();
+    },
+    /*重置*/
+    resetForm() {
+
+      this.editForm.subId = "";
+      this.editForm.violationType = "";
+      this.editForm.beginTimeStr=this.getdate()+'-1'
+      this.editForm.endTimeStr=this.getdate()+'-'+this.endDay
+      this.dateRange = [];
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.param.pageNum = val;
+      // this.getAjaxList();
+    },
+    getdate() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var strDate = date.getDate();
+
+      if (month >= 1 && month <= 9) {
+        month = "0" + month;
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = "0" + strDate;
+      }
+      var currentdate = year + "-" + month;
+      return currentdate;
+    },
+    /*安全隐患详情图表*/
+     illegalDetailFun:function(illegalDetailData,dataNum) {
+      let illegalOption = {
+
+        color: ['#05A3CD','#1CB146','#822FDF','#C65A18','#18C4C6','#055ACD'],
+        legend: {
+          type: 'scroll',
+
+          itemGap:20,
+          itemWidth :14,
+          textStyle:{
+            color:'#fff'
+          },
+          right: '5%',
+          top: '2%',
+        },
+        tooltip: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: '20%',
+          containLabel: true
+        },
+        dataset: {
+          /*source: [
+              ['product', '离开未打卡', '未佩戴护目镜', '未佩戴实验手套', '非法闯入', '为穿着实验服','实验室清洁'],
+              ['第一季度', 43.3, 85.8, 93.7,12,12,34],
+              ['第二季度', 83.1, 73.4, 55.1,12,12,34],
+              ['第三季度', 86.4, 65.2, 82.5,12,12,34],
+              ['第四季度', 72.4, 53.9, 39.1,12,12,34]
+          ]*/
+          source:illegalDetailData
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            textStyle: {//改变X轴字体颜色
+              color: '#fff',
+
+            }
+          },
+          axisTick:{//去掉X轴刻度
+            show:false,
+          },
+          axisLine:{
+            lineStyle:{
+              color:'#2E4C74',//改变X轴颜色
+              width: 2,
+
+            }
+          },
+
+
+
+
+        },
+        yAxis: {
+          axisLabel: {
+            textStyle: {//改变X轴字体颜色
+              color: '#fff',
+
+            }
+          },
+          splitLine: {           // 分隔线
+            show: false,        // 默认显示，属性show控制显示与否
+            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
+              color: ['#fff'],
+              width: 1,
+              type: 'solid',
+              opacity:0.15
+            },
+
+          },
+          axisTick:{//去掉X轴刻度
+            show:false,
+          },
+          axisLine:{
+            show:true,
+            lineStyle:{
+              color:'#2E4C74',//改变X轴颜色
+              width: 2,
+
+            }
+          },
+        },
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+
+
+        series:dataNum
+        /* series: [
+             { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} ,"label": {"normal": {"show": true,"position": "top",fontSize: 14,color: '#fff',}},},
+             { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}},
+             { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} },
+             { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}},
+             { type: 'bar', itemStyle: { normal: { barBorderRadius: 8}} },
+             { type: 'bar' , itemStyle: { normal: { barBorderRadius: 8}}}
+         ]*/
+      };
+      var illegal_chart = this.$echarts.init(document.getElementById('illegal_chart'));
+      illegal_chart.setOption(illegalOption);
+    }
+  },
+  beforeMount(){
+    let _this=this
+    _this.editForm.beginTimeStr=_this.getdate()+'-1'
+    _this.editForm.endTimeStr=_this.getdate()+'-'+_this.endDay
+  },
+  mounted() {
+
+    this.getAjaxData()
+    this.getAjaxList()
+
+
+  },
+
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.main {
+  width: rw(1920);
+  height: rh(1080);
+  /* background: url("../img/index_bg.png") no-repeat;
+   background-size: 100% 100%;*/
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 50;
+
+  background: #062338;
+
+  .header {
+    width: 100%;
+    position: absolute;
+    left: rw(0);
+    top: rh(0);
+    z-index: 100;
+    display: flex;
+    justify-content: flex-start;
+
+    .header_l {
+      width: rw(182);
+      height: rh(44);
+      margin: rh(10) 0 0 rw(40);
+    }
+    .header_c {
+      width: rw(1180);
+      height: rh(152);
+      margin-left: rw(136);
+      background: url("~@/assets/image/index_icon2.png") no-repeat;
+      background-size: 100% 100%;
+      font-size: rh(30);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(30);
+      text-align: center;
+      padding-top: rh(26);
+    }
+    .header_r {
+      margin-left: rw(264);
+      width: rw(82);
+      height: rh(32);
+      margin-top: rh(18);
+    }
+  }
+  .main_t{
+    background: rgba(9, 55, 81, 0.6);
+    width: rw(1852);
+    height: rh(352);
+    position: absolute;
+    left: rw(34);
+    top: rh(86);
+    z-index: 200;
+    .main_t_t{
+      margin: rh(20) 0 0 rw(18);
+      >i{
+        font-size: rh(16);
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: rh(16);
+      }
+      >i:nth-of-type(1){
+
+      }
+      >i:nth-of-type(2){
+        color: #1ED0F8;
+      }
+    }
+    .main_t_b{
+      width: rw(1852);
+      height: rh(302);
+    }
+  }
+  .main_b{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(602);
+    position: absolute;
+    left: rw(34);
+    top: rh(468);
+    z-index: 200;
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/courtyardManage/inspectDetail.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="main">
+
+    <Header/>
+    <div class="main_t">
+      <div class="main_t_t">
+        <i class="main_t_t_l">当前位置：首页 &gt;</i>
+        <i>安全检查</i>
+      </div>
+    </div>
+
+    <div class="main_b">
+      <div class="main_b_title">遗留问题</div>
+      <!--查询条件-->
+      <el-form :model="editForm" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+        <el-form-item label="实验室" prop="dangerId" label-width="98px">
+          <el-select v-model="editForm.subId" popper-class="select-big-data" placeholder="请选择实验室">
+            <el-option
+                v-for="item in labList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" @click.native.prevent="onSearch" native-type="submit">查询</el-button>
+          <el-button @click="resetForm('searchForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!--列表-->
+      <el-table :data="tableData"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
+        <el-table-column align="center" header-align='center' type="index" :index="indexMethod" label="序号" width="60"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="subjectName" label="实验室"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="hazardCheckPoint" label="隐患名称"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="title" label="检查批次"></el-table-column>
+      </el-table>
+      <el-pagination
+          style="margin-top: 14px"
+          background
+          @current-change="handleCurrentChange"
+          :page-sizes="[10, 20, 30, 40]"
+          :current-page.sync="editForm.pageNum"
+          :page-size="editForm.pageSize"
+          layout="total,prev, pager, next"
+          :total="totalNum">
+      </el-pagination>
+    </div>
+    <div class="main_b2">
+      <div class="main_b_title">本次检查问题</div>
+      <!--查询条件-->
+      <el-form :model="editForm2" ref="queryParams" class="form-box" :inline="true" style="margin:20px;">
+        <el-form-item label="实验室" prop="dangerId" label-width="98px">
+          <el-select v-model="editForm2.subId" popper-class="select-big-data" placeholder="请选择实验室">
+            <el-option
+                v-for="item in labList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label-width="0">
+          <el-button type="primary" @click.native.prevent="onSearch2" native-type="submit">查询</el-button>
+          <el-button @click="resetForm2('searchForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <!--列表-->
+      <el-table :data="tableData2"  style="width: 100%" height="250" :row-class-name="tableRowClassName">
+        <el-table-column align="center" header-align='center' type="index" :index="indexMethod2" label="序号" width="60"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="subjectName" label="实验室"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="typeName" label="安全分类"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="levelName" label="安全分级"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="hazardCheckPoint" label="隐患名称"></el-table-column>
+        <el-table-column align="center" header-align='center' prop="rectifyStatus" label="整改状态">
+          <template #default="{row}">
+            <span v-if="row.rectifyStatus == 1">已完成</span>
+            <span v-if="row.rectifyStatus == 2">待整改</span>
+            <span v-if="row.rectifyStatus == 3">待复核</span>
+            <span v-if="row.rectifyStatus == 4">暂无法整改</span>
+          </template>
+        </el-table-column>
+
+      </el-table>
+      <el-pagination
+          style="margin-top: 14px"
+          background
+          @current-change="handleCurrentChange2"
+          :page-sizes="[10, 20, 30, 40]"
+          :current-page.sync="editForm2.pageNum"
+          :page-size="editForm2.pageSize"
+          layout="total,prev, pager, next"
+          :total="totalNum2">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import {getSubjectDict, indexCheckDetalsWzg, indexCheckDetalsYzg} from "../../api/http"
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//实验室类型
+        pageNum:1,
+        pageSize:10
+      },
+      editForm2:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//实验室类型
+        pageNum:1,
+        pageSize:10
+      },
+      labList:[],//实验室
+      totalNum:0,
+      totalNum2:0,
+      tableData:[],
+      tableData2:[],
+      codeData:'',
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({ rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+    },
+
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    indexMethod2(index) {
+      return (this.editForm2.pageNum - 1) * this.editForm2.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+
+      //遗留问题
+      let obj={
+        'subId':this.editForm.subId,
+        'planId':this.codeData,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+      }
+      indexCheckDetalsWzg(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = parseInt(res.total);
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+        }
+      })
+    },
+    //请求列表
+    getAjaxList2:function (){
+      let _this=this;
+      //已整改的
+      let obj={
+        'subId':this.editForm2.subId,
+        'planId':this.codeData,
+        'pageNum':this.editForm2.pageNum,
+        'pageSize':this.editForm2.pageSize,
+      }
+      indexCheckDetalsYzg(obj).then((res) =>{
+        if(res.code==200){
+          let data = res.rows;
+          if(data && data.length>0){
+            _this.tableData2 = data;
+            _this.totalNum2 = parseInt(res.total);
+          }else{
+            _this.tableData2 = [];
+            _this.totalNum2 = 0;
+          }
+        }
+      })
+    },
+    getAjaxData: function () {
+      let _this=this;
+      //查询实验室
+      getSubjectDict().then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.labList=data
+
+        }
+      })
+    },
+    /*查询*/
+    onSearch() {
+
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+    },
+    /*重置*/
+    resetForm() {
+      this.editForm.subId = "";
+      this.onSearch();
+    },
+    /*查询*/
+    onSearch2() {
+
+      this.editForm2.pageNum =1;
+      this.getAjaxList2();
+    },
+    /*重置*/
+    resetForm2() {
+      this.editForm2.subId = "";
+      this.onSearch2();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+    handleCurrentChange2(val) {
+      this.editForm2.pageNum = val;
+      this.getAjaxList2();
+    },
+  },
+  mounted() {
+    this.codeData=this.$route.query.key
+    this.getAjaxData()
+    this.getAjaxList()
+    this.getAjaxList2()
+  },
+
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+.main {
+  width: rw(1920);
+  height: rh(1080);
+  /* background: url("../img/index_bg.png") no-repeat;
+   background-size: 100% 100%;*/
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 50;
+  background: #062338;
+  overflow: hidden;
+  .main_t{
+    background: #062338;
+    width: rw(1852);
+    position: absolute;
+    left: rw(34);
+    top: rh(86);
+    z-index: 200;
+    .main_t_t{
+      margin: rh(20) 0 0 rw(18);
+      >i{
+        font-size: rh(16);
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: rh(16);
+      }
+      >i:nth-of-type(1){
+
+      }
+      >i:nth-of-type(2){
+        color: #1ED0F8;
+      }
+    }
+  }
+  .main_b{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(442);
+    //position: absolute;
+    //left: rw(34);
+    //top: rh(138);
+    //z-index: 200;
+    margin-top: rh(138);
+    margin-left:rw(34);
+    overflow: hidden;
+    .main_b_title{
+      font-size: rh(24);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(24);
+      text-align: center;
+      margin-top: rh(10);
+    }
+  }
+  .main_b_h{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(894);
+    margin-top: rh(138);
+    margin-left:rw(34);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .main_b_title{
+      font-size: rh(24);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(24);
+      text-align: center;
+      margin-top: rh(10);
+    }
+  }
+  .main_b2{
+    background: rgba(9, 55, 81, 0.6);
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(442);
+    margin-left:rw(34);
+    margin-top:rw(10);
+    overflow: hidden;
+    //position: absolute;
+    //left: rw(34);
+    //top: rh(588);
+    //z-index: 200;
+    .main_b_title{
+      font-size: rh(24);
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(24);
+      text-align: center;
+      margin-top: rh(10);
+    }
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>