heyang

.env.development

@@ -0,0 +1,47 @@
+# 页面标题
+VUE_APP_TITLE = 实验室安全管理系统
+
+# 开发环境配置
+NODE_ENV=development
+VUE_APP_ENV = 'development'
+
+# ####################接口配置####################
+
+# 88服务器
+#VUE_APP_BASE_API = 'http://192.168.1.88/labSystem'
+# 柴
+# VUE_APP_BASE_API = 'http://192.168.1.9:8080'
+# 暨大
+#VUE_APP_BASE_API = 'http://lab.sxitdlc.com/jndxlabSystem/'
+# 矿大-文昌
+VUE_APP_BASE_API = 'http://lab.sxitdlc.com/kdwclabSystem/'
+
+
+
+
+# 视频地址
+
+VUE_APP_BASE_VIDEO_API = 'https://lab.sxitdlc.com'
+
+
+# ####################MQTT配置####################
+
+
+# MQTT地址
+#VUE_APP_BASE_MQTT_API = 'ws://192.168.1.43:1884'
+# 暨大MQTT地址
+#VUE_APP_BASE_MQTT_API = 'ws://192.168.8.3:1884'
+#VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/jndxmqtt'
+#矿大-文昌
+VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/kdwcmqtt'
+VUE_APP_BASE_MQTT_USERNAME = 'mqtt'
+VUE_APP_BASE_MQTT_PASSWORD = 'mqtt@zd1883'
+
+
+
+
+# #####################后台跳转地址#####################
+
+# 暨大后台地址
+VUE_APP_ADMIN_SCREEN_CAMPUS_BASE_API = 'http://lab.sxitdlc.com/jndxlabSystem/admin/#/login'
+

.env.production

@@ -0,0 +1,46 @@
+# 页面标题
+VUE_APP_TITLE = 实验室安全管理系统
+
+# 开发环境配置
+NODE_ENV=development
+VUE_APP_ENV = 'development'
+
+# ####################接口配置####################
+
+# 88服务器
+# VUE_APP_BASE_API = 'http://192.168.1.88/labSystem'
+# 柴
+#VUE_APP_BASE_API = 'http://192.168.1.9:8080'
+# 暨大
+#VUE_APP_BASE_API = 'http://192.168.8.3/labSystem/'
+VUE_APP_BASE_API = 'http://lab.sxitdlc.com/jndxlabSystem/'
+# 矿大
+#VUE_APP_BASE_API = 'http://192.168.1.248/labSystem/'
+# 矿大-文昌
+# VUE_APP_BASE_API = 'http://lab.sxitdlc.com/kdwclabSystem/'
+
+
+# ####################MQTT配置####################
+
+
+# MQTT地址
+#VUE_APP_BASE_MQTT_API = 'ws://192.168.1.43:1884'
+# 暨大MQTT地址
+#VUE_APP_BASE_MQTT_API = 'ws://192.168.8.3:1884'
+VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/jndxmqtt'
+#矿大
+#VUE_APP_BASE_MQTT_API = 'ws://192.168.1.248:1884'
+#矿大-文昌
+#VUE_APP_BASE_MQTT_API = 'wss://lab.sxitdlc.com/kdwcmqtt'
+
+VUE_APP_BASE_MQTT_USERNAME = 'mqtt'
+VUE_APP_BASE_MQTT_PASSWORD = 'mqtt@zd1883'
+
+
+
+
+# #####################后台跳转地址#####################
+
+# 暨大后台地址
+VUE_APP_ADMIN_SCREEN_CAMPUS_BASE_API = 'http://lab.sxitdlc.com/jndxlabSystem/admin/#/login'
+

.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,23 @@
+.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?

README.md

@@ -0,0 +1,24 @@
+# demo1
+
+## 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,57 @@
+{
+  "name": "",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test": "vue-cli-service build --mode test"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "core-js": "^3.8.3",
+    "echarts": "^5.3.3",
+    "element-plus": "^2.2.14",
+    "flv.js": "^1.6.2",
+    "jquery": "^3.6.0",
+    "mqtt": "^4.2.8",
+    "qs": "^6.11.0",
+    "swiper": "^4.3.3",
+    "vue": "^3.2.13",
+    "vue-router": "^4.1.4",
+    "vue-seamless-scroll": "^1.1.23"
+  },
+  "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",
+    "node-sass": "^7.0.1",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

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,16 @@
+<template>
+  <router-view/>
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+}
+</script>
+
+<style>
+#app {
+  overflow: hidden;
+}
+</style>

src/api/http.js

@@ -0,0 +1,106 @@
+import axios from "../utils/request";
+let {get, post,baseUrl} = axios
+
+//基础
+export const requestUrl = baseUrl;
+
+export let base_url = 'http://192.168.1.88/labSystem'
+//获取logo图片
+export const getLogoInfo = data => get("/system/logo/config/getLogoInfo",data)
+
+//安全隐患统计
+export const optionCharts = data => get("/laboratory/bigview/check/option/charts",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 indexCollegeListCheck = data => get("/laboratory/checkRecord/indexCollegeListCheck",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("/laboratory/checkRecordDetails/indexCheckDetalsWzg",data)
+//安全检查-遗留问题
+export const indexCheckDetalsYzg = data => get("/laboratory/checkRecordDetails/indexCheckDetalsYzg",data)
+//进入实验室人员
+export const onlineByBigView = data => get("/laboratory/bigview/sub/onlineByBigView",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("/wenchang/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 verifyCaptcha = data => post("/captcha/verify",data)
+
+//注册(修改密码)
+export const register = data => post("/register/cellphone",data)

src/assets/styles/publicEle.css

@@ -0,0 +1,207 @@
+@charset "UTF-8";
+/*查询条件*/
+.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: #A2A2A2;
+        background-color: none;
+        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; }
+
+/*时间控件*/
+.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-picker-panel__icon-btn {
+    color: #fff; }
+  .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: #C0C4CC;
+    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 {
+  background-color: #0F607C;
+  border-color: #0F607C; }
+  .select-big-data .el-select-dropdown__empty {
+    color: #fff; }
+  .select-big-data .popper__arrow {
+    display: none; }
+  .select-big-data .el-select-dropdown__item {
+    color: #0E9EED; }
+  .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: none;
+  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,294 @@
+@charset "UTF-8";
+@function rw($px){
+
+  @return $px*100/1920 *1vw;
+}
+@function rh($px){
+
+  @return $px*100/1080 *1vh;
+}
+
+::-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: #A2A2A2;
+            background-color: none;
+            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;
+  }
+}
+/*时间控件*/
+.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: #fff;
+  }
+  .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: #C0C4CC;
+    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;
+  }
+  .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: none;
+  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: 'HelloWorld',
+  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,14 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import axios from './utils/request';
+import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import '@/assets/styles/publicEle.scss'
+const app = createApp(App);
+app.use(router)
+    .use(ElementPlus)
+    .mount('#app')
+
+app.config.globalProperties.$axios = axios;
+

src/router/index.js

@@ -0,0 +1,135 @@
+// src/router/index.js createWebHistory
+import {createRouter, createWebHashHistory} from 'vue-router'
+import { defineAsyncComponent } from 'vue'
+const router = createRouter({
+     history: createWebHashHistory(),  // hash 模式
+    //history: createWebHistory(),  // history 模式
+    routes: [
+        {
+            path: '/',
+            name: 'home',
+            component: defineAsyncComponent(() => import(`../views/home.vue`)),
+            meta: {
+                title: '实验室安全智能监测与控制系统',
+            },
+        },
+        {
+            path: '/admittanceDetail',
+            name: 'admittanceDetail',
+            component: defineAsyncComponent(() => import(`../views/admittanceDetail.vue`)),
+            meta: {
+                title: '安全准入办理统计',
+            },
+        },
+        {
+            path: '/controlDetail',
+            name: 'controlDetail',
+            component: defineAsyncComponent(() => import(`../views/controlDetail.vue`)),
+            meta: {
+                title: '分级管控',
+            },
+        },
+        {
+            path: '/dangerDetail',
+            name: 'dangerDetail',
+            component: defineAsyncComponent(() => import(`../views/dangerDetail.vue`)),
+            meta: {
+                title: '安全隐患统计',
+            },
+        },
+        {
+            path: '/illegalDetail',
+            name: 'illegalDetail',
+            component: defineAsyncComponent(() => import(`../views/illegalDetail.vue`)),
+            meta: {
+                title: '人员违规统计',
+            },
+        },
+        {
+            path: '/inspectDetail',
+            name: 'inspectDetail',
+            component: defineAsyncComponent(() => import(`../views/inspectDetail.vue`)),
+            meta: {
+                title: '安全检查',
+            },
+        },
+        {
+            path: '/inspectDetail2',
+            name: 'inspectDetail2',
+            component: defineAsyncComponent(() => import(`../views/inspectDetail2.vue`)),
+            meta: {
+                title: '安全检查',
+            },
+        },
+        {
+            path: '/labPersonDetail',
+            name: 'labPersonDetail',
+            component: defineAsyncComponent(() => import(`../views/labPersonDetail.vue`)),
+            meta: {
+                title: '进入实验室人员',
+            },
+        },
+        {
+            path: '/planDetail',
+            name: 'planDetail',
+            component: defineAsyncComponent(() => import(`../views/planDetail.vue`)),
+            meta: {
+                title: '预案执行统计',
+            },
+        },
+        {
+            path: '/riskDetail',
+            name: 'riskDetail',
+            component: defineAsyncComponent(() => import(`../views/riskDetail.vue`)),
+            meta: {
+                title: '危险源统计',
+            },
+        },
+        {
+            path: '/warningDetail',
+            name: 'warningDetail',
+            component: defineAsyncComponent(() => import(`../views/warningDetail.vue`)),
+            meta: {
+                title: '预案',
+            },
+        },
+        {
+            path: '/workInfoDetail',
+            name: 'workInfoDetail',
+            component: defineAsyncComponent(() => import(`../views/workInfoDetail.vue`)),
+            meta: {
+                title: '工作通知',
+            },
+        },
+        {
+            path: '/workPlanDetail',
+            name: 'workPlanDetail',
+            component: defineAsyncComponent(() => import(`../views/workPlanDetail.vue`)),
+            meta: {
+                title: '工作计划',
+            },
+        },
+        {
+            path: '/classifyGradeDetail',
+            name: 'classifyGradeDetail',
+            component: defineAsyncComponent(() => import(`../views/classifyGradeDetail.vue`)),
+            meta: {
+                title: '实验室分类分级',
+            },
+        },
+        {
+            path: '/*',
+            redirect: '/',
+        },
+    ]
+})
+// 全局路由守卫
+router.beforeEach((to, from, next)=>{
+    // console.log(to, from)
+    if (to.meta.title) {
+        document.title = `${to.meta.title}`;
+    }
+    next()
+})
+
+export default router

src/utils/request.js

@@ -0,0 +1,96 @@
+import axios from "axios";
+import qs from "qs";
+
+// axios.defaults.baseURL = ''  //正式
+//axios.defaults.baseURL = 'http://192.168.1.88/labSystem' //测试
+axios.defaults.baseURL = process.env.VUE_APP_BASE_API //测试
+
+//axios.defaults.baseURL = 'http://192.168.1.9:8080' //测试
+
+//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 01b39db3-8642-494e-9f9e-6e6d27e6e856';//`Bearer ${localStorage.getItem('access_token')`;
+axios.defaults.headers.common["Authorization"] = 'Bearer '+localStorage.getItem('Authorization')+''
+
+//设置超时
+axios.defaults.timeout = 15000;
+
+axios.interceptors.request.use(
+    config => {
+        return config;
+    },
+    error => {
+        return Promise.reject(error);
+    }
+);
+
+axios.interceptors.response.use(
+    response => {
+        if (response.status == 200) {
+            return Promise.resolve(response);
+        } else {
+            return Promise.reject(response);
+        }
+    },
+    error => {
+
+        console.log(JSON.stringify(error), '请求异常', {
+            confirmButtonText: '确定',
+            callback: (action) => {
+                console.log(action)
+            }
+        });
+    }
+);
+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 = process.env.VUE_APP_BASE_VIDEO_API
+        }else{
+            axios.defaults.baseURL = process.env.VUE_APP_BASE_API
+        }
+        return new Promise((resolve, reject) => {
+
+            axios({
+                method: 'get',
+                url,
+                params: data,
+            })
+                .then(res => {
+                    resolve(res.data)
+                })
+                .catch(err => {
+                    reject(err)
+                })
+        })
+    },
+
+    baseUrl: process.env.VUE_APP_BASE_API
+};

src/views/admittanceDetail.vue

@@ -0,0 +1,324 @@
+<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="780"   :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 #default="{row}">
+                        <el-progress :percentage="Number(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, getLogoInfo, getSubjectDict} from "../api/http"
+import $ from 'jquery'
+import * as echarts from 'echarts'
+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({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    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(formName) {
+
+      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/classifyGradeDetail.vue

@@ -0,0 +1,110 @@
+<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>
+            <img class="main_t_b"  src="@/assets/image/img_sysbjt.png" />
+        </div>
+    </div>
+</template>
+
+<script>
+import {notifyplan, onlineByBigView} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+
+
+
+  },
+  mounted() {
+  },
+
+
+}
+</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;
+    .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(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/controlDetail.vue

@@ -0,0 +1,437 @@
+<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="结束日期"
+                    ></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  #default="{row}">
+                        <el-progress :percentage="Number(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 $ from 'jquery'
+import * as echarts from 'echarts'
+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: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    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;
+      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,
+      }
+      //图表
+      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(formName) {
+
+      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 = 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/dangerDetail.vue

@@ -0,0 +1,463 @@
+<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_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 {
+  applyListCollege,
+  checkOptionList,
+  departmentsList,
+  getSubjectDict,
+  optionChartDetails,
+  optionCharts
+} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+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:[],
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    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,
+        'beginTime':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,
+        'beginTime':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)
+
+        }
+      })
+
+      //隐患类型
+      checkOptionList({}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.dangerList=data
+
+        }
+      })
+
+      //查询院系
+      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(formName) {
+
+      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) {
+      let safetydetailOption = {
+
+        color: ['#3398DB'],
+        tooltip : {
+          /* trigger: 'axis',
+           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+           }*/
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis : [
+          {
+            type : 'category',
+            data : dataX,
+            axisLabel: {
+              textStyle: {//改变X轴字体颜色
+                color: '#fff',
+
+              },
+            },
+            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',
+
+              }
+            },
+
+          }
+
+        ],
+        series : [
+          {
+            name:'安全隐患',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff',
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: new 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 = echarts.init(document.getElementById('danger_chart'));
+      danger_chart.setOption(safetydetailOption);
+    }
+  },
+  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{
+    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/illegalDetail.vue

@@ -0,0 +1,487 @@
+<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.pageNo"
+                    :page-size="param.pageSize"
+                    layout="total,prev, pager, next"
+                    :total="totalNum">
+            </el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+  departmentsList,
+  detailColumnar,
+  detailSubList,
+  getDictViolation,
+  getSubjectDict,
+  optionChartDetails
+} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+     //查询条件
+      param:{
+        pageNo:1,
+        pageSize:5
+      },
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//实验室
+        schoolDeptId:'',//院系id
+        violationType:'',//违规类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+      },
+      subjectOptions:[],//院系
+      causeList:[],//违规原因
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+      labList:[],//实验室
+      endDay:new Date(2019,11,0).getDate()
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.param.pageNo - 1) * this.param.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      //列表
+      let obj={
+        'subjectId':this.editForm.subId,
+        'violationType':this.editForm.violationType,
+        '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,
+        'schoolDeptId':this.editForm.schoolDeptId,
+        '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=[];
+          illegalDetailData=data
+          illegalDetailData[0].unshift('product')
+          dataLength=illegalDetailData[0].length-1
+          for(var i=0;i<dataLength;i++){
+            dataNum.push({ type: 'bar',barWidth : '6%', 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(formName) {
+
+      this.editForm.subId = "";
+      this.editForm.schoolDeptId = "";
+      this.editForm.violationType = "";
+      this.editForm.beginTimeStr = "";
+      this.editForm.endTimeStr = "";
+      this.dateRange = [];
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.param.pageNo = val;
+      // this.getAjaxList();
+    },
+    getdate() {
+      var date = new Date();
+      var seperator1 = "-";
+      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 = 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()
+
+    //页面切换按钮
+    $(".main_t_t_l").click(function () {
+      window.open("index.html",'_self');
+    });
+    $(".header_r").click(function () {
+      window.open("index.html",'_self');
+    });
+  },
+
+
+}
+</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/inspectDetail.vue

@@ -0,0 +1,277 @@
+<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>
+
+        <div class="main_b">
+            <!--查询条件-->
+            <el-form :model="editForm" ref="queryParams" class="form-box">
+                <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="720" :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="安全分级" label="安全分级"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="yhMs" label="隐患名称"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="isZg" label="整改状态">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.isZg==0">已整改</span>
+                        <span v-else-if="scope.row.isZg!=0">未整改</span>
+                    </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 {} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        subId:'',//实验室类型
+        pageNum:1,
+        pageSize:10
+      },
+      labList:[],//实验室
+      totalNum:0,
+      tableData:[],
+      codeData:'',
+    }
+  },
+  methods: {
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+      let _this=this;
+      //列表
+      $.ajax({
+        type: "get",
+        url: URL+'laboratory/checkRecord/indexGetCheckDetals?id='+this.codeData+
+            '&laboratoryId='+this.editForm.subId+
+            '&pageNum='+this.editForm.pageNum+
+            '&pageSize='+this.editForm.pageSize,
+
+        dataType: "json",
+        contentType: 'application/json',
+        //data:JSON.stringify(data),
+        beforeSend : function(request) {undefined
+          request.setRequestHeader("Authorization", localStorage.getItem('Authorization'));
+        },
+        success: function (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;
+      //查询实验室
+      $.ajax({
+        type: "get",
+        url: URL+'laboratory/subject/getSubjectDict',
+        dataType: "json",
+        contentType: 'application/json',
+        //data:JSON.stringify(data),
+        beforeSend : function(request) {undefined
+          request.setRequestHeader("Authorization", localStorage.getItem('Authorization'));
+        },
+        success: function (res) {
+          if(res.code==200){
+            let data=res.data;
+            _this.labList=data
+
+          }
+
+        }
+      });
+
+    },
+    /*查询*/
+    onSearch() {
+
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+    },
+    /*重置*/
+    resetForm(formName) {
+      this.editForm.subId = "";
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+  },
+  mounted() {
+    this.codeData=this.$route.query.key
+    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: #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: #486CC2;
+      }
+    }
+  }
+  .main_b{
+
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(602);
+    position: absolute;
+    left: rw(34);
+    top: rh(138);
+    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/inspectDetail2.vue

@@ -0,0 +1,372 @@
+<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" v-if="tableData.length>0">
+            <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="270" :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="yhMs" label="隐患名称"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="remark" 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" v-if="tableData2.length>0">
+            <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="270" :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="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="yhMs" label="隐患名称"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="isZg" label="整改状态">
+                    <template #default="{row}">
+                      <span v-if="row.isZg == 0">已整改</span>
+                      <span v-if="row.isZg != 0">未整改</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, optionChartDetails} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+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({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+
+    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={
+        'laboratoryId':this.editForm.subId,
+        'id':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={
+        'laboratoryId':this.editForm.subId,
+        'id':this.codeData,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.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(formName) {
+      this.editForm.subId = "";
+      this.onSearch();
+    },
+    /*查询*/
+    onSearch2() {
+
+      this.editForm2.pageNum =1;
+      this.getAjaxList2();
+    },
+    /*重置*/
+    resetForm2(formName) {
+      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>

src/views/labPersonDetail.vue

@@ -0,0 +1,317 @@
+<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="editForm" class="form-box" :inline="true" style="margin:20px;">
+                <el-form-item label="安全分类" prop="typeId" label-width="98px">
+                    <el-select v-model="editForm.typeId" popper-class="select-big-data" placeholder="请选择安全分类">
+                        <el-option
+                                v-for="item in typeList"
+                                :key="item.id"
+                                :label="item.typeName"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="安全分级" prop="level" label-width="98px">
+                    <el-select v-model="editForm.level" popper-class="select-big-data" placeholder="请选择安全分级">
+                        <el-option
+                                v-for="item in levelList"
+                                :key="item.id"
+                                :label="item.classifiedName"
+                                :value="item.id">
+                        </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="实验室" prop="subjectId" label-width="98px">
+                    <el-select v-model="editForm.subjectId" 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="750" :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="name" 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="online" 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 {classifiedListAll, classtypeListAll, onlineByBigView, optionCharts,departmentsList,getSubjectDict} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        groupDeptId:'',//院系id
+        typeId:'',//安全分类id
+        level:'',//安全分级id
+        subjectId:'',//实验室类型
+        pageNum:1,
+        pageSize:10
+      },
+      subjectOptions:[],//院系
+      typeList:[],//安全分类
+      levelList:[],//安全分级
+      labList:[],//实验室
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+
+
+      let _this=this;
+      //列表
+      let obj={
+        'type':localStorage.getItem('deptLevel'),
+        'groupDeptId':this.editForm.groupDeptId,
+        'typeId':this.editForm.typeId,
+        'level':this.editForm.level,
+        'id':this.editForm.subjectId,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+      }
+      onlineByBigView(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;
+      //安全分级
+      classifiedListAll({}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.levelList=data
+
+        }
+      })
+
+      //安全分类
+      classtypeListAll({}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.typeList=data
+
+        }
+      })
+
+      //查询院系
+      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() {
+
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+      this.getAjaxData();
+    },
+    /*重置*/
+    resetForm(formName) {
+
+      this.editForm.groupDeptId = "";
+      this.editForm.typeId = "";
+      this.editForm.level = "";
+      this.editForm.subjectId = "";
+      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);
+  /* 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{
+    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(920);
+    position: absolute;
+    left: rw(34);
+    top: rh(138);
+    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/planDetail.vue

@@ -0,0 +1,544 @@
+<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="main_t_b" id="plan_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.subjectId" 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="780"   :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="left" header-align='center' prop="subjectName" label="实验室">
+                     <template #default="{row}" >
+                        <div class="lab_border">
+                           <span class="lab_span"><i>{{row.classifiedName}}</i><i>{{row.typeName}}</i></span>
+                           <span class="lab_span2">{{row.subjectName}}</span>
+                        </div>
+                     </template>
+                </el-table-column>
+                <el-table-column align="center" header-align='center' prop="createTimeStr" label="起始时间"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="overTime" label="结束时间"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="alarmInfo" label="风险预警">
+                 <template #default="{row}" >
+                     <span class="risk_span"><img v-if="row.alarmInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="row.alarmInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>声光报警</span>
+                     <span class="risk_span"><img v-if="row.phoneInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="row.phoneInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>电话</span>
+                     <span class="risk_span"><img v-if="row.phoneInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="row.phoneInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>短信</span>
+                 </template>
+                </el-table-column>
+                <el-table-column align="center" header-align='center' prop="sesorContent" label="应急处置">
+                     <template #default="{row}" >
+                         <span class="risk_span"><img v-if="row.windInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="row.windInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>通风</span>
+                         <span class="risk_span"><img v-if="row.powerInfo==1" src="@/assets/image/icon_fxyj_xz.png"/><img  v-if="row.powerInfo==0" src="@/assets/image/icon_fxyj_zc.png"/>断电</span>
+                         <span class="risk_span"><img  src="@/assets/image/icon_fxyj_zc.png"/>短信</span>
+                     </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 {departmentsList, getRiskPlanList, getSubjectDict, getYearControlInfo, onlineByBigView} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        groupDeptId:'',//院系id
+        subjectId:'',//实验室类型
+        beginTimeStr:'',//开始时间
+        endTimeStr:'',//结束时间
+        pageNum:1,
+        pageSize:10
+      },
+      subjectOptions:[],//院系
+      labList:[],//实验室
+      dateRange:[],//时间
+      totalNum:0,
+      tableData:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+
+
+      let _this=this;
+      //列表
+      let obj={
+        'groupDeptId':this.editForm.groupDeptId,
+        'subjectId':this.editForm.subjectId,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+        'beginTimeStr':this.editForm.beginTimeStr,
+        'endTimeStr':this.editForm.endTimeStr,
+      }
+      getRiskPlanList(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={
+        'deptLevel':localStorage.getItem('deptLevel')
+      }
+      //图表
+      getYearControlInfo(obj).then((res) =>{
+        if(res.code==200){
+          let dataX=[];
+          let dataValue=[];
+          let data=res.data.list;
+          for (var i = 0; i < data.length; i++) {
+
+
+            dataX.push( data[i].yearMonth)
+            dataValue.push(data[i].num)
+          }
+          // planDetailFun(dataX,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(formName) {
+
+      this.editForm.groupDeptId = "";
+      this.editForm.subjectId = "";
+      this.editForm.beginTimeStr = "";
+      this.editForm.endTimeStr = "";
+      this.dateRange = [];
+      this.onSearch();
+
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+    /*安全隐患详情图表*/
+     planDetailFun:function (dataX,dataVal) {
+  const data = dataVal
+  const sideData = data.map(item => item)//侧边主体高度
+  planOption =  {
+
+
+    tooltip: {
+      /*   trigger: 'axis',
+
+         axisPointer: { // 坐标轴指示器，坐标轴触发有效
+             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+         }*/
+    },
+    /*内边距*/
+    grid: {
+      top: '14%',
+      left: '2%',
+      right: '2%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      data: dataX,
+      //坐标轴
+      axisLine: {
+        lineStyle: {
+          "color": "#486CC2",
+          width:2,
+        }
+      },
+      axisTick: {
+        show: false,
+        length: 9,
+        alignWithLabel: true,
+        lineStyle: {
+          color: '#7DFFFD'
+        }
+      },
+      //坐标值标注
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: '#fff',
+          fontSize:16,
+        }
+      }
+    },
+    yAxis: [
+      {
+
+        //坐标轴
+        axisLine: {
+          lineStyle: {
+            "color": "#486CC2",
+            width:2,
+          }
+        },
+        axisTick: {
+          show: false,
+
+        },
+        //坐标值标注
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: '#fff',
+            fontSize:16,
+          }
+        },
+        //分格线
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: '#4784e8'
+          }
+        }
+      }
+    ],
+    series: [{
+      name: '预案执行统计',//正面
+      //柱状图顶部数值
+      "label": {
+        "normal": {
+          "show": true,
+          "position": "top",
+          fontSize: 14,
+          fontWeight: '500',
+          color: '#fff',
+          padding:[2,2,2,10],
+        }
+      },
+      tooltip: {
+        show: false
+      },
+      type: 'bar',
+      barWidth: 24.5,
+
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+            offset: 0,
+            color: "#228efb" // 0% 处的颜色
+          }, {
+            offset: 0.6,
+            color: "#04acf3" // 60% 处的颜色
+          }, {
+            offset: 1,
+            color: "#05e5e5" // 100% 处的颜色
+          }], false)
+        }
+      },
+
+      data: data,
+
+
+    }, {
+      type: 'bar',//侧边
+      name: '预案执行统计',
+      barWidth: 8,
+      itemStyle: {
+        normal: {
+          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+            offset: 0,
+            color: "#228efb" // 0% 处的颜色
+          }, {
+            offset: 0.6,
+            color: "#04acf3" // 60% 处的颜色
+          }, {
+            offset: 1,
+            color: "#05e5e5" // 100% 处的颜色
+          }], false)
+        }
+      },
+      barGap: 0,
+      data: sideData
+    }, {
+      name: '预案执行统计',
+      tooltip: {
+        show: false
+      },
+      type: 'pictorialBar',
+      itemStyle: {
+        borderWidth: 1,
+        borderColor: '#0058FF',
+        color: '#0058FF'
+      },
+      symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
+      symbolSize: ['32', '12'],
+      symbolOffset: ['-1', '-11'],
+      //symbolRotate: -5,
+      symbolPosition: 'end',
+      data: data,
+      z: 3
+    },
+    ]
+  };
+  var plan_chart = echarts.init(document.getElementById('plan_chart'));
+  plan_chart.setOption(planOption);
+}
+  },
+  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;
+}
+.lab_border{
+  display: flex;
+  align-items: center;
+}
+.lab_span{
+  display: inline-block;
+  border: 1px solid #0183FA;
+  border-radius: rh(6);
+  padding: rh(6) rw(16);
+  margin-right: rw(8);
+  >i{
+    font-size: rh(12);
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #0183FA;
+    line-height: rh(16);
+    display: block;
+  }
+  >i:nth-of-type(1){}
+  >i:nth-of-type(2){}
+}
+.lab_span2{
+  display: inline-block;
+  font-size: rh(14);
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+}
+.risk_span{
+  font-size: rh(14);
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #FFFFFF;
+  margin-right: rw(28);
+  >img{
+    width: rw(14);
+    height:rh(14);
+    margin-right: rw(8);
+    position: relative;
+    top: rh(2);
+  }
+}
+.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(862);
+    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/riskDetail.vue

@@ -0,0 +1,462 @@
+<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="main_t_b" id="plan_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.hazardId" popper-class="select-big-data" placeholder="请选择危险源">
+                        <el-option
+                                v-for="item in riskList"
+                                :key="item.id"
+                                :label="item.chName"
+                                :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="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="chName" label="危险源"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="num" label="数量"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="unit" label="单位"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="percentageNum" label="占比" width="420">
+                    <template  #default="{row}">
+                        <el-progress  :percentage="Number(row.percentageNum)" :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 {
+  departmentsList,
+  getSubjectDict,
+  onlineByBigView,
+  queryHazardColumnarTop,
+  queryHazardList,
+  queryHazardOption
+} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      editForm:{
+        deptLevel:'',//这个是登陆后，刘波给你的院校的类型
+        groupDeptId:'',//院系id
+        subId:'',//实验室
+        hazardId:'',//危险源
+        pageNum:1,
+        pageSize:10
+      },
+      subjectOptions:[],//院系
+      riskList:[],//危险源
+      totalNum:0,
+      tableData:[
+        {
+          chName:'危化品',
+          num:'73',
+          unit:'kg',
+          percentageNum:'73',
+        },
+        {
+          chName:'气瓶',
+          num:'62',
+          unit:'瓶',
+          percentageNum:'62',
+        },
+        {
+          chName:'冷热设备',
+          num:'51',
+          unit:'台',
+          percentageNum:'51',
+        },
+        {
+          chName:'特种设备',
+          num:'34',
+          unit:'台',
+          percentageNum:'34',
+        },
+      ],
+      labList:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+
+
+      let _this=this;
+      //列表
+      let obj={
+        'groupDeptId':this.editForm.groupDeptId,
+        'subjectId':this.editForm.subId,
+        'hazardId':this.editForm.hazardId,
+        'pageNum':this.editForm.pageNum,
+        'pageSize':this.editForm.pageSize,
+      }
+      queryHazardList(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={
+        'deptLevel':localStorage.getItem('deptLevel'),
+      }
+      queryHazardColumnarTop(obj).then((res) =>{
+        if(res.code==200){
+          let dataX=[];
+          let dataValue=[];
+          let data=res.data;
+          for (var i = 0; i < data.length; i++) {
+            dataX.push(data[i].chName)
+            dataValue.push(data[i].num)
+          }
+          _this.riskDetailFun(dataX,dataValue)
+
+        }
+      })
+
+
+      //查询危险源
+      queryHazardOption({}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.riskList=data
+
+        }
+      })
+      //查询院系
+      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() {
+
+      this.editForm.pageNum =1;
+      this.getAjaxList();
+    },
+    /*重置*/
+    resetForm(formName) {
+
+      this.editForm.subId = "";
+      this.editForm.hazardId = "";
+      this.editForm.groupDeptId = "";
+      this.onSearch();
+    },
+    handleCurrentChange(val) {
+      this.editForm.pageNum = val;
+      this.getAjaxList();
+    },
+
+    /*安全隐患详情图表*/
+    riskDetailFun:function (dataX,dataValue) {
+        const data = dataValue
+      //const sideData = data.map(item => item + 4.5)//侧边主体高度
+      let planOption =   {
+        color: ['#3398DB'],
+        tooltip : {
+          /* trigger: 'axis',
+           axisPointer : {            // 坐标轴指示器，坐标轴触发有效
+               type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+           }*/
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis : [
+          {
+            type : 'category',
+            data : dataX,
+            axisLabel: {
+              textStyle: {//改变X轴字体颜色
+                color: '#fff',
+
+              },
+            },
+            axisTick:{//去掉X轴刻度
+              show:false,
+            },
+            axisLine:{
+              show: true,
+              lineStyle: {
+                "color": "#486CC2",
+                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": "#486CC2",
+                width:2,
+              }
+            },
+
+          }
+
+        ],
+        series : [
+          {
+            name:'危险源统计',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: '#fff',
+                }
+              }
+            },
+            itemStyle: {
+
+              normal: {
+                borderRadius:4,
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 0, 1,
+                    [
+                      {offset: 0, color: '#007EFF'},
+
+                      {offset: 1, color: '#3FFFEA'}
+                    ]
+                )
+              },
+
+            },
+            type:'bar',
+            barWidth: '60%',
+            barMaxWidth: '10%',
+            data:dataValue
+          }
+        ]
+      };
+      var plan_chart = echarts.init(document.getElementById('plan_chart'));
+      plan_chart.setOption(planOption);
+    }
+  },
+  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/warningDetail.vue

@@ -0,0 +1,757 @@
+<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_m">
+            <div class="main_m_t">
+                <div class="main_m_t_l">首次报警时间 {{firstTime}}</div>
+                <div class="dowebok">
+                   <ul class="main_m_t_c_n">
+                       <li v-for="(item,index) in weather" :key="item.index">
+                           <!--<img src="static/img/img/index_icon6.png"/>-->
+                           <img  v-if="item.funNum == 'wendu'" src="@/assets/image/img/index_icon6.png">
+                           <img  v-if="item.funNum == 'shidu'" src="@/assets/image/img/index_icon7.png">
+                           <img  v-if="item.funNum == 'yanwu'" src="@/assets/image/img/index_icon8.png">
+                           <img  v-if="item.funNum == 'daqiya'" src="@/assets/image/img/index_icon11.png">
+                           <img  v-if="item.funNum == 'co'" src="@/assets/image/img/index_icon10.png">
+                           <img  v-if="item.funNum == 'o2'" src="@/assets/image/img/index_icon9.png">
+                           <img  v-if="item.funNum == 'fenchen'" src="@/assets/image/img/index_icon13.png">
+                           <img  v-if="item.funNum == 'voc'" src="@/assets/image/img/index_icon17.png">
+                           <img  v-if="item.funNum == 'jiawan'" src="@/assets/image/img/index_icon12.png">
+                           <img  v-if="item.funNum == 'so2'" src="@/assets/image/img/index_icon14.png">
+                           <img  v-if="item.funNum == 'no1'" src="@/assets/image/img/index_icon17.png">
+                           <i>{{item.funcName}}</i>
+                           <i>{{item.formatVal}}</i>
+                       </li>
+                   </ul>
+                </div>
+                <div class="main_m_t_r">
+                </div>
+
+            </div>
+            <div class="main_m_b">
+                <div class="time-box">
+                    <ul  >
+                        <li class="active" v-for="(item,index2) in planAxis" :key="index2">
+                          <p>发生风险：{{item.riskPlanName}}</p>
+                          <p>甲烷传感器浓度：<i>{{item.sensorJsonValue}}</i></p>
+                          <p>时间：{{item.createTime}}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        <div class="main_b">
+            <div class="main_b_l" v-if="personInfo">
+                <div class="main_b_l_t">
+                    <li>{{personInfo.subName}}</li>
+                    <i>所属院系:{{personInfo.deptName}}</i>
+                    <i>实验室负责人:{{personInfo.adminName}}</i>
+                    <i>联系方式:{{personInfo.adminPhone}}</i>
+                    <i></i>
+                    <li>消息推送记录</li>
+                </div>
+                <div class="main_b_l_b">
+                    <div class="main_b_l_b_t">
+                        <i>推送方式</i>
+                        <i>推送目标</i>
+                    </div>
+                    <div class="main_b_l_b_b">
+                        <li v-for="(item,index3) in msgsPush" :key="index3">
+                            <i>{{item.pushType.code==0?'语音播报':'短信推送'}}</i>
+                            <i>{{item.showInfo}}</i>
+                        </li>
+                        <!--<li>
+                            <i>语音播报</i>
+                            <i>甲烷监测实验室</i>
+                        </li>-->
+                    </div>
+                </div>
+            </div>
+            <div class="main_b_r">
+                <li   v-for="(item,index) in urlList" :key="index" >
+                    <div class="main_b_r_li_t" v-if="personInfo">
+                        <i>{{personInfo.subName}}</i>
+                        <img src="@/assets/image/img/index_icon15.png" @click="videoFullScreen(index)"/>
+                    </div>
+                    <div class="main_b_r_li_b">
+                        <video
+                            ref="videoRef"
+                           :id="urlList.id" :src="item.url"
+                            :custom-cache='false' :autoplay="true" :controls="true"
+                            :enable-danmu="false" :muted="true" :show-fullscreen-btn="true"
+                            :show-center-play-btn="false" :show-play-btn="false"
+                            @error="videoErrorCallback" >
+                        </video>
+                    </div>
+                </li>
+                <li v-if="urlList.length<=0">
+                    <div class="main_b_r_li_t">
+                        <i>暂无视频数据</i>
+                        <img src="@/assets/image/img/index_icon15.png"/>
+                    </div>
+                    <div class="main_b_r_li_b">
+                        <video  autoplay controls  muted width="600px" height="410px"></video>
+                    </div>
+                </li>
+                <li v-if="urlList.length<=0">
+                    <div class="main_b_r_li_t">
+                        <i>暂无视频数据</i>
+                        <img src="@/assets/image/img/index_icon15.png"/>
+                    </div>
+                    <div class="main_b_r_li_b">
+                        <video  autoplay controls  muted width="600px" height="410px"></video>
+                    </div>
+                </li>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+import flvjs from "flv.js"
+import {
+  abnormalLogOrderByList, bigviewFunctionList, bigviewSub, bigviewWarnMessage,
+  controllerList,
+  listCollegeApplyColumn,
+  mangerControl,
+  requestUrl,
+  startListDeviceIds
+} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      value: true,
+      firstTime:'',
+      weather:[],
+      planAxis:[],
+      msgsPush:[],
+      switchList:[],//开关控制
+      tvIds:'',
+
+      leftVideoList:[],
+      leftVideoListOne:[],
+
+      videoList:[],//视频流对象
+
+      personInfo:null,
+      codeData:'',
+      subjectId:'',
+      urlList:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    leftVideoFunction:function(){
+      //videoElement
+      let _this = this;
+      //本地视频数据
+      _this.leftVideoList = [];
+
+      for(let i=0;i<_this.videoList.length;i++){
+
+        if(_this.videoList[i].videoUrl){
+
+          let obj = {
+            player :{},
+            flvPlayer:{}
+          };
+          console.log(document.getElementById(_this.videoList[i].divId))
+          obj.player = document.getElementById(_this.videoList[i].divId);
+
+          obj.flvPlayer = flvjs.createPlayer(
+              {
+                // isLive: true, //=> 是否为直播流
+                // hasAudio: false, //=> 是否开启声音
+                type: 'flv', //媒体类型 flv 或 mp4
+                url:_this.videoList[i].videoUrl,
+              },
+              {
+                enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
+                stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
+                isLive: true,//是否是直播
+                lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
+                autoCleanupSourceBuffer: true,//进行自动清理
+                autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
+                autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
+              }
+          );
+
+          _this.leftVideoList.push(obj);
+          _this.leftVideoListOne.push(obj);
+
+        }
+      }
+
+      setTimeout(function(){
+        for(let i=0;i<_this.leftVideoList.length;i++){
+
+          _this.leftVideoList[i].flvPlayer.attachMediaElement(_this.leftVideoListOne[i].player);
+          _this.$forceUpdate();
+          _this.leftVideoList[i].flvPlayer.load(); //加载
+          _this.leftVideoList[i].flvPlayer.play(); //播放
+        }
+      },2000);
+    },
+    //开关
+    switchFun:function (item){
+      let _this=this
+      if(item.state.code==3 || item.state.code==4){
+        let text = item.state.code==3?'关闭':(item.state.code==4?'开启':'');
+        this.$confirm('确定要'+text+'该设备吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          _this.mangerControl(item);
+        }).catch(() => {
+
+        });
+      }
+    },
+    //开关给后台传输返回结果 需要MQTT监听是否成功
+    mangerControl:function (item){
+      let _this=this;
+
+      let id=item.id
+      let command=item.state.code==3?'close':(item.state.code==4?'open':'')
+      let obj={
+        id:item.id,
+        command:item.state.code==3?'close':(item.state.code==4?'open':'')
+      }
+      mangerControl({obj}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.$message({
+            message: '操作成功',
+            type: 'error'
+          });
+          _this.switchStateFun()
+        }else{
+          _this.$message({
+            message: res.msg,
+            type: 'error'
+          });
+        }
+      })
+    },
+    //获取开关状态
+    switchStateFun(){
+      let _this=this;
+      controllerList(this.subjectId).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.switchList=data
+        }
+      })
+    },
+    //获取摄像头列表
+    cameraListFun(){
+      let _this=this;
+      let obj = {
+        count:"2",
+        deviceIds:_this.tvIds,
+        //deviceIds:'440102004920000000010013',
+        page:"1",
+      };
+
+      startListDeviceIds(obj).then((res) =>{
+        if(res.code==200){
+          let data=res
+          // for(let i=0;i<data.data.length;i++){
+          //   let list = {
+          //     divId:'divId'+i,
+          //     hasAudio:false,
+          //     height:false,
+          //     videoError:"",
+          //     videoUrl:data.data[i].result.body.data.flv,
+          //   }
+          //   _this.videoList.push(list)
+          //   _this.$forceUpdate();
+          //   setTimeout(function(){
+          //     _this.leftVideoFunction();
+          //   },2000);
+          // }
+          let list = [];
+          for(let i=0;i<data.data.length;i++){
+            let text = 'https://lab.sxitdlc.com/jinandaxue/stream/';
+            let url = data.data[i].result.body.data.fmp4;
+            url = url.split("rtp/");
+            let newUrl = text+'rtp/'+url[1];
+            let obj = {
+              name:"楼道监控"+(i+1),
+              id:data.data[i].result.body.data.deviceID,
+              url:newUrl,
+            }
+            list.push(obj)
+          }
+          this.urlList = list;
+          console.log(this.urlList)
+        }
+      })
+    },
+    //视屏全屏方法
+    videoFullScreen(index){
+      this.$refs.videoRef[index].webkitRequestFullScreen();
+    },
+    getAjaxData: function () {
+      let _this = this;
+      //获取报警详情
+
+      abnormalLogOrderByList({'groupId':this.codeData}).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.firstTime=data[0].createTime
+          _this.planAxis=data;
+
+          for(let i=0;i< _this.planAxis.length;i++){
+            if( _this.planAxis[i].sensorJson){
+              _this.planAxis[i].sensorJsonValue = JSON.parse(_this.planAxis[i].sensorJson)[0].value;
+
+            }
+          }
+
+        }
+      })
+
+      //实验室简要信息
+      bigviewSub(this.subjectId).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          let list='';
+          _this.personInfo=data
+          for(let i=0;i<data.tvIds.length;i++){
+            list +=data.tvIds[i]+",";
+          }
+
+          _this.tvIds=list
+
+          _this.cameraListFun();
+
+        }
+      })
+
+      //传感器信息
+      bigviewFunctionList(this.subjectId).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.weather=data
+        }
+      })
+      //消息推送记录
+      bigviewWarnMessage(this.codeData).then((res) =>{
+        if(res.code==200){
+          let data=res.data;
+          _this.msgsPush=data
+        }
+      })
+    }
+  },
+  mounted() {
+    let _this=this
+    this.codeData=this.$route.query.key
+    this.subjectId=this.$route.query.subjectId
+    _this.switchStateFun();
+    _this.getAjaxData();
+  },
+}
+</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_icon17.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{
+    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_m{
+    width: rw(1852);
+    position: absolute;
+    left: rw(34);
+    top: rh(152);
+    z-index: 200;
+    .main_m_t{
+      width: 100%;
+      height: rh(80);
+      background: rgba(9, 55, 81, 0.6);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      overflow: hidden;
+      .main_m_t_l{
+        width: rw(386);
+        font-size: rh(18);
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #E01622;
+        line-height: rh(18);
+        margin-left: rw(24);
+      }
+      .dowebok{
+        width: rw(1370);
+        height: rh(80);
+        background: 0;
+        .main_m_t_c_n{
+          /* width: rw(2000);
+           display: flex;
+           justify-content: flex-start;
+           align-items: center;*/
+          >li{
+            width: rw(202);
+            height: 100%;
+            display: inline-block;
+            margin-left: rw(8);
+            >img{
+              width: rw(20);
+              height: rh(26);
+            }
+            >i{
+              font-size: rh(16);
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              line-height: rh(80);
+              display: inline-block;
+            }
+            >i:nth-of-type(1){
+              margin:0 rw(16);
+            }
+            >i:nth-of-type(2){
+              color: #01E7E9;
+            }
+          }
+        }
+      }
+      .main_m_t_r{
+        display: flex;
+        justify-content: space-between;
+        /* width: rw(360);*/
+        >li{
+          width: rw(120);
+          >i{
+            display: block;
+            font-size:rh(14);
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: rh(14);
+            margin-bottom: rh(8);
+          }
+          .main_m_t_r_li_r{
+            width: rw(60);
+            height: rh(26);
+            margin-left: rw(12);
+          }
+        }
+      }
+      .close_btn{
+        width: rw(18);
+        height: rh(18);
+        margin-right: rw(20);
+
+      }
+    }
+    /*时间轴*/
+    .main_m_b{
+      height: rh(278);
+      margin-top: rh(10);
+      .time-box{
+        width: 100%;margin: 0 auto;overflow: hidden;
+        >ul{
+          overflow: hidden;position: relative;height:rh(255);
+          >li{
+            width:rw(242);
+            height: rh(98);
+            float: left;
+            position: relative;
+            cursor: pointer;
+            background: rgba(9, 55, 81, 0.6);
+            border-radius: rw(10);
+            >p{
+              font-size: rh(14);
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              line-height: rh(14);
+              text-align: center;
+              >i{
+                color: #FF6060;
+              }
+            }
+            >p:nth-of-type(1){
+              margin: rh(12) 0 rh(14) 0;
+            }
+            >p:nth-of-type(2){
+              margin-bottom: rh(14);
+            }
+            >p:nth-of-type(3){}
+          }
+          >li:after{
+            content: "";
+            width: rw(32);
+            height: rh(32);
+            background: url("~@/assets/image/img/index_icon16.png") no-repeat;
+            position: absolute;
+            left:50%;margin-left:rw(-7);
+            bottom: 0;
+            bottom: rh(-48);
+            z-index: 1;}
+          >li:nth-child(2n):after{
+            bottom: auto;top:rh(-46);
+          }
+          >li:nth-child(2n){
+            margin-top:rh(160);
+          }
+        }
+        >ul:after{content: "";background: #d2d2d2;height: 1px;width: 100%;position: absolute;left:0;top:50%;}
+
+
+      }
+    }
+  }
+  .main_b{
+    width: rw(1852);
+    height: rh(550);
+    position: absolute;
+    left: rw(34);
+    top: rh(508);
+    z-index: 200;
+    background: rgba(9, 55, 81, 0.6);
+    display: flex;
+    justify-content: flex-start;
+    .main_b_l{
+      width: rw(370);
+      margin-left: rw(24);
+      // border: 1px solid #486CC2;
+
+      .main_b_l_t{
+
+
+        >li{
+          font-size: rh(18);
+          font-family: Microsoft YaHei;
+          font-weight: bold;
+          color: #486CC2;
+          line-height: rh(18);
+        }
+        >i{
+          display: block;
+          font-size: rh(14);
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height:rh(14);
+          margin-top: rh(20);
+          margin-left: rw(32);
+        }
+        >i:nth-of-type(4){
+          margin-left: 0;
+          border: 1px solid #486CC2;
+        }
+        >li:nth-of-type(1){
+          margin-top: rh(42);
+        }
+        >li:nth-of-type(2){
+          margin-top: rh(22);
+        }
+      }
+      .main_b_l_b{
+        margin-top: rh(14);
+        height: rh(268);
+        overflow-y: hidden;
+        .main_b_l_b_t{
+          height: rh(40);
+          background: rgba(72, 108, 194, 0.2);
+          display: flex;
+          justify-content: flex-start;
+          >i{
+            display: inline-block;
+            font-size: rh(16);
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+            line-height: rh(40);
+            white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+
+          }
+          >i:nth-of-type(1){
+            width: rw(166);
+            margin-left: rw(32);
+          }
+          >i:nth-of-type(2){
+            width: rw(174);
+          }
+        }
+        .main_b_l_b_b{
+          >li{
+            height: rh(30);
+            display: flex;
+            justify-content: flex-start;
+            >i{
+              display: inline-block;
+              font-size: rh(14);
+              font-family: Microsoft YaHei;
+              font-weight: 400;
+              color: #FFFFFF;
+              line-height: rh(30);
+              white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+            }
+            >i:nth-of-type(1){
+              width: rw(166);
+              margin-left: rw(32);
+            }
+            >i:nth-of-type(2){
+              width: rw(174);
+            }
+          }
+          >li:nth-of-type(even){
+            background: rgba(72, 108, 194, 0.2);
+          }
+        }
+      }
+    }
+    .main_b_r{
+      width: rw(1338);
+      display: flex;
+      justify-content: space-between;
+      margin-top: rh(40);
+      margin-left: rw(54);
+      overflow: hidden;
+      >li{
+        width: rw(650);
+        height: rh(488);
+        padding: 0 rw(24);
+        box-sizing: border-box;
+        border: 1px solid #486CC2;
+        .main_b_r_li_t{
+          height: rh(52);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          >i{
+            display: inline-block;
+            font-size:rh(16);
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #FFFFFF;
+            line-height: rh(16);
+          }
+          >img{
+            width: rw(24);
+            height: rh(24);
+          }
+        }
+        .main_b_r_li_b{
+          width: rw(600);
+          height: rh(410);
+          >video{
+            width: rw(600);
+            height: rh(410);
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/workInfoDetail.vue

@@ -0,0 +1,222 @@
+<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="title">{{title}}</div>
+            <div class="main_t_b">
+                <p v-html="content"></p>
+                <div class="unit">{{company}}</div>
+                <div class="time">{{createTime.substring(0,10)}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {notifyplan, onlineByBigView} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      title:'',
+      company:'',
+      content:'',
+      createTime:'',
+      codeData:'',
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    getAjaxData: function () {
+      let _this = this;
+
+      //工作通知
+      notifyplan(_this.codeData).then((res) =>{
+        let  percent2percent25 = (URI) => {
+          if(URI.indexOf('%') > -1) {
+            return URI.replace(/%/g,'%25')
+          }else{
+            return URI;
+          }
+        }
+
+        if (res.code == 200) {
+          let data=res.data;
+          let aa=percent2percent25(data.content)
+          _this.title=data.title
+          _this.company=data.company
+          _this.content=unescape(data.content)
+          console.log(typeof ( _this.content))
+          _this.createTime=data.createTime
+
+
+
+        }
+      })
+    },
+
+
+
+  },
+  mounted() {
+    this.codeData=this.$route.query.key
+    console.log(this.codeData)
+    this.getAjaxData();
+  },
+
+
+}
+</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{
+
+    width: rw(1852);
+    height: rh(975);
+    background: #062338;
+    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;
+      }
+    }
+    .title{
+      width: 100%;
+      font-size: rh(18);
+      font-family: Source Han Sans CN;
+      font-weight: bold;
+      color: #FFFFFF;
+      line-height: rh(18);
+      margin-top: rh(44);
+      text-align: center;
+    }
+    .main_t_b{
+      width: rw(1852);
+      height: rh(800);
+      margin-top: rh(40);
+      padding:0 rw(390);
+      box-sizing: border-box;
+      overflow-y: auto;
+      >p{
+        font-size: rh(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height:rh(30);
+        text-indent:2em;
+      }
+      .unit{
+        font-size: rh(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: rh(16);
+        margin-top: rh(38);
+        text-align: right;
+      }
+      .time{
+        font-size: rh(16);
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: rh(16);
+        margin-top: rh(22);
+        text-align: right;
+      }
+    }
+  }
+
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

src/views/workPlanDetail.vue

@@ -0,0 +1,208 @@
+<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-table :data="tableData"  style="width: 100%" height="850" :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="content" label="工作内容"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="company" label="执行单位"></el-table-column>
+                <el-table-column align="center" header-align='center' prop="createDate" 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 {onlineByBigView} from "../api/http"
+
+import $ from 'jquery'
+import * as echarts from 'echarts'
+import Header from '@/components/header.vue'
+export default {
+  components: {
+    Header
+  },
+  data() {
+    return {
+      //查询条件
+      editForm:{
+        pageNum:1,
+        pageSize:10
+      },
+
+      totalNum:0,
+      tableData:[],
+
+    }
+  },
+  methods: {
+    back(){
+      this.$router.push('/')
+    },
+    tableRowClassName({row, rowIndex}) {
+      if (rowIndex%2 === 0) {
+        return 'success-row';
+      } else{
+
+        return 'warning-row';
+      }
+      return '';
+    },
+    indexMethod(index) {
+      return (this.editForm.pageNum - 1) * this.editForm.pageSize + index + 1;
+    },
+    //请求列表
+    getAjaxList:function (){
+
+
+      let _this=this;
+      //列表
+      listIndexJhDetals({}).then((res) =>{
+        if(res.code==200){
+          let data = res.data.list.excelList;
+          if(data && data.length>0){
+            _this.tableData = data;
+            _this.totalNum = parseInt(res.total);
+          }else{
+            _this.tableData = [];
+            _this.totalNum = 0;
+          }
+        }
+      })
+
+    },
+
+    handleCurrentChange(val) {
+      this.param.pageNo = val;
+      // this.getAjaxList();
+    },
+  },
+  mounted() {
+    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{
+
+    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: #062338;
+    padding: 0 rw(32);
+    width: rw(1852);
+    height: rh(850);
+    position: absolute;
+    left: rw(34);
+    top: rh(144);
+    z-index: 200;
+  }
+}
+</style>
+<style lang="scss">
+li{list-style:none}
+i,em,b{font-style:normal;font-weight:100;}
+body{margin: 0}
+</style>

vue.config.js

@@ -0,0 +1,51 @@
+const { defineConfig } = require('@vue/cli-service')
+module.exports = defineConfig({
+  transpileDependencies: true,
+  lintOnSave:false,
+  publicPath: "./", // 公共路径(必须有的)
+  outputDir: "bigData", // 输出文件目录
+  assetsDir: "static", //静态资源文件名称
+  productionSourceMap: false, //去除打包后js的map文件
+  devServer: { //启动项目在8080端口自动打开
+    host:"127.0.0.1",
+    open: true,
+    port: 8888,
+    //proxy: null,
+    proxy: process.env.VUE_APP_ENV === 'production' ? 'https://www.aaa.com/' : 'https://gateway.bbb.com/'
+
+  },
+  //去掉console
+  configureWebpack: (config) => {
+    // 判断为生产模式下，因为开发模式我们是想保存console的
+    if (process.env.NODE_ENV === "production") {
+      config.optimization.minimizer.map((arg) => {
+        const option = arg.options.terserOptions.compress;
+        option.drop_console = true; // 打开开关
+        return arg;
+      });
+    }
+  },
+  configureWebpack: {
+    // 关闭 webpack 的性能提示
+    // performance: {
+    //   hints:false
+    // }
+
+    // //或者
+
+    // 警告 webpack 的性能提示
+    performance: {
+      hints: 'warning',
+      // 入口起点的最大体积
+      maxEntrypointSize: 50000000,
+      // 生成文件的最大体积
+      maxAssetSize: 30000000,
+      // 只给出 js 文件的性能提示
+      assetFilter: function (assetFilename) {
+        return assetFilename.endsWith('.js')
+      }
+    }
+  }
+})
+
+