cac首页

.env.development

@@ -0,0 +1,8 @@
+# 开发环境配置
+ENV = 'development'
+
+# 管理系统/开发环境
+VUE_APP_BASE_API = '/api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -0,0 +1,5 @@
+# 生产环境配置
+ENV = 'production'
+
+# 管理系统/生产环境
+VUE_APP_BASE_API = '/prod-api'

.env.staging

@@ -0,0 +1,7 @@
+NODE_ENV = production
+
+# 测试环境配置
+ENV = 'staging'
+
+# 管理系统/测试环境
+VUE_APP_BASE_API = '/stage-api'

.eslintrc.js

@@ -0,0 +1,29 @@
+module.exports = {
+    env: {
+        browser: true,
+        node: true,
+        // es6: true,
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:vue/essential"
+    ],
+    parserOptions: {
+        parser: 'babel-eslint',
+        sourceType: 'module'
+    },
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly",
+        "process": true
+    },
+    "plugins": [
+        "vue"
+    ],
+    "parser": "vue-eslint-parser",
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        "no-unused-vars": 'off'
+      }
+};

.gitignore

@@ -1,11 +1,23 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+.DS_Store
+node_modules
+/dist
 
-# TODO: where does this rule come from?
-docs/_book
 
-# TODO: where does this rule come from?
-test/
+# 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

@@ -1,3 +1,24 @@
-# oldcac
+# my-project
 
-cac首页
+## 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 copy.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "presets": [
+    "@vue/app"
+  ],
+  "plugins": [
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      },
+      "syntax-dynamic-import"
+    ]
+  ]
+}

babel.config.js

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

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,76 @@
+{
+  "name": "my-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@smallwei/avue": "^2.8.23",
+    "autoprefixer": "^8.0.0",
+    "axios": "^0.23.0",
+    "chromedriver": "^94.0.0",
+    "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
+    "element-ui": "^2.15.6",
+    "js-cookie": "^3.0.1",
+    "jsencrypt": "^3.3.2",
+    "node-sass": "^4.14.1",
+    "postcss-px-to-viewport": "^1.1.1",
+    "script-ext-html-webpack-plugin": "^2.1.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.2",
+    "vuex": "^3.6.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^4.5.14",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^7.19.1",
+    "sass-loader": "^7.3.1",
+    "svg-sprite-loader": "^6.0.9",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "plugins": [
+      "example"
+    ],
+    "env": {
+      "example/custom": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "generator-star-spacing": "off",
+      "no-tabs": "off",
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "no-irregular-whitespace": "off",
+      "no-debugger": "off"
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {},
+      "postcss-px-to-viewport": {
+        "viewportWidth": 1920,
+        "minPixelValue": 1
+      }
+    }
+  }
+}

public/index.html

@@ -0,0 +1,28 @@
+<!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>欣影电力-抽水蓄能电站状态监测系统</title>
+    <style>
+      html,body{
+        height: 100%;
+      }
+      @media screen and (max-width: 1440px) {
+        html,body{
+          height: auto;
+        min-height: 100%;
+      }
+}
+    </style>
+  </head>
+  <body style="margin: 0;overflow-x: hidden;">
+    <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,63 @@
+<template>
+  <div id="app" :style="'background-image:url(' + Background + ');'">
+    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
+    <router-view />
+  </div>
+</template>
+
+<script>
+// import login from './login.vue'
+import Background from "@/assets/page_bj/bg_CAC.png";
+export default {
+  name: "App",
+  // components: {
+  //   login
+  // }
+  data() {
+    return {
+      Background: Background,
+    };
+  },
+  destroyed() {
+    window.removeEventListener("popstate", this.goBack, false);
+  },
+  mounted() {
+    // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件
+    window.addEventListener(
+      "hashchange",
+      () => {
+        let currentPath = window.location.hash.slice(1);
+        if (this.$route.path !== currentPath) {
+          this.$router.push(currentPath);
+        }
+      },
+      false
+    );
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL);
+      window.addEventListener("popstate", this.goBack, false);
+    }
+  },
+  methods: {
+    goBack() {
+      this.$router.push({ path: "/" });
+      //replace替换原路由，作用是避免回退死循环
+    },
+  },
+};
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height: 100%;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  /* margin-top: 60px; */
+}
+</style>

src/api/home.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request';
+export function queryCustomerInfos(query) {
+  // 列表
+  return request({
+    url: '/web/xihari/customerInfo/queryCustomerInfos',
+    method: 'get',
+    params: query
+  })
+}

src/api/home/home.js

@@ -0,0 +1,214 @@
+import request from '@/utils/request';
+import { UPMS_SREVICE } from '@/api/module/urls'
+/**
+ * 获取lxId 
+ */
+ export function getLxId(jgid,mtid) {
+    return request({
+        url: '/EquipController/queryLx/' + jgid + '/' + mtid,
+        method: 'get'
+    })
+}
+/**
+ * 获取EqmId 
+ */
+ export function getEqmId(jgid,lxid,mtid) {
+    return request({
+        url: '/EquipController/queryEqmId/' + jgid + '/' + lxid + '/' + mtid,
+        method: 'get'
+    })
+}
+/**
+ * 油色谱 
+ */
+// 表格数据
+export function oilChromaControllerTable(eqmid) {
+    return request({
+        url: '/oilChromaController/queryTableData/' + eqmid,
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function oilChromaControllerLine(eqmid) {
+    return request({
+        url: '/oilChromaController/queryLineData/' + eqmid,
+        method: 'get'
+    })
+}
+
+/**
+ * 铁芯/夹件 
+ */
+// 表格数据
+export function ironCoreJoinClampControllerTable({ ...idGather }) {
+    return request({
+        url: '/ironCoreJoinClampController/queryTableData/' + idGather.ironCoreId + '/' + idGather.clampId,
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function ironCoreJoinClampControllerLine({ ...idGather }) {
+    return request({
+        url: '/ironCoreJoinClampController/queryLineData/' + idGather.ironCoreId + '/' + idGather.clampId,
+        method: 'get'
+    })
+}
+
+/**
+* 电缆环流 
+*/
+// 表格数据
+export function cableCircleControllerTable(arr) {
+    return request({
+        url: '/cableCircleController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5],
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function cableCircleControllerLine(arr) {
+    return request({
+        url: '/cableCircleController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2]+'/'+ arr[3]+'/'+ arr[4]+'/'+ arr[5],
+        method: 'get'
+    })
+}
+
+/**
+* 红外 
+*/
+// 表格数据
+export function InfraredThermographyControllerTable(arr) {
+    return request({
+        url: '/InfraredThermographyController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function InfraredThermographyControllerLine(arr) {
+    return request({
+        url: '/InfraredThermographyController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
+        method: 'get'
+    })
+}
+
+/**
+* 局放
+*/
+// 表格数据
+export function CablePartialDischargeControllerTable(arr) {
+    return request({
+        url: '/cablePartialDischargeController/queryTableData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function CablePartialDischargeControllerLine(arr) {
+    return request({
+        url: '/cablePartialDischargeController/queryLineData/' + arr[0]+'/'+ arr[1]+'/'+ arr[2],
+        method: 'get'
+    })
+}
+
+/**
+* 监测装置 
+*/
+
+/**
+* GIS 
+*/
+// 表格数据
+export function SF6ControllerTable(eqmid) {
+    return request({
+        url: '/SF6Controller/queryTableData/' + eqmid,
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function SF6ControllerLine(eqmid) {
+    return request({
+        url: '/SF6Controller/queryLineData/' + eqmid,
+        method: 'get'
+    })
+}
+
+/**
+* 避雷器 
+*/
+// 表格数据
+export function BlackBlqControllerTable(eqmid) {
+    return request({
+        url: '/BlqController/queryTableData/' + eqmid,
+        method: 'get'
+    })
+}
+// 趋势图数据
+export function BlackBlqControllerLine(eqmid) {
+    return request({
+        url: '/BlqController/queryLineData/' + eqmid,
+        method: 'get'
+    })
+}
+
+/**
+ * 设备信息
+ */
+// 设备总数
+export function getEquNum() {
+    return request({
+        url: '/EquipController/queryEquipNum',
+        method: 'get'
+    })
+}
+
+/**
+ * 告警详情
+ */
+// 变电设备类型
+export function getJgType() {
+    return request({
+        url: '/EquipController/queryJg',
+        method: 'get'
+    })
+}
+
+// 设备小类
+export function getLxType(jgid) {
+    return request({
+        url: '/EquipController/getLxType/' + jgid,
+        method: 'get'
+    })
+}
+
+// 监测设备类型
+export function getEqType(jgid,lxid) {
+    return request({
+        url: '/EquipController/getEqType/' + jgid +'/'+ lxid,
+        method: 'get'
+    })
+}
+
+// 告警列表
+export function queryAlarm(params) {
+    return request({
+      url: '/cableCirculationController/page',
+      method: 'post',
+      data: params
+    })
+  } 
+
+// 告警详情列表
+export function queryAlarmDetail(params) {
+    return request({
+      url: '/cableCirculationController/secondPage',
+      method: 'post',
+      data: params
+    })
+  } 
+  
+// 告警处理
+export function dealwarning(params) {
+    return request({
+      url: '/cableCirculationController/deal',
+      method: 'post',
+      data: params
+    })
+  } 

src/api/login.js

@@ -0,0 +1,55 @@
+import request from '@/utils/request'
+import {
+  UPMS_SREVICE,
+  AUTH_SREVICE,
+  SJZD_SREVICE
+} from '@/api/module/urls'
+
+const client_id = 'web'
+const client_secret = '123456'
+const scope = 'server'
+
+// 登录方法
+export function login(username, password, clienttype) {
+  return request({
+    url: '/login',
+    method: 'post',
+    params: {
+      username,
+      password,
+      clienttype
+    }
+  })
+}
+
+// 刷新方法
+export function refreshToken() {
+  return request({
+    url: AUTH_SREVICE + '/auth/refresh',
+    method: 'post'
+  })
+}
+
+// 获取用户详细信息
+export function getInfo() {
+  return request({
+    url: UPMS_SREVICE + '/system/getInfo',
+    method: 'get'
+  })
+}
+
+// 退出方法
+export function logout() {
+  return request({
+    url: '/logout',
+    method: 'delete'
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return request({
+    url: '/code',
+    method: 'get'
+  })
+}

src/api/module/urls.js

@@ -0,0 +1,8 @@
+const UPMS_SREVICE='/api-upms';
+const AUTH_SREVICE='/prod-api';
+const LOGS_SREVICE='/api-logs';
+const GEN_CODE_SREVICE='/api-gen';
+const SJZD_SREVICE='http://127.0.0.1:8081';
+
+
+export { UPMS_SREVICE, AUTH_SREVICE, LOGS_SREVICE, GEN_CODE_SREVICE,SJZD_SREVICE}

src/assets/icons/index.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/SvgIcon' // svg组件
+
+// 注册到全局
+Vue.component('svg-icon', SvgIcon)
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)

src/assets/icons/svg/close.svg

@@ -0,0 +1 @@
+<svg t="1634285040593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23714" width="120" height="120"><path d="M370.752 608L129.6 849.152a32 32 0 0 0 45.248 45.248L416 653.248V768a32 32 0 0 0 64 0v-192a31.904 31.904 0 0 0-32-32H256a32 32 0 0 0 0 64h114.752z m182.624-137.376A31.904 31.904 0 0 1 544 448V256a32 32 0 0 1 64 0v114.752l241.152-241.152a32 32 0 1 1 45.248 45.248L653.248 416H768a32 32 0 0 1 0 64h-192a31.904 31.904 0 0 1-22.624-9.376z" p-id="23715"></path></svg>

src/assets/icons/svg/open.svg

@@ -0,0 +1 @@
+<svg t="1634285025582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23573" width="120" height="120"><path d="M818.752 160l-241.152 241.152a32 32 0 0 0 45.248 45.248L864 205.248V320a32 32 0 0 0 64 0V128a31.904 31.904 0 0 0-32-32h-192a32 32 0 0 0 0 64h114.752zM105.376 918.624A31.904 31.904 0 0 1 96 896v-192a32 32 0 0 1 64 0v114.752l241.152-241.152a32 32 0 0 1 45.248 45.248L205.248 864H320a32 32 0 0 1 0 64H128a31.904 31.904 0 0 1-22.624-9.376z" p-id="23574"></path></svg>

src/assets/icons/svg/password.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1575802846045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2750" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M868.593046 403.832442c-30.081109-28.844955-70.037123-44.753273-112.624057-44.753273L265.949606 359.079168c-42.554188 0-82.510202 15.908318-112.469538 44.690852-30.236652 28.782533-46.857191 67.222007-46.857191 108.198258l0 294.079782c0 40.977273 16.619516 79.414701 46.702672 108.136859 29.959336 28.844955 70.069869 44.814672 112.624057 44.814672l490.019383 0c42.585911 0 82.696444-15.969717 112.624057-44.814672 30.082132-28.844955 46.579875-67.222007 46.579875-108.136859L915.172921 511.968278C915.171897 471.053426 898.675178 432.677397 868.593046 403.832442zM841.821309 806.049083c0 22.098297-8.882298 42.772152-25.099654 58.306964-16.154935 15.661701-37.81935 24.203238-60.752666 24.203238L265.949606 888.559285c-22.934339 0-44.567032-8.54256-60.877509-24.264637-16.186657-15.474436-25.067932-36.148291-25.067932-58.246589L180.004165 511.968278c0-22.035876 8.881274-42.772152 25.192775-58.307987 16.186657-15.536858 37.81935-24.139793 60.753689-24.139793l490.019383 0c22.933315 0 44.597731 8.602935 60.752666 24.139793 16.21838 15.535835 25.099654 36.272112 25.099654 58.307987L841.822332 806.049083zM510.974136 135.440715c114.914216 0 208.318536 89.75214 208.318536 200.055338l73.350588 0c0-149.113109-126.366036-270.496667-281.669124-270.496667-155.333788 0-281.699824 121.383558-281.699824 270.496667l73.350588 0C302.623877 225.193879 396.059919 135.440715 510.974136 135.440715zM474.299865 747.244792l73.350588 0L547.650453 629.576859l-73.350588 0L474.299865 747.244792z" p-id="2751"></path></svg>

src/assets/icons/svg/user.svg

@@ -0,0 +1 @@
+<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>

src/assets/icons/svgo.yml

@@ -0,0 +1,22 @@
+# replace default config
+
+# multipass: true
+# full: true
+
+plugins:
+
+  # - name
+  #
+  # or:
+  # - name: false
+  # - name: true
+  #
+  # or:
+  # - name:
+  #     param1: 1
+  #     param2: 2
+
+- removeAttrs:
+    attrs:
+      - 'fill'
+      - 'fill-rule'

src/assets/stylesheet/card.scss

@@ -0,0 +1,193 @@
+.iconSvg {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  border: 1px solid #03bcff;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 2px;
+  .closeSvg {
+    transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+  }
+  .svg {
+    color: #03bcff;
+    font-weight: bolder;
+    font-size: 20px;
+  }
+}
+.pageCardTitle {
+  width: 100%;
+  height: 50px;
+  padding: 0px 60px 0px 20px;
+  box-sizing: border-box;
+  color: #03bcff;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+  align-items: center;
+  background: #08092419;
+  box-shadow: inset 0px 4px 44px 0px #106cdeff;
+  background-image: url('../../../assets/shrink.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+}
+.pageCard .cardTitle {
+  height: 50px;
+  line-height: 50px;
+  padding: 0px 60px 0px 20px;
+  box-sizing: border-box;
+  color: #03bcff;
+  text-align: left;
+  display: flex;
+  // font-size: 16px;
+  justify-content: space-between;
+  align-items: center;
+  .unfoldCloseIcon {
+    font-size: 18px;
+    color: #03bcff;
+    font-weight: bolder;
+    cursor: pointer;
+  }
+}
+.pageCard .cardContent {
+  padding: 10px 60px 9px 20px;
+  box-sizing: border-box;
+  .project {
+    height: 40px;
+    margin-bottom: 11px;
+    font-size: 12px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-flow: column;
+    span {
+      height: 20px;
+      line-height: 20px;
+    }
+    .projectVal {
+      color: #03bcff;
+      margin: 0;
+    }
+    .projectLable {
+      color: #9eeeff;
+      margin: 0;
+    }
+  }
+  .cardDate {
+    height: 25px;
+    line-height: 25px;
+    padding: 0 8px;
+    box-sizing: border-box;
+    border-left: 1px solid #03bcff;
+    border-bottom: 1px solid #03bcff;
+    border-right: 1px solid #03bcff;
+    color: #fff;
+    font-size: 12px;
+    text-align: left;
+  }
+  /* 修改标签页切换默认样式 */
+  /deep/ .cardTab .el-tabs__nav {
+    width: 100%;
+  }
+  /deep/ .cardTab .el-tabs__active-bar,
+  /deep/ .cardTab .el-tabs__item {
+    width: 20%;
+  }
+  /deep/ .cardTab .el-tabs__item {
+    padding: 0 !important;
+    color: #03bcff;
+    height: 30px;
+    line-height: 30px;
+  }
+  /deep/ .cardTab .el-tabs__item.is-active {
+    background: #ff8a00ff;
+    color: #fff;
+  }
+  /deep/ .cardTab .el-tabs__nav-wrap {
+    border: 1px solid #03bcff;
+    margin-top: 10px;
+  }
+  /deep/ .cardTab .el-tabs__nav-wrap::after,
+  /deep/ .cardTab .el-tabs__active-bar {
+    display: none;
+  }
+}
+.tendencyChartText {
+  writing-mode: vertical-lr;
+  position: absolute;
+  right: 8px;
+  top: 15px;
+  color: #fff;
+  font-family: Source Han Sans SC;
+  font-weight: regular;
+  font-size: 14px;
+  line-height: 14px;
+  letter-spacing: 0px;
+  text-align: left;
+  cursor: pointer;
+}
+.backgroundTitle {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  margin-bottom: 10px;
+}
+.tabDropdown {
+  height: 45px;
+  line-height: 45px;
+  ul {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    li {
+      width: 140px;
+      height: 34px;
+      line-height: 34px;
+      margin-right: 30px;
+      list-style: none;
+    }
+  }
+}
+.el-dropdown-menu {
+  background: #106cde;
+}
+.el-dropdown-menu__item {
+  color: #fff;
+}
+.el-dropdown {
+  color: #03bcff !important;
+  font-size: 16px;
+  // margin-left: 5px;
+  cursor: pointer;
+}
+// 设置滚动条的宽度
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 2px;
+  height: 10px;
+}
+// 设置滚动条的背景色和圆角
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: #03bcff;
+  border-radius: 8px;
+}
+// 表格不换行显示省略号
+/deep/ .el-table .el-table__body-wrapper .cell {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+/deep/ .el-table__empty-text {
+  color: #ffffff;
+}
+/deep/ .el-loading-mask {
+  background-color: rgba(16, 108, 222, 0.3);
+}
+@media screen and (max-width: 1440px) {
+  .cardTitle {
+    font-size: 12px;
+  }
+}

src/components/Echarts/index.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="chart">
+    <div id="tendencyChart"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Echarts",
+  props: {
+    echartData: {
+      type: Object,
+      default: () => ({
+        legendData: [],
+        xAxisData: [],
+        yAxisData: [],
+        seriesData: [],
+      }),
+    },
+  },
+  data() {
+    return {
+      xFontColor: "rgba(256,256,256,1)",
+    };
+  },
+  created() {},
+  watch: {
+    echartData: {
+      //深度监听，可监听到对象、数组的变化
+      handler(val, oldVal) {
+        this.echart();
+      },
+      deep: true, //true 深度监听
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.echart();
+    });
+  },
+  methods: {
+    // 绘制图标
+    echart() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(
+        document.getElementById("tendencyChart")
+      );
+      myChart.clear();
+      // 绘制图表
+      myChart.setOption({
+        color: [
+          "#ee6666",
+          "#91cc75",
+          "#fac858",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+          "#03bcff",
+        ],
+        tooltip: {
+          trigger: "axis",
+          formatter: function (params) {
+            var relVal = params[0].name;
+            for (var i = 0; i < params.length; i++) {
+              // if (params[i].seriesName.indexOf("(") != -1) {
+              //   relVal +=
+              //     "<br/>" +
+              //     params[i].seriesName +
+              //     " : " +
+              //     params[i].value +
+              //     params[i].seriesName.match(/\(([^)]*)\)/)[0];
+              // } else {
+              //   relVal +=
+              //     "<br/>" + params[i].seriesName + " : " + params[i].value;
+              // }
+              relVal +=
+                  "<br/>" + params[i].seriesName + " : " + params[i].value;
+            }
+            return relVal;
+          },
+        },
+        legend: {
+          icon: "circle",
+          data: this.echartData.legendData,
+          textStyle: {
+            color: this.xFontColor,
+          },
+          lineStyle: {
+            width: 2.5,
+          },
+        },
+        grid: {
+          left: "10%",
+          right: "10%",
+          bottom: "15%",
+          containLabel: true,
+        },
+        dataZoom: [
+          {
+            id: "dataZoomX",
+            type: "slider",
+            xAxisIndex: [0],
+            filterMode: "filter",
+            start: 0,
+            end: 50,
+            startValue: 0,
+            endValue: 10,
+            textStyle: {
+              color: this.xFontColor,
+            },
+          },
+        ],
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.echartData.xAxisData,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: this.xFontColor, //这里用参数代替了
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.xFontColor,
+            },
+            show: false,
+          },
+        },
+        series: this.echartData.seriesData,
+      });
+      window.onresize = function () {
+        myChart.resize();
+      };
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.chart {
+  width: 100%;
+}
+#tendencyChart{
+  height: 320px;
+}
+@media screen and (max-width: 1440px) {
+ #tendencyChart{
+  height: 230px;
+}
+}
+</style>

src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
+import { isExternal } from '@/utils/validate'
+
+export default {
+  name: 'SvgIcon',
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    isExternal() {
+      return isExternal(this.iconClass)
+    },
+    iconName() {
+      return `#icon-${this.iconClass}`
+    },
+    svgClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className
+      } else {
+        return 'svg-icon'
+      }
+    },
+    styleExternalIcon() {
+      return {
+        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
+        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+
+.svg-external-icon {
+  background-color: currentColor;
+  mask-size: cover!important;
+  display: inline-block;
+}
+</style>

src/components/Tablemodule/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <el-table
+      :data="data"
+      border
+      style="width: 100%"
+      :max-height="maxHeight"
+      :resizable="false"
+      v-loading="tableLoading"
+    >
+      <el-table-column
+        v-for="(item, key) in option"
+        :width="item.width"
+        align="center"
+        :key="key"
+        :label="item.label"
+      >
+        <template slot-scope="scope">
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="scope.row[item.prop]"
+            placement="top"
+          >
+            <span> {{ scope.row[item.prop] }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tablemodule",
+  props: ["option", "data", "maxHeight",'tableLoading'],
+  data() {
+    return {};
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped  rel="stylesheet/scss" lang="scss">
+/deep/.el-table,
+/deep/.el-table thead,
+/deep/.el-table tr,
+/deep/.el-table td.el-table__cell,
+/deep/.el-table th.el-table__cell.is-leaf {
+  color: #03bcff !important;
+  background: transparent !important;
+  border-color: #03bcff !important;
+}
+/deep/.el-table::before,
+/deep/.el-table--border::after,
+/deep/.el-table--group::after {
+  background-color: #03bcff;
+}
+/deep/.el-table td.el-table__cell,
+/deep/.el-table .el-table__cell {
+  padding: 4px 0;
+}
+/deep/.el-table .cell,
+.el-table--border .el-table__cell:first-child .cell {
+  font-size: 12px;
+}
+</style>

src/config/index.js

@@ -0,0 +1,6 @@
+module.exports = {
+    title: '电缆环流',
+    logoTitle:'洪屛抽水蓄能电站' || config.logoTitle,
+    isSinglePlatform:true
+}
+  

src/main.js

@@ -0,0 +1,34 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from 'axios'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import myChart from "echarts";
+import Avue from '@smallwei/avue';
+import store from './store'
+import {GetUrlParam} from '@/utils/index.js'
+import Cookies from 'js-cookie'
+import './permission'
+import './assets/icons'
+import '@/utils/request.js';
+// import '@smallwei/avue/lib/index.css';
+// import './assets/icons/index'
+
+GetUrlParam('token') && Cookies.set('Admin-Token', GetUrlParam('token'));
+GetUrlParam('token') &&  store.commit('SET_TOKEN', GetUrlParam('token'))
+
+Vue.prototype.$ajax = axios
+Vue.use(Avue);
+Vue.prototype.$echarts = myChart;
+Vue.config.productionTip = false
+Vue.use(ElementUI)
+Vue.use(myChart)
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount("#app")

src/permission.js

@@ -0,0 +1,32 @@
+import router from "./router";
+import store from "./store";
+import { Message } from "element-ui";
+import NProgress from "nprogress";
+import "nprogress/nprogress.css";
+import { getToken } from "@/utils/auth";
+
+NProgress.configure({ showSpinner: false });
+
+const whiteList = ["/login", "/auth-redirect", "/bind", "/register"];
+
+router.beforeEach((to, from, next) => {
+  NProgress.start();
+  if (getToken()) {
+    next();
+    NProgress.done();
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 在免登录白名单，直接进入
+      next();
+    } else {
+      // next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
+      next("login"); // 否则全部重定向到登录页
+      NProgress.done();
+    }
+  }
+  next();
+});
+
+router.afterEach(() => {
+  NProgress.done();
+});

src/router/index.js

@@ -0,0 +1,25 @@
+import Vue from "vue";
+import Router from "vue-router";
+
+Vue.use(Router);
+
+// 公共路由
+export const constantRoutes = [
+  {
+    path: "/login",
+    name: "login",
+    component: () => import("@/view/login"),
+    hidden: true,
+  },
+  {
+    path: "/",
+    component: () => import("@/view/home/home"),
+    hidden: true,
+  },
+];
+
+export default new Router({
+  // mode: 'history', // 去掉url中的#
+  // scrollBehavior: () => ({ y: 0 }),
+  routes: constantRoutes,
+});

src/store/getters.js

@@ -0,0 +1,7 @@
+const getters = {
+    token: state => state.user.token,
+    roles: state => state.user.roles,
+    permissions: state => state.user.permissions,
+  }
+  export default getters
+  

src/store/index.js

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import user from './modules/user'
+import getters from './getters'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+const store = new Vuex.Store({
+    modules: {
+        user
+    },
+    getters
+})
+export default store

src/store/modules/user.js

@@ -0,0 +1,89 @@
+import { login, logout,loginSjzd } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+
+const user = {
+  state: {
+    token: getToken(),
+    name: '',
+    avatar: '',
+    roles: [],
+    permissions: []
+  },
+
+  mutations: {
+    SET_TOKEN: (state, token) => {
+      state.token = token
+    },
+    SET_NAME: (state, name) => {
+      state.name = name
+    },
+    SET_AVATAR: (state, avatar) => {
+      state.avatar = avatar
+    },
+    SET_ROLES: (state, roles) => {
+      state.roles = roles
+    },
+    SET_PERMISSIONS: (state, permissions) => {
+      state.permissions = permissions
+    }
+  },
+
+  actions: {
+    // 登录
+    Login({ commit }, userInfo) {
+      const username = userInfo.username.trim()
+      const password = userInfo.password
+      const code = userInfo.code
+      const uuid = userInfo.uuid
+      return new Promise((resolve, reject) => {
+        login(username, password, code, uuid).then(res => {
+          setToken(res.token)
+          commit('SET_TOKEN', res.token)
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    
+    // 退出系统
+    LogOut({ commit, state }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('SET_TOKEN', '')
+          commit('SET_ROLES', [])
+          commit('SET_PERMISSIONS', [])
+          removeToken()
+          resolve()
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+
+    // 前端 登出
+    FedLogOut({ commit }) {
+      return new Promise(resolve => {
+        commit('SET_TOKEN', '')
+        removeToken()
+        resolve()
+      })
+    },
+
+    //登录声级振动
+    async loginSjzd({ state, commit, dispatch }) {
+      const userName = sessionStorage.getItem('userName');
+      const password = '123456';
+      loginSjzd({ userName, password }).then((res) => {
+        if (res && res.code === 200) {
+          //声级震动前端页面访问地址
+          window.open('http://127.0.0.1:9528/login?token=' + res.token, '_blank')
+          return
+        }
+      })
+    }
+
+  }
+}
+
+export default user

src/utils/auth.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/utils/common.js

@@ -0,0 +1,12 @@
+/**
+ * echart 数据为null处理
+ */
+export function echartData(data) {
+    var newData = data.map((ele, index) => {
+        if (ele === null) {
+            return '- -';
+        }
+        return Number(ele);
+    });
+    return newData;
+}

src/utils/errorCode.js

@@ -0,0 +1,6 @@
+export default {
+  '401': '认证失败，无法访问系统资源',
+  '403': '当前操作没有权限',
+  '404': '访问资源不存在',
+  'default': '系统未知错误,请反馈给管理员'
+}

src/utils/index.js

@@ -0,0 +1,339 @@
+/**
+ * 表格时间格式化
+ */
+ export function formatDate(cellValue) {
+  if (cellValue == null || cellValue == "") return "";
+  var date = new Date(cellValue) 
+  var year = date.getFullYear()
+  var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+  var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() 
+  var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() 
+  var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() 
+  var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+}
+
+/**
+ * @param {number} time
+ * @param {string} option
+ * @returns {string}
+ */
+// export function formatTime(time, option) {
+//   if (('' + time).length === 10) {
+//     time = parseInt(time) * 1000
+//   } else {
+//     time = +time
+//   }
+//   const d = new Date(time)
+//   const now = Date.now()
+
+//   const diff = (now - d) / 1000
+
+//   if (diff < 30) {
+//     return '刚刚'
+//   } else if (diff < 3600) {
+//     // less 1 hour
+//     return Math.ceil(diff / 60) + '分钟前'
+//   } else if (diff < 3600 * 24) {
+//     return Math.ceil(diff / 3600) + '小时前'
+//   } else if (diff < 3600 * 24 * 2) {
+//     return '1天前'
+//   }
+//   if (option) {
+//     return parseTime(time, option)
+//   } else {
+//     return (
+//       d.getMonth() +
+//       1 +
+//       '月' +
+//       d.getDate() +
+//       '日' +
+//       d.getHours() +
+//       '时' +
+//       d.getMinutes() +
+//       '分'
+//     )
+//   }
+// }
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function getQueryObject(url) {
+  url = url == null ? window.location.href : url
+  const search = url.substring(url.lastIndexOf('?') + 1)
+  const obj = {}
+  const reg = /([^?&=]+)=([^?&=]*)/g
+  search.replace(reg, (rs, $1, $2) => {
+    const name = decodeURIComponent($1)
+    let val = decodeURIComponent($2)
+    val = String(val)
+    obj[name] = val
+    return rs
+  })
+  return obj
+}
+
+/**
+ * @param {string} input value
+ * @returns {number} output value
+ */
+export function byteLength(str) {
+  // returns the byte length of an utf8 string
+  let s = str.length
+  for (var i = str.length - 1; i >= 0; i--) {
+    const code = str.charCodeAt(i)
+    if (code > 0x7f && code <= 0x7ff) s++
+    else if (code > 0x7ff && code <= 0xffff) s += 2
+    if (code >= 0xDC00 && code <= 0xDFFF) i--
+  }
+  return s
+}
+
+/**
+ * @param {Array} actual
+ * @returns {Array}
+ */
+export function cleanArray(actual) {
+  const newArray = []
+  for (let i = 0; i < actual.length; i++) {
+    if (actual[i]) {
+      newArray.push(actual[i])
+    }
+  }
+  return newArray
+}
+
+/**
+ * @param {Object} json
+ * @returns {Array}
+ */
+export function param(json) {
+  if (!json) return ''
+  return cleanArray(
+    Object.keys(json).map(key => {
+      if (json[key] === undefined) return ''
+      return encodeURIComponent(key) + '=' + encodeURIComponent(json[key])
+    })
+  ).join('&')
+}
+
+/**
+ * @param {string} url
+ * @returns {Object}
+ */
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}
+
+/**
+ * @param {string} val
+ * @returns {string}
+ */
+export function html2Text(val) {
+  const div = document.createElement('div')
+  div.innerHTML = val
+  return div.textContent || div.innerText
+}
+
+/**
+ * Merges two objects, giving the last one precedence
+ * @param {Object} target
+ * @param {(Object|Array)} source
+ * @returns {Object}
+ */
+export function objectMerge(target, source) {
+  if (typeof target !== 'object') {
+    target = {}
+  }
+  if (Array.isArray(source)) {
+    return source.slice()
+  }
+  Object.keys(source).forEach(property => {
+    const sourceProperty = source[property]
+    if (typeof sourceProperty === 'object') {
+      target[property] = objectMerge(target[property], sourceProperty)
+    } else {
+      target[property] = sourceProperty
+    }
+  })
+  return target
+}
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} className
+ */
+export function toggleClass(element, className) {
+  if (!element || !className) {
+    return
+  }
+  let classString = element.className
+  const nameIndex = classString.indexOf(className)
+  if (nameIndex === -1) {
+    classString += '' + className
+  } else {
+    classString =
+      classString.substr(0, nameIndex) +
+      classString.substr(nameIndex + className.length)
+  }
+  element.className = classString
+}
+
+/**
+ * @param {string} type
+ * @returns {Date}
+ */
+export function getTime(type) {
+  if (type === 'start') {
+    return new Date().getTime() - 3600 * 1000 * 24 * 90
+  } else {
+    return new Date(new Date().toDateString())
+  }
+}
+
+/**
+ * @param {Function} func
+ * @param {number} wait
+ * @param {boolean} immediate
+ * @return {*}
+ */
+export function debounce(func, wait, immediate) {
+  let timeout, args, context, timestamp, result
+
+  const later = function() {
+    // 据上一次触发时间间隔
+    const last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function(...args) {
+    context = this
+    timestamp = +new Date()
+    const callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+/**
+ * This is just a simple version of deep copy
+ * Has a lot of edge cases bug
+ * If you want to use a perfect deep copy, use lodash's _.cloneDeep
+ * @param {Object} source
+ * @returns {Object}
+ */
+export function deepClone(source) {
+  if (!source && typeof source !== 'object') {
+    throw new Error('error arguments', 'deepClone')
+  }
+  const targetObj = source.constructor === Array ? [] : {}
+  Object.keys(source).forEach(keys => {
+    if (source[keys] && typeof source[keys] === 'object') {
+      targetObj[keys] = deepClone(source[keys])
+    } else {
+      targetObj[keys] = source[keys]
+    }
+  })
+  return targetObj
+}
+
+/**
+ * @param {Array} arr
+ * @returns {Array}
+ */
+export function uniqueArr(arr) {
+  return Array.from(new Set(arr))
+}
+
+/**
+ * @returns {string}
+ */
+export function createUniqueString() {
+  const timestamp = +new Date() + ''
+  const randomNum = parseInt((1 + Math.random()) * 65536) + ''
+  return (+(randomNum + timestamp)).toString(32)
+}
+
+/**
+ * Check if an element has a class
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ * @returns {boolean}
+ */
+export function hasClass(ele, cls) {
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+
+/**
+ * Add class to element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function addClass(ele, cls) {
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+}
+
+/**
+ * Remove class from element
+ * @param {HTMLElement} elm
+ * @param {string} cls
+ */
+export function removeClass(ele, cls) {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    ele.className = ele.className.replace(reg, ' ')
+  }
+}
+
+export function GetUrlParam(paraName) {
+  var url = document.location.toString();
+  var arrObj = url.split("?");
+
+  if (arrObj.length > 1) {
+    var arrPara = arrObj[1].split("&");
+    var arr;
+
+    for (var i = 0; i < arrPara.length; i++) {
+      arr = arrPara[i].split("=");
+
+      if (arr != null && arr[0] == paraName) {
+        return arr[1];
+      }
+    }
+    return "";
+  }
+  else {
+    return "";
+  }
+}

src/utils/jsencrypt.js

@@ -0,0 +1,30 @@
+import JSEncrypt from 'jsencrypt/bin/jsencrypt'
+
+// 密钥对生成 http://web.chacuo.net/netrsakeypair
+
+const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
+  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='
+
+const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
+  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
+  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
+  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
+  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
+  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
+  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
+  'UP8iWi1Qw0Y='
+
+// 加密
+export function encrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPublicKey(publicKey) // 设置公钥
+  return encryptor.encrypt(txt) // 对数据进行加密
+}
+
+// 解密
+export function decrypt(txt) {
+  const encryptor = new JSEncrypt()
+  encryptor.setPrivateKey(privateKey) // 设置私钥
+  return encryptor.decrypt(txt) // 对数据进行解密
+}
+

src/utils/request.js

@@ -0,0 +1,82 @@
+import axios from 'axios'
+import { Notification, MessageBox, Message } from 'element-ui'
+import store from '@/store'
+import { getToken } from '@/utils/auth'
+import errorCode from '@/utils/errorCode'
+
+axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
+// 创建axios实例
+const service = axios.create({
+  // axios中请求配置有baseURL选项，表示请求URL公共部分
+  baseURL: process.env.VUE_APP_BASE_API,
+  // 超时
+  timeout: 30000
+})
+// request拦截器
+service.interceptors.request.use(
+  config => {
+    if (getToken()) {
+      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
+    return config
+  },
+  error => {
+    Promise.reject(error)
+  }
+)
+// 响应拦截器
+service.interceptors.response.use(res => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || 200;
+    // 获取错误信息
+    const msg = errorCode[code] || res.data.msg || errorCode['default']
+    if (code === 401) {
+      MessageBox.confirm(
+        '登录状态已过期，您可以继续留在该页面，或者重新登录',
+        '系统提示',
+        {
+          confirmButtonText: '重新登录',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        store.dispatch('LogOut').then(() => {
+          location.reload() // 为了重新实例化vue-router对象 避免bug
+        })
+      })
+    } else if (code === 500) {
+      Message({
+        message: msg,
+        type: 'error'
+      })
+      return Promise.reject(new Error(msg))
+    } else if (code !== 200) {
+      Notification.error({
+        title: msg
+      })
+      return Promise.reject('error')
+    } else {
+      return res.data
+    }
+  },
+  error => {
+    let { message } = error;
+    if (message == "Network Error") {
+      message = "后端接口连接异常";
+    }
+    else if (message.includes("timeout")) {
+      message = "系统接口请求超时";
+    }
+    else if (message.includes("Request failed with status code")) {
+      message = "系统接口" + message.substr(message.length - 3) + "异常";
+    }
+    Message({
+      message: message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/utils/validate.js

@@ -0,0 +1,7 @@
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}

src/view/home/arrester/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{
+        dropdownData.length !== 0
+          ? "避雷器 - " + dropdownData[command].name
+          : "避雷器"
+      }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle"
+      :style="'background-image:url(' + arrester + ');'"
+      v-show="cardShow"
+    >
+      <div class="tendencyChartText" @click="tendencyChartChange('5')">
+        趋势图
+      </div>
+      <div class="cardTitle">
+        <div>
+          <span>避雷器 - </span>
+          <!-- 下拉框有数据 -->
+          <el-dropdown
+            v-if="dropdownData.length !== 0"
+            @command="dropdownClick"
+          >
+            <span class="el-dropdown-link">
+              {{ dropdownData[0].name
+              }}<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item, index) of dropdownData"
+                :key="index"
+                :command="index"
+                >{{ item.name }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- 无下拉数据 -->
+          <el-dropdown v-else class="cursor" trigger="click">
+            <span class="el-dropdown-link">
+              避雷器<i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>暂无数据 </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <Tablemodule
+          :table-loading="loading"
+          :option="tableData.column"
+          :data="tableData.data"
+        ></Tablemodule>
+        <div class="cardDate">采样时间 {{ samplingDate }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  getEqmId,
+  getLxId,
+  BlackBlqControllerTable,
+  BlackBlqControllerLine,
+} from "@/api/home/home";
+// 左边
+import { echartData } from "@/utils/common";
+import arrester from "@/assets/page_right/arrester.png";
+// 引入table组件
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      loading: false,
+      // 左边
+      arrester: arrester,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      oilChromatographyTitle: "",
+      dropdownData: [],
+      command: 0,
+      tableData: {
+        column: [
+          {
+            label: "相位",
+            prop: "phase",
+            width: "50px",
+          },
+          {
+            label: "全电流(mA)",
+            prop: "totalCurrent",
+          },
+          {
+            label: "阻性电流(mA)",
+            prop: "resistiveCurrent",
+          },
+          {
+            label: "系统电压(V)",
+            prop: "systemVoltage",
+          },
+        ],
+        data: [],
+      },
+      samplingDate: "2021-10-11 15:15:30",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      selectIdList: [],
+    };
+  },
+  created() {
+    // 表格数据
+    this.init();
+    // // 趋势图数据
+    // this.tendencyChartData()
+  },
+  methods: {
+    init() {
+      getLxId(3, 4)
+        .then((response) => {
+          const { code, data, msg } = response;
+          if (code === 200 && data.length !== 0) {
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              this.dropdownData.push({
+                name: element.lmc.replace("避雷器", ""),
+                id: element.lxid,
+              });
+            }
+            getEqmId(3, data[0].lxid, 4).then((response) => {
+              const { code, data, msg } = response;
+              if (code === 200 && data.length !== 0) {
+                for (let index = 0; index < data.length; index++) {
+                  const element = data[index];
+                  this.selectIdList.push(element.id);
+                }
+                this.tableDataFun(data[0].id);
+                this.echartDataFun(data[0].id, "1");
+              }
+            });
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    tableDataFun(data) {
+      this.loading = true;
+      BlackBlqControllerTable(data).then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200 && data.length !== 0) {
+          const dataList = data[0];
+          this.samplingDate = dataList.dtime;
+          this.tableData.data = [
+            {
+              phase: "A相",
+              totalCurrent: dataList.lcA,
+              resistiveCurrent: dataList.rcA,
+              systemVoltage: dataList.ptA,
+            },
+            {
+              phase: "B相",
+              totalCurrent: dataList.lcB,
+              resistiveCurrent: dataList.rcB,
+              systemVoltage: dataList.ptB,
+            },
+            {
+              phase: "C相",
+              totalCurrent: dataList.lcC,
+              resistiveCurrent: dataList.rcC,
+              systemVoltage: dataList.ptC,
+            },
+          ];
+        }
+        this.loading = false;
+      });
+    },
+    echartDataFun(data, type) {
+      BlackBlqControllerLine(data).then((response) => {
+        const { code, data, msg } = response;
+        const arr = [];
+        if (code === 200 && data.length !== 0) {
+          for (let index = 0; index < data.length; index++) {
+            const element = data[index];
+            this.legendData.push(element.equipment);
+            arr.push({
+              name: element.equipment,
+              data: echartData(element.currentVals),
+            });
+          }
+          this.seriesData = arr;
+          this.xAxisData = data[0].dtimes;
+          if (type === '2') {
+            this.tendencyChartChange();
+          }
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    // 点击开关
+    changeStatus: function ($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    dropdownClick(command) {
+      this.tableDataFun(this.selectIdList[command]);
+      this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载
+    },
+    tendencyChartChange(type) {
+      this.$emit(
+        "dataDispose",
+        this.legendData,
+        this.xAxisData,
+        this.seriesData,
+        this.dropdownData.length !== 0
+          ? "避雷器 -" + this.dropdownData[0].name
+          : "避雷器 "
+      );
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+
+// 开光样式
+.pageCard {
+  // min-height: 295px;
+  .cardTitle span {
+    // padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
+.pageCard .cardTitle {
+  /* width: 100%; */
+  padding: 0px 60px 0px 20px;
+  box-sizing: border-box;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .unfoldCloseIcon {
+    font-size: 18px;
+    font-weight: bolder;
+    cursor: pointer;
+  }
+}
+.backgroundTitle {
+  margin-bottom: 0 !important;
+}
+/deep/ .el-table__empty-block {
+  padding: 40px 0 !important;
+  box-sizing: border-box;
+}
+</style>

src/view/home/breaker/index.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{ dropdownData.length !== 0 ? "SF6 -" + dropdownData[0].name : "SF6 " }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard breaker backgroundTitle"
+      :style="'background-image:url(' + breaker + ');'"
+      v-show="cardShow"
+    >
+      <div class="tendencyChartText" @click="tendencyChartChange('5')">
+        趋势图
+      </div>
+      <div class="cardTitle">
+        <div>
+          <span>SF6 - </span>
+          <!-- 下拉框有数据 -->
+          <el-dropdown
+            v-if="dropdownData.length !== 0"
+            @command="dropdownClick"
+          >
+            <span class="el-dropdown-link">
+              {{ dropdownData[0].name
+              }}<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                v-for="(item, index) of dropdownData"
+                :key="index"
+                :command="index"
+                >{{ item.name }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- 无下拉数据 -->
+          <el-dropdown v-else class="cursor" trigger="click">
+            <span class="el-dropdown-link">
+              SF6<i class="el-icon-arrow-down el-icon--right" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>暂无数据 </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <Tablemodule
+          :table-loading="loading"
+          :option="tableData.column"
+          :data="tableData.data"
+        ></Tablemodule>
+        <div class="cardDate">采样时间 {{ samplingDate }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  SF6ControllerTable,
+  SF6ControllerLine,
+  getLxId,
+  getEqmId,
+} from "@/api/home/home";
+// 左边
+import { echartData } from "@/utils/common";
+import breaker from "@/assets/page_right/breaker.png";
+// 引入table组件
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      loading: false,
+      // 左边
+      breaker: breaker,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      oilChromatographyTitle: "",
+      dropdownData: [],
+      tableData: {
+        column: [
+          {
+            label: "相位",
+            prop: "phase",
+            width: "50px",
+          },
+          {
+            label: "温度℃",
+            prop: "temperature",
+          },
+          {
+            label: "微水(uL/L)",
+            prop: "moisture",
+          },
+          {
+            label: "压力(Kpa)",
+            prop: "pressure",
+          },
+        ],
+        data: [],
+      },
+      samplingDate: "2021-10-11 15:15:30",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      selectIdList: [],
+    };
+  },
+  created() {
+    // 表格数据
+    this.init();
+    // // 趋势图数据
+    // this.tendencyChartData()
+  },
+  methods: {
+    init() {
+      getLxId(2, 8)
+        .then((response) => {
+          const { code, data, msg } = response;
+          if (code === 200 && data.length !== 0) {
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              this.dropdownData.push({
+                name: element.lmc,
+                id: element.lxid,
+              });
+            }
+            getEqmId(2, data[0].lxid, 8).then((response) => {
+              const { code, data, msg } = response;
+              if (code === 200 && data.length !== 0) {
+                for (let index = 0; index < data.length; index++) {
+                  const element = data[index];
+                  this.selectIdList.push(element.id);
+                }
+                this.tableDataFun(data[0].id);
+                this.echartDataFun(data[0].id, "1");
+              }
+            });
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    tableDataFun(data) {
+      this.loading = true;
+      SF6ControllerTable(data).then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200 && data.length !== 0) {
+          const dataList = data[0];
+          this.samplingDate = dataList.dtime;
+          this.tableData.data = [
+            {
+              phase: "A相",
+              temperature: dataList.tempA,
+              moisture: dataList.pmA,
+              pressure: dataList.pressureA,
+            },
+            {
+              phase: "B相",
+              temperature: dataList.tempB,
+              moisture: dataList.pmB,
+              pressure: dataList.pressureB,
+            },
+            {
+              phase: "C相",
+              temperature: dataList.tempC,
+              moisture: dataList.pmC,
+              pressure: dataList.pressureC,
+            },
+          ];
+        }
+        this.loading = false;
+      });
+    },
+    echartDataFun(data, type) {
+      SF6ControllerLine(data).then((response) => {
+        const { code, data, msg } = response;
+        const arr = [];
+        if (code === 200 && data.length !== 0) {
+          for (let index = 0; index < data.length; index++) {
+            const element = data[index];
+            this.legendData.push(element.equipment);
+            arr.push({
+              name: element.equipment,
+              data: echartData(element.currentVals),
+            });
+          }
+          this.seriesData = arr;
+          this.xAxisData = data[0].dtimes;
+          if (type === '2') {
+            this.tendencyChartChange();
+          }
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    // 点击开关
+    changeStatus: function ($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    dropdownClick(command) {
+      this.tableDataFun(this.selectIdList[command]);
+      this.echartDataFun(this.selectIdList[command], "2");//后面的2，是为了区分首次加载还是选择加载
+    },
+    tendencyChartChange(type) {
+      //   通知home页图标数据处理
+      this.$emit(
+        "dataDispose",
+        this.legendData,
+        this.xAxisData,
+        this.seriesData,
+        this.dropdownData.length !== 0
+          ? "SF6 -" + this.dropdownData[0].name
+          : "SF6 "
+      );
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+
+// 开光样式
+.pageCard {
+  // min-height: 295px;
+  .cardTitle span {
+    // padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
+.backgroundTitle {
+  margin-bottom: 0 !important;
+}
+/deep/ .el-table__empty-block {
+  padding: 20px 0 !important;
+  box-sizing: border-box;
+}
+</style>

src/view/home/clamp/index.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{ pageCardTitle }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle"
+      :style="'background-image:url(' + clamp + ');'"
+      v-show="cardShow"
+    >
+      <!-- tendencyChart文字标题 -->
+      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+      <!-- 标题和内容 -->
+      <div class="cardTitle">
+        {{ pageCardTitle }}
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <Tablemodule
+          :table-loading="loading"
+          :option="tableData.column"
+          :data="tableData.data"
+        ></Tablemodule>
+        <div class="cardTab">
+          <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleChangeChart">
+            <el-tab-pane v-for="(item,index) of ironCoreJoinClampLableData" :key="index" :label="item.lable" :name="item.id"></el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ironCoreJoinClampControllerTable,ironCoreJoinClampControllerLine,getLxId,getEqmId} from "@/api/home/home";
+// 左边
+import clamp from "@/assets/page_left/clamp.png";
+import { echartData } from '@/utils/common'
+// 引入table组件
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      activeName:"",
+      loading: false,
+      // 左边
+      clamp: clamp,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      tendencyChartTitle: "1#主变  铁芯/夹件",
+      pageCardTitle: "1#主变  铁芯/夹件",
+      tableData: {
+        column: [
+          {
+            label: "采样时间",
+            prop: "dtime",
+            width: "60px",
+          },
+          {
+            label: "铁芯泄露电流(mA)",
+            prop: "ironCoreValue",
+          },
+          {
+            label: "夹件泄露电流(mA)",
+            prop: "clampValue",
+          },
+        ],
+        data: [],
+      },
+      samplingDate: "2021-10-11 15:15:30",
+      legendData:[],
+      xAxisData:[],
+      seriesData:[],
+      ironCoreJoinClampLableData:[],
+      arr:[2,3],
+    };
+  },
+ created() {
+    // 表格数据
+    this.tableDatas()
+    // // 趋势图数据
+    // this.tendencyChartData()
+  },
+  methods: {
+    tableDatas() {
+      let lableArr=[]
+      getLxId(1,this.arr).then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200) {
+          this.activeName=data[0].lxid
+          for (let index = 0; index < data.length; index++) {
+            const element = data[index];
+            if(index<=5){
+              lableArr.push({
+                lable:index+1+'#',
+                id:element.lxid
+              })
+            }
+          }
+          this.ironCoreJoinClampLableData=lableArr
+          getEqmId(1,this.activeName,this.arr).then((response) => {
+            const { code, data, msg } = response;
+            if (code === 200) {
+              this.ironCoreId = data[0].id
+              this.clampId = data[1].id
+              this.getData('1')
+            } 
+          })
+        } else {
+          this.msgError(msg);
+        }
+      }).catch((err) => {
+        this.msgError(err.msg);
+      });
+    },
+    getData(type) {
+      this.loading=true
+      ironCoreJoinClampControllerTable({ironCoreId:this.ironCoreId,clampId:this.clampId})
+        .then((response) => {
+          const { code, data, msg } = response;
+          if (code === 200) {
+            this.tableData.data = data.splice(2);
+          } else {
+            this.msgError(msg);
+          }
+          this.loading=false
+        })
+        .catch((err) => {
+          this.loading=false
+          this.msgError(err.msg);
+        });
+      ironCoreJoinClampControllerLine({ironCoreId:this.ironCoreId,clampId:this.clampId})
+        .then((response) => {
+          const { code, data, msg } = response;
+          if (code === 200) {
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              this.legendData.push(element.equipment)
+              this.seriesData.push({
+                name:element.equipment,
+                data:echartData(element.currentVals),
+              })
+            }
+            this.xAxisData=data[0].dtimes
+            if(type==='2'){
+              this.tendencyChartChange();
+            }
+            
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    // 点击标签页
+    handleChangeChart(tab) {
+      this.seriesData=[]
+      this.tendencyChartTitle = tab.label + "主变 铁芯/夹件";
+      this.pageCardTitle = tab.label + "主变 铁芯/夹件";
+      getEqmId(1,tab.name,this.arr).then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200) {
+          this.ironCoreId = data[0].id
+          this.clampId = data[1].id
+          this.getData('2')//后面的2，是为了区分首次加载还是选择加载
+        } else {
+          this.msgError(msg);
+        }
+      })
+    },
+    // 点击开关
+    changeStatus: function ($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    tendencyChartChange(type) {
+      this.$emit("dataDispose",  this.legendData, this.xAxisData, this.seriesData,this.tendencyChartTitle);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+/deep/ .el-table__empty-block {
+  padding: 20px 0!important;
+  box-sizing: border-box;
+}
+</style>

src/view/home/clearDialog.vue

@@ -0,0 +1,525 @@
+<template>
+  <div>
+    <div class="app-container">
+      <div class="searh">
+        <el-form ref="queryParams" :model="queryParams">
+          <el-row>
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item
+                label="变电设备类型"
+                label-width="120px"
+                prop="jcType"
+              >
+                <el-select
+                  size="small"
+                  v-model="queryParams.jcType"
+                  placeholder="请选择变电设备类型"
+                  @change="getLxType"
+                >
+                  <el-option
+                    v-for="item in jcOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item label="设备小类" label-width="120px" prop="lxType">
+                <el-select
+                  size="small"
+                  v-model="queryParams.lxType"
+                  placeholder="请选择设备小类"
+                  @change="getEqType"
+                >
+                  <el-option
+                    v-for="item in lxOptions"
+                    :key="item.value"
+                    :label="item.zmc"
+                    :value="item.lxid"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item
+                label="被监测设备"
+                label-width="120px"
+                prop="eqType"
+              >
+                <el-select
+                  size="small"
+                  v-model="queryParams.eqType"
+                  placeholder="请选择被监测设备"
+                >
+                  <el-option
+                    v-for="item in eqOptions"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.id"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <!-- <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item label="告警类型" label-width="120px" prop="status">
+                <el-select
+                  size="small"
+                  v-model="queryParams.gjType"
+                  placeholder="请选择告警类型"
+                >
+                  <el-option
+                    v-for="item in gjOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-col> -->
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item
+                label="报警时间"
+                label-width="120px"
+                prop="warningTime"
+              >
+                <el-date-picker
+                  size="small"
+                  v-model="queryParams.warningTime"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :md="6" :lg="6" :xl="6">
+              <el-form-item style="margin-left: 120px">
+                <div class="searhButtons">
+                  <el-button
+                    size="mini"
+                    icon="el-icon-search"
+                    type="primary"
+                    @click="onResearchClick()"
+                    >查询</el-button
+                  >
+                  <el-button
+                    size="mini"
+                    icon="el-icon-refresh"
+                    @click="resetSearchForm()"
+                    style="margin-left: 20px"
+                    >重置</el-button
+                  >
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="dataTable">
+        <avue-crud
+          style="margin-top: 10px"
+          :table-loading="loading"
+          :option="option"
+          :data="data"
+          :page.sync="tablePage"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          @selection-change="handleSelectionChange"
+        >
+          <!-- 左边按钮 -->
+          <!-- :disabled="single" -->
+          <template slot="menuLeft">
+            <el-button
+              type="primary"
+              icon="el-icon-notebook-2"
+              size="mini"
+              class="operationBut"
+              @click.stop="batchProcessing()"
+              >批量处理</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-delete"
+              size="mini"
+              class="operationBut"
+              @click.stop="allRemove()"
+              >一键清除</el-button
+            >
+          </template>
+          <template slot-scope="scope" slot="menu">
+            <el-button
+              type="text"
+              icon="el-icon-edit"
+              size="small"
+              @click.stop="batchProcessing(scope.row)"
+              >处理</el-button
+            >
+          </template>
+        </avue-crud>
+      </div>
+      <!-- 批量处理警告 -->
+    </div>
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogOpen"
+      width="40%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="processingPrompt" prop="cljg">
+              <el-input v-model="form.cljg"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">处 理</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getJgType,
+  getLxType,
+  getEqType,
+  queryAlarmDetail,
+  dealwarning,
+} from "@/api/home/home";
+export default {
+  name: "userManagement",
+  props: {
+    tableData: Object,
+  },
+  data() {
+    return {
+      queryParams: {
+        jcType: "",
+        lxType: "",
+        eqType: "",
+        gjType: "",
+        warningTime: "",
+      },
+      // 是否显示弹出层
+      open: false,
+      // 选中的用户id
+      selectIds: [],
+      selectStatus: [],
+      single: true,
+      tablePage: {
+        limit: 10,
+        total: 0,
+        page: 1,
+      },
+      page: {
+        total: 0,
+        limit: 1,
+        page: 10,
+      },
+      // 遮罩层
+      loading: false,
+      // 弹出层标题
+      dialogTitle: "告警单批处理",
+      jcOptions: [],
+      lxOptions: [],
+      eqOptions: [],
+      gjOptions: [],
+      processingPrompt:'批处理结果',
+      // 是否显示弹出层
+      dialogOpen: false,
+      rules: {
+        cljg: [
+          { required: true, message: "不能为空", trigger: "blur" },
+        ],
+      },
+      // 表格数据
+      data: [
+        {
+          toType: "1111",
+        },
+      ],
+      option: {
+        title: "",
+        border: true,
+        emptyText: "暂无数据!",
+        align: "center",
+        menuAlign: "center",
+        menuWidth: 200,
+        menuTitle: "操作",
+        menuType: "text",
+        addBtn: false,
+        delBtn: false,
+        editBtn: false,
+        refreshBtn: false,
+        selection: false,
+        column: [
+          {
+            label: "监测设备",
+            prop: "deviceName",
+          },
+          {
+            label: "阈值",
+            prop: "threadval",
+          },
+          {
+            label: "当前值",
+            prop: "warningValue",
+          },
+          {
+            label: "告警信息",
+            prop: "warnDesc",
+          },
+          {
+            label: "报警时间",
+            prop: "warnTime",
+          },
+        ],
+      },
+      toDept: "1",
+      // 表格选中的数据
+      selectData: {},
+      queryData: {
+        state: "1",
+        startTime: "",
+        jgid: "",
+        lxid: "",
+        mtid: "",
+        endTime: "",
+        eqmId: "",
+        page: 1,
+        limit: 10,
+      },
+      form: {
+        process: "",
+        id: "",
+        state: "",
+      },
+    };
+  },
+  watch: {
+    tableData: function (value) {
+      this.tablePage.total = value.total;
+      this.data = value.records;
+    },
+  },
+  created() {
+    this.getJgType();
+  },
+  methods: {
+    getJgType() {
+      getJgType().then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          const obj = [];
+          for (const key in data) {
+            obj.push({
+              label: key,
+              value: data[key],
+            });
+          }
+          this.jcOptions = obj;
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    getLxType() {
+      getLxType(this.queryParams.jcType).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.queryParams.lxType = "";
+          this.queryParams.eqType = "";
+          this.lxOptions = data;
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    getEqType() {
+      getEqType(this.queryParams.jcType, this.queryParams.lxType).then(
+        (response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200) {
+            this.queryParams.eqType = "";
+            this.eqOptions = data;
+          } else {
+            this.msgError(msg);
+          }
+        }
+      );
+    },
+    // 点击查询
+    getList() {
+      queryAlarmDetail(this.queryData).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.data = data.records;
+          this.tablePage.total = data.total;
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    // 重置条件搜索表单
+    resetSearchForm() {
+      this.$nextTick(() => {
+        if (this.$refs["queryParams"] !== undefined) {
+          this.$refs["queryParams"].resetFields();
+        }
+      });
+    },
+    //搜索
+    onResearchClick() {
+      this.queryData.startTime = this.queryParams.warningTime
+        ? this.queryParams.warningTime[0]
+        : "";
+      this.queryData.endTime = this.queryParams.warningTime
+        ? this.queryParams.warningTime[1]
+        : "";
+      this.queryData.jgid = this.queryParams.jcType
+        ? this.queryParams.jcType
+        : "";
+      this.queryData.lxid = this.queryParams.lxType
+        ? this.queryParams.lxType
+        : "";
+      this.queryData.eqmId = this.queryParams.eqType
+        ? this.queryParams.eqType
+        : "";
+      this.getList();
+    },
+    // 批量处理
+    batchProcessing(row) {
+      this.dialogTitle=row?'告警处理':'告警批处理'
+      this.processingPrompt=row?'处理结果':'批处理结果'
+      this.rules.cljg[0].message=this.processingPrompt+'不能为空'
+      this.dialogOpen = true;
+      this.form.id = row.id;
+      this.form.state = row.state;
+    },
+    // 一键清除
+    allRemove() {
+      this.$confirm("确定要处理当前所有的告警吗?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          dealwarning(this.form).then((response) => {
+            const { code, data, msg } = response;
+            this.loading = false;
+            if (code === 200) {
+              this.dialogOpen = false;
+              this.$message.success("处理成功！");
+              this.getList();
+            } else {
+              this.msgError(msg);
+            }
+          });
+        })
+        .catch(function () {});
+    },
+    handleSelectionChange(selection) {
+      this.selectIds = selection.map((item) => item.noticeId);
+      this.single = selection.length != 1;
+    },
+    /** 页码大小改变操作 */
+    sizeChange(val) {
+      this.tablePage.limit = 10;
+      this.tablePage.page = val;
+      this.getList();
+    },
+    /** 翻页操作 */
+    currentChange(val) {
+      this.queryData.page = val;
+      this.getList();
+    },
+    // 批量处理
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if(valid){
+          dealwarning(this.form).then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200) {
+            this.dialogOpen = false;
+            this.$message.success("处理成功！");
+            this.getList();
+          } else {
+            this.msgError(msg);
+          }
+        });
+        }
+      })
+      
+    },
+    cancel() {
+      this.dialogOpen = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.dataTable {
+  box-shadow: 0 0 5px 4px #e7e7e7;
+  .operationBut {
+    margin-right: 10px !important;
+  }
+}
+.searh {
+  background-color: #ffffff;
+  padding: 20px 30px;
+  box-sizing: border-box;
+  margin-top: 20px;
+  box-shadow: 0 0 5px 4px #e7e7e7;
+}
+.avue-crud__right {
+  display: none;
+}
+.el-dialog__body {
+  padding: 0px 20px;
+}
+.el-select {
+  width: 100%;
+}
+.el-form {
+  margin-top: 20px;
+}
+.el-dialog.is-fullscreen {
+  background-color: rgb(240, 240, 240);
+}
+.el-dialog__header {
+  background-color: #106cde;
+  padding: 20px 30px !important;
+  color: #ffffff;
+  .el-dialog__title {
+    color: #ffffff;
+  }
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #ffffff;
+    font-size: 18px;
+  }
+}
+.el-card__body {
+  min-height: 500px;
+  box-shadow: 0 0 5px 4px #e7e7e7;
+}
+.el-date-editor {
+  width: 100% !important;
+}
+.el-table__empty-block {
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+</style>

src/view/home/home.vue

@@ -0,0 +1,491 @@
+<template>
+  <div id="body">
+    <!-- 顶部 -->
+    <div class="pageHeader">
+      <div class="pageHeaderLogo">
+        <img :src="gjdwLogo" class="hjdw" alt="国家电网公司" srcset="" />
+        <img :src="xykjLogo" class="xykj" alt="欣影科技" srcset="" />
+        <span class="pageTitle">状态监测数据汇集系统</span>
+        <!-- <img :src="zghLogo" class="ygh" alt="央广核" srcset="" /> -->
+      </div>
+      <div class="pageHeaderMenu">
+        <ul>
+          <li
+            :style="'background-image:url(' + menuBj + ');'"
+            v-for="(item, key) in menuList"
+            :key="key"
+            @click="loginCAC(key + 1)"
+          >
+            {{ item.lable }}
+          </li>
+        </ul>
+      </div>
+      <div class="pageHeaderLogout">
+        <div class="currentTime">{{ currentTime }}</div>
+        <el-dropdown>
+          <span class="el-dropdown-link">
+            系统<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="pageBody">
+      <el-row :gutter="20">
+        <el-col :span="5">
+          <div class="pageLeft">
+            <!-- 1#主变 油色谱 -->
+            <!-- 标题和内容 -->
+            <oilChromatographyTemplate
+              @dataDispose="dataDispose"
+            ></oilChromatographyTemplate>
+            <!-- #1主变 铁芯/夹件 -->
+            <clampTemplate @dataDispose="dataDispose"></clampTemplate>
+            <!-- 1#主变 绕阻测温 -->
+            <windingTemperatureTemplate
+              class="windingTemperatureTemplate"
+              @dataDispose="dataDispose"
+            ></windingTemperatureTemplate>
+          </div>
+        </el-col>
+        <el-col :span="14">
+          <div class="pageMid">
+            <!-- 1#主变-实时数据趋势图 -->
+            <div class="tendencyChart backgroundTitle">
+              <div class="cardTitle">
+                {{ tendencyChartTitle }}-实时数据趋势图
+              </div>
+              <div class="cardContent">
+                <RadarChart :echartData="echartData"></RadarChart>
+              </div>
+            </div>
+            <!-- 1# - 电缆环流 -->
+            <pageMidSecondTemplate
+              @dataDispose="dataDispose"
+            ></pageMidSecondTemplate>
+            <warnMessageTemplate></warnMessageTemplate>
+          </div>
+        </el-col>
+        <el-col :span="5"
+          ><div class="pageLeft">
+            <!-- 监测装置总数 -->
+            <monitoringDeviceTemplate
+              @dataDispose="dataDispose"
+            ></monitoringDeviceTemplate>
+            <!-- SF6-5001 断路器 -->
+            <breakerTemplate
+              @dataDispose="dataDispose"
+              class="breakerTemplate"
+            ></breakerTemplate>
+            <!-- 避雷器 - 黑纱线 -->
+            <arrester @dataDispose="dataDispose" class="arrester"></arrester>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+// API
+import { decrypt } from "@/utils/jsencrypt";
+// 顶部
+import gjdwLogo from "@/assets/page_logo/stateGridCorporation.png";
+import xykjLogo from "@/assets/page_logo/hinFilmTechnology.png";
+import zghLogo from "@/assets/page_logo/CGNPC.png";
+import menuBj from "@/assets/page_logo/menu.png";
+// 引入echart组件
+import RadarChart from "@/components/Echarts/index";
+// 页面组成部分
+import oilChromatographyTemplate from "./oilChromatography/index";
+import clampTemplate from "./clamp/index";
+import windingTemperatureTemplate from "./windingTemperature/index";
+import pageMidSecondTemplate from "./pageMidSecond/index";
+import warnMessageTemplate from "./warnMessage/index";
+import monitoringDeviceTemplate from "./monitoringDevice/index";
+import breakerTemplate from "./breaker/index";
+import arrester from "./arrester/index";
+export default {
+  name: "home",
+  components: {
+    RadarChart,
+    oilChromatographyTemplate,
+    clampTemplate,
+    windingTemperatureTemplate,
+    pageMidSecondTemplate,
+    warnMessageTemplate,
+    monitoringDeviceTemplate,
+    breakerTemplate,
+    arrester,
+  },
+  data() {
+    return {
+      hostName: "",
+      echartData: {
+        // 默认的图表数据
+        legendData: [],
+        xAxisData: [],
+        yAxisData: [],
+        seriesData: [],
+      },
+      // 顶部
+      gjdwLogo: gjdwLogo,
+      xykjLogo: xykjLogo,
+      zghLogo: zghLogo,
+      menuBj: menuBj,
+      currentTime: "",
+      // 卡片标题
+      tendencyChartTitle: "1#主变 油色谱",
+      // 顶部导航菜单
+      menuList: [
+        { lable: "数据报表", url: "" },
+        { lable: "设备台账管理", url: "" },
+        // { lable: "icd配置", url: "" },
+        { lable: "系统管理", url: "" },
+        // { lable: "声级振动", url: "" },
+      ],
+      chartBackground: [
+        "238,102,102",
+        "145,204,117",
+        "250,200,88",
+        "115,192,222",
+        "59,162,114",
+        "252,132,82",
+        "154,96,180",
+        "234,124,204",
+        "3,188,255",
+      ],
+    };
+  },
+  created() {
+    this.nowTimes();
+  },
+  mounted() {
+    console.log(window.location);
+    console.log(process.env.NODE_ENV);
+    const isProduction = process.env.NODE_ENV === "production";
+    if (isProduction) {
+      // 使用服务器IP或域名作为图片地址
+      this.hostName = window.location.origin + window.location.pathname;
+      console.log("aaaaaaaaaaaa");
+    } else {
+      // 使用代理的 target 作为图片地址（开发环境）
+      console.log("开发环境");
+      this.hostName = "http://192.168.1.190:88/"; // 这里使用你的本地 target 地址
+    }
+  },
+  destroyed() {
+    // 销毁监听
+    this.clear();
+  },
+  methods: {
+    // 点击模块切换趋势图
+    dataDispose(legendData, xAxisData, seriesData, title) {
+      console.log(legendData);
+      console.log(xAxisData);
+      console.log(seriesData);
+      this.tendencyChartTitle = title;
+      let arr = [];
+      let echartDataObj = {
+        legendData: legendData,
+        xAxisData: xAxisData,
+        seriesData: [],
+      };
+      for (let index = 0; index < seriesData.length; index++) {
+        const element = seriesData[index];
+        arr.push({
+          name: element.name,
+          type: "line",
+          data: element.data,
+          areaStyle: {
+            normal: {
+              // 填充色渐变
+
+              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "rgba(" + this.chartBackground[index] + ",0.3)",
+                },
+                {
+                  offset: 0.5,
+                  color: "rgba(" + this.chartBackground[index] + ",0.1)",
+                },
+                { offset: 1, color: "rgba(58, 167, 255,0)" },
+              ]),
+            },
+          },
+          // 曲线柔和
+          smooth: true,
+          itemStyle: {
+            normal: {
+              lineStyle: {
+                width: 3,
+              },
+            },
+          },
+        });
+      }
+      echartDataObj.seriesData = arr;
+      this.echartData = echartDataObj;
+      console.log(echartDataObj);
+    },
+    // 页面跳转
+    loginCAC(page) {
+      console.log(page);
+      console.log(this.hostName);
+      if (page == 1) {
+        window.location.href = this.hostName + "newcac/index.html#/dataReport";
+        //window.open(this.hostName + "/newcac/#/dataReport");
+      } else if (page == 2) {
+        window.location.href = this.hostName + "newcac/index.html#/equipment";
+        // window.open(this.hostName + "/newcac/#/equipment");
+      } else if (page == 3) {
+        window.location.href = this.hostName + "newcac/index.html#/icdConfig";
+        //window.open(this.hostName + "/newcac/#/icdConfig");
+      }
+      // const userName = sessionStorage.getItem("userName");
+      // const password = decrypt(sessionStorage.getItem("password"));
+      // const passwordSJZD = "123456";
+      // if (page != 4) {
+      //   window.open(
+      //     // "http://192.168.145.147/index.php/index/login/index.html?name=" +
+      //     //"http://192.168.128.32/index.php/index/login/index.html?name=" +
+      //     "http://192.168.1.190/index.php/index/login/index.html?name=" +
+      //       userName +
+      //       "&password=" +
+      //       password +
+      //       "&page=" +
+      //       page,
+      //     "_blank"
+      //   );
+      // } else {
+      //   const params = {
+      //     userName: userName,
+      //     password: passwordSJZD,
+      //   };
+      //   // 声级振动登录方法
+      //   axios.post("/sysLoginRemoteController/login", params).then((res) => {
+      //     if (res && res.data.code === 200) {
+      //       //声级震动前端页面访问地址
+      //       window.open(
+      //         //"http://192.168.135.81:88/login?token=" + res.data.token,
+      //         //"http://192.168.128.32/login?token=" + res.data.token,
+      //         "http://192.168.50.200/login?token=" + res.data.token,
+      //         "_blank"
+      //       );
+      //       return;
+      //     }
+      //   });
+      // }
+    },
+    // 退出系统
+    logout() {
+      this.$confirm("确定注销并退出系统吗？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.$store.dispatch("LogOut").then(() => {
+          // Cookies.remove("username");
+          // Cookies.remove("password");
+          location.reload();
+        });
+      });
+    },
+    getCurrentTime(timeStamp) {
+      //获取当前时间并打印
+      let year = new Date(timeStamp).getFullYear();
+      let month =
+        new Date(timeStamp).getMonth() + 1 < 10
+          ? "0" + (new Date(timeStamp).getMonth() + 1)
+          : new Date(timeStamp).getMonth() + 1;
+      let date =
+        new Date(timeStamp).getDate() < 10
+          ? "0" + new Date(timeStamp).getDate()
+          : new Date(timeStamp).getDate();
+      let hh =
+        new Date(timeStamp).getHours() < 10
+          ? "0" + new Date(timeStamp).getHours()
+          : new Date(timeStamp).getHours();
+      let mm =
+        new Date(timeStamp).getMinutes() < 10
+          ? "0" + new Date(timeStamp).getMinutes()
+          : new Date(timeStamp).getMinutes();
+      let ss =
+        new Date(timeStamp).getSeconds() < 10
+          ? "0" + new Date(timeStamp).getSeconds()
+          : new Date(timeStamp).getSeconds();
+      this.currentTime =
+        year + "-" + month + "-" + date + "" + " " + hh + ":" + mm + ":" + ss;
+    },
+    nowTimes() {
+      this.getCurrentTime(new Date());
+      setInterval(this.nowTimes, 1000);
+      this.clear();
+    },
+    clear() {
+      clearInterval(this.nowTimes);
+      this.nowTimes = null;
+    },
+    // 下拉框点击选择
+    cancel() {
+      this.dialogOpen = false;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only " -->
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.pageTitle {
+  font-size: 24px;
+  color: #fff;
+  margin-left: 30px;
+}
+li {
+  list-style: none;
+}
+.el-row {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+#body {
+  width: 100%;
+}
+.el-dropdown-menu {
+  background: #106cde;
+}
+.el-dropdown-menu__item {
+  color: #fff;
+}
+.el-dropdown {
+  color: #fff !important;
+  font-size: 16px;
+}
+/* 顶部内容 */
+.pageHeader {
+  height: 82px;
+  padding: 0px 30px;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #15244aff 0%, #184b7099 100%);
+  backdrop-filter: blur(8px);
+  box-shadow: inset 0px 2px 9.77px 0px #003c5066;
+  justify-content: space-between;
+  display: flex;
+  flex-flow: row;
+  align-content: center;
+  .pageHeaderLogo {
+    height: 82px;
+    line-height: 82px;
+    align-content: center;
+    justify-content: center;
+  }
+  img {
+    margin-left: 15px;
+    vertical-align: middle;
+  }
+  .pageHeaderMenu ul {
+    height: 100%;
+    flex-flow: row;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+  }
+  .pageHeaderMenu ul li {
+    list-style: none;
+    color: #6de1ff;
+    width: 120px;
+    height: 47px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 15px;
+    cursor: pointer;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .pageHeaderLogout {
+    height: 100%;
+    flex-flow: row;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+    color: #66e6ff;
+  }
+  .currentTime {
+    margin-right: 15px;
+  }
+}
+/* 内容部分 */
+.pageBody {
+  padding: 10px 10px 0px 10px;
+}
+
+.tendencyChart {
+  height: 380px;
+  background: #08092419;
+  backdrop-filter: blur(10px);
+  box-shadow: inset 0px 4px 44px 0px #106cdeff;
+  margin-bottom: 10px;
+}
+.backgroundTitle {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+}
+.pageMid {
+  // margin-bottom: 10px;
+}
+/* 卡片标题 */
+.cardTitle {
+  height: 50px;
+  line-height: 50px;
+  padding-left: 27px;
+  color: #03bcff;
+  text-align: left;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .unfoldCloseIcon {
+    font-size: 18px;
+    color: #03bcff;
+    font-weight: bolder;
+    cursor: pointer;
+  }
+}
+
+/* 卡片内容 */
+.cardContent {
+  padding: 20px;
+  box-sizing: border-box;
+}
+/* 趋势图 */
+.tendencyChart {
+  // height: 493px;
+}
+.tendencyChart .cardContent {
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.windingTemperatureTemplate {
+  margin-top: 20px;
+}
+.breakerTemplate,
+.arrester {
+  margin-top: 20px;
+}
+@media screen and (max-width: 1440px) {
+  .pageHeaderMenu ul li,
+  .currentTime,
+  .cardTitle {
+    font-size: 12px;
+  }
+}
+</style>

src/view/home/monitoringDevice/index.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      <div><span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span></div>
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle monitoringDevice"
+      :style="'background-image:url(' + monitoringDevice + ');'"
+      v-show="cardShow"
+    >
+      <div class="cardTitle">
+        <div>
+          <span>监测装置总数</span><span> | </span><span>{{ number.totalNum }}</span>
+        </div>
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <Tablemodule
+          :table-loading="loading"
+          :option="tableData.column"
+          :data="tableData.data"
+        ></Tablemodule>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getEquNum } from "@/api/home/home";
+// 左边
+import monitoringDevice from "@/assets/page_right/monitoringDevice.png";
+// 引入table组件
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      loading: false,
+      // 左边
+      monitoringDevice: monitoringDevice,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      pageCardTitle: "",
+      tableData: {
+        column: [
+          {
+            label: "主设备类型",
+            prop: "type",
+          },
+          {
+            label: "装置数量(个)",
+            prop: "num",
+          },
+        ],
+        data: [
+          {
+            type: "变压器",
+            num: '0',
+            prop: "byqNum",
+          },
+          {
+            type: "GIS",
+            num: '0',
+            prop: "gisNum",
+          },
+          {
+            type: "避雷器",
+            num: '0',
+            prop: "blqNum",
+          },
+          {
+            type: "开关柜",
+            num: '0',
+            prop: "cwNum",
+          },
+          {
+            type: "电缆",
+            num: '0',
+            prop: "dlNum",
+          },
+          {
+            type: "发电机",
+            num: '0',
+            prop: "otherNum",
+          },
+        ],
+      },
+      samplingDate: "2021-10-11 15:15:30",
+      number: {},
+    };
+  },
+  created() {
+    this.getEquNum();
+  },
+  methods: {
+    // 点击开关
+    changeStatus: function ($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    tendencyChartChange(type) {
+      let unit = "mA";
+      let legendData = ["铁芯泄露电流", "夹件泄漏电流"];
+      let xAxisData = ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06"];
+      let seriesData = [
+        { name: "铁芯泄露电流", data: [10, 25, 2, 100, 59, 78, 36] },
+      ];
+      this.$emit("dataDispose", unit, legendData, xAxisData, seriesData);
+    },
+    // 获取数量
+    getEquNum() {
+      this.loading=true
+      getEquNum().then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200) {
+          this.number = data;
+          const arr = this.tableData.data;
+          for (let index = 0; index < arr.length; index++) {
+            const element = arr[index];
+            for (const key in data) {
+              if (element.prop === key) {
+                arr[index].num = data[key].toString();
+              }
+            }
+          }
+        } else {
+          this.msgError(msg);
+        }
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+// 开光样式
+.pageCard {
+  //  min-height: 370px!important;
+  .cardTitle {
+    padding: 0px 30px 0px 20px;
+  }
+  .cardTitle span {
+    // padding: 0 5px;
+    box-sizing: border-box;
+  }
+}
+
+.pageCard .cardContent {
+  padding: 30px !important;
+  box-sizing: border-box;
+}
+</style>

src/view/home/oilChromatography/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{ pageCardTitle }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle"
+      :style="'background-image:url(' + oilChromatography + ');'"
+      v-show="cardShow"
+    >
+      <!-- tendencyChart文字标题 -->
+      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+      <div class="cardTitle">
+        {{ pageCardTitle }}
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <div class="">
+          <el-row>
+            <el-col
+              :span="8"
+              v-for="(item, key) in oilChromatographyData"
+              :key="key"
+            >
+              <div class="project">
+                <span class="projectVal">{{ item.value }}uL/L</span>
+                <span class="projectLable">{{ item.lable }}</span>
+              </div></el-col
+            >
+          </el-row>
+        </div>
+        <div class="cardDate" style="border: none">
+          采样时间 {{ samplingDate }}
+        </div>
+        <div class="cardTab">
+          <el-tabs
+            :tab-position="tabPosition"
+            v-model="activeName"
+            @tab-click="handleChangeChart"
+          >
+            <el-tab-pane
+              v-for="(item, index) of oilChromatographyLableData"
+              :key="index"
+              :label="item.lable"
+              :name="item.id"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const defaultText = "- - ";
+import {
+  oilChromaControllerTable,
+  oilChromaControllerLine,
+  getLxId,
+  getEqmId,
+} from "@/api/home/home";
+// 左边
+import { echartData } from "@/utils/common";
+import oilChromatography from "@/assets/page_left/oilChromatography.png";
+export default {
+  name: "Login",
+  data() {
+    return {
+      activeName: "",
+      dataId: "",
+      loading: false,
+      // 左边
+      oilChromatography: oilChromatography,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      tendencyChartTitle: "1#主变 油色谱",
+      pageCardTitle: "1#主变 油色谱",
+      oilChromatographyData: [
+        {
+          value: defaultText,
+          lable: "甲烷",
+          field: "ch4ppm",
+        },
+        {
+          value: defaultText,
+          lable: "乙烯",
+          field: "c2h4ppm",
+        },
+        {
+          value: defaultText,
+          lable: "乙烷",
+          field: "c2h6ppm",
+        },
+        {
+          value: defaultText,
+          lable: "乙炔",
+          field: "c2h2ppm",
+        },
+        {
+          value: defaultText,
+          lable: "氢气",
+          field: "h2ppm",
+        },
+        {
+          value: defaultText,
+          lable: "一氧化碳",
+          field: "coppm",
+        },
+        {
+          value: defaultText,
+          lable: "二氧化碳",
+          field: "co2ppm",
+        },
+        {
+          value: defaultText,
+          lable: "微水",
+          field: "h2oppm",
+        },
+        {
+          value: defaultText,
+          lable: "总烃",
+          field: "totalhydrocarbon",
+        },
+      ],
+      samplingDate: "2021-10-11 15:15:30",
+      // 趋势图信息
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      // websocket信息
+      requestPath: "",
+      socket: "",
+      oilChromatographyLableData: [],
+      EqmId: "",
+    };
+  },
+  created() {
+    // 表格数据
+    this.tableData();
+    // 初始化websocket
+    // this.init();
+  },
+  methods: {
+    // // 初始化webscoket
+    // init: function () {
+    //   if (typeof WebSocket === "undefined") {
+    //     alert("您的浏览器不支持socket");
+    //   } else {
+    //     // 实例化socket
+    //     this.socket = new WebSocket(this.requestPath);
+    //     // 监听socket连接
+    //     this.socket.onopen = this.open;
+    //     // 监听socket错误信息
+    //     this.socket.onerror = this.error;
+    //     // 监听socket消息
+    //     this.socket.onmessage = this.getMessage;
+    //   }
+    // },
+    // open: function () {
+    //   console.log("socket连接成功");
+    //   this.send()
+    // },
+    // error: function () {
+    //   console.log("连接错误");
+    // },
+    // getMessage: function (msg) {
+    //   console.log(msg.data, "socket返回数据=========");
+    // },
+    send() {
+      // websocket请求无法设置请求头，在此采用建立连接之后主动推送token和userId给后端
+      // sessionStorage.getItem("userName")
+      const token = this.$cookies.get("token");
+      const userId = this.$cookies.get("username");
+      this.socket.send(
+        JSON.stringify({
+          auth: token,
+          user_id: userId,
+          params: {
+            headers: {
+              Connection: "upgrade", // 此处看后端要求
+            },
+          },
+        })
+      );
+    },
+    // 初始化数据
+    tableData() {
+      let lableArr = [];
+      getLxId(1, 1)
+        .then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200) {
+            this.activeName = data[0].lxid;
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              if (index <= 5) {
+                lableArr.push({
+                  lable: index + 1 + "#",
+                  id: element.lxid,
+                });
+              }
+            }
+            this.oilChromatographyLableData = lableArr;
+            getEqmId(1, this.activeName, 1).then((response) => {
+              const { code, data, msg } = response;
+              this.loading = false;
+              if (code === 200) {
+                this.EqmId = data[0].id;
+                this.getData();
+              }
+            });
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    getData() {
+      oilChromaControllerTable(this.EqmId)
+        .then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200 && data) {
+            console.log("dddddddddddddddddddddddddddddddddddddddddd");
+            console.log(data);
+            this.samplingDate = data.dtime;
+            for (const key in data) {
+              for (
+                let index = 0;
+                index < this.oilChromatographyData.length;
+                index++
+              ) {
+                if (this.oilChromatographyData[index].field === key) {
+                  console.log(this.oilChromatographyData[index].field);
+                  this.oilChromatographyData[index].value = data[key]
+                    ? data[key]
+                    : defaultText;
+                }
+              }
+            }
+          } else {
+            this.oilChromatographyData.forEach((element) => {
+              element.value = defaultText;
+            });
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+      oilChromaControllerLine(this.EqmId)
+        .then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          const arr = [];
+          if (code === 200) {
+            console.log(data);
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              this.legendData.push(element.gas);
+              arr.push({
+                name: element.gas,
+                data: echartData(element.currentVals),
+              });
+              this.seriesData = arr;
+            }
+            this.xAxisData = data[0].dtimes;
+            this.tendencyChartChange();
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    // 点击标签页
+    handleChangeChart(tab) {
+      this.tendencyChartTitle = tab.label + "主变 油色谱";
+      this.pageCardTitle = tab.label + "主变 油色谱";
+      getEqmId(1, tab.name, 1).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.EqmId = data[0].id;
+          this.getData();
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    // 点击开关
+    changeStatus: function($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    tendencyChartChange() {
+      //   通知home页图标数据处理
+      this.$emit(
+        "dataDispose",
+        this.legendData,
+        this.xAxisData,
+        this.seriesData,
+        this.tendencyChartTitle
+      );
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+</style>

src/view/home/pageMidSecond/index.vue

@@ -0,0 +1,647 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{ pageCardTitle }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle"
+      :style="'background-image:url(' + middleBj + ');'"
+      v-show="cardShow"
+    >
+      <!-- tendencyChart文字标题 -->
+      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+      <div class="cardTitle">
+        <div class="tabDropdown">
+          <el-scrollbar style="height: 100%">
+            <div class="tabDropdownBox">
+              <div class="tabDropdownSelect">
+                <!-- 第一级 -->
+                <el-dropdown @command="handleCommand">
+                  <span class="el-dropdown-link">
+                    {{ dropdownFirstNmae
+                    }}<i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item
+                      v-for="(val, index) in dropdownFirstData"
+                      :key="index"
+                      :command="index"
+                      >{{ val.name }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+              <div class="tabDropdownSelect">
+                <!-- 第二级 -->
+                <el-dropdown @command="handleCommandSecond">
+                  <span class="el-dropdown-link">
+                    {{ dropdownSecondNmae
+                    }}<i class="el-icon-arrow-down el-icon--right"></i>
+                  </span>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item
+                      v-for="(val, index) in dropdownSecondData"
+                      :key="index"
+                      :command="index"
+                      >{{ val.name }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </div>
+            </div>
+          </el-scrollbar>
+        </div>
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <!-- 电缆环流 -->
+        <Tablemodule
+          v-if="selectType === 'hl'"
+          :table-loading="loading"
+          :option="hlTableData.column"
+          :data="hlTableData.data"
+        ></Tablemodule>
+        <!-- 红外 -->
+        <Tablemodule
+          v-else-if="selectType === 'hw'"
+          :table-loading="loading"
+          :option="hwTableData.column"
+          :data="hwTableData.data"
+        ></Tablemodule>
+        <!-- 局放 -->
+        <Tablemodule
+          v-else-if="selectType === 'jf'"
+          :table-loading="loading"
+          :option="jfTableData.column"
+          :data="jfTableData.data"
+        ></Tablemodule>
+        <!-- 电缆沟 -->
+        <!-- <Tablemodule
+          vv-else-if="selectType === 'jf'"
+          :table-loading="loading"
+          :option="jfTableData.column"
+          :data="jfTableData.data"
+        ></Tablemodule> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  cableCircleControllerTable,
+  cableCircleControllerLine,
+  InfraredThermographyControllerTable,
+  InfraredThermographyControllerLine,
+  CablePartialDischargeControllerTable,
+  CablePartialDischargeControllerLine,
+  getLxType,
+  getEqType,
+} from "@/api/home/home";
+// 左边
+import { echartData } from "@/utils/common";
+import middleBj from "@/assets/page_mid/middle.png";
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      loading: true,
+      // 左边
+      middleBj: middleBj,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      oilChromatographyTitle: "",
+      pageCardTitle: "",
+      dropdownFirstData: [
+        {
+          name: "暂无数据",
+        },
+      ],
+      dropdownFirstNmae: "",
+      dropdownSecondNmae: "环流",
+      dropdownSecondData: [
+        {
+          name: "环流",
+          type: "hl",
+          id: [],
+        },
+        // {
+        //   name: "电缆沟",
+        //   type: "dlg",
+        //   id: [],
+        // },
+        {
+          name: "局放",
+          type: "jf",
+          id: [],
+        },
+        {
+          name: "红外",
+          type: "hw",
+          id: [],
+        },
+      ],
+      hlTableData: {
+        column: [
+          {
+            label: "位置",
+            prop: "location",
+          },
+          {
+            label: "采样时间",
+            prop: "dtime",
+          },
+          {
+            label: "电流1(A)",
+            prop: "electricit1",
+          },
+          {
+            label: "电流2(A)",
+            prop: "electricit2",
+          },
+          {
+            label: "电流3(A)",
+            prop: "electricit3",
+          },
+        ],
+        data: [],
+      },
+      hwTableData: {
+        column: [
+          {
+            label: "位置",
+            prop: "location",
+          },
+          {
+            label: "采样时间",
+            prop: "dtime",
+          },
+          {
+            label: "最低温度(℃)",
+            prop: "mintemp",
+          },
+          {
+            label: "最高温度(℃)",
+            prop: "maxtemp",
+          },
+          {
+            label: "平均温度(℃)",
+            prop: "avgtemp",
+          },
+        ],
+        data: [],
+      },
+      jfTableData: {
+        column: [
+          {
+            label: "位置",
+            prop: "location",
+          },
+          {
+            label: "采样时间",
+            prop: "dtime",
+          },
+          {
+            label: "局放放电量",
+            prop: "dischargeCapacity",
+          },
+          {
+            label: "脉冲个数",
+            prop: "pulseNum",
+          },
+          {
+            label: "放电相位",
+            prop: "DischargePhase",
+          },
+        ],
+        data: [],
+      },
+      samplingDate: "2021-10-11 15:15:30",
+      legendData: [],
+      xAxisData: [],
+      seriesData: [],
+      selectType: "hl",
+    };
+  },
+  created() {
+    // 表格数据
+    this.init();
+    // // 趋势图数据
+    // this.tendencyChartData()
+  },
+  methods: {
+    init() {
+      getLxType(5)
+        .then((response) => {
+          const { code, data, msg } = response;
+          const arr = [];
+          if (code === 200 && data.length !== 0) {
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              arr.push({
+                name: element.zmc,
+                id: element.lxid,
+              });
+            }
+            this.dropdownFirstNmae = arr[0].name;
+            this.dropdownFirstData = arr;
+            this.selectIdFun(data[0].lxid, "1");
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    // 第二个下拉框id数据
+    selectIdFun(id, type) {
+      this.dropdownSecondData.forEach((element) => {
+        element.id = [];
+      });
+      // 默认给被检测设备查询id。表格和echart数据需要
+      getEqType(5, id).then((response) => {
+        const { code, data, msg } = response;
+        if (code === 200 && data.length !== 0) {
+          for (let index = 0; index < data.length; index++) {
+            const element = data[index];
+            if (element.name.indexOf("环流") != -1) {
+              this.dropdownSecondData[0].id.push(parseInt(element.id));
+            } 
+            // else if (element.name.indexOf("电缆沟") != -1) {
+            //   this.dropdownSecondData[1].id.push(parseInt(element.id));
+            // } 
+            else if (element.name.indexOf("局放") != -1) {
+              this.dropdownSecondData[1].id.push(parseInt(element.id));
+            } else if (element.name.indexOf("红外") != -1) {
+              this.dropdownSecondData[2].id.push(parseInt(element.id));
+            }
+          }
+          // 默认用环流查询
+          this.tableTataFun(this.dropdownSecondData[0].id, "hl");
+          this.echartDataFun(this.dropdownSecondData[0].id, "hl", type);
+        }
+      });
+    },
+    // 表格
+    tableTataFun(idArr, type) {
+      this.selectType = type;
+      this.loading = true;
+      let url = cableCircleControllerTable;
+      if (type === "hl") {
+        url = cableCircleControllerTable;
+      } else if (type === "hw") {
+        url = InfraredThermographyControllerTable;
+      } else if (type === "jf") {
+        url = CablePartialDischargeControllerTable;
+      }
+      if (idArr.length !== 0) {
+        url(idArr).then((response) => {
+          const { code, data, msg } = response;
+          if (code === 200 && data.length !== 0) {
+            const dataList = data[0];
+            if (type === "hl") {
+              this.samplingDate = dataList.dtime;
+              this.hlTableData.data = [
+                {
+                  location: "A相",
+                  dtime: dataList.dtime,
+                  electricit1: dataList.a1Value,
+                  electricit2: dataList.a2Value,
+                  electricit3: dataList.a3Value ? dataList.a3Value : "-",
+                },
+                {
+                  location: "B相",
+                  dtime: dataList.dtime,
+                  electricit1: dataList.b1Value,
+                  electricit2: dataList.b2Value,
+                  electricit3: dataList.b3Value ? dataList.b3Value : "-",
+                },
+                {
+                  location: "C相",
+                  dtime: dataList.dtime,
+                  electricit1: dataList.c1Value,
+                  electricit2: dataList.c2Value,
+                  electricit3: dataList.c3Value ? dataList.c3Value : "-",
+                },
+              ];
+            } else if (type === "hw") {
+              this.hwTableData.data = [
+                {
+                  location: "A相",
+                  dtime: dataList.a_capturetime,
+                  mintemp: dataList.a_mintemp,
+                  maxtemp: dataList.a_maxtemp,
+                  avgtemp: dataList.a_avgtemp ? dataList.a_avgtemp : "-",
+                },
+                {
+                  location: "B相",
+                  dtime: dataList.b_capturetime,
+                  mintemp: dataList.b_mintemp,
+                  maxtemp: dataList.b_maxtemp,
+                  avgtemp: dataList.b_avgtemp ? dataList.b_avgtemp : "-",
+                },
+                {
+                  location: "C相",
+                  dtime: dataList.c_capturetime,
+                  mintemp: dataList.c_mintemp,
+                  maxtemp: dataList.c_maxtemp,
+                  avgtemp: dataList.c_avgtemp ? dataList.c_avgtemp : "-",
+                },
+              ];
+            } else if (type === "jf") {
+              this.jfTableData.data = [
+                {
+                  location: "A相",
+                  dtime: dataList.time,
+                  dischargeCapacity: dataList.a_PD,
+                  pulseNum: dataList.a_phase,
+                  DischargePhase: dataList.a_plsnum ? dataList.a_plsnum : "-",
+                },
+                {
+                  location: "B相",
+                  dtime: dataList.time,
+                  dischargeCapacity: dataList.b_PD,
+                  pulseNum: dataList.b_phase,
+                  DischargePhase: dataList.b_plsnum ? dataList.b_plsnum : "-",
+                },
+                {
+                  location: "C相",
+                  dtime: dataList.time,
+                  dischargeCapacity: dataList.c_PD,
+                  pulseNum: dataList.c_phase,
+                  DischargePhase: dataList.c_plsnum ? dataList.c_plsnum : "-",
+                },
+              ];
+            }
+            this.loading = false;
+          } else {
+            this.loading = false;
+            if (type === "hl") {
+              this.hlTableData.data = [];
+            } else if (type === "hw") {
+              this.hwTableData.data = [];
+            } else if (type === "jf") {
+              this.jfTableData.data = [];
+            }
+          }
+        });
+      } else {
+        this.loading = false;
+        if (type === "hl") {
+          this.hlTableData.data = [];
+        } else if (type === "hw") {
+          this.hwTableData.data = [];
+        } else if (type === "jf") {
+          this.jfTableData.data = [];
+        }
+      }
+    },
+    echartDataFun(idArr, type, way) {
+      if (way === "2") {
+        this.tendencyChartChange();
+      }
+      let url = cableCircleControllerLine;
+      if (type === "hl") {
+        url = cableCircleControllerLine;
+      } else if (type === "hw") {
+        url = InfraredThermographyControllerLine;
+      } else if (type === "jf") {
+        url = CablePartialDischargeControllerLine;
+      }
+      if (idArr.length !== 0) {
+        url(idArr).then((response) => {
+          const { code, data, msg } = response;
+          const arr = [];
+          let disposeData = [];
+          if (code === 200 && data.length !== 0) {
+            if (type === "hl") {
+              disposeData = data;
+            } else {
+              disposeData = this.echartDataClearup(data, type);
+            }
+            for (let index = 0; index < disposeData.length; index++) {
+              const element = disposeData[index];
+              this.legendData.push(element.equipment);
+              arr.push({
+                name: element.equipment,
+                data: element.currentVals
+                  ? echartData(element.currentVals)
+                  : [],
+              });
+            }
+            this.seriesData = arr;
+            this.xAxisData = disposeData[0].dtimes;
+          } else {
+            this.msgError(msg);
+          }
+        });
+      } else {
+        this.legendData = [];
+        this.xAxisData = [];
+        this.seriesData = [];
+      }
+    },
+    // 红外、局方echart数据
+    echartDataClearup(arr, type) {
+      const data = arr[0];
+      let equipment = [];
+      if (type === "hw") {
+        equipment = [
+          {
+            equipment: "A相最高温度(℃)",
+            currentVals: data.a_maxtemp,
+            dtimes: data.a_capturetime,
+          },
+          {
+            equipment: "A相最低温度(℃)",
+            currentVals: data.a_mintemp,
+            dtimes: data.a_capturetime,
+          },
+          {
+            equipment: "A相最平均温度(℃)",
+            currentVals: data.a_avgtemp,
+            dtimes: data.a_capturetime,
+          },
+          {
+            equipment: "B相最高温度(℃)",
+            currentVals: data.b_maxtemp,
+            dtimes: data.b_capturetime,
+          },
+          {
+            equipment: "B相最低温度(℃)",
+            currentVals: data.b_mintemp,
+            dtimes: data.b_capturetime,
+          },
+          {
+            equipment: "B相最平均温度(℃)",
+            currentVals: data.b_avgtemp,
+            dtimes: data.b_capturetime,
+          },
+          {
+            equipment: "C相最高温度(℃)",
+            currentVals: data.c_maxtemp,
+            dtimes: data.c_capturetime,
+          },
+          {
+            equipment: "C相最低温度(℃)",
+            currentVals: data.c_mintemp,
+            dtimes: data.c_capturetime,
+          },
+          {
+            equipment: "C相最平均温度(℃)",
+            currentVals: data.c_avgtemp,
+            dtimes: data.c_capturetime,
+          },
+        ];
+      } else if (type === "jf") {
+        equipment = [
+          {
+            equipment: "A相局放放电量(A)",
+            currentVals: data.a_PD,
+            dtimes: data.time,
+          },
+          {
+            equipment: "A脉冲个数",
+            currentVals: data.a_phase,
+            dtimes: data.time,
+          },
+          {
+            equipment: "A相放电相位",
+            currentVals: data.a_avgtemp,
+            dtimes: data.time,
+          },
+          {
+            equipment: "B相局放放电量(A)",
+            currentVals: data.b_PD,
+            dtimes: data.time,
+          },
+          {
+            equipment: "B脉冲个数",
+            currentVals: data.b_phase,
+            dtimes: data.time,
+          },
+          {
+            equipment: "B相放电相位",
+            currentVals: data.b_avgtemp,
+            dtimes: data.time,
+          },
+          {
+            equipment: "C相局放放电量(A)",
+            currentVals: data.c_PD,
+            dtimes: data.time,
+          },
+          {
+            equipment: "C脉冲个数",
+            currentVals: data.c_phase,
+            dtimes: data.time,
+          },
+          {
+            equipment: "C相放电相位",
+            currentVals: data.c_avgtemp,
+            dtimes: data.time,
+          },
+        ];
+      }
+
+      return equipment;
+    },
+    handleCommand(command) {
+      this.selectIdFun(this.dropdownFirstData[command].id, "2");
+      this.dropdownFirstNmae = this.dropdownFirstData[command].name;
+    },
+    handleCommandSecond(command) {
+      const list = this.dropdownSecondData[command];
+      this.selectType = list.type;
+      this.dropdownSecondNmae = list.name;
+      this.tableTataFun(list.id, list.type);
+      this.echartDataFun(list.id, list.type, "2"); //后面的2，是为了区分首次加载还是选择加载
+      // if (list.type !== "dlg"&&list.id.length!==0) {
+
+      // } else {
+      //   this.$alert("正在开发中...", "系统提示", {
+      //     confirmButtonText: "确定",
+      //     callback: (action) => {},
+      //   });
+      //   return;
+      // }
+    },
+    // 点击开关
+    changeStatus: function ($event) {
+      this.pageCardTitle=this.dropdownFirstNmae +'-'+ this.dropdownSecondNmae
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    tendencyChartChange(type) {
+      this.$emit(
+        "dataDispose",
+        this.legendData,
+        this.xAxisData,
+        this.seriesData,
+        this.dropdownFirstNmae + this.dropdownSecondNmae
+      );
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+.pageCardTitle {
+  background-image: none;
+}
+.pageCardTitle,
+.pageCard .cardTitle {
+  height: 45px;
+  line-height: 45px;
+}
+.pageCard {
+  // min-height: 256px;
+}
+.tabDropdown {
+  width: 100%;
+  height: 45px;
+  line-height: 45px;
+  overflow: hidden;
+}
+.tabDropdownBox {
+  display: flex;
+  flex-flow: row;
+  align-content: center;
+  .tabDropdownSelect {
+    margin-right: 15px;
+  }
+}
+/deep/.el-scrollbar__wrap {
+  // margin: 0;
+  overflow: hidden;
+  margin-bottom: 0;
+}
+/deep/ .el-table__empty-block {
+  padding: 20px 0 !important;
+  box-sizing: border-box;
+}
+</style>

src/view/home/particularsDialog.vue

@@ -0,0 +1,326 @@
+<template>
+  <div>
+    <div class="app-container">
+      <div class="searh">
+        <el-form ref="queryParams" :model="queryParams">
+          <el-row>
+            <el-col :span="6">
+              <el-form-item label="报警时间" label-width="120px" prop="warningTime">
+                <el-date-picker
+                 size="small"
+                  v-model="queryParams.warningTime"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                >
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="6">
+              <el-form-item style="margin-left: 120px">
+                <div class="searhButtons">
+                  <el-button
+                    size="mini"
+                    icon="el-icon-search"
+                    type="primary"
+                    @click="onResearchClick()"
+                    >查询</el-button
+                  >
+                  <el-button
+                    size="mini"
+                    icon="el-icon-refresh"
+                    @click="resetSearchForm()"
+                    style="margin-left: 20px"
+                    >重置</el-button
+                  >
+                </div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="dataTable">
+        <avue-crud
+          style="margin-top: 10px"
+          :table-loading="loading"
+          :option="option"
+          :data="tableData"
+          :page.sync="tablePage"
+          @size-change="sizeChange"
+          @current-change="currentChange"
+          @selection-change="handleSelectionChange"
+        >
+          <!-- 左边按钮 -->
+          <!-- :disabled="single" -->
+          <template slot="menuLeft">
+            <el-button
+              type="primary"
+              icon="el-icon-notebook-2"
+              size="mini"
+              class="operationBut"
+              @click.stop="batchProcessing()"
+              >批量处理</el-button
+            >
+            <el-button
+              type="primary"
+              icon="el-icon-delete"
+              size="mini"
+              class="operationBut"
+              @click.stop="allRemove()"
+              >一键清除</el-button
+            >
+          </template>
+          <template slot-scope="scope" slot="menu">
+            <el-button
+              type="text"
+              icon="el-icon-edit"
+              size="small"
+              @click.stop="batchProcessing(scope.row)"
+              >处理</el-button
+            >
+          </template>
+        </avue-crud>
+      </div>
+      <!-- 批量处理警告 -->
+    </div>
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogOpen"
+      width="40%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="处理结果" prop="process">
+              <el-input v-model="form.process"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">处 理</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {queryAlarmDetail,dealwarning} from "@/api/home/home";
+export default {
+  name: "userManagement",
+  props: {
+    data: Object
+  },
+  data() {
+    return {
+      queryParams: {
+        jcType: "",
+        gjType: "",
+        warningTime: "",
+      },
+      form: {
+        process: "",
+        id : "",
+        state : "",
+      },
+      // 是否显示弹出层
+      open: false,
+      // 选中的用户id
+      selectIds: [],
+      selectStatus: [],
+      single: true,
+      tablePage: {
+        limit: 10,
+        total: 0,
+        page: 1,
+      },
+      queryData:{
+        state:"1",
+        startTime:"",
+        endTime:"",
+        eqmId:"",
+        page: 1,
+        limit: 10,
+      },
+      // 遮罩层
+      loading: false,
+      // 弹出层标题
+      dialogTitle: "告警单批处理",
+      jcOptions: [],
+      gjOptions: [],
+      // 是否显示弹出层
+      dialogOpen: false,
+      rules: {
+        cljg: [
+          { required: true, message: "处理结果不能为空", trigger: "blur" },
+        ],
+      },
+      option: {
+        title: "",
+        border: true,
+        emptyText: "暂无数据!",
+        align: "center",
+        menuAlign: "center",
+        menuWidth: 200,
+        menuTitle: "操作",
+        menuType: "text",
+        addBtn: false,
+        delBtn: false,
+        editBtn: false,
+        refreshBtn: false,
+        selection: false,
+        // multiple: false,
+        column: [
+          {
+            label: "监测设备",
+            prop: "deviceName",
+          },
+          {
+            label: "阈值",
+            prop: "threadval",
+          },
+          {
+            label: "当前值",
+            prop: "warningValue",
+          },
+          {
+            label: "告警信息",
+            prop: "warnDesc",
+          },
+          {
+            label: "报警时间",
+            prop: "warnTime",
+          },
+        ],
+      },
+      toDept: "1",
+      // 表格选中的数据
+      selectData: {},
+      tableData: [],
+    };
+  },
+  watch:{
+    data:function(value){
+      this.tablePage.total=value.total
+      this.tableData=value.records
+      this.queryData.eqmId = value.records[0].eqmId
+    }
+  },
+  created() {},
+  methods: {
+    onResearchClick(){
+      this.queryData.startTime = this.queryParams.warningTime[0]
+      this.queryData.endTime = this.queryParams.warningTime[1]
+      this.getList()
+    },
+    getList(){
+      queryAlarmDetail(this.queryData).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.tableData = data.records
+          this.tablePage.total = data.total
+        } else {
+          this.msgError(msg);
+        }
+      })
+    },
+    // 重置条件搜索表单
+    resetSearchForm() {
+      this.$nextTick(() => {
+        if (this.$refs["queryParams"] !== undefined) {
+          this.$refs["queryParams"].resetFields();
+        }
+      });
+    },
+    // 批量处理
+    batchProcessing(row) {
+      this.dialogOpen = true;
+      this.form.id = row.id
+      this.form.state = row.state
+    },
+    // 一键清除
+    allRemove() {
+      this.$confirm("确定要处理当前所有的告警吗?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          dealwarning(this.form).then((response) => {
+            const { code, data, msg } = response;
+            this.loading = false;
+            if (code === 200) {
+              this.dialogOpen = false
+              this.$message.success('处理成功！')
+              this.getList()
+            } else {
+              this.msgError(msg);
+            }
+          })
+        })
+        .catch(function () {});
+    },
+    handleSelectionChange(selection) {
+      this.selectIds = selection.map((item) => item.noticeId);
+      this.single = selection.length != 1;
+    },
+    /** 页码大小改变操作 */
+    sizeChange(val) {
+      this.tablePage.limit = 10;
+      this.tablePage.page = val;
+      this.getList();
+    },
+    /** 翻页操作 */
+    currentChange(val) {
+      // this.tablePage.page = val;
+      this.queryData.page = val
+      this.getList();
+    },
+    // 批量处理
+    submitForm() {
+      dealwarning(this.form).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.dialogOpen = false
+          this.$message.success('处理成功！')
+          this.getList()
+        } else {
+          this.msgError(msg);
+        }
+      })
+    },
+    cancel() {
+      this.dialogOpen = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.dataTable {
+  .operationBut {
+    margin-right: 10px !important;
+  }
+}
+.avue-crud__right {
+  display: none;
+}
+.el-dialog__body{
+padding: 0px 20px;
+}
+.el-select{
+  width: 100%;
+}
+.el-form {
+  margin-top: 20px;
+}
+.el-table__empty-block {
+  padding: 50px 0;
+  box-sizing: border-box;
+}
+</style>

src/view/home/warnMessage/index.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="login">
+    <div class="pageCard backgroundTitle" id="warnMessage">
+      <div class="cardTitle">
+        <div>
+          <span class="arrows1">&gt;</span><span class="arrows2">&gt;</span>
+          <span class="arrows3">&gt;</span> 告警/故障信息
+          <span class="arrows3">&lt;</span><span class="arrows2">&lt;</span>
+          <span class="arrows1">&lt;</span>
+        </div>
+        <div class="operation">
+          <span @click="handleClear"
+            ><i class="el-icon-tickets" style="margin-right: 5px"></i
+            >查看全部</span
+          >
+        </div>
+      </div>
+      <div class="cardContent">
+        <el-table
+          ref="restauranttable"
+          :data="tableData"
+          border
+          class="tableHi"
+        >
+          <el-table-column align="center" prop="warnTime" label="报警时间">
+          </el-table-column>
+          <el-table-column align="center" prop="deviceName" label="设备名称">
+          </el-table-column>
+          <el-table-column align="center" prop="warnDesc" label="告警信息">
+            <template slot-scope="scope">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                :content="scope.row.warnDesc"
+                placement="top"
+              >
+                <span> {{ scope.row.warnDesc }}</span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="warningCount" label="告警次数">
+          </el-table-column>
+          <el-table-column align="center" prop="warningValue" label="当前值">
+          </el-table-column>
+          <el-table-column align="center" prop="threadval" label="告警阈值">
+          </el-table-column>
+          <el-table-column align="center" label="操作" width="120">
+            <template slot-scope="scope">
+              <el-button
+                @click.native.prevent="particulars(scope.$index, scope.row)"
+                type="text"
+                size="small"
+              >
+                查看详情
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 阈值设置 -->
+    <!-- <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogOpen"
+      width="40%"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="相位" prop="xw">
+              <el-select v-model="form.xw" placeholder="请选择相位">
+                <el-option
+                  v-for="dict in phasePosition"
+                  :key="dict.dictValue"
+                  :label="dict.dictLabel"
+                  :value="dict.dictValue"
+                ></el-option>
+              </el-select> </el-form-item
+          ></el-col>
+          <el-col :span="12"
+            ><el-form-item label="阈值" prop="fz">
+              <el-input
+                type="number"
+                v-model="form.fz"
+              ></el-input> </el-form-item
+          ></el-col>
+        </el-row>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">保 存</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog> -->
+    <!-- 清除 -->
+    <el-dialog
+      :title="warnDialogTitle"
+      :visible.sync="warnDdialogOpen"
+      width="60%"
+      append-to-body
+      :fullscreen="fullscreen"
+      :close-on-click-modal="false"
+    >
+      <clearDialog v-if="dialogType == '1'" :tableData="dataAll"> </clearDialog>
+      <particularsDialog v-else :data="detailData"> </particularsDialog>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { queryAlarm, queryAlarmDetail } from "@/api/home/home";
+// 左边
+import clamp from "@/assets/page_left/clamp.png";
+// 引入table组件
+import clearDialog from "../clearDialog";
+import particularsDialog from "../particularsDialog";
+export default {
+  name: "Login",
+  components: {
+    clearDialog,
+    particularsDialog,
+  },
+  data() {
+    return {
+      fullscreen: true,
+      dialogType: "1",
+      pageCardTitle: "告警/故障信息",
+      warnDialogTitle: "告警详情",
+      warnDdialogOpen: false,
+      phasePosition: [],
+      form: {
+        xw: "",
+        fz: "",
+      },
+      rules: {
+        xw: [{ required: true, message: "相位不能为空", trigger: "blur" }],
+        fz: [{ required: true, message: "阈值不能为空", trigger: "blur" }],
+      },
+      loading: false,
+      // 左边
+      clamp: clamp,
+      //   卡片显示与否
+      tabPosition: "bottom",
+      //   开关状态
+      //   标题内容是否显示
+      oilChromatographyTitle: "",
+      tableData: [],
+      dataAll: {},
+      samplingDate: "2021-10-11 15:15:30",
+      progressbarLen1: 0,
+      detailData: {},
+      queryData: {
+        state: "1",
+        startTime: "",
+        endTime: "",
+        eqmId: "",
+        page: 1,
+        limit: 10,
+      },
+    };
+  },
+  created() {
+    this.queryAlarm();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.tableData.length > 3) {
+        //判断表格的长度
+        this.a = setInterval(() => {
+          //一直调用
+          this.restaurantTableMove(); //调用方法
+        }, 50);
+      }
+    });
+  },
+  methods: {
+    queryAlarm() {
+      queryAlarm(this.queryData).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.tableData = data;
+        } else {
+          this.msgError(msg);
+        }
+      });
+    },
+    restaurantTableMove() {
+      if (
+        this.$refs.restauranttable &&
+        this.$refs.restauranttable.bodyWrapper
+      ) {
+        var len = this.$refs.restauranttable.bodyWrapper.scrollHeight / 2 + 6; //进度条最大高度，可以加快滚动速度
+        this.progressbarLen1 += 1;
+        this.$refs.restauranttable.bodyWrapper.scrollTop = this.progressbarLen1;
+        if (this.progressbarLen1 > len) {
+          this.progressbarLen1 = 0;
+          this.$refs.restauranttable.bodyWrapper.scrollTop = 0;
+        }
+      }
+    },
+    particulars(index, row) {
+      this.queryData.eqmId = row.eqmId;
+      queryAlarmDetail(this.queryData).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.detailData = data;
+        } else {
+          this.msgError(msg);
+        }
+      });
+      // rows.splice(index, 1);
+      this.warnDdialogOpen = true;
+      this.dialogType = "2";
+    },
+
+    // 清除操作
+    handleClear() {
+      let params = {
+        state: "1",
+        startTime: "",
+        endTime: "",
+        eqmId: "",
+        page: 1,
+        limit: 10,
+      };
+      queryAlarmDetail(params).then((response) => {
+        const { code, data, msg } = response;
+        this.loading = false;
+        if (code === 200) {
+          this.dataAll = data;
+        } else {
+          this.msgError(msg);
+        }
+      });
+      this.warnDdialogOpen = true;
+      this.dialogType = "1";
+      // this.warnDialogTitle=""
+    },
+    // 点击开关
+    tendencyChartChange(type) {
+      let unit = "mA";
+      let legendData = ["铁芯泄露电流", "夹件泄漏电流"];
+      let xAxisData = ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06"];
+      let seriesData = [
+        { name: "铁芯泄露电流", data: [10, 25, 2, 100, 59, 78, 36] },
+      ];
+      this.$emit("dataDispose", unit, legendData, xAxisData, seriesData);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "~@/assets/stylesheet/card";
+.warnPageCardTitle {
+  color: #ff1b1bff;
+  background: #ff1b1b33 !important;
+  border: 1px solid #ff1b1bff;
+  backdrop-filter: blur(10px);
+  box-shadow: inset 0px 2px 9.77px 0px #eb1414b2;
+}
+.pageCard {
+  min-height: 250px;
+}
+.pageCard .cardTitle {
+  color: #fff;
+  .unfoldCloseIcon {
+    color: #fff;
+  }
+}
+#warnMessage .cardTitle {
+  border-bottom: 1px dashed #fff;
+  padding: 0 !important;
+}
+#warnMessage .cardContent {
+  padding: 0px !important;
+  box-sizing: border-box;
+}
+.tableHi {
+  width: 100%;
+  height: 200px;
+}
+/* 警告标题箭头 */
+.arrows3 {
+  color: #fff;
+}
+.arrows2 {
+  color: rgba(256, 256, 256, 0.5);
+}
+.arrows1 {
+  color: rgba(256, 256, 256, 0.15);
+}
+.operation {
+  font-size: 14px;
+  span {
+    cursor: pointer;
+  }
+  i {
+    margin-left: 10px;
+  }
+}
+.backgroundTitle {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  margin-bottom: 0px;
+}
+#warnMessage {
+  background: #ff1b1b33;
+  border: 1px solid #ff1b1bff;
+  backdrop-filter: blur(10px);
+  box-shadow: inset 0px 2px 9.77px 0px #eb1414b2;
+  padding: 0 30px;
+  box-sizing: border-box;
+  /* 修改表格默认样式 */
+  /deep/ .el-table__fixed-right-patch {
+    background: none;
+    border: none !important;
+  }
+  /deep/ .cardContent .el-table,
+  /deep/ .cardContent .el-table thead,
+  /deep/ .cardContent .el-table tr,
+  /deep/ .cardContent .el-table td.el-table__cell,
+  /deep/ .el-table th.el-table__cell.is-leaf {
+    color: #fff !important;
+    background: transparent !important;
+    border: none !important;
+  }
+  /deep/ .el-table::before,
+  /deep/ .el-table--border::after,
+  /deep/ .el-table--group::after,
+  /deep/ .el-table__fixed-right::before,
+  .el-table__fixed::before {
+    display: none;
+  }
+  /deep/ .cardContent .el-table td.el-table__cell,
+  /deep/ .cardContent .el-table .el-table__cell {
+    padding: 5px 0;
+  }
+  /deep/ .el-table--scrollable-y .el-table__body-wrapper {
+    overflow-y: hidden;
+  }
+  /deep/ .el-table--border th.el-table__cell.gutter:last-of-type {
+    border-width: 0px !important;
+    background: none;
+  }
+}
+@media screen and (max-width: 1440px) {
+  .tableHi {
+    height: 160px;
+  }
+}
+</style>

src/view/home/windingTemperature/index.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="login">
+    <!-- 1#主变 油色谱 -->
+    <!-- 标题和内容 -->
+    <div class="pageCardTitle" v-show="hideSwitchShow">
+      {{ pageCardTitle }}
+      <div class="iconSvg closeSvg" @click="changeStatus(true)">
+        <svg-icon slot="prefix" icon-class="close" className="svg" />
+      </div>
+    </div>
+    <div
+      class="pageCard backgroundTitle"
+      :style="'background-image:url(' + clamp + ');'"
+      v-show="cardShow"
+    >
+      <!-- tendencyChart文字标题 -->
+      <div class="tendencyChartText" @click="tendencyChartChange()">趋势图</div>
+      <!-- 标题和内容 -->
+      <div class="cardTitle">
+        {{ pageCardTitle }}
+        <div class="iconSvg" @click="changeStatus(false)">
+          <svg-icon slot="prefix" icon-class="open" className="svg" />
+        </div>
+      </div>
+      <div class="cardContent">
+        <Tablemodule
+          :table-loading="loading"
+          :option="tableData.column"
+          :data="tableData.data"
+        ></Tablemodule>
+        <div class="cardTab">
+          <el-tabs :tab-position="tabPosition" @tab-click="handleChangeChart">
+            <el-tab-pane label="1#"></el-tab-pane>
+            <el-tab-pane label="2#"></el-tab-pane>
+            <el-tab-pane label="3#"></el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { oilChromaControllerTable,oilChromaControllerLine } from "@/api/home/home";
+// 左边
+import clamp from "@/assets/page_left/clamp.png";
+// 引入table组件
+import Tablemodule from "@/components/Tablemodule/index";
+export default {
+  name: "Login",
+  components: {
+    Tablemodule,
+  },
+  data() {
+    return {
+      loading: false,
+      // 左边
+      clamp: clamp,
+      //   卡片显示与否
+      cardShow: true,
+      tabPosition: "bottom",
+      //   开关状态
+      switchValue: true,
+      //   标题内容是否显示
+      hideSwitchShow: false,
+      tendencyChartTitle: "1#主变  绕阻测温",
+      pageCardTitle: "1#主变  绕阻测温",
+      tableData: {
+        column: [
+          {
+            label: "相位",
+            prop: "nodeCode",
+          },
+          {
+            label: "温度",
+            prop: "nodeCode",
+          },
+        ],
+        data: [],
+      },
+      samplingDate: "",
+      egendData:[],
+      xAxisData:[],
+      seriesData:[]
+    };
+  },
+ created() {
+    // 表格数据
+    // this.tableDatas()
+    // // 趋势图数据
+    // this.tendencyChartData()
+  },
+  methods: {
+    tableDatas() {
+      oilChromaControllerTable('237')
+        .then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200) {
+            this.data = data.records;
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    tendencyChartData() {
+      oilChromaControllerLine('237')
+        .then((response) => {
+          const { code, data, msg } = response;
+          this.loading = false;
+          if (code === 200) {
+            for (let index = 0; index < data.length; index++) {
+              const element = data[index];
+              this.legendData.push(element.gas)
+              this.seriesData.push({
+                name:element.gas,
+                data:element.currentVals
+              })
+            }
+            this.xAxisData=data[0].dtimes
+          } else {
+            this.msgError(msg);
+          }
+        })
+        .catch((err) => {
+          this.msgError(err.msg);
+        });
+    },
+    // 点击标签页
+    handleChangeChart(tab) {
+      this.tendencyChartTitle = tab.label + "主变 绕阻测温";
+      this.pageCardTitle= tab.label + "主变 绕阻测温";
+      this.tendencyChartChange()
+    },
+    // 点击开关
+    changeStatus: function ($event) {
+      if (!$event) {
+        this.cardShow = false;
+        this.hideSwitchShow = true;
+        this.switchValue = false;
+      } else {
+        this.cardShow = true;
+        this.hideSwitchShow = false;
+        this.switchValue = true;
+      }
+    },
+    tendencyChartChange(type) {
+      this.$emit(
+        "dataDispose",
+        [],
+        [],
+        [],
+        this.tendencyChartTitle
+      );
+      // let legendData = ["A项 温度"];
+      // let xAxisData = ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06"];
+      // let seriesData = [
+      //   { name: "A项 温度", data: [10, 25, 2, 100, 59, 78, 36] },
+      // ];
+      // this.$emit("dataDispose", unit, this.legendData, this.xAxisData, this.seriesData,this.tendencyChartTitle);
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.backgroundTitle{
+  margin-bottom: 0px!important
+}
+.backgroundTitle{
+  margin-bottom: 0!important;
+}
+@import "~@/assets/stylesheet/card";
+// 开光样式
+/deep/ .el-table__empty-block {
+  padding: 30px 0!important;
+  box-sizing: border-box;
+}
+@media screen and (max-width: 1440px){
+  .pageCard .cardContent{
+    padding-bottom:15px
+  }
+}
+</style>

src/view/login.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="login">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">用户登陆</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+          show-password
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin:0px 0px 25px 0px;"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width:100%;"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2018-2019 ruoyi.vip All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from "js-cookie";
+import { encrypt, decrypt } from "@/utils/jsencrypt";
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      cookiePassword: "",
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "用户名不能为空" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "密码不能为空" },
+        ],
+      },
+      loading: false,
+      redirect: undefined,
+    };
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    Cookies.remove("Admin-Token");
+    this.getCookie();
+  },
+  methods: {
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = decrypt(Cookies.get("password"));
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm = {
+        username: !username ? this.loginForm.username : username,
+        password: !password ? this.loginForm.password : password,
+        rememberMe: !rememberMe ? false : Boolean(rememberMe),
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        //  if (this.loginForm.password !== this.cookiePass) {
+        //   this.loginForm.password = encrypt(user.password)
+        // }
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
+          }
+          let user = {
+            username: this.loginForm.username,
+            rememberMe: this.loginForm.rememberMe,
+            password: encrypt(this.loginForm.password),
+          };
+          this.$store
+            .dispatch("Login", user)
+            .then((res) => {
+              sessionStorage.setItem("userName", this.loginForm.username);
+              sessionStorage.setItem("password", user.password);
+              console.log("登录信息==========", this.loginForm);
+              this.$router.push({ path: this.redirect || "/" });
+              this.loading = false;
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+        } else {
+          return this.$router.go(0);
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-image: url("../assets/loginLeft.png");
+  background-color: #1c92a0;
+  background-size: cover;
+  -webkit-background-size: cover;
+  -o-background-size: cover;
+  background-position: center 0;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  margin-left: 50%;
+  padding: 25px 25px 5px 25px;
+  text-align: left;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+</style>

src/view/redirect.vue

@@ -0,0 +1,12 @@
+<script>
+export default {
+  created() {
+    const { params, query } = this.$route
+    const { path } = params
+    this.$router.replace({ path: '/' + path, query })
+  },
+  render: function(h) {
+    return h() // avoid warning message
+  }
+}
+</script>

vue.config.js

@@ -0,0 +1,155 @@
+"use strict";
+const path = require("path");
+// const defaultSettings = require('./src/settings.js')
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
+
+const name = "管理系统"; // page title
+
+// If your port is set to 80,
+// use administrator privileges to execute the command line.
+// For example, Mac: sudo npm run
+// You can change the port by the following method:
+// port = 9527 npm run dev OR npm run dev --port = 9527
+const port = process.env.port || process.env.npm_config_port || 9527; // dev port
+console.log(process.env.VUE_APP_BASE_API);
+// vue.config.js 配置说明
+//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
+// 这里只列一部分，具体配置参考文档
+module.exports = {
+  // 部署生产环境和开发环境下的URL。
+  // 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
+  // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+  // publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
+  publicPath: process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : "./", //   部署应用包时的基本 URL
+  // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+  outputDir: "dist",
+  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
+  assetsDir: "static",
+  // 是否开启eslint保存检测，有效值：ture | false | 'error'
+  lintOnSave: process.env.NODE_ENV === "development",
+  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
+  productionSourceMap: false,
+  // webpack-dev-server 相关配置
+  devServer: {
+    host: "0.0.0.0",
+    overlay: {
+      warnings: false,
+      errors: false,
+    },
+    port: port,
+    proxy: {
+      "/sysLoginRemoteController/login": {
+        //target: `http://127.0.0.1:8081/`,
+        target: `http://192.168.1.190:88/`,
+        changeOrigin: true,
+        pathRewrite: {
+          ["^/api"]: "",
+        },
+        logLevel: "debug",
+      },
+      [process.env.VUE_APP_BASE_API]: {
+        // target: `http://192.168.135.242:8082/`,
+        // target: `http://192.168.145.147:8082/`,
+        target: `http://192.168.1.190:88/`,
+        //target: `http://127.0.0.1:8082/`,
+        changeOrigin: true,
+        pathRewrite: {
+          ["^/api"]: "/prod-api",
+        },
+        // pathRewrite: {
+        //   ["^" + process.env.VUE_APP_BASE_API]: "",
+        // },
+        logLevel: "debug",
+      },
+    },
+    disableHostCheck: true,
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        "@": resolve("src"),
+      },
+    },
+  },
+  chainWebpack(config) {
+    config.plugins.delete("preload"); // TODO: need test
+    config.plugins.delete("prefetch"); // TODO: need test
+    config.module.rules.delete("svg");
+    // set svg-sprite-loader
+    config.module
+      .rule("svg")
+      .exclude.add(resolve("src/assets/icons"))
+      .end();
+    config.module
+      .rule("icons")
+      .test(/\.svg$/)
+      .include.add(resolve("src/assets/icons"))
+      .end()
+      .use("svg-sprite-loader")
+      .loader("svg-sprite-loader")
+      .options({
+        symbolId: "icon-[name]",
+      })
+      .end();
+
+    // set preserveWhitespace
+    config.module
+      .rule("vue")
+      .use("vue-loader")
+      .loader("vue-loader")
+      .tap((options) => {
+        options.compilerOptions.preserveWhitespace = true;
+        return options;
+      })
+      .end();
+
+    config
+      // https://webpack.js.org/configuration/devtool/#development
+      .when(process.env.NODE_ENV === "development", (config) =>
+        config.devtool("cheap-source-map")
+      );
+
+    config.when(process.env.NODE_ENV !== "development", (config) => {
+      config
+        .plugin("ScriptExtHtmlWebpackPlugin")
+        .after("html")
+        .use("script-ext-html-webpack-plugin", [
+          {
+            // `runtime` must same as runtimeChunk name. default is `runtime`
+            inline: /runtime\..*\.js$/,
+          },
+        ])
+        .end();
+      config.optimization.splitChunks({
+        chunks: "all",
+        cacheGroups: {
+          libs: {
+            name: "chunk-libs",
+            test: /[\\/]node_modules[\\/]/,
+            priority: 10,
+            chunks: "initial", // only package third parties that are initially dependent
+          },
+          elementUI: {
+            name: "chunk-elementUI", // split elementUI into a single package
+            priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
+            test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+          },
+          commons: {
+            name: "chunk-commons",
+            test: resolve("src/components"), // can customize your rules
+            minChunks: 3, //  minimum common number
+            priority: 5,
+            reuseExistingChunk: true,
+          },
+        },
+      });
+      config.optimization.runtimeChunk("single");
+    });
+  },
+};