代码上传

.editorconfig

@@ -0,0 +1,22 @@
+# 告诉EditorConfig插件，这是根文件，不用继续往上查找
+root = true
+
+# 匹配全部文件
+[*]
+# 设置字符集
+charset = utf-8
+# 缩进风格，可选space、tab
+indent_style = space
+# 缩进的空格数
+indent_size = 2
+# 结尾换行符，可选lf、cr、crlf
+end_of_line = lf
+# 在文件结尾插入新行
+insert_final_newline = true
+# 删除一行中的前后空格
+trim_trailing_whitespace = true
+
+# 匹配md结尾的文件
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.env.development

@@ -0,0 +1,11 @@
+# 页面标题
+VUE_APP_TITLE = 智能驱鸟系统
+
+# 开发环境配置
+ENV = 'development'
+
+# 若依管理系统/开发环境
+VUE_APP_BASE_API = 'http://192.168.1.70:8082'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -0,0 +1,8 @@
+# 页面标题
+VUE_APP_TITLE = 智能驱鸟系统
+
+# 生产环境配置
+ENV = 'production'
+
+# 若依管理系统/生产环境
+VUE_APP_BASE_API = 'http://192.168.1.235:8081'

.env.staging

@@ -0,0 +1,10 @@
+# 页面标题
+VUE_APP_TITLE = 若依管理系统
+
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# 若依管理系统/测试环境
+VUE_APP_BASE_API = '/stage-api'

.eslintignore

@@ -0,0 +1,10 @@
+# 忽略build目录下类型为js的文件的语法检查
+build/*.js
+# 忽略src/assets目录下文件的语法检查
+src/assets
+# 忽略public目录下文件的语法检查
+public
+# 忽略当前目录下为js的文件的语法检查
+*.js
+# 忽略当前目录下为vue的文件的语法检查
+*.vue

.eslintrc.js

@@ -0,0 +1,199 @@
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+tests/**/coverage/
+tests/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+
+package-lock.json
+yarn.lock

README.md

@@ -0,0 +1,30 @@
+## 开发
+
+```bash
+# 克隆项目
+git clone https://gitee.com/y_project/RuoYi-Vue
+
+# 进入项目目录
+cd ruoyi-ui
+
+# 安装依赖
+npm install
+
+# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npmmirror.com
+
+# 启动服务
+npm run dev
+```
+
+浏览器访问 http://localhost:80
+
+## 发布
+
+```bash
+# 构建测试环境
+npm run build:stage
+
+# 构建生产环境
+npm run build:prod
+```

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
+    '@vue/cli-plugin-babel/preset'
+  ],
+  'env': {
+    'development': {
+      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
+      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
+      'plugins': ['dynamic-import-node']
+    }
+  }
+}

bin/build.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 打包Web工程，生成dist文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run build:prod
+
+pause

bin/package.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 安装Web工程，生成node_modules文件。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm install --registry=https://registry.npmmirror.com
+
+pause

bin/run-web.bat

@@ -0,0 +1,12 @@
+@echo off
+echo.
+echo [信息] 使用 Vue CLI 命令运行 Web 工程。
+echo.
+
+%~d0
+cd %~dp0
+
+cd ..
+npm run dev
+
+pause

build/index.js

@@ -0,0 +1,35 @@
+const { run } = require('runjs')
+const chalk = require('chalk')
+const config = require('../vue.config.js')
+const rawArgv = process.argv.slice(2)
+const args = rawArgv.join(' ')
+
+if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
+  const report = rawArgv.includes('--report')
+
+  run(`vue-cli-service build ${args}`)
+
+  const port = 9526
+  const publicPath = config.publicPath
+
+  var connect = require('connect')
+  var serveStatic = require('serve-static')
+  const app = connect()
+
+  app.use(
+    publicPath,
+    serveStatic('./dist', {
+      index: ['index.html', '/']
+    })
+  )
+
+  app.listen(port, function () {
+    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
+    if (report) {
+      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
+    }
+
+  })
+} else {
+  run(`vue-cli-service build ${args}`)
+}

package.json

@@ -0,0 +1,90 @@
+{
+  "name": "ruoyi",
+  "version": "3.8.4",
+  "description": "若依管理系统",
+  "author": "若依",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
+  },
+  "dependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
+    "axios": "0.24.0",
+    "clipboard": "2.0.8",
+    "core-js": "3.25.2",
+    "echarts": "4.9.0",
+    "element-ui": "2.15.10",
+    "file-saver": "2.0.5",
+    "fuse.js": "6.4.3",
+    "highlight.js": "9.18.5",
+    "js-beautify": "1.13.0",
+    "js-cookie": "3.0.1",
+    "jsencrypt": "3.0.0-rc.1",
+    "nprogress": "0.2.0",
+    "quill": "1.3.7",
+    "screenfull": "5.0.2",
+    "sortablejs": "1.10.2",
+    "vue": "2.6.12",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.5.5",
+    "vue-meta": "2.4.0",
+    "vue-router": "3.4.9",
+    "vuedraggable": "2.24.3",
+    "vuex": "3.6.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-eslint": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "babel-eslint": "10.1.0",
+    "babel-plugin-dynamic-import-node": "2.3.3",
+    "chalk": "4.1.0",
+    "compression-webpack-plugin": "5.0.2",
+    "connect": "3.6.6",
+    "eslint": "7.15.0",
+    "eslint-plugin-vue": "7.2.0",
+    "lint-staged": "10.5.3",
+    "runjs": "4.4.2",
+    "sass": "1.32.13",
+    "sass-loader": "10.1.1",
+    "script-ext-html-webpack-plugin": "2.1.5",
+    "svg-sprite-loader": "5.1.1",
+    "vue-template-compiler": "2.6.12"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

public/html/webSocket.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <title>websocket</title>
+    <script src="../../../static/js/websocket/jquery-1.4.min.js" th:src="@{/js/websocket/jquery-1.4.min.js}"></script>
+    <script src="../../../static/js/websocket/sockjs.min.js" th:src="@{/js/websocket/sockjs.min.js}"></script>
+    <script src="../../../static/js/websocket/stomp.min.js" th:src="@{/js/websocket/stomp.min.js}"></script>
+</head>
+
+<body>
+<div style="margin: auto;text-align: center">
+    <h1>Welcome to websocket</h1>
+</div>
+<br/>
+<div style="margin: auto;text-align: center">
+    <select id="onLineUser">
+        <option>--所有--</option>
+    </select>
+    <input id="text" type="text" />
+    <button onclick="send()">发送消息</button>
+</div>
+<br>
+<div style="margin-right: 10px;text-align: right">
+    <button onclick="closeWebSocket()">关闭连接</button>
+</div>
+<hr/>
+<div id="message" style="text-align: center;"></div>
+<input  type="text" th:value="${username}" id="username" style="display: none" />
+</body>
+
+
+<script type="text/javascript">
+    var webSocket;
+    var commWebSocket;
+    if ("WebSocket" in window)
+    {
+        webSocket = new WebSocket("ws://localhost:8080/webSocket");
+
+        //连通之后的回调事件
+        webSocket.onopen = function()
+        {
+            //webSocket.send( document.getElementById('username').value+"已经上线了");
+            console.log("已经连通了websocket");
+            setMessageInnerHTML("已经连通了websocket");
+        };
+
+        //接收后台服务端的消息
+        webSocket.onmessage = function (evt)
+        {
+            var received_msg = evt.data;
+            console.log("数据已接收:" +received_msg);
+            var obj = JSON.parse(received_msg);
+            console.log("可以解析成json:"+obj.messageType);
+            //1代表上线 2代表下线 3代表在线名单 4代表普通消息
+            if(obj.messageType==1){
+                //把名称放入到selection当中供选择
+                var onlineName = obj.openId;
+                var option = "<option>"+onlineName+"</option>";
+                $("#onLineUser").append(option);
+                setMessageInnerHTML(onlineName+"上线了");
+            }
+            else if(obj.messageType==2){
+                $("#onLineUser").empty();
+                var onlineName = obj.onlineUsers;
+                var offlineName = obj.username;
+                var option = "<option>"+"--所有--"+"</option>";
+                for(var i=0;i<onlineName.length;i++){
+                    if(!(onlineName[i]==document.getElementById('username').value)){
+                        option+="<option>"+onlineName[i]+"</option>"
+                    }
+                }
+                $("#onLineUser").append(option);
+
+                setMessageInnerHTML(offlineName+"下线了");
+            }
+            else if(obj.messageType==3){
+                var onlineName = obj.onlineUsers;
+                var option = null;
+                for(var i=0;i<onlineName.length;i++){
+                    if(!(onlineName[i]==document.getElementById('username').value)){
+                        option+="<option>"+onlineName[i]+"</option>"
+                    }
+                }
+                $("#onLineUser").append(option);
+                console.log("获取了在线的名单"+onlineName.toString());
+            }
+            else{
+                setMessageInnerHTML(obj.fromOpenId+"对"+obj.toOpenId+"说："+obj.chatType);
+            }
+        };
+
+        //连接关闭的回调事件
+        webSocket.onclose = function()
+        {
+            console.log("连接已关闭...");
+            setMessageInnerHTML("连接已经关闭....");
+        };
+    }
+    else{
+        // 浏览器不支持 WebSocket
+        alert("您的浏览器不支持 WebSocket!");
+    }
+    //将消息显示在网页上
+    function setMessageInnerHTML(innerHTML) {
+        document.getElementById('message').innerHTML += innerHTML + '<br/>';
+    }
+
+    function closeWebSocket() {
+        //直接关闭websocket的连接
+        webSocket.close();
+    }
+
+    function send() {
+        var selectText = $("#onLineUser").find("option:selected").text();
+        if(selectText=="--所有--"){
+            selectText = "All";
+        }
+        else{
+            setMessageInnerHTML(document.getElementById('username').value+"对"+selectText+"说："+ $("#text").val());
+        }
+        var message = {
+            "chatType":document.getElementById('text').value,
+            "fromOpenId":document.getElementById('username').value,
+            "toOpenId":selectText
+        };
+        webSocket.send(JSON.stringify(message));
+        $("#text").val("");
+
+    }
+</script>
+
+</html>

public/index.html

@@ -0,0 +1,208 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= webpackConfig.name %></title>
+    <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
+	  <style>
+    html,
+    body,
+    #app {
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+    .chromeframe {
+      margin: 0.2em 0;
+      background: #ccc;
+      color: #000;
+      padding: 0.2em 0;
+    }
+
+    #loader-wrapper {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999999;
+    }
+
+    #loader {
+      display: block;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      width: 150px;
+      height: 150px;
+      margin: -75px 0 0 -75px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 2s linear infinite;
+      -ms-animation: spin 2s linear infinite;
+      -moz-animation: spin 2s linear infinite;
+      -o-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      z-index: 1001;
+    }
+
+    #loader:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      right: 5px;
+      bottom: 5px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -webkit-animation: spin 3s linear infinite;
+      -moz-animation: spin 3s linear infinite;
+      -o-animation: spin 3s linear infinite;
+      -ms-animation: spin 3s linear infinite;
+      animation: spin 3s linear infinite;
+    }
+
+    #loader:after {
+      content: "";
+      position: absolute;
+      top: 15px;
+      left: 15px;
+      right: 15px;
+      bottom: 15px;
+      border-radius: 50%;
+      border: 3px solid transparent;
+      border-top-color: #FFF;
+      -moz-animation: spin 1.5s linear infinite;
+      -o-animation: spin 1.5s linear infinite;
+      -ms-animation: spin 1.5s linear infinite;
+      -webkit-animation: spin 1.5s linear infinite;
+      animation: spin 1.5s linear infinite;
+    }
+
+
+    @-webkit-keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes spin {
+      0% {
+        -webkit-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      100% {
+        -webkit-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+      }
+    }
+
+
+    #loader-wrapper .loader-section {
+      position: fixed;
+      top: 0;
+      width: 51%;
+      height: 100%;
+      background: #7171C6;
+      z-index: 1000;
+      -webkit-transform: translateX(0);
+      -ms-transform: translateX(0);
+      transform: translateX(0);
+    }
+
+    #loader-wrapper .loader-section.section-left {
+      left: 0;
+    }
+
+    #loader-wrapper .loader-section.section-right {
+      right: 0;
+    }
+
+
+    .loaded #loader-wrapper .loader-section.section-left {
+      -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+      transform: translateX(-100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader-wrapper .loader-section.section-right {
+      -webkit-transform: translateX(100%);
+      -ms-transform: translateX(100%);
+      transform: translateX(100%);
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
+    }
+
+    .loaded #loader {
+      opacity: 0;
+      -webkit-transition: all 0.3s ease-out;
+      transition: all 0.3s ease-out;
+    }
+
+    .loaded #loader-wrapper {
+      visibility: hidden;
+      -webkit-transform: translateY(-100%);
+      -ms-transform: translateY(-100%);
+      transform: translateY(-100%);
+      -webkit-transition: all 0.3s 1s ease-out;
+      transition: all 0.3s 1s ease-out;
+    }
+
+    .no-js #loader-wrapper {
+      display: none;
+    }
+
+    .no-js h1 {
+      color: #222222;
+    }
+
+    #loader-wrapper .load_title {
+      font-family: 'Open Sans';
+      color: #FFF;
+      font-size: 19px;
+      width: 100%;
+      text-align: center;
+      z-index: 9999999999999;
+      position: absolute;
+      top: 60%;
+      opacity: 1;
+      line-height: 30px;
+    }
+
+    #loader-wrapper .load_title span {
+      font-weight: normal;
+      font-style: italic;
+      font-size: 13px;
+      color: #FFF;
+      opacity: 0.5;
+    }
+  </style>
+  </head>
+  <body>
+    <div id="app">
+	    <div id="loader-wrapper">
+		    <div id="loader"></div>
+		    <div class="loader-section section-left"></div>
+		    <div class="loader-section section-right"></div>
+		    <div class="load_title">正在加载系统资源，请耐心等待</div>
+        </div>
+	</div>
+  </body>
+</html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

public/static/css/quniaoShenBo.css

@@ -0,0 +1,703 @@
+
+html{
+    height: 100%;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    background: rgb(9, 9, 24);
+    color: #fff;
+    overflow: hidden;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
+    font-size: 17px;
+    margin-left: 2px;
+    width: 100%;
+    height: 100%;
+}
+
+.biankaung {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1))
+}
+
+.biankuang_top{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    display: flex;
+    justify-content: space-around;
+}
+
+.cameraContent{
+    width: 36%;
+    height: 92%;
+    margin-top: 3%;
+}
+
+.shiyituImage{
+    width: 36%;
+    height: 89%;
+    margin-top: 3%;
+    background-color:#1e2e3d;
+    position: relative;
+}
+
+.shiyituImage>img{
+    width: 100%;
+    height: 94%;
+}
+
+.video_canvas{
+    width: 100%;
+    height: 48%;
+    position: relative;
+}
+.video_canvas1{
+    margin-bottom: 10px;
+}
+
+.video_canvas_icon{
+    position: absolute;
+    top: 6%;
+    left: 1%;
+    width: 4%;
+}
+
+.title_bg{
+    width: 100%;
+}
+
+.video_canvas_text{
+    position: absolute;
+    width: 40%;
+    top: 9%;
+    left: 6%;
+    letter-spacing: 2px;
+    font-size: 1vw;
+}
+.bofangImage{
+    position:absolute;
+}
+.bofangImage1{
+    top: 292px;
+    left: 230px;
+}
+.bofangImage2{
+    top: 292px;
+    left: 70px;
+}
+.bofangImage3{
+    top:538px;
+    left: 70px;
+}
+.bofangImage4{
+    top: 538px;
+    left: 230px;
+}
+.bofangImage5{
+    top: 314px;
+    left: 356px;
+}
+.image{
+    position: absolute;
+}
+
+.image1{
+    left: 12px;
+    top: 280px;
+    transform: rotateZ(150deg);
+    width: 120px;
+    height: 150px;
+}
+.image2{
+    left: 120px;
+    top: 280px;
+    transform: rotateZ(-150deg);
+    width: 120px;
+    height: 150px;
+}
+.image3{
+    left: 10px;
+    top: 440px;
+    transform: rotateZ(30deg);
+    width: 120px;
+    height: 150px;
+}
+.image4{
+    left: 90px;
+    top: 440px;
+    transform: rotateZ(-30deg);
+    width: 120px;
+    height: 150px;
+}
+.image5{
+    left: 345px;
+    top: 310px;
+}
+.imageContet{
+    position: absolute;
+    bottom: -10px;
+    left: 15px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.imageContet img{
+    width: 50px;
+}
+
+.imageContet2{
+    position: absolute;
+    bottom: -20px;
+    left: 190px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+video{
+    width: 100%;
+    height: 90%;
+    position: absolute;
+    top: 9%;
+    left: 0;
+    object-fit: cover;
+}
+
+.pitchColor{
+    border: 1px solid chartreuse;
+}
+
+.remoteControl{
+    height: 92%;
+    position: relative;
+    width: 25%;
+    margin-top: 3%;
+}
+
+.facility_control{
+    width: 100%;
+    height: 97%;
+    background: rgba(31, 46, 61, 1);
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.Controls{
+    height: 30%;
+    width: 54%;
+    position: relative;
+}
+.Controls>img{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.Controls_bg1{
+    top: 6%;
+    width: 88%;
+}
+.Controls_bg2{
+    width: 100%;
+}
+.Controls_bg3{
+    top: 34%;
+    width: 28%;
+}
+.Controls_bg4{
+    top: 40%;
+    width: 15%;
+}
+
+.Controls_icon{
+    z-index: 5;
+    width: 10%;
+}
+
+.Controls_icon:hover{
+    cursor: pointer;
+}
+.Controls_icon1{
+    top: 10%;
+    width: 14% !important;
+}
+.Controls_icon2{
+    left: 26% !important;
+    top: 20%;
+}
+.Controls_icon3{
+    left: 14% !important;
+    top: 40%;
+}
+.Controls_icon4{
+    left: 26% !important;
+    top: 68%;
+}
+.Controls_icon5{
+    top: 82%;
+    width: 14% !important;
+}
+.Controls_icon6{
+    left: 75% !important;
+    top: 68%;
+}
+.Controls_icon7{
+    left: 86% !important;
+    top: 40%;
+}
+.Controls_icon8{
+    top: 21%;
+    left: 75% !important;
+}
+
+.control_btn{
+    width: 100%;
+    height: 5%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.control_btn>span{
+    display: flex;
+    justify-content: center;
+}
+
+.Zoom,.Location{
+    width: 16%;
+    height: 84%;
+}
+
+.square_small{
+    width: 44%;
+    height: 93%;
+    background: rgba(39,83,97,1);
+    border: 1px solid rgb(64, 229, 240);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.square_small>img{
+    width: 56%;
+}
+
+.subtract_left{
+    position: absolute;
+    right: 35%;
+    top: 23%;
+    width: 7%;
+}
+
+.add_right{
+    position: absolute;
+    right: 8%;
+    top: 23%;
+    width: 7%;
+}
+
+.add_right:hover{
+    cursor: pointer;
+}
+
+.presetting_list{
+    height: 54%;
+    width: 82%;
+    display: flex;
+    flex-direction: column;
+    font-size: 1vw;
+}
+
+.camera_speed{
+    top: 23% !important;
+    left: 72% !important;
+    color: #ffffff;
+}
+
+.windshield{
+    width: 7%;
+    height: 78%;
+    align-items: center;
+    background: rgba(39, 83, 97, 1);
+    border: 1px solid rgb(64, 229, 240);
+}
+
+.windshield>img{
+    width: 68%;
+}
+
+.square_small:hover,.windshieldImage:hover,.subtract_left:hover,.add_right:hover{
+    cursor: pointer;
+    opacity: 0.8;
+}
+
+.rotate_speed{
+    width: 30%;
+    height: 78%;
+    background: rgba(39,83,97,1);
+    border: 1px solid rgb(64, 229, 240);
+    font-size: 0.8vw;
+    color: #40E5F0;
+    position: relative;
+}
+.rotate_speed>span{
+    left: 5%;
+    position: absolute;
+    top: 16%;
+}
+
+.list_title{
+    display: flex;
+    justify-content: space-between;
+    color: #40E5F0;
+}
+
+.list_title>span{
+
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+}
+
+.list_title>span:hover{
+    cursor: pointer;
+}
+
+.list_title>span>img{
+    margin-right: 6px;
+    width: 28%;
+}
+
+.list_content{
+    height: 88%;
+    overflow-y: scroll;
+}
+
+.list_content::-webkit-scrollbar,.pathTable2::-webkit-scrollbar,.pathTable3::-webkit-scrollbar{
+    background-color: rgba(0,0,0,0);
+    width: 5px;
+}
+
+.list_content::-webkit-scrollbar-thumb,.pathTable2::-webkit-scrollbar-thumb,.pathTable3::-webkit-scrollbar-thumb{
+    background-color: #40455A;
+    border-radius: 10px;
+}
+
+.list_content>ul{
+    list-style: none;
+    padding: 0 0 0 4%;
+    margin: 0;
+
+}
+.list_content>ul>li{
+    height: 2.2vw;
+    color: #E7F5F6;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.local_name{
+    margin-left: 6%;
+    width: 57%;
+    display: inline-block;
+    white-space: nowrap; /* 禁止文本换行 */  
+    overflow: hidden; /* 隐藏溢出部分 */  
+    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */  
+}
+
+.tourOption{
+    width:43%;
+}
+
+.caozuo{
+    width: 30%;
+}
+
+.caozuo,.tourOption{
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.caozuo>img{
+    width: 24%;
+}
+.tourOption>img{
+    width: 18%;
+}
+
+.caozuo>img:hover,.tourOption>img,.addPreset>img:hover{
+    cursor: pointer;
+}
+
+.pathName{
+    display: flex;
+    width: 100%;
+    height: 11%;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.addPreset{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 90px;
+}
+
+.addPreset>img{
+    width: 27%;
+}
+
+.tableTitle{
+    font-size: 1vw;
+}
+
+.presetName{
+    width: 25%;
+}
+
+.presetSpeed{
+    width: 25%;
+}
+
+.pathSetting{
+    display: none;
+    height: 100%;
+}
+
+.presetTime{
+    width: 25%;
+}
+
+.option{
+    width: 10%;
+}
+
+.pathTable2,.pathTable3{
+    max-height: 60%;
+    overflow-y: scroll;
+}
+
+.pathTable3>table>tbody>tr>td{
+    text-align: center;
+    padding: 10px 0;
+}
+
+.quedin{
+    border: 1px solid rgb(64, 229, 240);
+    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(39,83,97,1),rgba(39,83,97,1));
+    color: #40E5F0;
+}
+
+.quexiao{
+    border: 1px solid #767c97;
+    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(176,189,212,0.2),rgba(176,189,212,0.2));
+    color: #c6d3ec;
+}
+
+.addImage{
+    height: 30px;
+    width: 100%;
+    position: relative;
+}
+
+.addImage>img{
+    position: absolute;
+    right: 0;
+    width: 8%;
+}
+
+.addImage>img:hover{
+    cursor: pointer;
+}
+
+.setDiv{
+    width: 100%;
+    height: 2.4vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.speedInput,.pathIimeInput{
+    width: 70%;
+    height: 76%;
+    border-radius: 3px;
+    background-color: rgba(0,0,0,0);
+    color: #ffffff;
+    border: 1px solid #41476B;
+    padding: 0;
+    outline: none;
+    text-align: center;
+}
+
+.zheGai{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgb(1,1,1,0.5);
+    z-index: 50;
+    display: none;
+}
+
+.oneKeyButton{
+    position: absolute;
+    right: 4%;
+    top: 2%;
+    width: 15%;
+    height: 5%;
+    font-size: 1vw;
+}
+
+.oneKeyButton>span{
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.openDevice{
+    border: 1px solid #43e7f2;
+    color: #43e7f2;
+    background: linear-gradient(45deg, rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4)),
+    linear-gradient(135deg,rgb(67,231,242,0.4),rgb(67,231,242,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(67,231,242,0.2),rgb(67,231,242,0.4));
+}
+
+.closeDevice{
+    display: none;
+    border: 1px solid #767c97;
+    color: #c6d3ec;
+    background: linear-gradient(45deg, rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4)),
+    linear-gradient(135deg,rgb(118,124,151,0.4),rgb(118,124,151,0.2),rgb(0,0,0,0),rgb(0,0,0,0),rgb(0,0,0,0),rgb(118,124,151,0.2),rgb(118,124,151,0.4));
+}
+
+.oneKeyButton:hover{
+    cursor: pointer;
+}
+
+.patrolTask{
+    width: 40%;
+    height: 40%;
+    background-color: #222F3D;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 18%;
+    border: 1px solid #40486A;
+    display: none;
+}
+
+.taskOption{
+    height: 65%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    margin-bottom: 4%;
+}
+
+.taskOption>div{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 60%;
+    height: 25%;
+}
+
+.taskListTitle{
+    width: 96%;
+    height: 8%;
+    border-bottom: 1px solid #40486A;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 2%;
+    font-size: 1.2vw;
+}
+
+.patroTitle{
+    width: 20%;
+    font-size: 1vw;
+}
+
+.taskInput{
+    width: 70%;
+    border: 1px solid #41476B;
+    height: 60%;
+    font-size: 1vw;
+}
+
+.presetButton,.presetButton1{
+    height: 12%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.presetButton>span,.presetButton1>span{
+    width: 10%;
+    height: 80%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1vw;
+}
+
+.presetButton>span,.presetButton1>span:hover{
+    cursor: pointer;
+}
+
+.presetButton1{
+    margin-top: 6%;
+}
+
+.presetButton1>span{
+    width: 20% !important;
+    height: 72% !important;
+}
+
+.select_page1>option,.select_page>option{
+    background-color:rgba(31, 46, 61, 1) ;
+    color: #fff;
+    font-size: 1vw;
+}
+
+.select_page1,.select_page{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0);
+    color: #ffffff;
+    border-radius: 3px;
+    outline: none;
+    font-size: 1vw;
+    text-align: center;
+    border: 1px solid #41476B ;
+}
+
+.select_page1{
+    border: none;
+}
+
+.select_page{
+    width: 75% !important;
+    height: 81% !important;
+}
+
+.quxiaoImage{
+    width: 2%;
+}
+
+.pathTitle{
+    font-size: 1vw !important;
+}

public/static/css/quniaoXiTong.css

@@ -0,0 +1,778 @@
+
+html{
+    height: 100%;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    background-color: rgb(9, 9, 24);
+    color: #fff;
+    overflow: hidden;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
+    font-size: 17px;
+    margin-left: 2px;
+    width: 100%;
+    height: 100%;
+}
+
+
+/* @font-face {
+    font-family: 'CustomFont';
+    src: url('./img/AlimamaDongFangDaKai-Regular.ttf') format('truetype');
+    其他字体属性（例如 font-weight，font-style）可以在此添加 
+} */
+
+.biankaung {
+    width: 100%;
+    height: 100%;
+    /* border: 1px solid #006685; */
+    background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1));
+    position: relative;
+}
+/* 
+.shipin9-1 span {
+    position: absolute;
+    left: 3%;
+    top: 3px;
+    z-index: 99;
+} */
+
+.cardContent{
+    width: 100%;
+    height: 95%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.cardContent>div{
+    height: 100%;
+}
+
+.leftContent{
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+}
+
+.leftContent>div{
+    display: flex;
+    align-items: center;
+    margin-left: 24px;
+}
+
+.rightContent{
+    width: 54%;
+    display: flex;
+    flex-direction: column;
+}
+
+.rightContent>div{
+    display: flex;
+    align-items: center;
+    padding: 0 2% 0 0;
+    /* margin-left: 6px; */
+}
+
+.smallTitle{
+    color: #40E5F0;
+    font-size: 1.2vw;
+    height: 8%;
+}
+
+.smallTitle>span{
+    margin-left: 2%;
+    width: 12%;
+}
+
+.xianBig{
+    width: 76%;
+    margin-right: 5px;
+}
+
+.arrowImage{
+    width: 5%;
+}
+
+.left_yuan{
+    width: 3%;
+}
+
+.smallBig{
+    width: 360px;
+    margin-right: 5px;
+}
+
+.table1{
+    height: 100%;
+}
+
+.detailContent{
+    height: 42%;
+    justify-content: space-between;
+}
+
+.detailContent>div{
+    height: 100%;
+}
+
+.deviceList{
+    width: 100%;
+    margin-left: 15px;
+}
+
+.deviceIcon{
+    width: 32%;
+    display: flex;
+    flex-direction: column;
+}
+
+.deviceIcon>div{
+    height: 95%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.table_div_top {
+    width: 98%;
+    height: 100%;
+}
+
+.sheng_bo_img{
+    width: 18px;
+}
+
+table{
+    width: 100%;
+    border-collapse: collapse;
+    color: #B0BDD4;
+}
+th{
+    font-size: 1.2vw;
+}
+
+
+.firstTr>td{
+    border-top: none;
+}
+
+.tbody{
+    height: 78%;
+    font-size: 1vw;
+}
+
+.color {
+    background-color: #1F2F3E;
+}
+
+.color1 {
+    background-color: #172533;
+}
+
+.tracksList{
+
+}
+
+.deviceDb{
+    width: 20%;
+}
+
+.operation{
+    width: 30%;
+    position: relative;
+}
+
+.deviceName{
+    width: 20%;
+}
+
+.Number{
+    width: 10%;
+}
+
+.operationButton{
+    display: flex;
+    justify-content: space-around;
+}
+
+.music_tanchuang {
+    position: absolute;
+    top: 6%;
+    left: 25%;
+    width: 44%;
+    height: 64%;
+    padding: 24px;
+    background-color: #222F3D;
+    display: none;
+    z-index: 100;
+    border-radius: 10px;
+    font-size: 1vw;
+}
+
+.btn1 {
+    width: 10%;
+    height: 6.7%;
+    color: #fff;
+    background-color: rgb(57, 129, 141);
+    border-radius: 5px;
+    position: absolute;
+    right: 4%;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.point {
+    cursor: pointer;
+    width: 14%;
+}
+
+.ZhuanTai{
+    display: flex;
+}
+
+.ZhuanTai>div{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    font-size: 20px;
+}
+
+.cameraImage{
+    height: 65px;
+    margin-right: 30px;
+}
+
+.Camerabei{
+    height: 28px;
+    width: 240px;
+}
+
+.deviceText{
+    position: relative;
+}
+
+.TextTitle{
+    position: absolute;
+    top: 1px;
+    left: 20px;
+}
+
+.imgTitle{
+    position: absolute;
+    display: flex;
+    align-items: center;
+    bottom: 4px;
+    left: 16px;
+    color: #35EB68;
+}
+
+.icons{
+    margin-right: 12px;
+    width: 20px;
+}
+
+.stateContent{
+    justify-content: space-around;
+    flex-direction: column;
+    height: 42%;
+    
+}
+
+.stateContent>div{
+    height: 18%;
+    width: 97%;
+    margin-left: 10px;
+    /* background-color: #35EB68; */
+    display: flex;
+    align-items: center;
+}
+.deviceSelect>div{
+    display: flex;
+    font-size: 1vw;
+}
+
+.deviceRecursive>div{
+    display: flex;
+    font-size: 1vw;
+}
+
+.deviceLoop>div{
+    display: flex;
+    font-size:1vw;
+    flex-wrap: wrap;
+}
+.device{
+    margin-left: 1%;
+    width: 76%;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+}
+
+.device>div{
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 24%;
+    justify-content: space-around;
+}
+
+.stateTitle{
+    font-size: 1.2vw !important;
+    font-weight: bold;
+    width: 15%;
+}
+
+.stateTitleSmall{
+    width: 36% !important;
+}
+
+input[type="checkbox"]{
+    display: none;
+}
+
+input[type="checkbox"]+label{
+    background-color: #ffffff;
+    border: 0.2vw solid #ffffff;
+}
+
+input[type="checkbox"]:checked+label{
+    background-color: #40e5f0;
+}
+
+.checkbox{
+    width: 0.7vw;
+    height: 0.7vw;
+}
+
+.checkbox1{
+    width: 0.7vw;
+    height: 0.7vw;
+}
+
+.recursive{
+    margin-left: 2%;
+}
+
+.recursive>div{
+    margin-right: 20%;
+    display: flex;
+    align-items: center;
+}
+
+input[type="radio"]{
+    display: none;
+}
+
+input[type="radio"]+label{
+    width: 0.8vw;
+    height: 0.8vw;
+    background-color: #ffffff;
+    margin-right:10px;
+    border-radius: 50%;
+}
+
+input[type='radio']:checked+label{
+    background-color: #40e5f0 !important;
+    border: 0.2vw solid #ffffff;
+    width: 0.6vw !important;
+    height: 0.6vw !important;
+}
+
+.loop{
+    margin-left: 2%;
+    width: 82%;
+    height: 100%;
+    align-items: center;
+}
+
+.loop>div{
+    display: flex;
+    align-items: center;
+    margin-right: 2%;
+    width: 12%;
+    height: 40%;
+    justify-content: space-around;
+}
+
+.timeSelect>div{
+    display: flex;
+    align-items: center;
+    width: 45%;
+    height: 100%;
+}
+
+input[type="time"]{
+    width: 90%;
+    height: 100%;
+    border: none;
+    outline: none;
+    background-color: rgba(1,1,1,0);
+    color: #ffffff;
+    font-size: 1vw;
+    padding-left: 10%;
+    position: relative;
+}
+
+input[type="time"]::-webkit-calendar-picker-indicator{
+    background-image: url('./img/DataTime1.png');
+    position: absolute;
+    right: 0;
+    padding-left: calc(100% - 40px);
+    padding-right: 5px;
+}
+
+input[type="time"]::-webkit-datetime-edit-text{
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+input[type="date"]{
+    width: 94%;
+    height: 100%;
+    background-color: rgb(1,1,1,0);
+    outline-style: none;
+    border: none;
+    padding-left: 6%;
+    font-size: 1vw;
+    position: relative;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator{
+    background-image: url('./img/DataTime.png');
+    position: absolute;
+    right: 0;
+    padding-left: calc(100% - 40px);
+    padding-right: 5px;
+}
+
+input[type="date"]::-webkit-datetime-edit-fields-wrapper{
+    color: #ffffff;
+}
+
+input[type="date"]::-webkit-datetime-edit-text{
+    margin-left: 6px;
+    margin-right: 6px;
+}
+
+
+
+.timeInput{
+    margin-left: 2%;
+    border: 1px solid #41476B;
+    width: 57.6%;
+    height: 49%;
+    font-size: 1vw;
+}
+
+.dayInput{
+    border: 1px solid #41476B;
+    width: 31.6% !important;
+    height: 48% !important;
+}
+
+.stateButton>img{
+    width: 14%;
+    margin: 0 0 0 10%;
+}
+
+.stateButton>img:hover{
+    cursor: pointer;
+}
+
+.stateButton>div{
+    display: flex;
+    width: 45%;
+    height: 100%;
+    align-items: center;
+}
+
+.yiChan{
+    margin-right: 12px;
+    width: 22px;
+}
+
+.volume{
+    position: absolute;
+    transform: rotateZ(-90deg);
+    top: -26%;
+    height: 15%;
+    width: 36%;
+    left: 52%;
+    display:none;
+}
+
+.disabled{
+    border-color: #969696 !important;
+    background-color: #969696 !important;
+}
+
+.zheGai{
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgb(1,1,1,0.5);
+    z-index: 50;
+    display: none;
+}
+
+.taskList{
+    width: 100%;
+    height: 100%;
+    
+}
+
+.taskListContent{
+    height: 98%;
+    width: 98%;
+    background-color: #222F3D;
+    margin-top: 4%;
+}
+
+.layoutLine{
+    width: 100%;
+    height: 1px;
+    background-color: #D9D9D9;
+    margin-top: 15px;
+}
+
+.tableContent{
+    width: 98%;
+    height: 90%;
+    margin-top: 15px;
+    padding: 1%;
+}
+
+.smallTh{
+    width: 15%;
+}
+
+.bigTh{
+    width: 16%;
+}
+
+#list{
+    height: 95%;
+}
+
+.th1{
+    height: 100%;
+    border: 1px solid #41476B;
+    text-align: center;
+}
+
+.td1{
+    height: 20%;
+    border: 1px solid #41476B;
+    text-align: center;
+}
+
+.table2{
+    height: 100%;
+}
+
+.th2{
+    height: 100%;
+    border: 1px solid #41476B;
+    text-align: center;
+}
+
+.td2{
+    height: 2.8vw;
+    border: 1px solid #41476B;
+    font-size: 1vw;
+    text-align: center;
+}
+
+.firstTr1>td{
+    border-top: none;
+}
+
+.tableScroll{
+    height: 92%;
+    overflow-y: scroll;
+}
+
+.tableScroll::-webkit-scrollbar{
+    background-color: rgb(1,1,1,0);
+    width: 4px;
+}
+
+.tableScroll::-webkit-scrollbar-thumb{
+    background-color: #40455A;
+    border-radius: 5px;
+}
+
+.operaButton{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.operaButton>span{
+    width: 26%;
+    height: 60%;
+    border-radius: 4px;
+    background-color: #247382;
+    font-size: 0.9vw;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.operaButton>span:hover{
+    cursor: pointer;
+}
+
+.Active:active{
+    opacity: 0.5;
+}
+
+.quxiaoImage:hover{
+    cursor: pointer;
+}
+
+.taskNameInput{
+    margin-left: 2%;
+    border: 1px solid #41476B;
+    width: 57.5%;
+    height: 49%;
+}
+
+.taskNameInput>input{
+    background-color: rgba(1,1,1,0);
+    border: none;
+    outline: none;
+    width: 180px;
+    height: 32px;
+    font-size: 18px;
+    color: #ffffff;
+    padding-left: 10px;
+}
+
+.taskListButton{
+    position: relative;
+    width: 150px;
+    height: 40px;
+    margin-left: 115px;
+}
+
+.taskListButton:hover{
+    cursor:pointer
+}
+
+.taskListButton>img{
+    position: absolute;
+}
+
+.vectorIcon{
+    top: 15px;
+    left: 15px;
+}
+
+.Alert{
+    height: 14%;
+    background-color: #222F3D;
+    display: none;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 1%;
+    color: #B0BDD4;
+    border-radius: 15px;
+    z-index: 10000;
+}
+
+.Alert>div{
+    display: flex;
+    font-size: 1vw;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+}
+
+.alertImg{
+    width: 2.5vw;
+    margin-left: 1.8vw;
+}
+
+.Alert>div>span{
+    padding: 0 1.8vw 0 .8vw;
+}
+
+.pitch{
+    color: #35EB68;
+}
+
+.list_content2{
+    display: none;
+}
+
+.opacity{
+    opacity: 1 !important;
+}
+
+.operation_button>span:hover{
+    cursor: pointer;
+}
+
+.speedInput,.pathIimeInput{
+    width: 70%;
+    height: 76%;
+    border-radius: 3px;
+    background-color: rgba(0,0,0,0);
+    color: #ffffff;
+    border: 1px solid #41476B;
+    padding: 0;
+    outline: none;
+    text-align: center;
+}
+
+.inputDiv>span{
+    width: 30%;
+}
+
+.quedin{
+    border: 1px solid rgb(64, 229, 240);
+    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(39,83,97,1),rgba(39,83,97,1));
+    color: #40E5F0;
+}
+
+.quexiao{
+    border: 1px solid #767c97;
+    background: radial-gradient(rgba(39,83,97,0),rgba(39,83,97,0),rgba(176,189,212,0.2),rgba(176,189,212,0.2));
+    color: #c6d3ec;
+}
+
+.patrolTask1{
+    background-color: rgb(1,1,1,0.5) !important;
+    width: 40%;
+    height: 40%;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 18%;
+    border: 1px solid #40486A;
+    display: none;
+}
+
+.tourTaskContent{
+    display: none;
+}
+
+.option>img:hover{
+    cursor: pointer;
+}
+
+.thead{
+    height: 17%;
+}

public/static/css/quniaosss.css

@@ -0,0 +1,510 @@
+
+html{
+    height: 100%;
+}
+
+body {
+    padding: 0;
+    margin: 0 !important;
+    color: #fff;
+    overflow: hidden;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
+    font-size: 16px;
+    margin-left: 2px;
+    width: 100%;
+    height: 100%;
+}
+
+.biankuang1_left {
+    padding: 1.4%;
+    width: 47%;
+}
+.biankuang1_right{
+    padding: 1.4%;
+    width: 47%;
+}
+
+.biankaung {
+    width: 100%;
+    height: 100%;
+    /* border: 1px solid #006685; */
+    background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1));
+    position: relative;
+}
+.biankaung1{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.top_title {
+    color: #40E5F0;
+    font-size: 1.2vw;
+}
+.top_left{
+    position: relative;
+    width: 100%;
+    height: 4%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.titleYuan{
+    width: 3%;
+}
+
+.xianBig{
+    width: 72%;
+}
+
+.arrowImage{
+    width: 4%;
+}
+
+input {
+    background-color: rgba(64,72,106,0);
+    outline: none;
+    border: none;
+    color: #ffffff;
+    font-size: 1vw;
+    width: 41%;
+}
+input[type="datetime-local"]::-webkit-calendar-picker-indicator{
+    background-image: none;
+    position: absolute;
+    right: 0;
+    padding-left: calc(100% - 40px);
+    padding-right: 10px; 
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator{
+    background-image: none;
+    position: absolute;
+    right: 0;
+    padding-left: calc(100% - 100px);
+}
+
+input[type="date"]::-webkit-datetime-edit-fields-wrapper{
+    padding-left: 10px;
+    color: #ffffff;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+}
+
+.inputDate{
+    width: 100px;
+}
+.table_div_top{
+    width: 100%;
+    height: 4%;
+    margin-top: 4%;
+    position: relative;
+    
+}
+.table_div_top1{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.selectDate{
+    display: flex;
+    width: 82%;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1vw;
+    height: 100%;
+}
+.DateInput{
+    height: 100%;
+    align-items: center;
+    display: flex;
+    justify-content: space-around;
+    border: 1px solid rgba(64,72,106,1);
+    background-color: rgba(32,47,62,1);
+    margin-left: 1%;
+    width: 70%;
+}
+
+.TimeImage{
+    width: 3%;
+}
+
+.TiShiShuJu{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 10%;
+}
+
+.TiShiShuJu>div{
+    display: flex;
+    width: 75%;
+    height: 100%;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.TiShiShuJu>div>span{
+    font-size: 0.9vw;
+}
+
+.TiShiShuJu>div>span>img{
+    width: 19%;
+}
+
+#main{
+    width: 100%;
+    height: 76%;
+    font-size: 1vw;
+}
+
+.time_screening{
+    width: 48%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-right: 1px solid rgba(50,61,70,1);
+    height: 62%;
+}
+.time_screening>div{
+    display: flex;
+    align-items: center;
+}
+.data_screening{
+    width: 52%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    height: 100%;
+}
+
+.data_filter{
+    width: 56%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    margin-top: 2%;
+}
+.data_screening>div,.data_filter>div{
+    display: flex;
+    align-items: center;
+}
+.data_kuan{
+    width: 70%;
+    height: 100%;
+    border: 1px solid rgba(64,72,106,1);
+    justify-content: space-around;
+}
+.radio_text{
+    margin-left: 4px;
+    font-size: 0.9vw;
+}
+input[type='radio']{
+    width: 1vw;
+    height: 1vw;
+}
+.data_input{
+    padding: 0;
+    height: 30px;
+    width: 110px;
+}
+.invade_list{
+    font-size: 1vw;
+    font-weight: 100;
+    margin-top: 6%;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+.table1{
+    border-collapse: collapse;
+    width: 90%;
+}
+.table1 th{
+    width: 21%;
+    border: 1px solid rgba(64,72,106,1);
+    height: 2.2vw;
+    background-color: rgba(16,29,41,1);
+}
+.table1 td{
+    border: 1px solid rgba(64,72,106,1);
+    height: 2.1vw;
+    text-align: center;
+    font-size: 0.8vw;
+}
+
+
+.table2{
+    border-collapse: collapse;
+    margin-left: 4%;
+    margin-top: 2%;
+    width: 96%;
+}
+.table2 th{
+    width: 12%;
+    border: 1px solid rgba(64,72,106,1);
+    height: 30px;
+    background-color: rgba(16,29,41,1);
+}
+.table2 td{
+    border: 1px solid rgba(64,72,106,1);
+    height: 30px;
+    text-align: center;
+    font-size: 0.8vw;
+    letter-spacing: 0 !important;
+}
+
+
+.color1{
+    background: rgba(23,37,51,1);
+}
+.color2{
+    background: rgba(32,47,62,1);
+}
+
+.pageStore{
+    width: 100%;
+    height: 10%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.paging_device{
+    height: 61%;
+    width: 75%;
+    display: flex;
+    align-items: center;
+    font-size: 0.8vw;
+}
+
+.page_select{
+    margin-left: 4%;
+    width: 18%;
+    height: 48%;
+    background: rgba(32,47,62,1);
+    border-radius: 3px;
+}
+.pages_select{
+    position: relative;
+    width: 54%;
+    margin-left: 5.6%;
+    height: 50%;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.pages_select>img{
+    width: 0.7vw;
+    height: 0.8vw;
+}
+
+.pages_select>img:hover{
+    cursor: pointer;
+}
+.select_img{
+    width: 12px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
+
+.to_left{
+
+}
+
+.to_right{
+    /* position: absolute; */
+    /* left: 2.7vw; */
+}
+
+.ul_list{
+    list-style: none;
+    padding:0;
+    margin: 0;
+    display: flex;
+}
+.ul_list>li{
+    width: 1vw;
+    text-align: center;
+    margin: 0 0.5vw;
+}
+
+.ul_list>li:hover{
+    cursor: pointer;
+}
+.pages_number{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    max-width: 88%;
+    overflow: hidden;
+}
+.pages_skip{
+    margin-left: 4%;
+    display: flex;
+    align-items: center;
+    height: 48%;
+}
+.pages_skip_number{
+    display: inline-block;
+    width: 22%;
+    height: 92%;
+    border: 1px solid rgba(217,217,217,1);
+    background: rgba(32,47,62,1);
+    border-radius: 3px;
+    padding: 0;
+    text-align: center;
+    font-size: 0.8vw;
+}
+.overspread{
+    width: 60%;
+    height: 100%;
+    background-color: rgba(1,1,1,0);
+    position: absolute;
+    left: 27%;
+}
+
+.select_page{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0);
+    color: #ffffff;
+    border: 1px solid rgba(217,217,217,1);
+    border-radius: 3px;
+    outline: none;
+    font-size: 0.8vw;
+    padding-left: 4%;
+}
+.select_page>option{
+    background-color:rgba(11,19,24,1) ;
+    color: #fff;
+    font-size: 0.8vw;
+}
+.operation_button>span:hover{
+    cursor: pointer;
+}
+
+.pageColor{
+    color:#40E5F0
+}
+
+.preview_popup{
+    width: 45.2%;
+    height: 81%;
+    border: 1px solid #006685;
+    position: absolute;
+    top: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1));
+    display: none;
+}
+
+.preview_popup1{
+    height: 98%;
+    letter-spacing: 3px;
+}
+
+.report_title{
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    font-size: 1.5vw;
+    color: #ffffff;
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.report_img{
+    width: 95%;
+    margin-left: 4%;
+    margin-top: 2%;
+}
+
+.report_video{
+    margin-left: 4%;
+    width: 95%;
+    height: 48%;
+}
+
+.report_content{
+    width: 100%;
+    margin-top: 2%;
+    line-height: 30px;
+}
+
+.close_preview{
+    position: fixed;
+    right: 1%;
+    top: 1%;
+    width: 3%;
+}
+.close_preview:hover{
+    cursor: pointer;
+}
+
+.content{
+    overflow-y: scroll;
+    height: 92%;
+    width: 97%;
+    font-size: 1vw;
+}
+.content::-webkit-scrollbar{
+    /* display: none; */
+    width: 5px;
+    background-color: rgba(0,0,0,0);
+    border-radius:5px ;
+}
+
+.content::-webkit-scrollbar-thumb{
+    /* display: none; */
+    /* width: 1px; */
+    background-color: #40E5F0;
+    border-radius:5px ;
+}
+
+#video{
+    width: 100%;
+    height: 50%;
+}
+.zhonDian{
+    font-weight:bold;
+    border-bottom:1px solid white;
+}
+.report_time{
+    margin:2%;
+    display: inline-block;
+}
+.second_title{
+    font-size: 1.2vw;
+    font-weight: bold;
+}
+.bird_table{
+    width: 100%;
+    display: inline-block;
+    text-align: center;
+}
+
+.bird_invade{
+    margin-left: 4%;
+    margin-top: 2%;
+    display: inline-block;
+}
+.third_title{
+    font-size: 1.1vw;
+    font-weight: bold;
+}