首頁 探索 說明
註冊 登入
xsh1997
/
hyyfScreen
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

大更新

xsh 2 年之前
父節點
9f5d7de1b8
當前提交
33b6ffbe4d
共有 55 個文件被更改，包括 3215 次插入 和 654 次删除
分割檢視 顯示文件統計
  1. 27 0
      package-lock.json
  2. 1 0
      package.json
  3. 37 28
      public/static/dahua/index.html
  4. 二進制
      public/static/jinm/image/siagn.png
  5. 67 68
      public/static/jinm/index.html
  6. 20 1
      src/App.vue
  7. 二進制
      src/assets/104.png
  8. 二進制
      src/assets/108.png
  9. 二進制
      src/assets/111.png
  10. 二進制
      src/assets/16433_Pig0001_iSpt.png
  11. 二進制
      src/assets/222.png
  12. 二進制
      src/assets/333.png
  13. 二進制
      src/assets/444.png
  14. 二進制
      src/assets/bottomBanner.png
  15. 二進制
      src/assets/fourActive.png
  16. 二進制
      src/assets/fourActiveNo.png
  17. 二進制
      src/assets/full.png
  18. 二進制
      src/assets/left-bg.e8acb7f0.png
  19. 二進制
      src/assets/noActive.png
  20. 二進制
      src/assets/non.png
  21. 二進制
      src/assets/on.png
  22. 二進制
      src/assets/on1.png
  23. 二進制
      src/assets/oneActive.png
  24. 二進制
      src/assets/oneActiveNo.png
  25. 二進制
      src/assets/shitu.png
  26. 二進制
      src/assets/top_title.png
  27. 二進制
      src/assets/u1.png
  28. 二進制
      src/assets/video.png
  29. 二進制
      src/assets/xuan.png
  30. 40 0
      src/components/ScaleBox.vue
  31. 68 0
      src/components/TimeButton.vue
  32. 3 2
      src/main.js
  33. 9 0
      src/router/ChildrenRoutes.js
  34. 16 0
      src/utils/api.js
  35. 21 0
      src/utils/index.js
  36. 89 157
      src/views/Alarm/Alarm.vue
  37. 82 28
      src/views/BioSafety/BioSafety.vue
  38. 4 5
      src/views/BioSafety/chart/ChartBar.vue
  39. 1239 0
      src/views/Crew/Crew.vue
  40. 394 0
      src/views/Crew/chart/ChartJczl.vue
  41. 186 0
      src/views/Crew/chart/ChartLsjc.vue
  42. 66 0
      src/views/Crew/chart/TimeLine.vue
  43. 5 2
      src/views/Environment/Environment.vue
  44. 19 7
      src/views/Home/Home.vue
  45. 2 2
      src/views/MainLayout.vue
  46. 594 250
      src/views/Monit/Monit.vue
  47. 16 2
      src/views/Production/Production.vue
  48. 15 8
      src/views/Production/board/ChartAmountLine.vue
  49. 12 10
      src/views/Production/board/ChartAmountPie.vue
  50. 72 41
      src/views/Production/board/ChartSales.vue
  51. 71 11
      src/views/Zoology/Zoology.vue
  52. 4 0
      src/views/Zoology/charts/ChartLine.vue
  53. 20 16
      src/views/Zoology/charts/ChartLineAnd.vue
  54. 2 2
      src/views/Zoology/leftTop/SwiperContent.vue
  55. 14 14
      vue.config.js

+ 27 - 0
package-lock.json
查看文件 

@@ -17,6 +17,7 @@
 
         "vue": "^2.6.11",
 
         "vue-awesome-swiper": "^3.1.3",
 
         "vue-router": "^3.2.0",
 
+        "vue-seamless-scroll": "^1.1.23",
 
         "vuex": "^3.4.0"
 
       },
 
       "devDependencies": {
 
@@ -4715,6 +4716,11 @@
 
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
 
       "dev": true
 
     },
 
+    "node_modules/comutils": {
 
+      "version": "1.1.19",
 
+      "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
 
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
 
+    },
 
     "node_modules/concat-map": {
 
       "version": "0.0.1",
 
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
 
@@ -14892,6 +14898,14 @@
 
       "resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-3.5.2.tgz?cache=0&sync_timestamp=1634663514839&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.2.tgz",
 
       "integrity": "sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw="
 
     },
 
+    "node_modules/vue-seamless-scroll": {
 
+      "version": "1.1.23",
 
+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
 
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
 
+      "dependencies": {
 
+        "comutils": "^1.1.9"
 
+      }
 
+    },
 
     "node_modules/vue-style-loader": {
 
       "version": "4.1.3",
 
       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",
 
@@ -19686,6 +19700,11 @@
 
         }
 
       }
 
     },
 
+    "comutils": {
 
+      "version": "1.1.19",
 
+      "resolved": "https://registry.npmmirror.com/comutils/-/comutils-1.1.19.tgz",
 
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
 
+    },
 
     "concat-map": {
 
       "version": "0.0.1",
 
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
 
@@ -27904,6 +27923,14 @@
 
       "resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-3.5.2.tgz?cache=0&sync_timestamp=1634663514839&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.2.tgz",
 
       "integrity": "sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw="
 
     },
 
+    "vue-seamless-scroll": {
 
+      "version": "1.1.23",
 
+      "resolved": "https://registry.npmmirror.com/vue-seamless-scroll/-/vue-seamless-scroll-1.1.23.tgz",
 
+      "integrity": "sha512-HBjUub8WwsKJzbFCrwKPDrZn4e+SSbkKgwWtjKtfLwesiFGwSsVxP44/Z6d3kpXy94qIFOiflJH6l0/9pj7SGA==",
 
+      "requires": {
 
+        "comutils": "^1.1.9"
 
+      }
 
+    },
 
     "vue-style-loader": {
 
       "version": "4.1.3",
 
       "resolved": "https://registry.nlark.com/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

+ 1 - 0
package.json
查看文件 

@@ -17,6 +17,7 @@
 
     "vue": "^2.6.11",
 
     "vue-awesome-swiper": "^3.1.3",
 
     "vue-router": "^3.2.0",
 
+    "vue-seamless-scroll": "^1.1.23",
 
     "vuex": "^3.4.0"
 
   },
 
   "devDependencies": {

+ 37 - 28
public/static/dahua/index.html
查看文件 

@@ -1,35 +1,44 @@
 
+<!--
 
+ * @Author: your name
 
+ * @Date: 2021-12-07 09:45:10
 
+ * @LastEditTime: 2021-12-23 08:51:21
 
+ * @LastEditors: your name
 
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 
+ * @FilePath: \hyyfClient\public\static\dahua\index.html
 
+-->
 
 <!DOCTYPE html>
 
 <html lang="en">
 
-<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">
 
+  <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" />
 
     <title>Document</title>
 
-    <link rel="stylesheet" href="./static/WSPlayer/player.css">
 
+    <link rel="stylesheet" href="./static/WSPlayer/player.css" />
 
     <script src="./static/jquery-3.6.0.min.js"></script>
 
     <script src="./static/WSPlayer/PlayerControl.js"></script>
 
-</head>
 
-<body style="margin: 0; width: 100%; height: 100%">
 
+  </head>
 
+  <body style="margin: 0; width: 100%; height: 100%">
 
     <div id="ws-record-player" style="width: 100%; height: 600px;"></div>
 
-</body>
 
-<script type="module">
 
-  import WSPlayer from "./src/WSPlayer/WSPlayer.js";
 
-  let recordPlayer = new WSPlayer({
 
-    el: 'ws-record-player', // 必传
 
-    type: 'record', // real | record
 
-    serverIp: '36.26.62.70',
 
-    num: 1,
 
-    showControl: true,
 
-  })
 
-  let url = location.href;
 
-  let rtsps = url.split('?')[1];
 
-  let token = url.split('?')[2];
 
-  let rtsp = rtsps + '?' + token;
 
-  console.log(rtsp)
 
-  recordPlayer.playRecord({
 
-    rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址，将会按照顺序在播放器中播放，最多播放四个
 
-    decodeMode: 'canvas', // 解码方式， video|canvas 可以不传，自动识别，h264使用video播放，265使用canvas播放
 
-    // wsURL: '' // 选择传递，默认播放器是连接服务器对应的websocket，但是也可以指定连接websocket地址
 
-  })
 
-</script>
 
+  </body>
 
+  <script type="module">
 
+    import WSPlayer from "./src/WSPlayer/WSPlayer.js";
 
+    let recordPlayer = new WSPlayer({
 
+      el: "ws-record-player", // 必传
 
+      type: "record", // real | record
 
+      serverIp: "36.26.62.70",
 
+      num: 1,
 
+      showControl: true,
 
+    });
 
+    let url = location.href;
 
+    let rtsps = url.split("?")[1];
 
+    let token = url.split("?")[2];
 
+    let rtsp = rtsps + "?" + token;
 
+    setTimeout(() => {
 
+      recordPlayer.playRecord({
 
+        rtspURL: rtsp, // String | Array[String] 可以传入多个rtsp地址，将会按照顺序在播放器中播放，最多播放四个
 
+        decodeMode: "canvas", // 解码方式， video|canvas 可以不传，自动识别，h264使用video播放，265使用canvas播放
 
+        // wsURL: '' // 选择传递，默认播放器是连接服务器对应的websocket，但是也可以指定连接websocket地址
 
+      });
 
+    }, 2000)
 
+  </script>
 
 </html>

二進制
public/static/jinm/image/siagn.png
查看文件


+ 67 - 68
public/static/jinm/index.html
查看文件 

@@ -4,79 +4,78 @@
 
     <meta charset="UTF-8">
 
     <title>player</title>
 
     <style>
 
-      .sk-chase {
 
-        width: 40px;
 
-        height: 40px;
 
-        position: absolute;
 
-        top: 50%;
 
-        left: 50%;
 
-        transform: translate(-50%, -50%);
 
-        display: block;
 
-        animation: sk-chase 2.5s infinite linear both;
 
-      }
 
+        .sk-chase {
 
+            width: 40px;
 
+            height: 40px;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%, -50%);
 
+            display: block;
 
+            animation: sk-chase 2.5s infinite linear both;
 
+        }
 
 
-      .sk-chase-dot {
 
-        width: 100%;
 
-        height: 100%;
 
-        position: absolute;
 
-        left: 0;
 
-        top: 0;
 
-        animation: sk-chase-dot 2.0s infinite ease-in-out both;
 
-      }
 
+        .sk-chase-dot {
 
+            width: 100%;
 
+            height: 100%;
 
+            position: absolute;
 
+            left: 0;
 
+            top: 0;
 
+            animation: sk-chase-dot 2.0s infinite ease-in-out both;
 
+        }
 
 
-      .sk-chase-dot:before {
 
-        content: '';
 
-        display: block;
 
-        width: 25%;
 
-        height: 25%;
 
-        background-color: #8cc5ff;
 
-        border-radius: 100%;
 
-        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
 
-      }
 
+        .sk-chase-dot:before {
 
+            content: '';
 
+            display: block;
 
+            width: 25%;
 
+            height: 25%;
 
+            background-color: #8cc5ff;
 
+            border-radius: 100%;
 
+            animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
 
+        }
 
 
-      .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
 
-      .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
 
-      .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
 
-      .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
 
-      .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
 
-      .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
 
-      .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
 
-      .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
 
-      .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
 
-      .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
 
-      .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
 
-      .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
 
+        .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
 
+        .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
 
+        .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
 
+        .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
 
+        .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
 
+        .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
 
+        .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
 
+        .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
 
+        .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
 
+        .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
 
+        .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
 
+        .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
 
 
-      @keyframes sk-chase {
 
-        100% { transform: rotate(360deg); }
 
-      }
 
+        @keyframes sk-chase {
 
+            100% { transform: rotate(360deg); }
 
+        }
 
 
-      @keyframes sk-chase-dot {
 
-        80%, 100% { transform: rotate(360deg); }
 
-      }
 
+        @keyframes sk-chase-dot {
 
+            80%, 100% { transform: rotate(360deg); }
 
+        }
 
 
-      @keyframes sk-chase-dot-before {
 
-        50% {
 
-          transform: scale(0.4);
 
-        } 100%, 0% {
 
-            transform: scale(1.0);
 
-          }
 
-      }
 
-      #error_text {
 
-        width: 100%;
 
-        height: 100%;
 
-        text-align: center;
 
-        display: none;
 
-        position: absolute;
 
-        top: 0;
 
-        left: 0;
 
-        font-size: 20px;
 
-        font-weight: 600;
 
-        background-color: #8cc5ff;
 
-      }
 
-      body::-webkit-scrollbar {
 
-          display: none;
 
-      }
 
+        @keyframes sk-chase-dot-before {
 
+            50% {
 
+                transform: scale(0.4);
 
+            } 100%, 0% {
 
+                  transform: scale(1.0);
 
+              }
 
+        }
 
+        #error_text {
 
+            width: 170px;
 
+            height: 170px;
 
+            background: url("./image/siagn.png") no-repeat;
 
+            background-size: 100%;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%, -50%);
 
+            display: none;
 
+        }
 
+        body::-webkit-scrollbar {
 
+            display: none;
 
+        }
 
     </style>
 
 </head>
 
 <body style="margin: 0; width: 100%; text-align: center; z-index:999; background-color: transparent; overflow: hidden" >
 
@@ -91,7 +90,7 @@
 
       <div class="sk-chase-dot"></div>
 
       <div class="sk-chase-dot"></div>
 
     </div>
 
-    <div id="error_text" >服务器连接失败,请联系管理员</div>
 
+    <div id="error_text" ></div>
 
 </body>
 
 <script type="module">
 
     import Player from "./src/player.js";

+ 20 - 1
src/App.vue
查看文件 

@@ -1,15 +1,34 @@
 
 <template>
 
   <div id="app">
 
-    <router-view/>
 
+    <scale-box>
 
+      <router-view/>
 
+    </scale-box>
 
   </div>
 
 </template>
 
+<script>
 
+import ScaleBox from "@/components/ScaleBox";
 
+export default {
 
+  components: {
 
+    ScaleBox
 
+  }
 
+}
 
+</script>
 
 
 <style>
 
+body {
 
+  width: 100vw;
 
+  height: 100vh;
 
+}
 
 #app {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: relative;
 
+  background: #11152B;
 
   font-family: 'Xsh HeiTi', Avenir, Helvetica, Arial, sans-serif;
 
   -webkit-font-smoothing: antialiased;
 
   -moz-osx-font-smoothing: grayscale;
 
   text-align: center;
 
+  overflow: hidden;
 
   /*color: #2c3e50;*/
 
 }

二進制
src/assets/104.png
查看文件


二進制
src/assets/108.png
查看文件


二進制
src/assets/111.png
查看文件


二進制
src/assets/16433_Pig0001_iSpt.png
查看文件


二進制
src/assets/222.png
查看文件


二進制
src/assets/333.png
查看文件


二進制
src/assets/444.png
查看文件


二進制
src/assets/bottomBanner.png
查看文件


二進制
src/assets/fourActive.png
查看文件


二進制
src/assets/fourActiveNo.png
查看文件


二進制
src/assets/full.png
查看文件


二進制
src/assets/left-bg.e8acb7f0.png
查看文件


二進制
src/assets/noActive.png
查看文件


二進制
src/assets/non.png
查看文件


二進制
src/assets/on.png
查看文件


二進制
src/assets/on1.png
查看文件


二進制
src/assets/oneActive.png
查看文件


二進制
src/assets/oneActiveNo.png
查看文件


二進制
src/assets/shitu.png
查看文件


二進制
src/assets/top_title.png
查看文件


二進制
src/assets/u1.png
查看文件


二進制
src/assets/video.png
查看文件


二進制
src/assets/xuan.png
查看文件


+ 40 - 0
src/components/ScaleBox.vue
查看文件 

@@ -0,0 +1,40 @@
 
+<template>
 
+  <div class="scale-box" :style="{ transform: `scale(${scale}) translate(-50%, -50%)`}"><slot></slot></div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "ScaleBox",
 
+  data() {
 
+    return {
 
+      scale: '',
 
+      width: 1920,
 
+      height: 1080
 
+    }
 
+  },
 
+  methods: {
 
+    init() {
 
+      let ww = window.innerWidth / this.width;
 
+      let wh = window.innerHeight / this.height;
 
+      this.scale = ww < wh ? ww : wh
 
+    }
 
+  },
 
+  mounted() {
 
+    this.init();
 
+    window.addEventListener('resize', this.init)
 
+  }
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+.scale-box {
 
+  width: 1920px;
 
+  height: 1080px;
 
+  transform-origin: 0 0;
 
+  position: absolute;
 
+  left: 50%;
 
+  top: 50%;
 
+  transition: 0.3s;
 
+  overflow: hidden;
 
+}
 
+</style>

+ 68 - 0
src/components/TimeButton.vue
查看文件 

@@ -0,0 +1,68 @@
 
+<template>
 
+  <div @click="jump" class="a-button" :style="{ height: height+ 'px' , lineHeight: height+ 'px'}">
 
+    {{title}}
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "TimeButton",
 
+  props: {
 
+    title: {
 
+      type: String,
 
+      default: () => '确认'
 
+    },
 
+    height: {
 
+      type: Number,
 
+      default: () => 40
 
+    }
 
+  },
 
+  methods: {
 
+    jump() {
 
+      this.$emit('onClick');
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+.a-button {
 
+  position: relative;
 
+  text-align: center;
 
+  text-decoration: none;
 
+  text-transform: uppercase;
 
+  font-size: 14px;
 
+  background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
 
+  background-size: 400%;
 
+  border-radius: 50px;
 
+  z-index: 1;
 
+  cursor: pointer;
 
+  color: white;
 
+}
 
+.a-button::before {
 
+  content: "";
 
+  position: absolute;
 
+  top: -5px;
 
+  left: -5px;
 
+  right: -5px;
 
+  bottom: -5px;
 
+  background: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
 
+  background-size: 400%;
 
+  border-radius: 50px;
 
+  z-index: -1;
 
+  /* 设置模糊值 显示发光效果 */
 
+  filter: blur(20px);
 
+}
 
+.a-button:hover{
 
+  animation: streamer 8s infinite;
 
+}
 
+.a-button:hover::before{
 
+  animation: streamer 8s infinite;
 
+}
 
+@keyframes streamer {
 
+  100% {
 
+  /*  背景位置 */
 
+    background-position: -400% 0;
 
+  }
 
+}
 
+</style>

+ 3 - 2
src/main.js
查看文件 

@@ -10,13 +10,15 @@ import Vue from 'vue'
 
 import App from './App.vue'
 
 import router from './router'
 
 import store from './store'
 
-import 'lib-flexible/flexible'
 
+// import 'lib-flexible/flexible'
 
 import './assets/ttf/font.css';
 
 import echart from 'echarts';
 
 import { DatePicker, Row, Col, Select, Option, Icon, Input, Button, Message, Cascader, Loading, Avatar, Pagination, Table, TableColumn, Dialog, Switch, Empty, Tag } from 'element-ui';
 
+import http from './utils/http'
 
 
 Vue.config.productionTip = false
 
 Vue.prototype.$echarts = echart
 
+Vue.prototype.$http = http
 
 Vue.use(DatePicker)
 
 Vue.use(Row)
 
 Vue.use(Col)
 
@@ -25,7 +27,6 @@ Vue.use(Option)
 
 Vue.use(Icon)
 
 Vue.use(Input)
 
 Vue.use(Button)
 
-Vue.use(Message)
 
 Vue.use(Cascader)
 
 Vue.use(Loading)
 
 Vue.use(Avatar)

+ 9 - 0
src/router/ChildrenRoutes.js
查看文件 

@@ -71,6 +71,15 @@ const childrenRouters = [
 
       permission: 'monit',
 
     }
 
   },
 
+  {
 
+    path: '/crew',
 
+    name: 'Crew',
 
+    component: () => import('../views/Crew/Crew.vue'),
 
+    meta: {
 
+      title: 'AI人脸识别',
 
+      permission: 'crew'
 
+    }
 
+  },
 
 ];
 
 
 export default childrenRouters

+ 16 - 0
src/utils/api.js
查看文件 

@@ -425,3 +425,19 @@ export function getDeviceList(params) {
 
   })
 
 }
 
 
+// 根据farmid 拿到 ai人脸识别的 数据
 
+export function getAiUrl(params) {
 
+  return axios({
 
+    url: '/video/baseFace/list',
 
+    method: 'get',
 
+    params: params
 
+  })
 
+}
 
+
 
+export function getVideoLsitAndCamera(data) {
 
+  return axios({
 
+    url: '/video/cameraFunction/lsitAndCamera',
 
+    method: 'get',
 
+    params: data
 
+  })
 
+}

+ 21 - 0
src/utils/index.js
查看文件 

@@ -19,6 +19,27 @@ export function timeDate(timestamp) {
 
   return Y + M + D
 
 }
 
 
+// 拿到月份加日期
 
+export function MonthDate (timestamp) {
 
+  var date = new Date(timestamp)
 
+  var M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) + '-' : (date.getMonth() + 1) + '-'
 
+  var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate()
 
+  return  M + D
 
+}
 
+
 
+// 使用es6的padStart()方法来补0
 
+export function getYMDHMS (timestamp) {
 
+  let time = new Date(timestamp)
 
+  let year = time.getFullYear()
 
+  const month = (time.getMonth() + 1).toString().padStart(2, '0')
 
+  const date = (time.getDate()).toString().padStart(2, '0')
 
+  const hours = (time.getHours()).toString().padStart(2, '0')
 
+  const minute = (time.getMinutes()).toString().padStart(2, '0')
 
+  const second = (time.getSeconds()).toString().padStart(2, '0')
 
+
 
+  return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
 
+}
 
+
 
 /**
 
  * 函数防抖 (只执行最后一次点击)
 
  */

+ 89 - 157
src/views/Alarm/Alarm.vue
查看文件 

@@ -27,7 +27,8 @@
 
             <div class="alarm-title-right"></div>
 
           </div>
 
           <div class="alarm-content">
 
-            <alarm-bar :barData="list" @setOpen="setRank"></alarm-bar>
 
+<!--            <alarm-bar :barData="list" @setOpen="setRank"></alarm-bar>-->
 
+            <alarm-bar :barData="list"></alarm-bar>
 
           </div>
 
         </div>
 
       </div>
 
@@ -38,42 +39,43 @@
 
           <div class="alarm-title-right"></div>
 
         </div>
 
         <div class="alarm-content">
 
+          <iframe :src="'static/jinm/index.html?'+'1'+','+ ballWs +','+ ballRtsp + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
 <!--          <img src="../../assets/Alarm/111.png" width="100%" alt="">-->
 
-          <canvas id="canvas" width="910" height="504"></canvas>
 
-          <div class="bubble yufeishe" v-show="num === 1 && button1%2!==0" >
 
-            <p>育肥舍</p>
 
-            <p>育肥猪2457头</p>
 
-            <p>在舍人数：7人</p>
 
-            <p>温度：27.4℃</p>
 
-          </div>
 
-          <div class="bubble baoyushe" v-show="num === 1 && button1%2!==0">
 
-            <p>保育舍</p>
 
-            <p>保育猪2457头</p>
 
-            <p>在舍人数：7人</p>
 
-            <p>温度：27.4℃</p>
 
-          </div>
 
-          <div class="bubble gelishe" v-show="num === 1 && button1%2!==0">
 
-            <p>隔离舍</p>
 
-            <p>隔离猪2457头</p>
 
-            <p>在舍人数：7人</p>
 
-            <p>温度：27.4℃</p>
 
-          </div>
 
-          <div class="bubble shenghuo" v-show="num === 2 && button2%2!==0">
 
-            <p>生活区</p>
 
-            <p>在舍人数：7人</p>
 
-            <p>温度：27.4℃</p>
 
-          </div>
 
-          <div class="bubble huanbao" v-show="num === 3 && button3%2!==0">
 
-            <p>环保区</p>
 
-            <p>氨氮：2.35mg/L</p>
 
-            <p>流量：154T</p>
 
-            <p>人员：1人</p>
 
-          </div>
 
-          <div class="bubble shui" v-show="num === 4 && button4%2!==0">
 
-            <p>水泵房</p>
 
-            <p>水压：1.2kpa</p>
 
-            <p>用水量：154吨</p>
 
-          </div>
 
+<!--          <canvas id="canvas" width="910" height="504"></canvas>-->
 
+<!--          <div class="bubble yufeishe" v-show="num === 1 && button1%2!==0" >-->
 
+<!--            <p>育肥舍</p>-->
 
+<!--            <p>育肥猪2457头</p>-->
 
+<!--            <p>在舍人数：7人</p>-->
 
+<!--            <p>温度：27.4℃</p>-->
 
+<!--          </div>-->
 
+<!--          <div class="bubble baoyushe" v-show="num === 1 && button1%2!==0">-->
 
+<!--            <p>保育舍</p>-->
 
+<!--            <p>保育猪2457头</p>-->
 
+<!--            <p>在舍人数：7人</p>-->
 
+<!--            <p>温度：27.4℃</p>-->
 
+<!--          </div>-->
 
+<!--          <div class="bubble gelishe" v-show="num === 1 && button1%2!==0">-->
 
+<!--            <p>隔离舍</p>-->
 
+<!--            <p>隔离猪2457头</p>-->
 
+<!--            <p>在舍人数：7人</p>-->
 
+<!--            <p>温度：27.4℃</p>-->
 
+<!--          </div>-->
 
+<!--          <div class="bubble shenghuo" v-show="num === 2 && button2%2!==0">-->
 
+<!--            <p>生活区</p>-->
 
+<!--            <p>在舍人数：7人</p>-->
 
+<!--            <p>温度：27.4℃</p>-->
 
+<!--          </div>-->
 
+<!--          <div class="bubble huanbao" v-show="num === 3 && button3%2!==0">-->
 
+<!--            <p>环保区</p>-->
 
+<!--            <p>氨氮：2.35mg/L</p>-->
 
+<!--            <p>流量：154T</p>-->
 
+<!--            <p>人员：1人</p>-->
 
+<!--          </div>-->
 
+<!--          <div class="bubble shui" v-show="num === 4 && button4%2!==0">-->
 
+<!--            <p>水泵房</p>-->
 
+<!--            <p>水压：1.2kpa</p>-->
 
+<!--            <p>用水量：154吨</p>-->
 
+<!--          </div>-->
 
         </div>
 
       </div>
 
       <div class="alarm-top-left">
 
@@ -87,7 +89,8 @@
 
             <div class="alarm-title-right"></div>
 
           </div>
 
           <div class="alarm-content">
 
-            <alarm-pie v-if="pieData.length > 0" :id="'1'" :text="'近7日事件总量'" :pieData="pieData" @setOpen="openEvent"></alarm-pie>
 
+<!--            <alarm-pie v-if="pieData.length > 0" :id="'1'" :text="'近7日事件总量'" :pieData="pieData" @setOpen="openEvent"></alarm-pie>-->
 
+            <alarm-pie v-if="pieData.length > 0" :id="'1'" :text="'近7日事件总量'" :pieData="pieData"></alarm-pie>
 
 <!--            <chart-pie v-if="pieData.length > 0" :text="'近7日事件总量'" :id="'1'" :data="pieData"></chart-pie>-->
 
             <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
 
           </div>
 
@@ -102,7 +105,8 @@
 
             <div class="alarm-title-right"></div>
 
           </div>
 
           <div class="alarm-content">
 
-            <alarm-bar v-if="barData.salvProValue.length > 0" :bar-data="barData" @setOpen="openEvent"></alarm-bar>
 
+<!--            <alarm-bar v-if="barData.salvProValue.length > 0" :bar-data="barData" @setOpen="openEvent"></alarm-bar>-->
 
+            <alarm-bar v-if="barData.salvProValue.length > 0" :bar-data="barData"></alarm-bar>
 
             <div v-else style="line-height: 250px; text-align: center; width: 100%; font-size: 18px; color: white;">暂无数据</div>
 
           </div>
 
         </div>
 
@@ -234,7 +238,7 @@
 
               <new-table  :title="'报警列表'" :list-data="listItem" :height="650" :table-items="tableItem">
 
               </new-table>
 
               <div @click.stop>
 
-                <table-footer :totals="total" :size="pageSize" @sizeChange="sizeChange" @pageChange="pageChange"></table-footer>
 
+<!--                <table-footer :totals="total" :size="pageSize" @sizeChange="sizeChange" @pageChange="pageChange"></table-footer>-->
 
               </div>
 
             </template>
 
             <template v-else>
 
@@ -388,7 +392,7 @@ import AlarmBar from "@/views/Alarm/chart/AlarmBar";
 
 import AlarmPie from "@/views/Alarm/chart/AlarmPie";
 
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
 import 'swiper/css/swiper.css'
 
-import {getAlarmList, getWeekInfo, getPersonList, getAlarmRate, getCountByDay, getDevice, getCarWashVideo, getDeviceList } from "@/utils/api";
 
+import {getAlarmList, getWeekInfo, getPersonList, getAlarmRate, getCountByDay, getDevice, getCarWashVideo, getDeviceList, getBaseVideo } from "@/utils/api";
 
 import {gateSeven, getCallDetail, getCarDrying, getCarDryingTemp } from "@/utils/chenApi";
 
 import img from '@/assets/Alarm/111.png';
 
 import {timeDate} from "@/utils";
 
@@ -672,7 +676,9 @@ export default {
 
           minWidth: 120,
 
           slotName: "record",
 
         },
 
-      ]
 
+      ],
 
+      ballRtsp: '',
 
+      ballWs: ''
 
     }
 
   },
 
   computed: {
 
@@ -713,119 +719,6 @@ export default {
 
     },
 
     alarmClick(num) {
 
       this.num = num;
 
-      if(num === 1) {
 
-        this.button1++;
 
-        this.button2 = 0;
 
-        this.button3 = 0;
 
-        this.button4 = 0;
 
-        if(this.button1 %2 === 0 ) {
 
-          this.ctx.clearRect(0, 0, 910, 504);
 
-          this.initCanvas()
 
-        } else {
 
-          this.ctx.lineWidth = 4;
 
-          this.ctx.strokeStyle = '#F59A23';
 
-          this.ctx.fillStyle = 'rgba(224, 218, 188, .6)';
 
-          this.ctx.beginPath();
 
-          this.ctx.moveTo(165, 85);
 
-          this.ctx.lineTo(750, 85);
 
-          this.ctx.lineTo(810, 265);
 
-          this.ctx.lineTo(590, 265);
 
-          this.ctx.lineTo(580, 195);
 
-          this.ctx.lineTo(330, 195);
 
-          this.ctx.lineTo(320, 270);
 
-          this.ctx.lineTo(100, 270);
 
-          this.ctx.closePath();
 
-
 
-          this.ctx.moveTo(135,280);
 
-          this.ctx.lineTo(310, 285);
 
-          this.ctx.lineTo(300, 345);
 
-          this.ctx.lineTo(120, 345);
 
-          this.ctx.closePath();
 
-          this.ctx.stroke();
 
-          this.ctx.fill();
 
-        }
 
-      } else if(num === 2) {
 
-        this.button2++;
 
-        this.button1 = 0;
 
-        this.button3 = 0;
 
-        this.button4 = 0;
 
-        if(this.button2 %2 === 0 ) {
 
-          this.ctx.clearRect(0, 0, 910, 504);
 
-          this.initCanvas()
 
-        } else {
 
-          this.ctx.lineWidth = 4;
 
-          this.ctx.strokeStyle = '#1ADD4B';
 
-          this.ctx.fillStyle = 'rgba(175, 179, 95, .6)';
 
-          this.ctx.beginPath();
 
-          this.ctx.moveTo(160, 360);
 
-          this.ctx.lineTo(300, 360);
 
-          this.ctx.lineTo(300, 375);
 
-          this.ctx.lineTo(350, 375);
 
-          this.ctx.lineTo(350, 360);
 
-          this.ctx.lineTo(430, 360);
 
-          this.ctx.lineTo(430, 345);
 
-          this.ctx.lineTo(475, 345);
 
-          this.ctx.lineTo(475, 360);
 
-          this.ctx.lineTo(550, 360);
 
-          this.ctx.lineTo(550, 410);
 
-          this.ctx.lineTo(160, 410);
 
-          // this.ctx.lineTo(590, 265);
 
-          // this.ctx.lineTo(580, 195);
 
-          // this.ctx.lineTo(330, 195);
 
-          // this.ctx.lineTo(320, 270);
 
-          // this.ctx.lineTo(100, 270);
 
-          this.ctx.closePath();
 
-
 
-          this.ctx.stroke();
 
-          this.ctx.fill();
 
-        }
 
-      } else if(num === 3) {
 
-        this.button3++;
 
-        this.button2 = 0;
 
-        this.button1 = 0;
 
-        this.button4 = 0;
 
-        if(this.button3 %2 === 0 ) {
 
-          this.ctx.clearRect(0, 0, 910, 504);
 
-          this.initCanvas()
 
-        } else {
 
-          this.ctx.lineWidth = 4;
 
-          this.ctx.strokeStyle = '#F54F23';
 
-          this.ctx.fillStyle = 'rgba(183, 109, 105, .6)';
 
-          this.ctx.beginPath();
 
-          this.ctx.moveTo(620, 360);
 
-          this.ctx.lineTo(870, 360);
 
-          this.ctx.lineTo(900, 450);
 
-          this.ctx.lineTo(630, 450);
 
-          this.ctx.closePath();
 
-
 
-          this.ctx.stroke();
 
-          this.ctx.fill();
 
-        }
 
-      } else if(num === 4) {
 
-        this.button4++;
 
-        this.button2 = 0;
 
-        this.button1 = 0;
 
-        this.button3 = 0;
 
-        if(this.button4 %2 === 0 ) {
 
-          this.ctx.clearRect(0, 0, 910, 504);
 
-          this.initCanvas()
 
-        } else {
 
-          this.ctx.lineWidth = 4;
 
-          this.ctx.strokeStyle = '#19AEE8';
 
-          this.ctx.fillStyle = 'rgba(169, 213, 236, .6)';
 
-          this.ctx.beginPath();
 
-          this.ctx.moveTo(390,200);
 
-          this.ctx.lineTo(440, 200);
 
-          this.ctx.lineTo(440, 240);
 
-          this.ctx.lineTo(390, 240);
 
-          // this.ctx.lineTo(900, 450);
 
-          // this.ctx.lineTo(630, 450);
 
-          this.ctx.closePath();
 
-
 
-          this.ctx.stroke();
 
-          this.ctx.fill();
 
-        }
 
-      }
 
     },
 
     initCanvas() {
 
       var myCanvas = document.getElementById('canvas');
 
@@ -850,9 +743,12 @@ export default {
 
       getWeekInfo({}).then(res => {
 
         if(res.code === 10000) {
 
           this.list.salvProValue = [res.data.one, res.data.two, res.data.three];
 
+
 
           this.listLoading = false;
 
         }
 
       })
 
+      this.listLoading = false;
 
+      this.list.salvProValue = [21, 15, 3]
 
       let params = {
 
         pageNum: 1,
 
         pageSize: 20,
 
@@ -877,6 +773,20 @@ export default {
 
       getAlarmRate({}).then(res => {
 
         if(res.code === 10000) {
 
           this.alarmPie = res.data;
 
+          // this.alarmPie = [
 
+          //   {
 
+          //     name: '生态监测',
 
+          //     value: 3
 
+          //   },
 
+          //   {
 
+          //     name: '人员违规',
 
+          //     value: 0
 
+          //   },
 
+          //   {
 
+          //     name: '环境监测',
 
+          //     value: 0
 
+          //   },
 
+          // ]
 
           this.dayLoading = false;
 
         } else {
 
           this.dayLoading = false;
 
@@ -891,7 +801,16 @@ export default {
 
               this.barData.salvProName.push(item.name);
 
               this.barData.salvProValue.push(item.value);
 
             })
 
+
 
             this.pieData = res.data;
 
+            // this.barData.salvProName = ['车辆烘干', "死猪运输", "人员违规", "车辆洗消"]
 
+            // this.barData.salvProValue = [7, 0, 3, 5]
 
+            // this.pieData = [
 
+            //   { name: '车辆烘干', value:  7},
 
+            //   {name: "死猪运输", value: 0},
 
+            //   {name: "人员违规", value: 3},
 
+            //   {name: "车辆洗消", value: 5}
 
+            // ]
 
           }
 
           this.pieLoading = false;
 
         } else {
 
@@ -966,8 +885,9 @@ export default {
 
       }
 
       getCallDetail(params).then(res => {
 
         if(res.code === 10000) {
 
-          this.listItem = res.data.records;
 
-          this.total = res.data.total;
 
+          this.listItem = res.data;
 
+          // this.listItem = res.data.records;
 
+          // this.total = res.data.total;
 
         }
 
       })
 
     },
 
@@ -1098,11 +1018,23 @@ export default {
 
           this.deviceTotal = res.data.totalElements;
 
         }
 
       })
 
+    },
 
+    initVideo() {
 
+      let params = {
 
+        type: 3
 
+      }
 
+      getBaseVideo(params).then(res => {
 
+        if(res.code === 10000) {
 
+          this.ballWs = res.data[0].wsUrl;
 
+          this.ballRtsp = res.data[0].rtspUrl;
 
+        }
 
+      })
 
     }
 
   },
 
   mounted() {
 
-    this.initCanvas()
 
+    // this.initCanvas()
 
     this.init();
 
+    this.initVideo()
 
   }
 
 }
 
 </script>

+ 82 - 28
src/views/BioSafety/BioSafety.vue
查看文件 

@@ -4,27 +4,44 @@
 
       <div class="bio-flex-left">
 
         <div class="bio-title">
 
           <div class="bio-title-left"></div>
 
-          <div class="bio-title-center">门卫管控</div>
 
+          <div class="bio-title-center" style="cursor: pointer;" @click="isView = true">{{isNum == 1 ? '门卫管控' : '全景球机'}}</div>
 
           <div class="bio-title-right"></div>
 
-        </div>
 
-        <div class="bio-video">
 
-          <div class="kuang">
 
-            <iframe v-if="isVideo"  :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 95%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
+          <div class="bio-select" v-show="isView">
 
+            <div class="bio-select-text" @click="setNum(1)">门卫管控</div>
 
+            <div class="bio-select-text" @click="setNum(2)">全景球机</div>
 
           </div>
 
         </div>
 
-        <div class="bio-out">
 
-          <div class="bio-out-center" @click="openGate(1)">
 
-            <div class="out-img"></div>
 
-            <div style="color: white; font-size: 16px">
 
-              <p>今日抓取次数</p>
 
-              <p style="font-size: 22px; font-weight: 600">{{pig.tadayGate}}</p>
 
+        <div v-show="isNum === 1">
 
+          <div class="bio-video">
 
+            <div class="kuang">
 
+              <iframe v-if="isVideo"  :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" style="width: 95%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
+            </div>
 
+          </div>
 
+          <div class="bio-out">
 
+            <div class="bio-out-center">
 
+              <!--      @click="openGate(1)"   -->
 
+              <div class="out-img"></div>
 
+              <div style="color: white; font-size: 16px">
 
+                <p>今日抓取次数</p>
 
+<!--                <p style="font-size: 22px; font-weight: 600">{{pig.tadayGate}}</p>-->
 
+                <p style="font-size: 22px; font-weight: 600">57</p>
 
+              </div>
 
+            </div>
 
+            <div class="bio-out-center">
 
+              <!--    @click="openGate(2)"  -->
 
+              <div class="out-img1"></div>
 
+              <div style="color: white; font-size: 16px">
 
+                <p>七日抓取次数</p>
 
+<!--                <p style="font-size: 22px; font-weight: 600">{{pig.SevenDayGate}}</p>-->
 
+                <p style="font-size: 22px; font-weight: 600">399</p>
 
+              </div>
 
             </div>
 
           </div>
 
-          <div class="bio-out-center" @click="openGate(2)">
 
-            <div class="out-img1"></div>
 
-            <div style="color: white; font-size: 16px">
 
-              <p>七日抓取次数</p>
 
-              <p style="font-size: 22px; font-weight: 600">{{pig.SevenDayGate}}</p>
 
+        </div>
 
+        <div v-show="isNum === 2">
 
+          <div class="bio-video">
 
+            <div class="kuang">
 
+              <iframe v-if="isVideo"  :src="'static/jinm/index.html?'+'1'+','+ ballWs +','+ ballRtsp + ',' +'100%' + ',' + '0'" style="width: 95%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
             </div>
 
           </div>
 
         </div>
 
@@ -275,7 +292,7 @@
 
         </div>
 
       </div>
 
     </div>
 
-    <div class="bio-dialog" v-show="dialog" @click="dialog = false">
 
+    <div class="bio-dialog" v-if="dialog" @click="dialog = false">
 
       <div class="dialog-content1" v-if="type === 1">
 
         <div>
 
 <!--          <img style="float: left" :src="selectImg" height="400px" alt="">-->
 
@@ -316,7 +333,7 @@
 
       </div>
 
     </div>
 
     <!-- 车辆   -->
 
-    <div class="bio-dialog" v-show="carDialog" @click="carDialog=false">
 
+    <div class="bio-dialog" v-if="carDialog" @click="carDialog=false">
 
       <div class="dialog-content1">
 
         <div class="dialog-title">车辆管理</div>
 
         <template>
 
@@ -380,7 +397,7 @@
 
       </div>
 
     </div>
 
     <!-- 门卫   -->
 
-    <div class="bio-dialog" v-show="personDialog" @click="personDialog=false">
 
+    <div class="bio-dialog" v-if="personDialog" @click="personDialog=false">
 
       <div class="dialog-content1">
 
         <div class="dialog-title">门禁管理</div>
 
         <template>
 
@@ -440,7 +457,7 @@
 
       </div>
 
     </div>
 
     <!--  大门  -->
 
-    <div class="bio-dialog" v-show="gateDialog" @click="gateDialog=false">
 
+    <div class="bio-dialog" v-if="gateDialog" @click="gateDialog=false">
 
       <div class="dialog-content1">
 
         <div class="dialog-title">门卫管控</div>
 
         <div class="base-banner3">
 
@@ -487,7 +504,7 @@
 
       </div>
 
     </div>
 
     <!-- 烘干   -->
 
-    <div class="bio-dialog" v-show="dryingShow" @click="dryingShow=false">
 
+    <div class="bio-dialog" v-if="dryingShow" @click="dryingShow=false">
 
       <div class="dialog-content3">
 
         <div class="dialog-title">车辆烘干</div>
 
         <div class="base-banner5">
 
@@ -525,19 +542,18 @@
 
       </span>
 
     </el-dialog>
 
     <!--死猪    -->
 
-    <div class="bio-dialog" v-show="siZhuShow" @click="siZhuShow = false">
 
+    <div class="bio-dialog" v-if="siZhuShow" @click="siZhuShow = false">
 
       <div class="dialog-content1">
 
         <div class="dialog-title">死猪管控</div>
 
         <div class="base-banner3">
 
           <div class="base-left">
 
-            <div v-if="videoNull">
 
-              <iframe
 
+            <iframe
 
+                v-if="videoNull && siZhuShow"
 
                 :src="'static/dahua/index.html?' + rtsp"
 
                 frameborder="0"
 
                 style="width: 680px; height: 600px"
 
               >
 
               </iframe>
 
-            </div>
 
             <div v-else>
 
               <img :src="sizhuImg" width="100%" alt="">
 
             </div>
 
@@ -748,6 +764,10 @@ export default {
 
       sizhuListItem: [],
 
       siZhuTotal: 0,
 
       sizhuImg: '',
 
+      isView: false,
 
+      isNum: 1,
 
+      ballRtsp: 'rtsp://admin:hmkj6688@172.16.3.253:554/cam/realmonitor?channel=2&subtype=0',
 
+      ballWs: 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.253'
 
     }
 
   },
 
   computed: {
 
@@ -769,6 +789,10 @@ export default {
 
     }
 
   },
 
   methods: {
 
+    setNum(i) {
 
+      this.isNum = i;
 
+      this.isView = false;
 
+    },
 
     carChange(val) {
 
       this.pageSize = val;
 
       this.initCar()
 
@@ -1033,6 +1057,7 @@ export default {
 
       } else if(num === 2) {
 
         this.selectImg = item.recordImage;
 
       } else {
 
+        this.rtsp = '';
 
         // 拿到视频回放
 
         getCarWashVideo({
 
           happendTime: item.alarmDate,
 
@@ -1122,12 +1147,13 @@ export default {
 
           this.gateList.forEach(item => {
 
             item.imgUrl = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`
 
           })
 
-          this.gateImg = this.gateList[0].imgUrl;
 
+          // this.gateImg = this.gateList[0].imgUrl;
 
         }
 
       })
 
     },
 
     gateVideo(item) {
 
       this.videoNull = true;
 
+      this.rtsp = '';
 
       getCarWashVideo({
 
         happendTime: item.alarmDate,
 
         channelName: item.alarmPosition,
 
@@ -1288,6 +1314,7 @@ export default {
 
         if(res.code == 0) {
 
           const result = JSON.parse(res.result);
 
           this.sizhuListItem = result.data.pageData;
 
+          console.log(this.sizhuListItem)
 
           this.sizhuListItem.forEach((item) => {
 
             item.imgUrl = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
 
           });
 
@@ -1343,6 +1370,7 @@ export default {
 
     width: 100%;
 
     height: 26px;
 
     display: flex;
 
+    position: relative;
 
   }
 
   .bio-video {
 
     width: 100%;
 
@@ -1409,6 +1437,29 @@ export default {
 
     color: white;
 
     font-size: 16px;
 
   }
 
+  .bio-select {
 
+    width: 120px;
 
+    height: 60px;
 
+    position: absolute;
 
+    background-color: rgba(102, 255, 255, .6);
 
+    top: 26px;
 
+    left: 50%;
 
+    transform: translate(-50%, 0);
 
+  }
 
+  .bio-select-text {
 
+    line-height: 30px;
 
+    font-size: 16px;
 
+    color: white;
 
+    cursor: pointer;
 
+  }
 
+  .bio-select-text:hover {
 
+    background-color: #409eff;
 
+    color: black;
 
+  }
 
+  .is_select {
 
+    background-color: #409eff;
 
+    color: black;
 
+  }
 
   .bio-title-right {
 
     flex: 1;
 
     height: 26px;
 
@@ -1633,6 +1684,7 @@ export default {
 
   }
 
   .case-right {
 
     flex: 1;
 
+    font-size: 14px;
 
   }
 
   .case-time {
 
     width: 100%;
 
@@ -1684,15 +1736,17 @@ export default {
 
     /*padding-left: 10px;*/
 
     line-height: 30px;
 
     color: white;
 
+    font-size: 14px;
 
   }
 
   .bio-dialog {
 
-    width: 100vw;
 
-    height: 100vh;
 
+    width: 100%;
 
+    height: 100%;
 
     position: absolute;
 
     top: 0;
 
     left: 0;
 
     background-color: rgba(0,0,0, .9);
 
     z-index: 999;
 
+    font-size: 12px;
 
   }
 
   .dialog-content {
 
     width: 50%;

+ 4 - 5
src/views/BioSafety/chart/ChartBar.vue
查看文件 

@@ -37,8 +37,8 @@ export default {
 
   },
 
   methods: {
 
     init() {
 
-      let max = Math.max(...this.data.data);
 
-      let max1 = max * 1.2;
 
+      // let max = Math.max(...this.data.data);
 
+      // let max1 = max * 1.2;
 
       // 获取当前数组的数量并push 成新数组
 
       // let data1 = new Array(this.data.data.length).fill(max1);
 
       let options = {
 
@@ -50,7 +50,7 @@ export default {
 
         //   },
 
         // },
 
         grid: {
 
-          top: "5%",
 
+          top: "10%",
 
           left: "5%",
 
           right: "5%",
 
           bottom: "2%",
 
@@ -81,7 +81,6 @@ export default {
 
               width: "2", //坐标线的宽度
 
             },
 
           },
 
-          max: max1,
 
           axisLabel: {
 
             formatter: `{value}${this.data.unit}`,
 
             textStyle: {
 
@@ -138,7 +137,7 @@ export default {
 
       let that = this;
 
       this.myChart.on('click', function (params){
 
         console.log(params)
 
-        if(params.value !== max1) {
 
+        if(params.value) {
 
           that.$emit('setOpen', params.name)
 
         }
 
       })

文件差異過大導致無法顯示
+ 1239 - 0
src/views/Crew/Crew.vue


+ 394 - 0
src/views/Crew/chart/ChartJczl.vue
查看文件 

@@ -0,0 +1,394 @@
 
+<template>
 
+  <div id="chart-jczl" style="width: 100%; height: 100%"></div>
 
+</template>
 
+
 
+<script>
 
+import echarts from "echarts";
 
+export default {
 
+  name: "ChartJczl",
 
+  props: {
 
+    jczlList: {
 
+      type: Array,
 
+    },
 
+    jczlAxis: {
 
+      type: Array,
 
+    },
 
+    echartsType: {
 
+      type: Number
 
+    }
 
+  },
 
+  watch: {
 
+    jczlList: {
 
+      handler(newVal) {
 
+        if(newVal) {
 
+          this.myChart.clear();
 
+          this.init();
 
+        }
 
+      },
 
+      deep: true,
 
+    }
 
+  },
 
+  data() {
 
+    return {
 
+      myChart: null
 
+    }
 
+  },
 
+  methods: {
 
+    init() {
 
+      let that = this;
 
+      let option;
 
+      if(this.echartsType === 1) {
 
+        option = {
 
+          tooltip: {
 
+            trigger: 'axis',
 
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
 
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 
+            },
 
+            formatter:function(params){
 
+              let str = `${params[0].axisValue}<br/>${params[0].seriesName}: &nbsp; ${params[0].value}`;
 
+              // let tip = auth.formatterTip(params);/*调用auth.js中的formatterTip函数，传入触发点信息参数params*/
 
+              return str ;
 
+            },
 
+          },
 
+          grid: {
 
+            top: "10%",
 
+            bottom: '10%',//也可设置left和right设置距离来控制图表的大小
 
+            right: 0,
 
+          },
 
+          xAxis: {
 
+            data: [],
 
+            axisLine: {
 
+              show: true, //隐藏X轴轴线
 
+              lineStyle: {
 
+                color: '#2D455A'
 
+              }
 
+            },
 
+            axisTick: {
 
+              show: false //隐藏X轴刻度
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              interval: 0,
 
+              fontSize: 12,
 
+              textStyle: {
 
+                color: "#fff" //X轴文字颜色
 
+              }
 
+            },
 
+
 
+          },
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              name: '次数',
 
+              gridIndex: 0,
 
+              // splitNumber: 4,
 
+              splitLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  type: 'dashed',
 
+                  color: '#2B4359',
 
+                  width: 2
 
+                },
 
+
 
+              },
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  color: '#fff'
 
+                }
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                margin: 14,
 
+                fontSize: 14,
 
+                textStyle: {
 
+                  color: "#fff" //X轴文字颜色
 
+                }
 
+              },
 
+            },
 
+          ],
 
+          series: [
 
+            {
 
+              name: "次数",
 
+              type: "bar",
 
+              barWidth: 24,
 
+              itemStyle: {
 
+                normal: {
 
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+                    offset: 0,
 
+                    color: "#00FFE3"
 
+                  },
 
+                    {
 
+                      offset: 1,
 
+                      color: "#4693EC"
 
+                    }
 
+                  ])
 
+                }
 
+              },
 
+              data: [],
 
+              label: {
 
+                show: true,
 
+                position: 'top',
 
+                color: '#fff',
 
+                fontSize: 16,
 
+              },
 
+              z: 10,
 
+              zlevel: 0,
 
+            },
 
+            {
 
+              // 分隔
 
+              type: "pictorialBar",
 
+              itemStyle: {
 
+                normal:{
 
+                  color:"#0F375F"
 
+                }
 
+              },
 
+              symbolRepeat: "fixed",
 
+              symbolMargin: 6,
 
+              symbol: "rect",
 
+              symbolClip: true,
 
+              symbolSize: [18, 2],
 
+              symbolPosition: "start",
 
+              symbolOffset: [1, -1],
 
+              // symbolBoundingData: this.total,
 
+              data: [],
 
+              width: 20,
 
+              z: 0,
 
+              zlevel: 1,
 
+              label: {
 
+                show: false,
 
+                normal: {
 
+                  show: false    //是否显示默认名称
 
+
 
+                },
 
+
 
+                emphasis: {
 
+                  show: false    //鼠标悬浮是否显示默认地理名称
 
+
 
+                }
 
+              }
 
+            },
 
+            {
 
+              name: "",
 
+              type: "bar",
 
+              barGap: "-110%", // 设置外框粗细
 
+              data: [],
 
+              barWidth: 26,
 
+              itemStyle: {
 
+                normal: {
 
+                  color: "transparent", // 填充色
 
+                  barBorderColor: "#2D465C", // 边框色
 
+                  barBorderWidth: 1, // 边框宽度
 
+                  // barBorderRadius: 0, //圆角半径
 
+                }
 
+              },
 
+              z: 0
 
+            },
 
+            {
 
+              name: "",
 
+              type: "line",
 
+              smooth: true, //平滑曲线显示
 
+              showAllSymbol: false, //显示所有图形。
 
+              symbolSize: 0,
 
+              lineStyle: {
 
+                color: '#182733',
 
+                width: 0,
 
+              },
 
+              areaStyle:{
 
+                color: 'rgba(5,140,255, 0.2)'
 
+              },
 
+              data: [],
 
+              z: 5,
 
+            }
 
+          ]
 
+        }
 
+      } else {
 
+        option = {
 
+          tooltip: {
 
+            trigger: 'axis',
 
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
 
+              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 
+            },
 
+            formatter:function(params){
 
+              let str = `${params[0].axisValue}<br/>${params[0].seriesName}: &nbsp; ${params[0].value}`;
 
+              // let tip = auth.formatterTip(params);/*调用auth.js中的formatterTip函数，传入触发点信息参数params*/
 
+              return str ;
 
+            },
 
+          },
 
+          grid: {
 
+            top: "10%",
 
+            bottom: '10%',//也可设置left和right设置距离来控制图表的大小
 
+            right: 0,
 
+          },
 
+          xAxis: {
 
+            data:  [],
 
+            axisLine: {
 
+              show: true, //隐藏X轴轴线
 
+              lineStyle: {
 
+                color: '#2D455A'
 
+              }
 
+            },
 
+            axisTick: {
 
+              show: false //隐藏X轴刻度
 
+            },
 
+            axisLabel: {
 
+              show: true,
 
+              interval: 0,
 
+              fontSize: 12,
 
+              textStyle: {
 
+                color: "#A3C0DF" //X轴文字颜色
 
+              }
 
+            },
 
+
 
+          },
 
+          yAxis: [
 
+            {
 
+              type: "value",
 
+              name: '次数',
 
+              gridIndex: 0,
 
+              interval: 25,
 
+              // splitNumber: 4,
 
+              splitLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  type: 'dashed',
 
+                  color: '#2B4359',
 
+                  width: 2
 
+                },
 
+
 
+              },
 
+              axisTick: {
 
+                show: false
 
+              },
 
+              axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                  color: '#2D455A'
 
+                }
 
+              },
 
+              axisLabel: {
 
+                show: true,
 
+                margin: 14,
 
+                fontSize: 14,
 
+                textStyle: {
 
+                  color: "#A3C0DF" //X轴文字颜色
 
+                }
 
+              },
 
+            },
 
+          ],
 
+          series: [
 
+            {
 
+              name: "次数",
 
+              type: "bar",
 
+              barWidth: 14,
 
+              itemStyle: {
 
+                normal: {
 
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+                    offset: 0,
 
+                    color: "#00FFE3"
 
+                  },
 
+                    {
 
+                      offset: 1,
 
+                      color: "#4693EC"
 
+                    }
 
+                  ])
 
+                }
 
+              },
 
+              data: [],
 
+              z: 10,
 
+              zlevel: 0,
 
+            },
 
+            {
 
+              // 分隔
 
+              type: "pictorialBar",
 
+              itemStyle: {
 
+                normal:{
 
+                  color:"#0F375F"
 
+                }
 
+              },
 
+              symbolRepeat: "fixed",
 
+              symbolMargin: 6,
 
+              symbol: "rect",
 
+              symbolClip: true,
 
+              symbolSize: [18, 2],
 
+              symbolPosition: "start",
 
+              symbolOffset: [1, -1],
 
+              // symbolBoundingData: this.total,
 
+              data: that.jczlList[1],
 
+              width: 20,
 
+              z: 0,
 
+              zlevel: 1,
 
+            },
 
+            {
 
+              name: "",
 
+              type: "bar",
 
+              barGap: "-110%", // 设置外框粗细
 
+              data: [100, 100, 100],
 
+              barWidth: 18,
 
+              itemStyle: {
 
+                normal: {
 
+                  color: "transparent", // 填充色
 
+                  barBorderColor: "#2D465C", // 边框色
 
+                  barBorderWidth: 1, // 边框宽度
 
+                  // barBorderRadius: 0, //圆角半径
 
+                  label: {
 
+                    // 标签显示位置
 
+                    show: false,
 
+                    position: "top" // insideTop 或者横向的 insideLeft
 
+                  }
 
+                }
 
+              },
 
+              z: 0
 
+            },
 
+            {
 
+              name: "",
 
+              type: "line",
 
+              smooth: true, //平滑曲线显示
 
+              showAllSymbol: false, //显示所有图形。
 
+              symbolSize: 0,
 
+              lineStyle: {
 
+                color: '#182733',
 
+                width: 0,
 
+              },
 
+              areaStyle:{
 
+                color: 'rgba(5,140,255, 0.2)'
 
+              },
 
+              data: [],
 
+              z: 5,
 
+            }
 
+          ]
 
+        }
 
+      }
 
+      option.xAxis.data = this.jczlAxis;
 
+      option.series[0].data = this.jczlList;
 
+      option.series[1].data = this.jczlList;
 
+      option.series[3].data = this.jczlList;
 
+      // 外框 必须增加
 
+      let len = this.jczlList.length;
 
+      let max = Math.max(...this.jczlList);
 
+      let maxMax = max + 50;
 
+      let arr = [];
 
+      for(var i = 0; i<len; i++) {
 
+        arr.push(maxMax);
 
+      }
 
+      option.series[2].data = arr;
 
+
 
+      this.myChart.setOption(option);
 
+    }
 
+  },
 
+  mounted() {
 
+    this.myChart = this.$echarts.init(document.getElementById('chart-jczl'));
 
+    this.init();
 
+    window.onresize = () => {
 
+      this.myChart.resize();
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 186 - 0
src/views/Crew/chart/ChartLsjc.vue
查看文件 

@@ -0,0 +1,186 @@
 
+<template>
 
+  <div id="chart-lsjc" style="width: 100%; height: 100%"></div>
 
+</template>
 
+
 
+<script>
 
+import echarts from "echarts";
 
+export default {
 
+  name: "ChartLsjc",
 
+  props: {
 
+    lsjcList: {
 
+      type: Array,
 
+    },
 
+    lsjcTime: {
 
+      type: Array,
 
+    }
 
+  },
 
+  watch: {
 
+    lsjcList: {
 
+      handler(newVal) {
 
+        if (newVal) {
 
+          this.myChart.clear();
 
+          this.init();
 
+        }
 
+      },
 
+      deep: true,
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      myChart: null,
 
+    };
 
+  },
 
+  methods: {
 
+    init() {
 
+      let dayEacharts = {
 
+        tooltip: { //提示框组件
 
+          trigger: 'axis',
 
+          formatter: `{b}<br />{a0}: {c0}`,
 
+          axisPointer: {
 
+            type: 'shadow',
 
+            label: {
 
+              backgroundColor: '#6a7985'
 
+            }
 
+          },
 
+          textStyle: {
 
+            color: '#fff',
 
+            fontStyle: 'normal',
 
+            fontFamily: '微软雅黑',
 
+            fontSize: 12,
 
+          }
 
+        },
 
+        grid: {
 
+          left: '5%',
 
+          right: '5%',
 
+          bottom: '3%',
 
+          top:'10%',
 
+          //	padding:'0 0 10 0',
 
+          containLabel: true,
 
+        },
 
+        legend: {//图例组件，颜色和名字
 
+          right:'10%',
 
+          top:'30%',
 
+          itemGap: 16,
 
+          itemWidth: 18,
 
+          itemHeight: 10,
 
+          data:[{
 
+            name:'健康度',
 
+            //icon:'image://../wwwroot/js/url2.png', //路径
 
+          },
 
+            {
 
+              name:'可用度',
 
+            }],
 
+          textStyle: {
 
+            color: '#a8aab0',
 
+            fontStyle: 'normal',
 
+            fontFamily: '微软雅黑',
 
+            fontSize: 12,
 
+          }
 
+        },
 
+        xAxis: [
 
+          {
 
+            type: 'category',
 
+            //	boundaryGap: true,//坐标轴两边留白
 
+            data: [],
 
+            axisLabel: { //坐标轴刻度标签的相关设置。
 
+              //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
 
+              //	margin:15,
 
+              show: true,
 
+              textStyle: {
 
+                color: '#fff',
 
+                fontStyle: 'normal',
 
+                fontFamily: '微软雅黑',
 
+                fontSize: 12,
 
+              },
 
+              rotate:50,
 
+            },
 
+            axisTick:{//坐标轴刻度相关设置。
 
+              show: false,
 
+            },
 
+            axisLine:{//坐标轴轴线相关设置
 
+              lineStyle:{
 
+                color:'#fff',
 
+                opacity:0.2
 
+              }
 
+            },
 
+            splitLine: { //坐标轴在 grid 区域中的分隔线。
 
+              show: false,
 
+            }
 
+          }
 
+        ],
 
+        yAxis: [
 
+          {
 
+            type: 'value',
 
+            name: '次数',
 
+            splitNumber: 5,
 
+            axisLabel: {
 
+              textStyle: {
 
+                color: '#fff',
 
+                fontStyle: 'normal',
 
+                fontFamily: '微软雅黑',
 
+                fontSize: 12,
 
+              }
 
+            },
 
+            axisLine:{
 
+              show: true,
 
+              lineStyle: {
 
+                type: 'solid',
 
+                color: '#fff',//左边线的颜色
 
+                width:'1'//坐标线的宽度
 
+              }
 
+            },
 
+            axisTick:{
 
+              show: false
 
+            },
 
+            splitLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: '#fff',
 
+                opacity:0.06
 
+              },
 
+            }
 
+
 
+          }
 
+        ],
 
+        series : [
 
+          {
 
+            name:'次数',
 
+            type:'bar',
 
+            data:[8,5, 25, 30, 35, 55, 62, 78,65,55, 60, 45, 42, 15, 12, 5],
 
+            barWidth: 10,
 
+            barGap:0,//柱间距离
 
+            itemStyle: {
 
+              normal: {
 
+                show: true,
 
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
 
+                  offset: 0,
 
+                  color: '#69CBF2'
 
+                }, {
 
+                  offset: 1,
 
+                  color: '#69CBF2'
 
+                }]),
 
+                barBorderRadius: 50,
 
+                borderWidth: 0,
 
+              }
 
+            },
 
+          }
 
+        ]
 
+      }
 
+      dayEacharts.xAxis[0].data = this.lsjcTime;
 
+      dayEacharts.series[0].data = this.lsjcList;
 
+      this.myChart.setOption(dayEacharts);
 
+    }
 
+  },
 
+  mounted() {
 
+    this.myChart = this.$echarts.init(document.getElementById("chart-lsjc"));
 
+    this.init();
 
+    window.onresize = () => {
 
+      this.myChart.resize();
 
+    }
 
+  },
 
+}
 
+</script>
 
+
 
+<style scoped>
 
+
 
+</style>

+ 66 - 0
src/views/Crew/chart/TimeLine.vue
查看文件 

@@ -0,0 +1,66 @@
 
+<template>
 
+  <div style="cursor: pointer; font-size: 12px">
 
+    <el-steps :active="6">
 
+      <el-step v-for="(item, i) in stepList" :title="getTime(item.time)" icon="el-icon-time" :description="item.location" :key="i"></el-step>
 
+    </el-steps>
 
+    <div class="box">
 
+      <div v-for="(item, i) in stepList" :key="i" class="box-item">
 
+        <img :src="url + item.background_image" width="100%" alt="">
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+  import {getYMDHMS} from "../../../utils";
 
+  export default {
 
+    name: "TimeLine",
 
+    data() {
 
+      return {
 
+      }
 
+    },
 
+    props: {
 
+      stepList: {
 
+        type: Array,
 
+      },
 
+      url: {
 
+        type: String
 
+      }
 
+    },
 
+    methods: {
 
+      getTime(time) {
 
+        return getYMDHMS(time);
 
+      },
 
+    },
 
+  }
 
+</script>
 
+
 
+<style scoped>
 
+  /deep/.el-step__icon {
 
+    background-color: #455585 !important;
 
+  }
 
+  /deep/ .el-step__head.is-finish {
 
+    color: #06DFFF !important;
 
+    border-color: #409EFF;
 
+  }
 
+  /deep/ .el-step__main {
 
+    font-size: 12px;
 
+  }
 
+  /deep/ .el-step__title.is-finish, /deep/ .el-step__description.is-finish {
 
+    color: #fff !important;
 
+    font-size: 12px !important;
 
+  }
 
+  .box {
 
+    width: 100%;
 
+    display: flex;
 
+    justify-content: space-between;
 
+  }
 
+  .box-item {
 
+    width: 200px;
 
+    background: url("../../../assets/104.png") no-repeat;
 
+    background-size: 100% 100%;
 
+    box-sizing: border-box;
 
+    padding: 10px;
 
+    color: white;
 
+  }
 
+</style>

+ 5 - 2
src/views/Environment/Environment.vue
查看文件 

@@ -115,7 +115,7 @@ export default {
 
       totalPData: {
 
         data: 0,
 
         splitNumber: 12,
 
-        max: 1.2,
 
+        max: 24,
 
         unit: 'mg/L'
 
       },
 
       totalNData: {
 
@@ -151,8 +151,11 @@ export default {
 
         if(res.code=== 10000) {
 
           this.phData.data = res.data.phPj;
 
           this.codData.data = res.data.hxxylPj;
 
-          this.liuData.data = res.data.wsPj;
 
+          // this.liuData.data = res.data.wsPj;
 
           this.nhData.data = res.data.adPj;
 
+          this.totalPData.data = 4.5;
 
+          this.liuData.data = 7.694;
 
+          this.totalNData.data = 11.5;
 
         }
 
         this.costLoading = false;
 
       })

+ 19 - 7
src/views/Home/Home.vue
查看文件 

@@ -250,6 +250,8 @@
 
           </div>
 
         </div>
 
       </div>
 
+      <div class="case" v-show="selectId === 5"></div>
 
+      <div class="case" v-show="selectId === 6"></div>
 
     </div>
 
     <div class="home-footer">
 
       <div class="home-footer-blue"></div>
 
@@ -315,6 +317,12 @@ export default {
 
           url: '/monit',
 
           permission: 'monit:look'
 
         },
 
+        {
 
+          id: 7,
 
+          title: 'AI人脸识别',
 
+          url: '/crew',
 
+          permission: 'crew:look'
 
+        },
 
       ],
 
       num: 0,
 
       leftNum: 0,
 
@@ -344,7 +352,8 @@ export default {
 
         tadayXiXiao: "0",
 
       },
 
       alarm: {},
 
-      permissionShow: false
 
+      permissionShow: false,
 
+      step: 0,
 
     }
 
   },
 
   methods: {
 
@@ -385,20 +394,22 @@ export default {
 
       })
 
     },
 
     prev() {
 
+      let step = this.step / 5;
 
       if(this.num > 0) {
 
         this.num--;
 
-        this.leftNum += 310;
 
+        this.leftNum += step;
 
       } else {
 
         this.num = 0;
 
         this.leftNum = 0;
 
       }
 
     },
 
     next() {
 
+      let step = this.step / 5;
 
       if(this.num >= this.list.length - 5) {
 
         return;
 
       } else {
 
         this.num++;
 
-        this.leftNum -= 310;
 
+        this.leftNum -= step;
 
       }
 
     },
 
     initLine() {
 
@@ -415,8 +426,8 @@ export default {
 
     },
 
     onChange(i) {
 
       clearInterval(this.timer2);
 
-      if(i > 4) {
 
-        this.selectId = 4;
 
+      if(i > 6) {
 
+        this.selectId = 6;
 
       } else {
 
         this.selectId = i;
 
       }
 
@@ -425,7 +436,7 @@ export default {
 
       let that = this;
 
       this.timer2 = setInterval(() => {
 
         setTimeout(() => {
 
-          if(that.selectId >= 4) {
 
+          if(that.selectId >= 6) {
 
             that.selectId = 0;
 
           } else {
 
             that.selectId++;
 
@@ -445,7 +456,8 @@ export default {
 
   },
 
   mounted() {
 
     this.init()
 
-    this.width = this.list.length * (220 + 180) - 90;
 
+    this.width = this.list.length * (220 + 180);
 
+    this.step = document.getElementsByClassName('content-center')[0].clientWidth;
 
     this.initLine()
 
     this.initData();
 
     // this.initFalsh();

+ 2 - 2
src/views/MainLayout.vue
查看文件 

@@ -401,8 +401,8 @@ export default {
 
     color: white !important;
 
   }
 
   .MainLayout {
 
-    width: 100vw;
 
-    height: 100vh;
 
+    width: 100%;
 
+    height: 100%;
 
     background: url("../assets/u1.jpg") no-repeat;
 
     background-size: 100% 100%;
 
     box-sizing: border-box;

+ 594 - 250
src/views/Monit/Monit.vue
查看文件 

@@ -1,9 +1,9 @@
 
 <template>
 
-  <div class="monit">
 
-    <div class="monit-left">
 
-      <div class="btn" @click="show=true">视频列表</div>
 
-      <div class="btn btn-fixed" @click="showVideo = true">配置</div>
 
-<!--      <div class="monit-title" @click="isShow = !isShow">-->
 
+<!--  <div class="monit" @click="show = false">-->
 
+<!--    <div class="monit-left">-->
 
+<!--      <div class="btn" v-show="!show" @click.stop="show=true">视频列表</div>-->
 
+<!--      <div class="btn btn-fixed" @click.stop="showVideo = true">配置</div>-->
 
+<!--      <div class="monit-title" @click.stop="isShow = !isShow">-->
 
 <!--        <span style="font-size: 16px">选择监控:</span>-->
 
 <!--        &emsp;-->
 
 <!--        <el-cascader-->
 
@@ -14,94 +14,168 @@
 
 <!--          :props="{value: 'id', label: 'cameraName', children: 'cameraList', expandTrigger: 'hover', disabled: 'runStatus'}"-->
 
 <!--          :show-all-levels="false"></el-cascader>-->
 
 <!--      </div>-->
 
-      <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" :style="{width: $store.state.screenVideo ? '100%': '80%', height: '100%', margin: '0 auto'}" frameborder="0"  allowfullscreen="true"></iframe>
 
-    </div>
 
-    <div class="monit-right" v-if="$store.state.screenVideo">
 
-      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">
 
-        <swiper-slide v-for="(item, i) in videoList" :key="i">
 
-          <div class="case">
 
-            <template v-if="num === 0 && (i === 0 || i === 1 || i === 2)">
 
-              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
-            </template>
 
-            <template v-else-if="num === 3 && (i ===3 || i === 4 || i === 5)">
 
-              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>
 
-            </template>
 
+<!--      <iframe v-if="isVideo" :src="'static/jinm/index.html?'+'1'+','+ cameraOne +','+ cameraTwo + ',' +'100%' + ',' + '0'" :style="{width: $store.state.screenVideo ? '100%': '80%', height: '100%', margin: '0 auto'}" frameborder="0"  allowfullscreen="true"></iframe>-->
 
+<!--    </div>-->
 
+<!--    <div class="monit-right" v-if="$store.state.screenVideo">-->
 
+<!--      <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" ref="mySwiper" class="swiper" :options="swiperOption">-->
 
+<!--        <swiper-slide v-for="(item, i) in videoList" :key="i">-->
 
+<!--          <div class="case">-->
 
+<!--            &lt;!&ndash;     v-if="num === 0 && (i === 0 || i === 1 || i === 2)"       &ndash;&gt;-->
 
+<!--            <template>-->
 
+<!--              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>-->
 
+<!--            </template>-->
 
+<!--&lt;!&ndash;            <template v-else-if="num === 3 && (i ===3 || i === 4 || i === 5)">&ndash;&gt;-->
 
+<!--&lt;!&ndash;              <iframe  :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%;" frameborder="0"  allowfullscreen="true"></iframe>&ndash;&gt;-->
 
+<!--&lt;!&ndash;            </template>&ndash;&gt;-->
 
+<!--          </div>-->
 
+<!--        </swiper-slide>-->
 
+<!--      </swiper>-->
 
+<!--    </div>-->
 
+<!--    <div class="monit_left" v-show="show">-->
 
+<!--      <div class="monit_content">-->
 
+<!--        <div class="boxTile" :class="[videoActive === i ? 'active' : '']" v-for="(item, i) in options" :key="i" @click.stop="setVideo(item, i)">-->
 
+<!--          {{item.cameraName}}-->
 
+<!--        </div>-->
 
+<!--      </div>-->
 
+<!--      <div class="monit-scroll monit_content" style="overflow: auto;">-->
 
+<!--        <div class="boxTile" :class="[active === i ? 'active' : '']" v-for="(item, i) in videoItem" :key="i" @click.stop="getVideoItems(item, i)">-->
 
+<!--          {{item.cameraName}}-->
 
+<!--        </div>-->
 
+<!--      </div>-->
 
+<!--      <div class="cancel" @click.stop="show=false">关闭监控列表</div>-->
 
+<!--    </div>-->
 
+<!--    <div class="monit-dialog" v-show="showVideo" @click="showVideo = false">-->
 
+<!--      <div class="monit-content1">-->
 
+<!--        <div class="monit_box">-->
 
+<!--          <h3>视 频 配 置</h3>-->
 
+<!--          <div class="monit_flex">-->
 
+<!--            <div class="monit_bise">-->
 
+<!--              展 示 轮 巡-->
 
+<!--            </div>-->
 
+<!--            <div class="monit_bise" @click.stop>-->
 
+<!--              <el-switch-->
 
+<!--                active-color="#13ce66"-->
 
+<!--                inactive-color="#ff4949"-->
 
+<!--                v-model="$store.state.screenVideo"-->
 
+<!--                @change="changeMode"></el-switch>-->
 
+<!--            </div>-->
 
+<!--          </div>-->
 
+<!--        </div>-->
 
+<!--      </div>-->
 
+<!--    </div>-->
 
+<!--  </div>-->
 
+  <div class="monit">
 
+    <div class="monit_left">
 
+      <div class="monit_route">
 
+        <div
 
+          :class="['route_box', i === route_index ? 'route_active' : '']"
 
+          v-for="(item, i) in bigMonitList"
 
+          :key="item.id"
 
+          @click="updateRoute(i, item)">{{item.cameraName}}</div>
 
+      </div>
 
+      <div class="video_back">
 
+        <div class="video_left_bottom"></div>
 
+        <div class="video_right_bottom"></div>
 
+        <div class="video_left_top">
 
+          <div class="video_shi" @click="setView">
 
+            <div class="video_icon"></div>
 
+            <div style="color: #fff;">视图</div>
 
           </div>
 
-        </swiper-slide>
 
-      </swiper>
 
-    </div>
 
-    <div class="monit_left" v-show="show">
 
-      <div style="flex: 1; background-color: #fff">
 
-        <div class="boxTile" :class="[videoActive === i ? 'active' : '']" v-for="(item, i) in options" :key="i" @click="setVideo(item, i)">
 
-          {{item.cameraName}}
 
         </div>
 
-      </div>
 
-      <div class="monit-scroll" style="flex: 1; overflow: auto; background-color: #fff">
 
-        <div class="boxTile" :class="[active === i ? 'active' : '']" v-for="(item, i) in videoItem" :key="i" @click="getVideoItems(item, i)">
 
-          {{item.cameraName}}
 
+        <div class="video_right_top">
 
+          <div class="video_full" @click="onFull">
 
+            <div class="video_full_icon"></div>
 
+            <div style="color: #fff;">全屏</div>
 
+          </div>
 
+        </div>
 
+        <div class="video_iframe">
 
+          <iframe v-if="num === 1 && isVideo" name="myIframe" :src="'static/jinm/index.html?'+'1'+','+ selectList[0].wsUrl +','+ selectList[0].rtspUrl + ',' +'100%' + ',' + '0'" style="width: 100%; height: 100%; margin: 0 auto;" frameborder="0"  allowfullscreen="true"></iframe>
 
+          <template v-if="num === 4">
 
+            <iframe
 
+              v-for="(item, i) in selectList"
 
+              :key="i"
 
+              :src="'static/jinm/index.html?'+'1'+','+ item.wsUrl +','+ item.rtspUrl + ',' +'100%' + ',' + '0'"
 
+              frameborder="0"
 
+              allowfullscreen="true"
 
+              class="iframe_list"
 
+            ></iframe>
 
+          </template>
 
+        </div>
 
+        <!-- 视图  -->
 
+        <div v-show="show" class="view_num" @click="cut">
 
+          {{num !== 1 ? '一分屏 ' : '四分屏'}}
 
         </div>
 
       </div>
 
-      <div class="cancel" @click="show=false">关闭监控列表</div>
 
     </div>
 
-    <div class="monit-dialog" v-show="showVideo" @click="showVideo = false">
 
-      <div class="monit-content1">
 
-        <div class="monit_box">
 
-          <h3>视 频 配 置</h3>
 
-          <div class="monit_flex">
 
-            <div class="monit_bise">
 
-              展 示 轮 巡
 
+    <div class="monit_right">
 
+      <div class="monit_dis">
 
+        <div :class="['dis_content', dis === 1 ? 'dis_active' : '']" @click="cutMonit(1)">位置划分</div>
 
+        <div :class="['dis_content', dis === 2 ? 'dis_active' : '']"  @click="cutMonit(2)">功能划分</div>
 
+      </div>
 
+      <div class="monit_scroll">
 
+        <template v-if="dis === 1 ">
 
+          <template v-for="(item, i) in options">
 
+            <div :key="i">
 
+              <div class="monit_index" @click="clickParent(i)">
 
+                <i class="el-icon-caret-right" v-show="!item.isShow"></i>
 
+                <i class="el-icon-caret-bottom" v-show="item.isShow"></i>
 
+                <span class="padding_left_text">{{item.cameraName}}</span>
 
+              </div>
 
+              <div
 
+                v-show="item.isShow"
 
+                :class="['monit_item', n.isShow ? 'monit_item_active': '']"
 
+                v-for="(n) in item.cameraList"
 
+                :key="n.id"
 
+                @click="clickChild(n.id)">
 
+                <span>{{n.cameraName}}</span>
 
+                <div v-show="n.isShow" class="position_text">查看中</div>
 
+              </div>
 
             </div>
 
-            <div class="monit_bise" @click.stop>
 
-              <el-switch
 
-                active-color="#13ce66"
 
-                inactive-color="#ff4949"
 
-                v-model="$store.state.screenVideo"
 
-                @change="changeMode"></el-switch>
 
+          </template>
 
+        </template>
 
+        <template v-else-if="dis === 2">
 
+          <template v-for="(item, i) in monitList">
 
+            <div :key="i">
 
+              <div class="monit_index" @click="clickParent(i)">
 
+                <i class="el-icon-caret-right" v-show="!item.isShow"></i>
 
+                <i class="el-icon-caret-bottom" v-show="item.isShow"></i>
 
+                <span class="padding_left_text">{{item.cameraName}}</span>
 
+              </div>
 
+              <!--     v-show="item.isShow"         -->
 
+              <div
 
+                v-show="item.isShow"
 
+                :class="['monit_item', n.isShow ? 'monit_item_active': '']"
 
+                v-for="(n) in item.cameraList"
 
+                :key="n.id"
 
+                @click="clickChild(n.id)">
 
+                <span>{{n.cameraName}}</span>
 
+                <div v-show="n.isShow" class="position_text">查看中</div>
 
+              </div>
 
             </div>
 
-          </div>
 
-        </div>
 
+          </template>
 
+        </template>
 
       </div>
 
     </div>
 
   </div>
 
 </template>
 
 
 <script>
 
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
-import 'swiper/css/swiper.css'
 
-import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo, findOne, findUpdate} from "@/utils/api";
 
-import axios from "axios";
 
+// import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
+// import 'swiper/css/swiper.css'
 
+import {getVideoAll, getVideo, saveVideo, lastVideo, romVideo, findOne, findUpdate, getVideoLsitAndCamera} from "@/utils/api";
 
+// import axios from "axios";
 
 import { mapActions } from "vuex";
 
-const c_swiper = document.getElementsByClassName("swiper")
 
+// const c_swiper = document.getElementsByClassName("swiper")
 
 
 export default {
 
   name: "Monit",
 
   components: {
 
-    swiper,
 
-    swiperSlide,
 
+    // swiper,
 
+    // swiperSlide,
 
   },
 
   data() {
 
     // let self = this;
 
     return {
 
-      swiperOption: {
 
-        direction: 'vertical',
 
-        slidesPerView: 3,
 
-        slidesPerColumn: 1,
 
-        slidesPerGroup: 3,
 
-        // spaceBetween: 30,
 
-        autoplay: {
 
-          delay: 10000,
 
-          disableOnInteraction: false
 
-        },
 
-        on: {
 
-          slideChange() {
 
-            // console.log(c_swiper[0].swiper)
 
-            // this.num = c_swiper[0].swiper.activeIndex
 
-            self.returnNum(c_swiper[0].swiper.activeIndex)
 
-            // console.log(this.num);
 
-            // return this.num
 
-          }
 
-        }
 
-      },
 
       videoId: '',
 
       isShow: false,
 
       isVideo: false,
 
@@ -110,13 +184,24 @@ export default {
 
       cameraTwo: '',
 
       videoList: [],
 
       timer: null,
 
-      num: 0,
 
+      num: 1,
 
       index: true,
 
       videoActive: 0,
 
       videoItem: [],
 
       active: '',
 
       show: false,
 
       showVideo: false,
 
+      // 功能划分，位置划分
 
+      dis: 1,
 
+      selectList: [],
 
+      selectIds: [],
 
+      // 功能区大列表
 
+      bigMonitList: [],
 
+      // 功能区列表
 
+      monitList: [],
 
+      route_index: '',
 
+      // 选中monitid
 
+      monitId: '',
 
     }
 
   },
 
   watch: {
 
@@ -143,27 +228,40 @@ export default {
 
   },
 
   methods: {
 
     ...mapActions(['setScreenVideoAsync']),
 
-    init() {
 
+    async init () {
 
       var that = this;
 
-      axios.all([
 
-        getVideoAll({}),
 
-          lastVideo({})
 
-      ]).then(axios.spread(function(res1, res2) {
 
-        if(res1.code === 10000) {
 
-          res1.data.forEach(item => {
 
-            item.cameraList.forEach(items => {
 
-              items.runStatus = !items.runStatus
 
-            })
 
+      let res1 = await getVideoAll({});
 
+      if(res1.code === 10000){
 
+        res1.data.forEach(item => {
 
+          item.isShow = false;
 
+          item.cameraList.forEach(items => {
 
+            items.runStatus = !items.runStatus;
 
+            items.isShow = false;
 
           })
 
-          that.options = res1.data;
 
-          that.videoItem = that.options[0].cameraList;
 
-        }
 
-        if(res2.code === 10000) {
 
-          that.isVideo = true;
 
-          that.cameraOne = res2.data.wsUrl;
 
-          that.cameraTwo = res2.data.rtspUrl;
 
-        }
 
-      }))
 
+        })
 
+        that.options = res1.data;
 
+        that.videoItem = that.options[0].cameraList;
 
+      }
 
+
 
+      let res2 = await lastVideo({});
 
+      if(res2.code === 10000) {
 
+        that.selectList = [res2.data]
 
+        that.isVideo = true;
 
+        this.options.forEach(items => {
 
+          items.cameraList.forEach(item => {
 
+            if(item.id == this.selectList[0].id) {
 
+              item.isShow = true;
 
+            } else {
 
+              item.isShow = false;
 
+            }
 
+          })
 
+        })
 
+      }
 
+
 
+      let res3 = await getVideoLsitAndCamera({});
 
+      if(res3.code === 10000) {
 
+        this.bigMonitList = res3.data;
 
+      }
 
     },
 
     handleChange(value) {
 
       let val = value[value.length - 1];
 
@@ -192,19 +290,14 @@ export default {
 
     setVideo(item, i) {
 
       this.videoItem = item.cameraList;
 
       this.videoActive = i;
 
+      this.active = '';
 
     },
 
-    getVideoItems(item, i) {
 
-      this.active = i;
 
+    getVideoItems(item) {
 
       let params= {
 
-        cameraIds: [item.id],
 
+        cameraIds: item,
 
       }
 
       getVideo(params).then(res =>{
 
-        this.isVideo = true;
 
-        this.cameraOne = res.data[0].wsUrl;
 
-        this.cameraTwo = res.data[0].rtspUrl;
 
-        saveVideo({cameraId: item.id}).then(res => {
 
-          console.log(res)
 
-        })
 
+        this.selectList = res.data;
 
       })
 
     },
 
     initConfig() {
 
@@ -227,22 +320,175 @@ export default {
 
           console.log(res)
 
         })
 
         this.setScreenVideoAsync(val)
 
+    },
 
+    cutMonit(num) {
 
+      if(this.dis !== num) {
 
+        this.selectIds = [];
 
+        this.dis = num;
 
+        this.route_index = '';
 
+      }
 
+      this.options.forEach(items => {
 
+        items.isShow = false;
 
+        items.cameraList.forEach(item => {
 
+          item.isShow = false;
 
+        })
 
+      })
 
+      if(num === 2) {
 
+        if(this.bigMonitList.length > 0) {
 
+          this.monitList = this.bigMonitList[0].functionList;
 
+          this.route_index = 0;
 
+        }
 
+        this.monitList.forEach(items => {
 
+          items.isShow = false;
 
+          items.cameraList.forEach(item => {
 
+            item.isShow = false;
 
+          })
 
+        })
 
+      }
 
+    },
 
+    // 新加
 
+    clickParent(i) {
 
+      if(this.dis === 1) {
 
+        this.options.forEach((item, index) => {
 
+          if(i == index) {
 
+            item.isShow = !item.isShow
 
+          } else {
 
+            item.isShow = false
 
+          }
 
+        })
 
+      } else if(this.dis === 2) {
 
+        this.monitList.forEach((item, index) => {
 
+          if(i == index) {
 
+            item.isShow = !item.isShow;
 
+          } else {
 
+            item.isShow = false
 
+          }
 
+        })
 
+        this.$forceUpdate()
 
+      }
 
+      // this.options[i].isShow = !this.options[i].isShow;
 
+    },
 
+    clickChild(id){
 
+      // 单向
 
+      if(this.num === 1) {
 
+        this.getVideoItems([id]);
 
+        if(this.dis === 1) {
 
+          this.options.forEach(items => {
 
+            items.cameraList.forEach(item => {
 
+              if(item.id == id) {
 
+                item.isShow = true;
 
+              } else {
 
+                item.isShow = false;
 
+              }
 
+            })
 
+          })
 
+        } else {
 
+          this.monitList.forEach(items => {
 
+            items.cameraList.forEach(item => {
 
+              if(item.id == id) {
 
+                item.isShow = true;
 
+              } else {
 
+                item.isShow = false;
 
+              }
 
+            })
 
+          })
 
+        }
 
+      } else {
 
+        // 4路
 
+        let delId = '';
 
+        if(this.selectIds.indexOf(id) > -1) {
 
+          return;
 
+        } else {
 
+          if(this.selectIds.length > 3) {
 
+            delId = this.selectIds[0];
 
+            this.selectIds.shift();
 
+            this.selectIds.push(id);
 
+          } else {
 
+            this.selectIds.push(id);
 
+          }
 
+          this.getVideoItems(this.selectIds);
 
+          if(this.dis === 1) {
 
+            this.options.forEach(items => {
 
+              items.cameraList.forEach(item => {
 
+                if(item.id == delId) {
 
+                  item.isShow = false;
 
+                }
 
+                if(item.id == id) {
 
+                  item.isShow = true;
 
+                }
 
+              })
 
+            })
 
+          } else {
 
+            this.monitList.forEach(items => {
 
+              items.cameraList.forEach(item => {
 
+                if(item.id == delId) {
 
+                  item.isShow = false;
 
+                }
 
+                if(item.id == id) {
 
+                  item.isShow = true;
 
+                }
 
+              })
 
+            })
 
+          }
 
+        }
 
+      }
 
+      this.monitId = id;
 
+      // this.options[i].cameraList[k].isShow = !this.options[i].cameraList[k].isShow;
 
+    },
 
+    // 点击视图
 
+    setView() {
 
+      this.show = !this.show;
 
+    },
 
+    // 全屏
 
+    onFull() {
 
+      let video = window.frames['myIframe'].document.getElementById('video');
 
+      if (video.requestFullscreen) { //w3c
 
+        video.requestFullscreen();
 
+      } else if (video.mozRequestFullScreen) { //moz Firefox
 
+        video.mozRequestFullScreen();
 
+      } else if (video.msRequestFullscreen) { //IE
 
+        video.msRequestFullscreen();
 
+      } else if (video.oRequestFullscreen) { //Opera
 
+        video.oRequestFullscreen();
 
+      } else if (video.webkitRequestFullscreen) { //webkit内核 Chrome Safari
 
+        video.webkitRequestFullScreen();
 
+      }
 
+    },
 
+    cut() {
 
+      if(this.num === 1) {
 
+        this.num = 4;
 
+        this.selectIds = [];
 
+        this.selectIds.push(this.selectList[0].id);
 
+      } else {
 
+        this.num = 1;
 
+      }
 
+      this.show = false;
 
+    },
 
+    updateRoute(i, item) {
 
+      this.route_index = i;
 
+      this.dis = 2;
 
+      let arr = [];
 
+      item.functionList.forEach(items => {
 
+        items.isShow = false;
 
+        items.cameraList.forEach(items => {
 
+          items.runStatus = !items.runStatus;
 
+          items.isShow = false;
 
+        })
 
+      })
 
+      arr = item.functionList;
 
+      this.monitList = arr;
 
     }
 
   },
 
   mounted() {
 
     this.init()
 
     this.initCrmea();
 
     this.initConfig();
 
-    var that = this;
 
-    if(this.$store.state.screenVideo) {
 
-      this.timer = setInterval(() => {
 
-        that.initCrmea();
 
-      }, 60000)
 
-    }
 
+
 
   },
 
   beforeDestroy() {
 
-    clearInterval(this.timer);
 
-    this.timer = null;
 
+    saveVideo({cameraId: this.monitId}).then(res => {
 
+      console.log(res)
 
+    })
 
   }
 
 }
 
 </script>
 
@@ -252,179 +498,148 @@ export default {
 
     width: 100%;
 
     height: 100%;
 
     box-sizing: border-box;
 
-    padding: 20px 0 0 0;
 
+    padding: 10px 0 0 0;
 
     display: flex;
 
     justify-content: space-between;
 
     position: relative;
 
   }
 
-  .monit-left {
 
-    flex: 1;
 
+  .monit_left {
 
+    width: 1450px;
 
     height: 100%;
 
-    background: url("../../assets/BioSafety/kuang.png") no-repeat;
 
-    background-size: 100% 100%;
 
-    position: relative;
 
-    box-sizing: border-box;
 
-    padding: 40px 30px 30px 30px;
 
-    display: flex;
 
-    align-items: center;
 
-  }
 
-  .monit-right {
 
-    width: 450px;
 
-    margin-left: 20px;
 
   }
 
-  .case {
 
+  .video_back {
 
     width: 100%;
 
-    height: 100%;
 
-    background: url("../../assets/BioSafety/kuang.png") no-repeat;
 
+    height: calc(100% - 70px);
 
+    background: url("../../assets/video.png") no-repeat;
 
     background-size: 100% 100%;
 
-    box-sizing: border-box;
 
-    padding: 20px;
 
+    position: relative;
 
   }
 
-  .monit-title {
 
-    width: 300px;
 
-    height: 40px;
 
+  .video_shi {
 
+    width: 35px;
 
+    height: 60px;
 
     position: absolute;
 
-    top: 0;
 
-    left: 50%;
 
-    line-height: 40px;
 
-    transform: translate(-50% , 0);
 
-    background-color: #031032;
 
-    text-align: center;
 
-    color: white;
 
-    font-size: 18px;
 
-    display: flex;
 
-    justify-content: center;
 
-    align-items: center;
 
+    top: 20px;
 
+    left: 30px;
 
+    cursor: pointer;
 
+  }
 
+  .video_full {
 
+    width: 35px;
 
+    height: 60px;
 
+    position: absolute;
 
+    top: 25px;
 
+    right: 25px;
 
     cursor: pointer;
 
   }
 
-  .icon {
 
-    width: 18px;
 
-    height: 18px;
 
-    display: inline-block;
 
-    background: url("../../assets/Zoology/u5069.svg") no-repeat;
 
+  .video_icon {
 
+    width: 35px;
 
+    height: 35px;
 
+    background: url("../../assets/shitu.png") no-repeat;
 
     background-size: 100% 100%;
 
-    margin-top: 10px;
 
   }
 
-  .monit-content {
 
-    /*width: 1180px;*/
 
-    /*height: 300px;*/
 
-    position: absolute;
 
-    top: 45px;
 
-    left: 50%;
 
-    transform: translate(-50% , 0);
 
-    border: 5px solid #00FFFF;
 
-    border-radius: 10px;
 
-    background-color: #323232;
 
-    display: flex;
 
-    box-sizing: border-box;
 
-    padding: 60px 20px;
 
+  .video_full_icon {
 
+    width: 35px;
 
+    height: 35px;
 
+    background: url("../../assets/full.png") no-repeat;
 
+    background-size: 100% 100%;
 
   }
 
-  .content-flex {
 
-    flex: 1;
 
+  .monit_right {
 
+    width: 340px;
 
+    height: 100%;
 
+    box-sizing: border-box;
 
+    background: rgba(42,130,228,0.1200);
 
+    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5000);
 
+    border: 1px solid #19ADBA;
 
+    padding: 10px 10px;
 
   }
 
-  .monit_left {
 
-    width: 400px;
 
-    height: 640px;
 
-    position: fixed;
 
-    top: 0;
 
-    left: 0;
 
-    background-color: rgba(0,0,0, .5);
 
+  .monit_dis {
 
+    width: 100%;
 
+    height: 40px;
 
     box-sizing: border-box;
 
-    padding: 20px;
 
+    border: 1px solid #ddd;
 
     display: flex;
 
   }
 
-  .boxTile {
 
-    width: 120px;
 
-    height: 30px;
 
-    line-height: 30px;
 
-    border: 1px solid #ddd;
 
-    text-align: center;
 
-    margin: 10px auto;
 
+  .dis_content {
 
+    width: 50%;
 
+    height: 38px;
 
+    line-height: 38px;
 
+    font-size: 16px;
 
+    color: #fff;
 
     cursor: pointer;
 
   }
 
-  .active {
 
-    background-color: #009cff;
 
+  .dis_active {
 
+    background: #19ADBA;
 
   }
 
-  .btn {
 
-    width: 60px;
 
-    height: 30px;
 
-    line-height: 30px;
 
-    background-color: #009cff;
 
-    text-align: center;
 
-    color: white;
 
-    position: absolute;
 
-    top: -15px;
 
-    cursor: pointer;
 
+  .monit_scroll {
 
+    width: 100%;
 
+    height: calc(100% - 50px);
 
+    overflow: auto;
 
+    /*display: flex;*/
 
   }
 
-  .btn-fixed {
 
-    top: -15px;
 
-    right: 25px;
 
+  .monit_scroll::-webkit-scrollbar {
 
+    display: none;
 
   }
 
-  .cancel {
 
-    width: 80px;
 
-    height: 30px;
 
-    line-height: 30px;
 
-    background-color: #009cff;
 
-    text-align: center;
 
-    color: white;
 
-    position: absolute;
 
-    right: -100px;
 
+
 
+  .monit_index {
 
+    margin: 10px auto;
 
+    box-sizing: border-box;
 
+    width: 334px;
 
+    height: 40px;
 
+    background: url("../../assets/on.png") no-repeat;
 
+    background-size: 100% 100%;
 
+    line-height: 40px;
 
+    text-align: left;
 
+    cursor: pointer;
 
+    font-weight: 400;
 
+    padding-left: 40px;
 
+    color: #FFFFFF;
 
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.5000);
 
+    position: relative;
 
+    user-select: none;
 
+  }
 
+  .monit_item {
 
+    margin: 10px auto;
 
+    box-sizing: border-box;
 
+    width: 334px;
 
+    height: 40px;
 
+    background: url("../../assets/on1.png") no-repeat;
 
+    background-size: 100% 100%;
 
+    line-height: 40px;
 
+    text-align: left;
 
     cursor: pointer;
 
+    font-weight: 400;
 
+    padding-left: 60px;
 
+    color: #FFFFFF;
 
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.5000);
 
+    user-select: none;
 
+    position: relative;
 
   }
 
-  .monit-scroll {
 
-    overflow: auto;
 
+
 
+  .monit_item_active {
 
+    background: url("../../assets/non.png") no-repeat;
 
+    background-size: 100% 100%;
 
   }
 
-  .monit-scroll::-webkit-scrollbar {
 
-    /*滚动条整体样式*/
 
-    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
 
-    height: 1px;
 
-  }
 
-  .monit-scroll::-webkit-scrollbar-thumb {
 
-    /*滚动条里面小方块*/
 
-    border-radius   : 8px;
 
-    background-color:  #535353;
 
-    background-image: -webkit-linear-gradient(
 
-      45deg,
 
-      rgba(255, 255, 255, 0.2) 25%,
 
-      transparent 25%,
 
-      transparent 50%,
 
-      rgba(255, 255, 255, 0.2) 50%,
 
-      rgba(255, 255, 255, 0.2) 75%,
 
-      transparent 75%,
 
-      transparent
 
-    );
 
-  }
 
-  .monit-scroll::-webkit-scrollbar-track {
 
-    /*滚动条里面轨道*/
 
-    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
 
-    /*background   : #ededed;*/
 
-    border-radius: 10px;
 
-  }
 
-  .monit-dialog {
 
-    width: 100vw;
 
-    height: 100vh;
 
-    position: fixed;
 
+  .padding_left_text {
 
+    padding-left: 10px;
 
+  }
 
+  .position_text {
 
+    height: 40px;
 
+    line-height: 40px;
 
+    position: absolute;
 
     top: 0;
 
-    left: 0;
 
-    background-color: rgba(0,0,0, .9);
 
-    z-index: 999;
 
+    right: 30px;
 
+    color: #23FF00;
 
+
 
   }
 
-  .monit-content1 {
 
-    width: 50%;
 
+  .position_text:before{
 
     position: absolute;
 
+    content: '';
 
+    width: 6px;
 
+    height: 6px;
 
     top: 50%;
 
-    left: 50%;
 
-    transform: translate(-50%, -50%);
 
-    /*background-color: #fff;*/
 
-  }
 
-  .monit_box {
 
-    height: 400px;
 
-    background-color: #007aff;
 
-    border-radius: 15px;
 
-    text-align: center;
 
-    box-sizing: border-box;
 
-    padding: 20px;
 
-    color: #fff;
 
+    left: -15px;
 
+    border-radius: 50%;
 
+    background-color: #23FF00;
 
+    transform: translate(0, -50%);
 
   }
 
   .monit_flex {
 
     display: flex;
 
@@ -435,4 +650,133 @@ export default {
 
     width: 50%;
 
     height: 50px;
 
   }
 
+  .video_iframe {
 
+    width: 90%;
 
+    height: 90%;
 
+    position: absolute;
 
+    top: 70px;
 
+    left: 75px;
 
+    display: flex;
 
+    flex-flow: row wrap;
 
+    justify-content: center;
 
+    align-content: flex-start
 
+    /*z-index: -9;*/
 
+  }
 
+  .video_left_bottom {
 
+    width: 111px;
 
+    height: 111px;
 
+    background: url("../../assets/111.png") no-repeat;
 
+    background-size: cover;
 
+    position: absolute;
 
+    left: 22px;
 
+    bottom: 22px;
 
+    z-index: 99;
 
+  }
 
+  .video_right_bottom {
 
+    width: 111px;
 
+    height: 111px;
 
+    background: url("../../assets/222.png") no-repeat;
 
+    background-size: cover;
 
+    position: absolute;
 
+    right: 15px;
 
+    bottom: 12px;
 
+    z-index: 99;
 
+  }
 
+  .video_left_top{
 
+    width: 111px;
 
+    height: 111px;
 
+    background: url("../../assets/333.png") no-repeat;
 
+    background-size: cover;
 
+    position: absolute;
 
+    z-index: 99;
 
+    top: 19px;
 
+    left: 26px;
 
+  }
 
+  .video_right_top {
 
+    width: 111px;
 
+    height: 111px;
 
+    background: url("../../assets/444.png") no-repeat;
 
+    background-size: cover;
 
+    position: absolute;
 
+    z-index: 99;
 
+    top: 34px;
 
+    right: 17px;
 
+  }
 
+  .view_num {
 
+    width: 111px;
 
+    height: 111px;
 
+    background: url("../../assets/222.png") no-repeat;
 
+    background-size: 100% 100%;
 
+    position: absolute;
 
+    top: 46px;
 
+    left: 55px;
 
+    line-height: 111px;
 
+    box-sizing: border-box;
 
+    padding-left: 20px;
 
+    color: #fff;
 
+    font-size: 16px;
 
+    cursor: pointer;
 
+    z-index: 99;
 
+  }
 
+  .view_box {
 
+    width: 36px;
 
+    cursor: pointer;
 
+  }
 
+  .box_icon {
 
+    width: 36px;
 
+    height: 36px;
 
+    margin-bottom: 10px;
 
+  }
 
+  .box_icon_one {
 
+    background: url("../../assets/oneActive.png") no-repeat;
 
+    background-size: cover;
 
+  }
 
+  .box_icon_one_no {
 
+    background: url("../../assets/oneActiveNo.png") no-repeat;
 
+    background-size: cover;
 
+  }
 
+  .box_icon_four {
 
+    background: url("../../assets/fourActive.png") no-repeat;
 
+    background-size: cover;
 
+  }
 
+  .box_icon_four_no {
 
+    background: url("../../assets/fourActiveNo.png") no-repeat;
 
+    background-size: cover;
 
+  }
 
+  .iframe_list {
 
+    width: 635px;
 
+    height: 351px;
 
+    /*margin: 0 auto;*/
 
+    border: 1px solid #007aff;
 
+  }
 
+  /*.iframe_list:nth-child(n) {*/
 
+  /*  margin-left: 10px;*/
 
+  /*}*/
 
+  /*.iframe_list:nth-child(2n) {*/
 
+  /*  margin-right: 8px;*/
 
+  /*}*/
 
+  .monit_route {
 
+    width: 100%;
 
+    height: 60px;
 
+    margin-bottom: 10px;
 
+    display: flex;
 
+    justify-content: space-around;
 
+    align-items: center;
 
+  }
 
+  .route_box {
 
+    width: 150px;
 
+    height: 52px;
 
+    /*border: 1px solid #Ddd;*/
 
+    border-radius: 5px;
 
+    line-height: 52px;
 
+    color: #fff;
 
+    cursor: pointer;
 
+    background: url("../../assets/noActive.png") no-repeat;
 
+    background-size: 100% 100%;
 
+    font-size: 14px;
 
+  }
 
+  .route_active {
 
+    background: url("../../assets/xuan.png") no-repeat;
 
+    background-size: 100% 100%;
 
+  }
 
 </style>

+ 16 - 2
src/views/Production/Production.vue
查看文件 

@@ -201,7 +201,7 @@
 
                   <p>{{ monthAmount }}头</p>
 
                 </div>
 
                 <div class="up">
 
-                  <label>本月销售额</label>
 
+                  <label>上月销售额</label>
 
                   <span>{{ weekSales }}元</span>
 
                   <div class="sales-change">
 
                     <div>
 
@@ -220,7 +220,7 @@
 
                   </div>
 
                 </div>
 
                 <div class="down">
 
-                  <label>本月销售量</label>
 
+                  <label>上月销售量</label>
 
                   <span>{{ weekSalesVolume }}头</span>
 
                   <div class="sales-change">
 
                     <div>
 
@@ -414,6 +414,7 @@ export default {
 
         month: [],
 
         pigletStock: [],
 
         sowStock: [],
 
+        backPigStock: [],
 
       },
 
       pickerOptions: {
 
         // 快捷选项
 
@@ -584,7 +585,9 @@ export default {
 
               res.data["grice_stock"],
 
               res.data["piglet_stock"],
 
               res.data["fatpig_stock"],
 
+              res.data['sow_stock_5']
 
             ];
 
+            console.log(this.inventoryPieData)
 
             this.amountPieData = {
 
               name: ["妊娠", "哺乳", "空怀", "后备"],
 
               data: [
 
@@ -613,6 +616,7 @@ export default {
 
             month: [],
 
             pigletStock: [],
 
             sowStock: [],
 
+            backPigStock: [],
 
           };
 
         }
 
       });
 
@@ -638,6 +642,7 @@ export default {
 
               if (item === "psy") {
 
                 itemNum = res.data[item].stockQuantity;
 
               }
 
+              console.log(itemNum)
 
               this.importantData.push({
 
                 id: res.data[item].id,
 
                 name: res.data[item].stockName,
 
@@ -647,6 +652,15 @@ export default {
 
           }
 
           this.dataLoading = false;
 
         }
 
+        // this.importantData = [
 
+        //   { id: 1, name: '产房成活率', num: '96.15%' },
 
+        //   { id: 2, name: '保育成活率', num: '96.39%' },
 
+        //   { id: 3, name: '肥猪成活率', num: '97.25%' },
 
+        //   { id: 4, name: '7日断配率', num: '83.5%' },
 
+        //   { id: 5, name: '配种分娩率', num: '89.82%' },
 
+        //   { id: 6, name: 'PSY', num: '23.96' },
 
+        // ]
 
+
 
       });
 
     },
 
     // 应付排名

+ 15 - 8
src/views/Production/board/ChartAmountLine.vue
查看文件 

@@ -39,7 +39,7 @@ export default {
 
         // legend: {
 
         //   data: ['头']
 
         // },
 
-        color: ["#3aa0ff", "#403DEA", "#226942", "#1AD06C", "#975fe4"],
 
+        color: ["#3aa0ff", "#403DEA", "#226942", "#1AD06C", "#975fe4", '#6A8FF1'],
 
         grid: {
 
           top: "22%",
 
           left: "10%",
 
@@ -182,13 +182,20 @@ export default {
 
               },
 
             },
 
           },
 
-          // {
 
-          //   name: '湿度',
 
-          //   type: 'line',
 
-          //   smooth: false,
 
-          //   yAxisIndex: 1,
 
-          //   data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
 
-          // }
 
+          {
 
+            name: "后备猪存栏",
 
+            type: "line",
 
+            smooth: false,
 
+            data: this.data.backPigStock,
 
+            itemStyle: {
 
+              normal: {
 
+                color: "#6A8FF1",
 
+                lineStyle: {
 
+                  color: "#6A8FF1",
 
+                },
 
+              },
 
+            },
 
+          }
 
         ],
 
       };
 
       this.myChart.setOption(options);

+ 12 - 10
src/views/Production/board/ChartAmountPie.vue
查看文件 

@@ -50,7 +50,7 @@ export default {
 
           },
 
         },
 
         legend: {
 
-          top: "25%",
 
+          top: "18%",
 
           left: "55%",
 
           orient: "vertical",
 
           icon: "circle",
 
@@ -124,13 +124,13 @@ export default {
 
               show: false,
 
               // position: 'center'
 
             },
 
-            emphasis: {
 
-              label: {
 
-                show: false,
 
-                fontSize: "40",
 
-                fontWeight: "bold",
 
-              },
 
-            },
 
+            // emphasis: {
 
+            //   label: {
 
+            //     show: false,
 
+            //     fontSize: "40",
 
+            //     fontWeight: "bold",
 
+            //   },
 
+            // },
 
             labelLine: {
 
               show: false,
 
             },
 
@@ -144,11 +144,12 @@ export default {
 
                     "#226942",
 
                     "#1AD06C",
 
                     "#975fe4",
 
+                    "#6A8FF1"
 
                   ];
 
                   return colorList[colors.dataIndex];
 
                 },
 
-                borderWidth: 3, // 设置各项空隙，白边
 
-                borderColor: "#fff",
 
+                // borderWidth: 3, // 设置各项空隙，白边
 
+                // borderColor: "#fff",
 
               },
 
             },
 
             data: [
 
@@ -157,6 +158,7 @@ export default {
 
               { value: this.data[2].stockQuantity, name: "哺乳猪存栏" },
 
               { value: this.data[3].stockQuantity, name: "保育猪存栏" },
 
               { value: this.data[4].stockQuantity, name: "育肥猪存栏" },
 
+              { value: this.data[5].stockQuantity, name: '后备猪存栏'}
 
             ],
 
           },
 
         ],

+ 72 - 41
src/views/Production/board/ChartSales.vue
查看文件 

@@ -42,41 +42,39 @@ export default {
 
       let dataAxis = this.data.timeList;
 
       let start = dataAxis.length - 12;
 
       let end = dataAxis.length - 1;
 
-      let quantityList = this.data.quantityList;
 
-      let moneyListTooltip = this.data.moneyList1;
 
+      // let quantityList = this.data.quantityList;
 
+      // let moneyListTooltip = this.data.moneyList1;
 
       let options = {
 
         tooltip: {
 
           trigger: "axis",
 
-          formatter: (params) => {
 
-            var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
 
-            const index = this.data.moneyList.findIndex(
 
-              (item) => item === params[0].value
 
-            );
 
-            for (var i = 0; i < params.length; i++) {
 
-              //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
 
-              res +=
 
-                `<div>
 
-                  <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
 
-                    params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
 
-                  ]};"></span>
 
-                  ${moneyListTooltip[index]}元
 
-                </div>` +
 
-                `<div><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
 
-                  params[i].color,
 
-                ]};"></span>${quantityList[index]}头</div>`;
 
-            }
 
-            return res;
 
-          },
 
+          // formatter: (params) => {
 
+          //   var res = "<div>" + params[0].name + "</div>"; // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
 
+          //   const index = this.data.moneyList.findIndex(
 
+          //     (item) => item === params[0].value
 
+          //   );
 
+          //   for (var i = 0; i < params.length; i++) {
 
+          //     //因为是个数组，所以要遍历拿到里面的数据，并加入到tooltip的数据内容部分里面去
 
+          //     res +=
 
+          //       `<div>
 
+          //         <span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
 
+          //           params[i].color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
 
+          //         ]};"></span>
 
+          //         ${moneyListTooltip[index]}元
 
+          //       </div>` +
 
+          //       `<div><span style="display:inline-block;margin-right:5px;border-radius:5px;width:10px;height:10px;background-color:${[
 
+          //         params[i].color,
 
+          //       ]};"></span>${quantityList[index]}头</div>`;
 
+          //   }
 
+          //   return res;
 
+          // },
 
         },
 
-        color: ["#289df5"],
 
+        color: ["#289df5", '#45C3A6'],
 
         dataZoom: [
 
           {
 
             type: "inside",
 
             startValue: start,
 
             endValue: end,
 
             show: false,
 
-            // zoomOnMouseWheel: false,
 
-            // zoomLock: true,
 
           },
 
         ],
 
         grid: {
 
@@ -85,22 +83,7 @@ export default {
 
           right: "10%",
 
           top: "20%",
 
           bottom: "15%",
 
-          // bottom: '30%',
 
-          // containLabel: true
 
         },
 
-        // dataZoom: [
 
-        //
 
-        //   {
 
-        //     type: 'slider',
 
-        //     startValue: start,
 
-        //     endValue:end,
 
-        //     zoomOnMouseWheel: false,
 
-        //     zoomLock: true,
 
-        //   },
 
-        //   {
 
-        //     type: 'inside'
 
-        //   },
 
-        // ],
 
         xAxis: [
 
           {
 
             type: "category",
 
@@ -141,10 +124,30 @@ export default {
 
               show: false,
 
             },
 
           },
 
+          {
 
+            type: "value",
 
+            name: "头",
 
+            axisLabel: {
 
+              // formatter: "{value} 元",
 
+              show: true,
 
+            },
 
+            axisLine: {
 
+              show: true,
 
+              lineStyle: {
 
+                color: "rgb(102,255,255)",
 
+              },
 
+            },
 
+            axisTick: {
 
+              show: false,
 
+            },
 
+            splitLine: {
 
+              show: false,
 
+            },
 
+          },
 
         ],
 
         series: [
 
           {
 
-            // name: "销售",
 
+            name: "销售",
 
             type: "line",
 
             // stack: 'Total',
 
             smooth: true,
 
@@ -170,6 +173,34 @@ export default {
 
             },
 
             data: this.data.moneyList,
 
           },
 
+          {
 
+            name: "头数",
 
+            type: "line",
 
+            yAxisIndex: 1,
 
+            // stack: 'Total',
 
+            smooth: true,
 
+            areaStyle: {},
 
+            emphasis: {
 
+              focus: "series",
 
+            },
 
+            itemStyle: {
 
+              color: "#45C3A6",
 
+              borderColor: "#45C3A6",
 
+              normal: {
 
+                label: {
 
+                  show: false,
 
+                  textStyle: {
 
+                    fontSize: 14,
 
+                  },
 
+                },
 
+                areaStyle: {
 
+                  type: "default",
 
+                  opacity: 0.2,
 
+                },
 
+              },
 
+            },
 
+            data: this.data.quantityList,
 
+          },
 
         ],
 
       };
 
       this.myChart.setOption(options, true);

+ 71 - 11
src/views/Zoology/Zoology.vue
查看文件 

@@ -75,7 +75,7 @@
 
             </swiper>
 
           </template>
 
           <template>
 
-            <div style="line-height: 200px;font-size: 18px; color: white">设备已掉线</div>
 
+            <div style="line-height: 200px;font-size: 18px; color: white">维护中...</div>
 
           </template>
 
         </div>
 
       </div>
 
@@ -92,7 +92,7 @@
 
           @emitDates="getWaterDates"
 
         >
 
           <chart-line v-if="waterData.yAxisData.length > 0" :data="waterData" :id="1"></chart-line>
 
-          <div v-else style="font-size: 18px; line-height: 200px; color: white">设备已掉线</div>
 
+          <div v-else style="font-size: 18px; line-height: 200px; color: white">维护中...</div>
 
         </chart-board>
 
       </div>
 
       <div class="left-bottom">
 
@@ -109,7 +109,7 @@
 
                 <chart-line :data="tempData" :id="4"></chart-line>
 
               </template>
 
               <template v-else>
 
-                <div style="font-size: 18px; line-height: 150px; color: white">设备已掉线</div>
 
+                <div style="font-size: 18px; line-height: 150px; color: white">维护中...</div>
 
               </template>
 
             </chart-board>
 
           </div>
 
@@ -123,7 +123,7 @@
 
           >
 
             <chart-board :title="roomName + '湿度'" @emitDates="getWaterDates">
 
               <chart-line v-if="rhData.yAxisData.length > 0" :data="rhData" :id="5"></chart-line>
 
-              <div v-else style="font-size: 18px; line-height: 150px; color: white">设备已掉线</div>
 
+              <div v-else style="font-size: 18px; line-height: 150px; color: white">维护中...</div>
 
             </chart-board>
 
           </div>
 
 
@@ -132,6 +132,12 @@
 
 
     <div class="right">
 
       <div class="right-top">
 
+        <div style="color: white; cursor: pointer" @click="isView = true">{{text}}</div>
 
+        <div class="bio-select" v-show="isView">
 
+          <div class="bio-select-text" @click="setNum(1)">一栋二层育肥一舍</div>
 
+          <div class="bio-select-text" @click="setNum(2)">一栋二层育肥二舍</div>
 
+          <div class="bio-select-text" @click="setNum(3)">三栋三层育肥二舍</div>
 
+        </div>
 
         <div class="kuang">
 
           <iframe
 
               v-if="cameraOne !== ''"
 
@@ -172,10 +178,10 @@
 
           @emitDates="getElecDates"
 
         >
 
           <template v-if="fodderData.yAxisData.length > 0">
 
-            <chart-line :data="fodderData" :id="2"></chart-line>
 
+            <chart-line :data="fodderData" :id="3"></chart-line>
 
           </template>
 
           <template v-else>
 
-            <div style="font-size: 18px; line-height: 150px; color: white">设备已掉线</div>
 
+            <div style="font-size: 18px; line-height: 150px; color: white">维护中...</div>
 
           </template>
 
         </chart-board>
 
       </div>
 
@@ -193,7 +199,7 @@ import ChartBoard from "./charts/ChartBoard.vue";
 
 import ChartLine from "./charts/ChartLine.vue";
 
 import ChartLineAnd from "./charts/ChartLineAnd.vue";
 
 import {getEnv, getByRoom, getListWater, getRoomVideo, getLastVideo, getSchool, getByFloor, getUid, getFodder} from "@/utils/api";
 
-import { timeDate, Debounce } from "@/utils";
 
+import { timeDate, Debounce, MonthDate } from "@/utils";
 
 import { Form, FormItem ,Select } from "element-ui";
 
 
 export default {
 
@@ -258,13 +264,13 @@ export default {
 
       },
 
       elecData: {
 
         xAxisName: "电量",
 
-        xAxisData: [],
 
+        xAxisData: [ MonthDate(new Date().getTime() - (1000 * 60 * 60 * 24 * 2)), MonthDate(new Date().getTime() - (1000 * 60 * 60 * 24)), MonthDate(new Date().getTime())],
 
         yAxisName: "KW/h",
 
         yAxisData: [],
 
       },
 
       fodderData: {
 
         xAxisName: "饲料",
 
-        xAxisData: [],
 
+        xAxisData: [ MonthDate(new Date().getTime() - (1000 * 60 * 60 * 24 * 2)), MonthDate(new Date().getTime() - (1000 * 60 * 60 * 24)), MonthDate(new Date().getTime())],
 
         yAxisName: 'Kg',
 
         yAxisData: [],
 
       },
 
@@ -282,6 +288,8 @@ export default {
 
       floorId: '',
 
       unitId: '',
 
       unitList: [],
 
+      isView: false,
 
+      text: '一栋二层育肥一舍'
 
     };
 
   },
 
   computed: {
 
@@ -401,8 +409,10 @@ export default {
 
       getLastVideo({}).then(res => {
 
         if(res.code === 10000) {
 
           if(res.data !== null) {
 
-            this.cameraOne = res.data.wsUrl;
 
-            this.cameraTwo = res.data.rtspUrl;
 
+            // this.cameraOne = res.data.wsUrl;
 
+            // this.cameraTwo = res.data.rtspUrl;
 
+            this.cameraOne = 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.39';
 
+            this.cameraTwo = "rtsp://admin:hmkj6688@172.16.3.39/cam/realmonitor?channel=1&subtype=0";
 
           }
 
         }
 
       })
 
@@ -446,6 +456,7 @@ export default {
 
       });
 
     },
 
     setFodder(data) {
 
+      console.log(data)
 
       this.fodderData.xAxisData = [];
 
       this.fodderData.yAxisData = [];
 
       data.fodderList.forEach(item => {
 
@@ -465,11 +476,35 @@ export default {
 
           this.setFodder(res.data)
 
         }
 
       })
 
+    },
 
+    initUnit() {
 
+      getFodder({}).then(res => {
 
+        if(res.code === 10000) {
 
+          this.setFodder(res.data)
 
+        }
 
+      })
 
+    },
 
+    setNum(num) {
 
+      this.isView = false;
 
+      if(num === 1) {
 
+        this.cameraOne = 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.39';
 
+        this.cameraTwo = "rtsp://admin:hmkj6688@172.16.3.39/cam/realmonitor?channel=1&subtype=0";
 
+        this.text = '一栋二层育肥一舍';
 
+      } else if(num === 2) {
 
+        this.cameraOne = 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.30';
 
+        this.cameraTwo = "rtsp://admin:hmkj6688@172.16.3.30/cam/realmonitor?channel=1&subtype=0";
 
+        this.text = '一栋二层育肥二舍';
 
+      } else {
 
+        this.cameraOne = 'ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.164';
 
+        this.cameraTwo = "rtsp://admin:hmkj6688@172.16.3.164/cam/realmonitor?channel=1&subtype=0";
 
+        this.text = '三栋三层育肥二舍';
 
+      }
 
     }
 
   },
 
   mounted() {
 
     this.init();
 
     this.initData();
 
+    this.initUnit()
 
   },
 
 };
 
 </script>
 
@@ -609,6 +644,7 @@ export default {
 
   /* box-sizing: border-box; */
 
   /* background-color: red; */
 
   padding-left: 25px;
 
+  position: relative;
 
 }
 
 .kuang {
 
   width: 100%;
 
@@ -636,4 +672,28 @@ export default {
 
   height: 40px;
 
   width: 100%;
 
 }
 
+
 
+.bio-select {
 
+  width: 120px;
 
+  /*height: 60px;*/
 
+  position: absolute;
 
+  background-color: rgba(102, 255, 255, .6);
 
+  top: 26px;
 
+  left: 50%;
 
+  transform: translate(-50%, 0);
 
+}
 
+.bio-select-text {
 
+  line-height: 30px;
 
+  font-size: 14px;
 
+  color: white;
 
+  cursor: pointer;
 
+}
 
+.bio-select-text:hover {
 
+  background-color: #409eff;
 
+  color: black;
 
+}
 
+.is_select {
 
+  background-color: #409eff;
 
+  color: black;
 
+}
 
 </style>

+ 4 - 0
src/views/Zoology/charts/ChartLine.vue
查看文件 

@@ -26,6 +26,8 @@ export default {
 
   },
 
   methods: {
 
     init() {
 
+      // console.log(this.data.yAxisData.map(Number))
 
+      // let max = Math.max.apply(null, this.data.yAxisData.map(Number))
 
       let start = this.data.xAxisData.length - 7;
 
       let end = this.data.xAxisData.length - 1;
 
       let options = {
 
@@ -70,7 +72,9 @@ export default {
 
         ],
 
         //[
 
         yAxis: {
 
+          // max: max * 1.5,
 
           type: "value",
 
+          boundaryGap: [0, '100%'],
 
           // name: this.data.yAxisName,
 
           nameTextStyle: {
 
             color: "red",

+ 20 - 16
src/views/Zoology/charts/ChartLineAnd.vue
查看文件 

@@ -8,7 +8,7 @@
 
 -->
 
 <template>
 
   <div :id="'chartLine' + id" class="chart-line">
 
-    
+
 
   </div>
 
 </template>
 
 <script>
 
@@ -44,7 +44,7 @@ export default {
 
         // color: ['#3aa0ff', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
 
         grid: {
 
           top: '10%',
 
-          left: '10%',
 
+          left: '20%',
 
           bottom: '20%',
 
           right: '10%'
 
         },
 
@@ -100,20 +100,20 @@ export default {
 
           },
 
         //],
 
         series: [
 
-          {
 
-            name: this.data.yAxisName,
 
-            type: 'line',
 
-            smooth: false,
 
-            data: this.data.yAxisData,
 
-            itemStyle: {
 
-              normal: {
 
-                color: '#3aa0ff',
 
-                lineStyle: {
 
-                  color: '#3aa0ff'
 
-                }
 
-              }
 
-            }
 
-          },
 
+          // {
 
+          //   name: this.data.yAxisName,
 
+          //   type: 'line',
 
+          //   smooth: false,
 
+          //   data: this.data.yAxisData,
 
+          //   itemStyle: {
 
+          //     normal: {
 
+          //       color: '#3aa0ff',
 
+          //       lineStyle: {
 
+          //         color: '#3aa0ff'
 
+          //       }
 
+          //     }
 
+          //   }
 
+          // },
 
           {
 
             name: this.data.yAxisName,
 
             type: 'bar',
 
@@ -127,6 +127,10 @@ export default {
 
                   color: '#3aa0ff'
 
                 }
 
               }
 
+            },
 
+            label: {
 
+              show: true,
 
+              position: 'top'
 
             }
 
           }
 
         ]

+ 2 - 2
src/views/Zoology/leftTop/SwiperContent.vue
查看文件 

@@ -12,11 +12,11 @@
 
       <div class="title">{{ list.room }}</div>
 
       <div class="item">
 
         <div class="temp-icon"></div>
 
-        <div class="data">{{ list.temperature != null ? list.temperature + '℃' : '设备已掉线' }}</div>
 
+        <div class="data">{{ list.temperature != null ? list.temperature + '℃' : '维护中...' }}</div>
 
       </div>
 
       <div class="item">
 
         <div class="rh-icon"></div>
 
-        <div class="data">{{ list.humidity != null ? list.humidity + 'RH' : '设备已掉线' }}</div>
 
+        <div class="data">{{ list.humidity != null ? list.humidity + 'RH' : '维护中...' }}</div>
 
       </div>
 
     </div>
 
   </div>

+ 14 - 14
vue.config.js
查看文件 

@@ -3,19 +3,19 @@ const path = require('path')
 
 const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
 
 module.exports = {
 
   publicPath: './', // 相对于 HTML 页面（目录相同）
 
-  chainWebpack: config => {
 
-    config.module
 
-      .rule('css')
 
-      .test(/\.css$/)
 
-      .oneOf('vue')
 
-      .resourceQuery(/\?vue/)
 
-      .use('px2rem')
 
-      .loader('px2rem-loader')
 
-      .options({
 
-        remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
 
-      })
 
-      .end()
 
-  },
 
+  // chainWebpack: config => {
 
+  //   config.module
 
+  //     .rule('css')
 
+  //     .test(/\.css$/)
 
+  //     .oneOf('vue')
 
+  //     .resourceQuery(/\?vue/)
 
+  //     .use('px2rem')
 
+  //     .loader('px2rem-loader')
 
+  //     .options({
 
+  //       remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
 
+  //     })
 
+  //     .end()
 
+  // },
 
   configureWebpack: config => {
 
     if(process.env.NODE_ENV === 'production') {
 
       config.plugins.push(
 
@@ -54,4 +54,4 @@ module.exports = {
 
       }
 
     }
 
   },
 
-}
 
+}