Home Explore Help
Register Sign In
smart-grp-front
/
smart-grp-front-web
Watch 2
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

'粮情检测'

GaoYuPeng 2 years ago
parent
092ba3a18a
commit
ba52e96411
47 changed files with 4164 additions and 115 deletions
Split View Show Diff Stats
  1. 1 0
      package.json
  2. 2 2
      public/index.html
  3. BIN
      src/assets/statisticAnalysis/其他.png
  4. BIN
      src/assets/statisticAnalysis/控温.png
  5. BIN
      src/assets/statisticAnalysis/照明.png
  6. BIN
      src/assets/statisticAnalysis/设备总数.png
  7. BIN
      src/assets/statisticAnalysis/设备种类.png
  8. BIN
      src/assets/statisticAnalysis/通风.png
  9. 1 0
      src/icons/svg/monitor.svg
  10. 15 10
      src/layout/components/AppMain.vue
  11. 5 2
      src/layout/components/Footer/index.vue
  12. 5 3
      src/layoutt/components/AppMain.vue
  13. 29 0
      src/layoutt/components/Footer/index.vue
  14. 9 4
      src/layoutt/components/Sidebar/index.vue
  15. 1 0
      src/layoutt/components/index.js
  16. 139 49
      src/layoutt/index.vue
  17. 8 3
      src/main.js
  18. 204 0
      src/router/index copy.js
  19. 195 22
      src/router/index.js
  20. 2 2
      src/store/modules/app.js
  21. 60 1
      src/styles/index.scss
  22. 16 10
      src/styles/sidebar.scss
  23. 2 2
      src/styles/variables.scss
  24. 191 0
      src/views/grainDetection/airTightnessTest/index.vue
  25. 184 0
      src/views/grainDetection/energyConsumptionMonitoring/abnormalList.vue
  26. 115 0
      src/views/grainDetection/energyConsumptionMonitoring/detail.vue
  27. 203 0
      src/views/grainDetection/energyConsumptionMonitoring/index.vue
  28. 207 0
      src/views/grainDetection/gasDetection/abnormalList.vue
  29. 103 0
      src/views/grainDetection/gasDetection/detail.vue
  30. 27 0
      src/views/grainDetection/gasDetection/gas.vue
  31. 199 0
      src/views/grainDetection/gasDetection/index.vue
  32. 202 0
      src/views/grainDetection/grainTemperatureDetection/abnormalList.vue
  33. 314 0
      src/views/grainDetection/grainTemperatureDetection/detail.vue
  34. 172 0
      src/views/grainDetection/grainTemperatureDetection/history.vue
  35. 233 0
      src/views/grainDetection/grainTemperatureDetection/index.vue
  36. 184 0
      src/views/grainDetection/pestDetection/abnormalList.vue
  37. 119 0
      src/views/grainDetection/pestDetection/detail.vue
  38. 191 0
      src/views/grainDetection/pestDetection/index.vue
  39. 115 0
      src/views/grainDetection/weatherStationData/detail.vue
  40. 195 0
      src/views/grainDetection/weatherStationData/index.vue
  41. 1 1
      src/views/login/index copy.vue
  42. 1 1
      src/views/login/index.vue
  43. 26 0
      src/views/statisticalAnalysis/energyConsumption/index.vue
  44. 433 0
      src/views/statisticalAnalysis/graph/index.vue
  45. 26 0
      src/views/statisticalAnalysis/maintenanceManagement/index.vue
  46. 26 0
      src/views/statisticalAnalysis/warrantyManagement/index.vue
  47. 3 3
      vue.config.js

+ 1 - 0
package.json
View File 

@@ -17,6 +17,7 @@
17 17 
     "axios": "0.18.1",
18 18 
     "core-js": "3.6.5",
19 19 
     "dayjs": "^1.11.7",
20 
+    "echarts": "^5.4.1",
20 21 
     "element-ui": "2.13.2",
21 22 
     "js-cookie": "2.2.0",
22 23 
     "normalize.css": "7.0.0",

+ 2 - 2
public/index.html
View File 

@@ -4,8 +4,8 @@
4 4 
     <meta charset="utf-8">
5 5 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 6 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 
-    <meta base=/front/>
8 
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
7 
+    <!-- <meta base=/front/> -->
8 
+    <!-- <link rel="icon" href="<%=BASE_URL %>favicon.ico"> -->
9 9 
     <title><%= webpackConfig.name %></title>
10 10 
   </head>
11 11 
   <body>

BIN
src/assets/statisticAnalysis/其他.png
View File


BIN
src/assets/statisticAnalysis/控温.png
View File


BIN
src/assets/statisticAnalysis/照明.png
View File


BIN
src/assets/statisticAnalysis/设备总数.png
View File


BIN
src/assets/statisticAnalysis/设备种类.png
View File


BIN
src/assets/statisticAnalysis/通风.png
View File


File diff suppressed because it is too large
+ 1 - 0
src/icons/svg/monitor.svg


+ 15 - 10
src/layout/components/AppMain.vue
View File 

@@ -11,8 +11,8 @@
11 11 
             <span class="sysName">xxxx管理系统</span>
12 12 
             <span class="itemName"> 统计分析</span>
13 13 
           </div>
14 
-          <router-link :to="'/Login'"><img class="tjdetail" src="~@/assets/home/统计3.png" alt=""></router-link>
15 
-
14 
+          <router-link to="/statisticalAnalysis"><img class="tjdetail" src="~@/assets/home/统计3.png" alt="" @click="lintToTj"></router-link>
15 
+          <!-- <img class="tjdetail" src="~@/assets/home/统计3.png" alt="" @click="lintToTj"> -->
16 16 
         </div>
17 17 
         <div class="nav-item">
18 18 
           <div class="item lq">
 
@@ -21,7 +21,7 @@
21 21 
               <span class="sysName">xxxx管理系统</span>
22 22 
               <span class="itemName">粮情监控</span>
23 23 
             </div>
24 
-            <router-link :to="'/Login'"><img class="tjdetail" src="~@/assets/home/粮情3.png" alt=""></router-link>
24 
+            <router-link to="/grainDetection"><img class="tjdetail" src="~@/assets/home/粮情3.png" alt=""></router-link>
25 25 
           </div>
26 26 
           <div class="item kz">
27 27 
             <img src="~@/assets/home/控制2.png" alt="">
 
@@ -29,7 +29,7 @@
29 29 
               <span class="sysName">xxxx管理系统</span>
30 30 
               <span class="itemName">设备控制</span>
31 31 
             </div>
32 
-            <router-link :to="'/Login'"><img class="tjdetail" src="~@/assets/home/控制3.png" alt=""></router-link>
32 
+            <router-link to="/"><img class="tjdetail" src="~@/assets/home/控制3.png" alt=""></router-link>
33 33 
           </div>
34 34 
         </div>
35 35 
         <div class="nav-item ">
 
@@ -39,7 +39,7 @@
39 39 
               <span class="sysName">xxxx管理系统</span>
40 40 
               <span class="itemName">设备配置</span>
41 41 
             </div>
42 
-            <router-link :to="'/Login'"><img class="tjdetail" src="~@/assets/home/配置3.png" alt=""></router-link>
42 
+            <router-link to="/Login"><img class="tjdetail" src="~@/assets/home/配置3.png" alt=""></router-link>
43 43 
           </div>
44 44 
           <div class="item tb">
45 45 
             <img src="~@/assets/home/同步2.png" alt="">
 
@@ -47,7 +47,7 @@
47 47 
               <span class="sysName">xxxx管理系统</span>
48 48 
               <span class="itemName">数据同步</span>
49 49 
             </div>
50 
-            <router-link :to="'/Login'"><img class="tjdetail" src="~@/assets/home/同步3.png" alt=""></router-link>
50 
+            <router-link to="/Login"><img class="tjdetail" src="~@/assets/home/同步3.png" alt=""></router-link>
51 51 
           </div>
52 52 
         </div>
53 53 
 
@@ -58,7 +58,7 @@
58 58 
             <div class="info-title"><span>粮情信息</span></div>
59 59 
             <div class="info-list">
60 60 
               <van-list>
61 
-                <van-cell v-for="item in list" :key="item" :value="item.time">
61 
+                <van-cell v-for="(item,index) in list" :key="index"  :value="item.time">
62 62 
                   <template #title>
63 63 
                     <i class="title-dot" v-show="item.warnningLevel == 1"></i>
64 64 
                     <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
 
@@ -73,7 +73,7 @@
73 73 
             <div class="info-title"><span>报警信息</span></div>
74 74 
             <div class="info-list">
75 75 
               <van-list>
76 
-                <van-cell v-for="item in list1" :key="item" :value="item.time">
76 
+                <van-cell v-for="item in list1" :value="item.time">
77 77 
                   <template #title>
78 78 
                     <i class="title-dot" v-show="item.warnningLevel == 1"></i>
79 79 
                     <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
 
@@ -90,7 +90,7 @@
90 90 
             <div class="info-title"><span>运行日志</span></div>
91 91 
             <div class="info-list">
92 92 
               <van-list>
93 
-                <van-cell v-for="item in list2" :key="item" :value="item.time">
93 
+                <van-cell v-for="item in list2"  :value="item.time">
94 94 
                   <template #title>
95 95 
                     <i class="title-dot" v-show="item.warnningLevel == 1"></i>
96 96 
                     <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
 
@@ -105,7 +105,7 @@
105 105 
             <div class="info-title"><span>在线运行设备</span></div>
106 106 
             <div class="info-list">
107 107 
               <van-list>
108 
-                <van-cell v-for="item in list3" :key="item" :value="item.time">
108 
+                <van-cell v-for="item in list3"  :value="item.time">
109 109 
                   <template #title>
110 110 
                     <i class="title-dot" v-show="item.warnningLevel == 1"></i>
111 111 
                     <i class="title-dot1" v-show="item.warnningLevel == 2"></i>
 
@@ -160,6 +160,11 @@ export default {
160 160 
   },
161 161 
   computed: {
162 162
163 
+  },
164 
+  methods:{
165 
+    lintToTj() {
166 
+       this.$router.push({ path: "/front/statisticalAnalysis" })
167 
+    }
163 168 
   }
164 169 
 }
165 170 
 </script>

+ 5 - 2
src/layout/components/Footer/index.vue
View File 

@@ -2,7 +2,7 @@
2 2 
   <footer>
3 3 
     <van-row class="footer" type="flex" justify="center">
4 4 
       <van-col>
5 
-        <span class="header-title">版权归紫光软件所有</span>
5 
+        <span class="footer-title">版权归紫光软件所有</span>
6 6 
       </van-col>
7 7 
     </van-row>
8 8 
   </footer>
 
@@ -10,7 +10,7 @@
10 10
11 11 
 <script>
12 12 
 export default {
13 
-  name: 'Header',
13 
+  name: 'Footer',
14 14 
   computed: {
15 15
16 16 
   }
 
@@ -22,5 +22,8 @@ export default {
22 22 
   color: #fff;
23 23 
   background-color: #5283e7;
24 24 
   align-items: center;
25 
+  .footer-title {
26 
+    font-size: 12px;
27 
+  }
25 28 
 }
26 29 
 </style>

+ 5 - 3
src/layoutt/components/AppMain.vue
View File 

@@ -17,13 +17,15 @@ export default {
17 17 
 }
18 18 
 </script>
19 19
20 
-<style scoped>
20 
+<style lang="scss" scoped>
21 21 
 .app-main {
22 22 
   /*50 = navbar  */
23 
-  min-height: calc(100vh - 50px);
23 
+  /* min-height: calc(100vh - 100px); */
24 
+  height: calc(100vh - 76px);
24 25 
   width: 100%;
25 26 
   position: relative;
26 
-  overflow: hidden;
27 
+  overflow: auto;
28 
+  background-color: #f5f5fa;
27 29 
 }
28 30 
 .fixed-header+.app-main {
29 31 
   padding-top: 50px;

+ 29 - 0
src/layoutt/components/Footer/index.vue
View File 

@@ -0,0 +1,29 @@
1 
+<template>
2 
+  <footer>
3 
+    <van-row class="footer" type="flex" justify="center">
4 
+      <van-col>
5 
+        <span class="footer-title">版权归紫光软件所有</span>
6 
+      </van-col>
7 
+    </van-row>
8 
+  </footer>
9 
+</template>
10 
+
11 
+<script>
12 
+export default {
13 
+  name: 'Footer',
14 
+  computed: {
15 
+
16 
+  }
17 
+}
18 
+</script>
19 
+<style lang='scss' scoped>
20 
+.footer {
21 
+  height: 30px;
22 
+  color: #fff;
23 
+  background-color: #5283e7;
24 
+  align-items: center;
25 
+  .footer-title {
26 
+    font-size: 12px;
27 
+  }
28 
+}
29 
+</style>

+ 9 - 4
src/layoutt/components/Sidebar/index.vue
View File 

@@ -1,13 +1,13 @@
1 1 
 <template>
2 2 
   <div :class="{'has-logo':showLogo}">
3 
-    <logo v-if="showLogo" :collapse="isCollapse" />
4 
-    <el-scrollbar wrap-class="scrollbar-wrapper">
3 
+    <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
4 
+    <el-scrollbar wrap-class="scrollbar-wrapper" >
5 5 
       <el-menu
6 6 
         :default-active="activeMenu"
7 7 
         :collapse="isCollapse"
8 
-        :background-color="variables.menuBg"
8 
+
9 9 
         :text-color="variables.menuText"
10 
-        :unique-opened="false"
10 
+        :unique-opened="true"
11 11 
         :active-text-color="variables.menuActiveText"
12 12 
         :collapse-transition="false"
13 13 
         mode="vertical"
 
@@ -54,3 +54,8 @@ export default {
54 54 
   }
55 55 
 }
56 56 
 </script>
57 
+<style lang='scss' scoped>
58 
+.sidebar-container {
59 
+  height: calc(100vh - 76px);
60 
+}
61 
+</style>

+ 1 - 0
src/layoutt/components/index.js
View File 

@@ -1,3 +1,4 @@
1 1 
 export { default as Navbar } from './Navbar'
2 2 
 export { default as Sidebar } from './Sidebar'
3 3 
 export { default as AppMain } from './AppMain'
4 
+export { default as Footer } from './Footer'

+ 139 - 49
src/layoutt/index.vue
View File 

@@ -1,23 +1,26 @@
1 1 
 <template>
2 2 
   <div :class="classObj" class="app-wrapper">
3 
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
3 
+    <!-- <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" /> -->
4 
+    <van-nav-bar class="topNavBar" @click-left="onClickLeft" @click-right="onClickRight">
5 
+      <slot slot="left" name="left">
6 
+        <van-icon name="arrow-left" size="30" />
7 
+      </slot>
8 
+      <slot slot="title" name="title">{{ title }}</slot>
9 
+      <template #right>
10 
+        <van-icon name="wap-home" size='30' />
11 
+      </template>
12 
+    </van-nav-bar>
13 
+    <!-- <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow/> -->
4 14 
     <sidebar class="sidebar-container" />
5 15 
     <div class="main-container">
6 
-      <div :class="{'fixed-header':fixedHeader}">
7 
-        <navbar />
8 
-      </div>
9 16 
       <app-main />
10 17 
     </div>
18 
+    <Footer />
11 19 
   </div>
12 
-  <!-- <div>
13 
-    <header></header>
14 
-    <app-main />
15 
-    <footer></footer>
16 
-  </div> -->
17 20 
 </template>
18 21
19 22 
 <script>
20 
-import { Navbar, Sidebar, AppMain } from './components'
23 
+import { Navbar, Sidebar, AppMain, Footer } from './components'
21 24 
 import ResizeMixin from './mixin/ResizeHandler'
22 25
23 26 
 export default {
 
@@ -25,20 +28,38 @@ export default {
25 28 
   components: {
26 29 
     Navbar,
27 30 
     Sidebar,
28 
-    AppMain
31 
+    AppMain,
32 
+    Footer
29 33 
   },
30 34 
   mixins: [ResizeMixin],
35 
+  data () {
36 
+    return {
37 
+      title: null
38 
+    }
39 
+  },
31 40 
   computed: {
32 
-    sidebar() {
41 
+    routes () {
42 
+      return this.$router.options.routes
43 
+    },
44 
+    activeMenu () {
45 
+      const route = this.$route
46 
+      const { meta, path } = route
47 
+      // if set path, the sidebar will highlight the path you set
48 
+      if (meta.activeMenu) {
49 
+        return meta.activeMenu
50 
+      }
51 
+      return path
52 
+    },
53 
+    sidebar () {
33 54 
       return this.$store.state.app.sidebar
34 55 
     },
35 
-    device() {
56 
+    device () {
36 57 
       return this.$store.state.app.device
37 58 
     },
38 
-    fixedHeader() {
59 
+    /* fixedHeader () {
39 60 
       return this.$store.state.settings.fixedHeader
40 
-    },
41 
-    classObj() {
61 
+    }, */
62 
+    classObj () {
42 63 
       return {
43 64 
         hideSidebar: !this.sidebar.opened,
44 65 
         openSidebar: this.sidebar.opened,
 
@@ -47,52 +68,121 @@ export default {
47 68 
       }
48 69 
     }
49 70 
   },
71 
+
72 
+  created () {
73 
+    // console.log(this.$router.currentRoute.matched[0].meta.title,'router.currentRoute')
74 
+
75 
+  },
76 
+  mounted () {
77 
+    this.title = this.$router.currentRoute.matched[0].meta.title
78 
+  },
50 79 
   methods: {
51 
-    handleClickOutside() {
80 
+    handleClickOutside () {
52 81 
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
53 
-    }
82 
+    },
83 
+    handleBack () {
84 
+      console.log("返回")
85 
+    },
86 
+    onClickLeft () {
87 
+      console.log('返回！')
88 
+      // history.back()
89 
+      this.$router.go(-1)
90 
+    },
91 
+    onClickRight () {
92 
+      // console.log('返回主页！')
93 
+      this.$router.push({ path: "/dashboard" })
94 
+    },
54 95 
   }
55 96 
 }
56 97 
 </script>
57 98
58 99 
 <style lang="scss" scoped>
59 
-  @import "~@/styles/mixin.scss";
60 
-  @import "~@/styles/variables.scss";
100 
+@import "~@/styles/mixin.scss";
101 
+@import "~@/styles/variables.scss";
61 102
62 
-  .app-wrapper {
63 
-    @include clearfix;
64 
-    position: relative;
65 
-    height: 100%;
66 
-    width: 100%;
67 
-    &.mobile.openSidebar{
68 
-      position: fixed;
69 
-      top: 0;
70 
-    }
71 
-  }
72 
-  .drawer-bg {
73 
-    background: #000;
74 
-    opacity: 0.3;
75 
-    width: 100%;
76 
-    top: 0;
77 
-    height: 100%;
78 
-    position: absolute;
79 
-    z-index: 999;
80 
-  }
103 
+.app-wrapper {
104 
+  @include clearfix;
105 
+  position: relative;
106 
+  // height: 100%;
81 107
82 
-  .fixed-header {
108 
+  width: 100%;
109 
+  background-color: #f5f5fa;
110 
+  &.mobile.openSidebar {
83 111 
     position: fixed;
84 
-    top: 0;
85 
-    right: 0;
86 
-    z-index: 9;
87 
-    width: calc(100% - #{$sideBarWidth});
88 
-    transition: width 0.28s;
112 
+    top: 46px;
89 113 
   }
114 
+}
115 
+.drawer-bg {
116 
+  background: #000;
117 
+  opacity: 0.3;
118 
+  width: 100%;
119 
+  top: 0;
120 
+  height: 100%;
121 
+  position: absolute;
122 
+  z-index: 999;
123 
+}
90 124
91 
-  .hideSidebar .fixed-header {
92 
-    width: calc(100% - 54px)
125 
+.fixed-header {
126 
+  position: fixed;
127 
+  top: 0;
128 
+  right: 0;
129 
+  z-index: 9;
130 
+  width: calc(100% - #{$sideBarWidth});
131 
+  transition: width 0.28s;
132 
+}
133 
+
134 
+.hideSidebar .fixed-header {
135 
+  width: calc(100% - 54px);
136 
+}
137 
+
138 
+.mobile .fixed-header {
139 
+  width: 100%;
140 
+}
141 
+::v-deep .topNavBar {
142 
+  background-color: #5283e7;
143 
+  // color: #fff;
144 
+  font-size: 26px;
145 
+  .van-nav-bar__title {
146 
+    color: #fff;
93 147 
   }
148 
+  .van-icon {
149 
+    color: #fff;
150 
+  }
151 
+}
152 
+::v-deep .sidebar-container {
153 
+  background-color: #fff;
154 
+  border-right: 1px solid #ccc;
155 
+  // box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.9);
156 
+  box-shadow: 5px 0 10px -5px #e2e2e6;
94 157
95 
-  .mobile .fixed-header {
96 
-    width: 100%;
158 
+  /* .el-submenu.is-active .el-submenu__title {
159 
+    border-left: 3px solid #5283e7;
160 
+  } */
161 
+  .svg-icon {
162 
+    font-size: 18px;
97 163 
   }
164 
+  .el-submenu.is-opened .el-submenu__title {
165 
+    border-left: 3px solid #5283e7;
166 
+    background-color: #e5edfb;
167 
+    .sub-el-icon {
168 
+      color: #5283e7;
169 
+    }
170 
+    .svg-icon {
171 
+      color: #5283e7;
172 
+    }
173 
+  }
174 
+  .el-submenu.is-opened .el-menu .nest-menu {
175 
+    color: #000;
176 
+    .el-menu-item {
177 
+      padding-left: 50px;
178 
+    }
179 
+    .el-menu-item.is-active {
180 
+      font-weight: 700;
181 
+    }
182 
+  }
183 
+}
184 
+.main-container {
185 
+  margin-left: 210px;
186 
+  background-color: #ccc;
187 
+}
98 188 
 </style>

+ 8 - 3
src/main.js
View File 

@@ -4,13 +4,15 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
4 4
5 5 
 import ElementUI from 'element-ui'
6 6 
 import 'element-ui/lib/theme-chalk/index.css'
7 
-import locale from 'element-ui/lib/locale/lang/en' // lang i18n
7 
+// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
8 8
9 9 
 import Vant from 'vant';
10 10 
 import 'vant/lib/index.css';
11 11
12 
+
12 13 
 Vue.use(Vant);
13 14
15 
+
14 16 
 import '@/styles/index.scss' // global css
15 17
16 18 
 import App from './App'
 
@@ -20,6 +22,9 @@ import router from './router'
20 22 
 import '@/icons' // icon
21 23 
 import '@/permission' // permission control
22 24
25 
+// import echarts from 'echarts'
26 
+import * as echarts from 'echarts'
27 
+Vue.prototype.$echarts = echarts
23 28
24 29 
 /**
25 30 
  * If you don't want to use mock-server
 
@@ -35,9 +40,9 @@ if (process.env.NODE_ENV === 'production') {
35 40 
 }
36 41
37 42 
 // set ElementUI lang to EN
38 
-Vue.use(ElementUI, { locale })
43 
+// Vue.use(ElementUI, { locale })
39 44 
 // 如果想要中文版 element-ui，按如下方式声明
40 
-// Vue.use(ElementUI)
45 
+Vue.use(ElementUI)
41 46
42 47 
 // dayjs
43 48 
 import dayjs from 'dayjs'

+ 204 - 0
src/router/index copy.js
View File 

@@ -0,0 +1,204 @@
1 
+import Vue from 'vue'
2 
+import Router from 'vue-router'
3 
+
4 
+Vue.use(Router)
5 
+
6 
+/* Layout */
7 
+import Layout from '@/layout'
8 
+import Layoutt from '@/layoutt'
9 
+
10 
+/**
11 
+ * Note: sub-menu only appear when route children.length >= 1
12 
+ * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
13 
+ *
14 
+ * hidden: true                   if set true, item will not show in the sidebar(default is false)
15 
+ * alwaysShow: true               if set true, will always show the root menu
16 
+ *                                if not set alwaysShow, when item has more than one children route,
17 
+ *                                it will becomes nested mode, otherwise not show the root menu
18 
+ * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
19 
+ * name:'router-name'             the name is used by <keep-alive> (must set!!!)
20 
+ * meta : {
21 
+    roles: ['admin','editor']    control the page roles (you can set multiple roles)
22 
+    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
23 
+    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
24 
+    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
25 
+    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
26 
+  }
27 
+ */
28 
+
29 
+/**
30 
+ * constantRoutes
31 
+ * a base page that does not have permission requirements
32 
+ * all roles can be accessed
33 
+ */
34 
+export const constantRoutes = [
35 
+  {
36 
+    path: '/front',
37 
+    // redirect: '/login',
38 
+    name:'Login',
39 
+    component: () => import('@/views/login/index'),
40 
+    hidden: true
41 
+  },
42 
+
43 
+  {
44 
+    path: '/front/404',
45 
+    component: () => import('@/views/404'),
46 
+    hidden: true
47 
+  },
48 
+
49 
+  {
50 
+    path: '/front/dashboard',
51 
+    component: Layout,
52 
+    // redirect: '/dashboard',
53 
+    children: [{
54 
+      path: 'dashboard',
55 
+      name: 'Dashboard',
56 
+      component: () => import('@/views/dashboard/index'),
57 
+      meta: { title: '首页', icon: 'dashboard' }
58 
+    }]
59 
+  },
60 
+  {
61 
+    path: '/front/statisticalAnalysis',
62 
+    component: Layoutt,
63 
+    redirect: '/front/statisticalAnalysis/graph',
64 
+    name: 'StatisticalAnalysis',
65 
+    meta: { title: '统计分析', icon: 'el-icon-s-help' },
66 
+    children: [
67 
+      {
68 
+        path: 'graph',
69 
+        name: 'Graph',
70 
+        component: () => import('@/views/statisticalAnalysis/graph/index'),
71 
+        meta: { title: '图形统计', icon: 'table' }
72 
+      },
73 
+      {
74 
+        path: 'tree',
75 
+        name: 'Tree',
76 
+        component: () => import('@/views/tree/index'),
77 
+        meta: { title: 'Tree', icon: 'tree' }
78 
+      }
79 
+    ]
80 
+  },
81 
+  {
82 
+    path: '/front/example',
83 
+    component: Layout,
84 
+    redirect: '/example/table',
85 
+    name: 'Example',
86 
+    meta: { title: 'Example', icon: 'el-icon-s-help' },
87 
+    children: [
88 
+      {
89 
+        path: 'table',
90 
+        name: 'Table',
91 
+        component: () => import('@/views/table/index'),
92 
+        meta: { title: 'Table', icon: 'table' }
93 
+      },
94 
+      {
95 
+        path: 'tree',
96 
+        name: 'Tree',
97 
+        component: () => import('@/views/tree/index'),
98 
+        meta: { title: 'Tree', icon: 'tree' }
99 
+      }
100 
+    ]
101 
+  },
102 
+
103 
+  {
104 
+    path: '/front/form',
105 
+    component: Layout,
106 
+    children: [
107 
+      {
108 
+        path: 'index',
109 
+        name: 'Form',
110 
+        component: () => import('@/views/form/index'),
111 
+        meta: { title: 'Form', icon: 'form' }
112 
+      }
113 
+    ]
114 
+  },
115 
+
116 
+  {
117 
+    path: '/front/nested',
118 
+    component: Layout,
119 
+    redirect: '/nested/menu1',
120 
+    name: 'Nested',
121 
+    meta: {
122 
+      title: 'Nested',
123 
+      icon: 'nested'
124 
+    },
125 
+    children: [
126 
+      {
127 
+        path: 'menu1',
128 
+        component: () => import('@/views/nested/menu1/index'), // Parent router-view
129 
+        name: 'Menu1',
130 
+        meta: { title: 'Menu1' },
131 
+        children: [
132 
+          {
133 
+            path: 'menu1-1',
134 
+            component: () => import('@/views/nested/menu1/menu1-1'),
135 
+            name: 'Menu1-1',
136 
+            meta: { title: 'Menu1-1' }
137 
+          },
138 
+          {
139 
+            path: 'menu1-2',
140 
+            component: () => import('@/views/nested/menu1/menu1-2'),
141 
+            name: 'Menu1-2',
142 
+            meta: { title: 'Menu1-2' },
143 
+            children: [
144 
+              {
145 
+                path: 'menu1-2-1',
146 
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
147 
+                name: 'Menu1-2-1',
148 
+                meta: { title: 'Menu1-2-1' }
149 
+              },
150 
+              {
151 
+                path: 'menu1-2-2',
152 
+                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
153 
+                name: 'Menu1-2-2',
154 
+                meta: { title: 'Menu1-2-2' }
155 
+              }
156 
+            ]
157 
+          },
158 
+          {
159 
+            path: 'menu1-3',
160 
+            component: () => import('@/views/nested/menu1/menu1-3'),
161 
+            name: 'Menu1-3',
162 
+            meta: { title: 'Menu1-3' }
163 
+          }
164 
+        ]
165 
+      },
166 
+      {
167 
+        path: 'menu2',
168 
+        component: () => import('@/views/nested/menu2/index'),
169 
+        name: 'Menu2',
170 
+        meta: { title: 'menu2' }
171 
+      }
172 
+    ]
173 
+  },
174 
+
175 
+  {
176 
+    path: '/front/external-link',
177 
+    component: Layout,
178 
+    children: [
179 
+      {
180 
+        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
181 
+        meta: { title: 'External Link', icon: 'link' }
182 
+      }
183 
+    ]
184 
+  },
185 
+
186 
+  // 404 page must be placed at the end !!!
187 
+  // { path: '*', redirect: '/404', hidden: true }
188 
+]
189 
+
190 
+const createRouter = () => new Router({
191 
+  mode: 'history', // require service support
192 
+  scrollBehavior: () => ({ y: 0 }),
193 
+  routes: constantRoutes
194 
+})
195 
+
196 
+const router = createRouter()
197 
+
198 
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
199 
+export function resetRouter() {
200 
+  const newRouter = createRouter()
201 
+  router.matcher = newRouter.matcher // reset router
202 
+}
203 
+
204 
+export default router

+ 195 - 22
src/router/index.js
View File 

@@ -5,7 +5,11 @@ Vue.use(Router)
5 5
6 6 
 /* Layout */
7 7 
 import Layout from '@/layout'
8 
+import Layoutt from '@/layoutt'
8 9
10 
+
11 
+import grainTemperatureDetection from '@/views/grainDetection/grainTemperatureDetection/index'
12 
+import commonPage from '@/views/grainDetection/gasDetection/gas'
9 13 
 /**
10 14 
  * Note: sub-menu only appear when route children.length >= 1
11 15 
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 
@@ -32,53 +36,222 @@ import Layout from '@/layout'
32 36 
  */
33 37 
 export const constantRoutes = [
34 38 
   {
35 
-    path: '/front',
39 
+    path: '/',
36 40 
     // redirect: '/login',
37 
-    name:'Login',
41 
+    name: 'Login',
38 42 
     component: () => import('@/views/login/index'),
39 43 
     hidden: true
40 44 
   },
41 45
42 46 
   {
43 
-    path: '/front/404',
47 
+    path: '/404',
44 48 
     component: () => import('@/views/404'),
45 49 
     hidden: true
46 50 
   },
47 51
48 52 
   {
49 
-    path: '/front/dashboard',
53 
+    path: '/dashboard',
50 54 
     component: Layout,
51 55 
     // redirect: '/dashboard',
52 56 
     children: [{
53 57 
       path: 'dashboard',
54 58 
       name: 'Dashboard',
59 
+      hidden: true,
55 60 
       component: () => import('@/views/dashboard/index'),
56 61 
       meta: { title: '首页', icon: 'dashboard' }
57 62 
     }]
58 63 
   },
59 
-/*   {
64 
+  {
60 65 
     path: '/statisticalAnalysis',
61 66 
     component: Layoutt,
62 
-    redirect: '/example/table',
67 
+    redirect: '/statisticalAnalysis/graph',
63 68 
     name: 'StatisticalAnalysis',
64 
-    meta: { title: '统计分析', icon: 'el-icon-s-help' },
69 
+    meta: { title: '统计分析', icon: 'el-icon-s-data' },
65 70 
     children: [
66 71 
       {
67 
-        path: 'table',
68 
-        name: 'Table',
69 
-        component: () => import('@/views/table/index'),
70 
-        meta: { title: 'Table', icon: 'table' }
72 
+        path: 'graph',
73 
+        name: 'Graph',
74 
+        component: () => import('@/views/statisticalAnalysis/graph/index'),
75 
+        meta: { title: '图形统计' }
71 76 
       },
72 77 
       {
73 
-        path: 'tree',
74 
-        name: 'Tree',
75 
-        component: () => import('@/views/tree/index'),
76 
-        meta: { title: 'Tree', icon: 'tree' }
78 
+        path: 'energyConsumption',
79 
+        name: 'EnergyConsumption',
80 
+        component: () => import('@/views/statisticalAnalysis/energyConsumption/index'),
81 
+        meta: { title: '能耗统计' }
82 
+      },
83 
+      {
84 
+        path: 'warrantyManagement',
85 
+        name: 'WarrantyManagement',
86 
+        component: () => import('@/views/statisticalAnalysis/warrantyManagement/index'),
87 
+        meta: { title: '质保管理' }
88 
+      },
89 
+      {
90 
+        path: 'maintenanceManagement',
91 
+        name: 'MaintenanceManagement',
92 
+        component: () => import('@/views/statisticalAnalysis/maintenanceManagement/index'),
93 
+        meta: { title: '保养管理' }
94 
+      },
95 
+    ]
96 
+  },
97 
+  {
98 
+    path: '/grainDetection',
99 
+    component: Layoutt,
100 
+    redirect: '/grainDetection/grainTemperatureDetection',
101 
+    name: 'GrainDetection',
102 
+    meta: { title: '粮情监测', icon: 'monitor' },
103 
+    children: [
104 
+      {
105 
+        path: 'grainTemperatureDetection',
106 
+        name: 'GrainTemperatureDetection',
107 
+        component: grainTemperatureDetection,
108 
+        meta: { title: '粮温检测' },
109 
+      },
110 
+      {
111 
+        path: 'grainDetail',
112 
+        component: () => import('@/views/grainDetection/grainTemperatureDetection/detail'),
113 
+        name: 'GrainDetail',
114 
+        hidden: true,
115 
+        meta: { title: '详情', activeMenu: '/grainDetection/grainTemperatureDetection' }
116 
+      },
117 
+      {
118 
+        path: 'abnormalList',
119 
+        component: () => import('@/views/grainDetection/grainTemperatureDetection/abnormalList'),
120 
+        name: 'AbnormalList',
121 
+        hidden: true,
122 
+        meta: { title: '粮温异常列表', activeMenu: '/grainDetection/grainTemperatureDetection' }
123 
+      },
124 
+      {
125 
+        path: 'historyTendency',
126 
+        component: () => import('@/views/grainDetection/grainTemperatureDetection/history'),
127 
+        name: 'HistoryTendency',
128 
+        hidden: true,
129 
+        meta: { title: '历史温度趋势', activeMenu: '/grainDetection/grainTemperatureDetection' }
130 
+      },
131 
+      // 气体检测
132 
+      {
133 
+        path: 'gas',
134 
+        name: 'Gas',
135 
+        component: commonPage,
136 
+        // redirect: '/grainDetection/gasDetection/index',
137 
+        meta: { title: '气体检测' },
138 
+        children: [
139 
+          {
140 
+            path: 'gasDetection',
141 
+            name: 'GasDetection',
142 
+            component: () => import('@/views/grainDetection/gasDetection/index'),
143 
+            // hidden:true,
144 
+            meta: { title: '气体检测', activeMenu: '/grainDetection/gas/gasDetection' }
145 
+          },
146 
+          {
147 
+            path: 'gasDetectionDetail',
148 
+            name: 'GasDetectionDetail',
149 
+            component: () => import('@/views/grainDetection/gasDetection/detail'),
150 
+            hidden: true,
151 
+            meta: { title: '详情', activeMenu: '/grainDetection/gas/gasDetection' }
152 
+          },
153 
+          {
154 
+            path: 'gasAbnormalList',
155 
+            component: () => import('@/views/grainDetection/gasDetection/abnormalList'),
156 
+            name: 'GasAbnormalList',
157 
+            hidden: true,
158 
+            meta: { title: '气体异常列表', activeMenu: '/grainDetection/gas/gasDetection' }
159 
+          },
160 
+        ]
161 
+      },
162 
+      // 虫情检测
163 
+      {
164 
+        path: 'pest',
165 
+        name: 'Pest',
166 
+        component: commonPage,
167 
+        meta: { title: '虫情检测' },
168 
+        children: [
169 
+          {
170 
+            path: 'pestDetection',
171 
+            name: 'PestDetection',
172 
+            // hidden:true,
173 
+            component: () => import('@/views/grainDetection/pestDetection/index'),
174 
+            meta: { title: '虫情检测', activeMenu: '/grainDetection/pest/pestDetection' }
175 
+          },
176 
+          {
177 
+            path: 'pestDetectionDetail',
178 
+            name: 'PestDetectionDetail',
179 
+            component: () => import('@/views/grainDetection/pestDetection/detail'),
180 
+            hidden: true,
181 
+            meta: { title: '详情', activeMenu: '/grainDetection/pest/pestDetection' }
182 
+          },
183 
+          {
184 
+            path: 'pestAbnormalList',
185 
+            name: 'PestAbnormalList',
186 
+            component: () => import('@/views/grainDetection/pestDetection/abnormalList'),
187 
+            hidden: true,
188 
+            meta: { title: '虫情异常列表', activeMenu: '/grainDetection/pest/pestDetection' }
189 
+          },
190 
+        ]
191 
+      },
192 
+      // 能耗监测
193 
+      {
194 
+        path: 'energy',
195 
+        name: 'Energy',
196 
+        component: commonPage,
197 
+        meta: { title: '能耗监测' },
198 
+        children: [
199 
+          {
200 
+            path: 'energyConsumptionMonitoring',
201 
+            name: 'EnergyConsumptionMonitoring',
202 
+            component: () => import('@/views/grainDetection/energyConsumptionMonitoring/index'),
203 
+            meta: { title: '能耗监测' ,activeMenu: '/grainDetection/energy/energyConsumptionMonitoring'},
204 
+          },
205 
+          {
206 
+            path: 'energyConsumptionDetail',
207 
+            name: 'EnergyConsumptionDetail',
208 
+            component: () => import('@/views/grainDetection/energyConsumptionMonitoring/detail'),
209 
+            hidden: true,
210 
+            meta: { title: '详情', activeMenu: '/grainDetection/energy/energyConsumptionMonitoring' }
211 
+          },
212 
+          {
213 
+            path: 'energyConsumptionAbnormalList',
214 
+            name: 'EnergyConsumptionAbnormalList',
215 
+            component: () => import('@/views/grainDetection/energyConsumptionMonitoring/abnormalList'),
216 
+            hidden: true,
217 
+            meta: { title: '历史记录', activeMenu: '/grainDetection/energy/energyConsumptionMonitoring' }
218 
+          },
219 
+        ]
220 
+
221 
+      },
222 
+      // 气象站数据
223 
+      {
224 
+        path: 'weather',
225 
+        name: 'Weather',
226 
+        component: commonPage,
227 
+        meta: { title: '气象站数据' },
228 
+        children:[
229 
+          {
230 
+            path: 'weatherStationData',
231 
+            name: 'WeatherStationData',
232 
+            component: () => import('@/views/grainDetection/weatherStationData/index'),
233 
+            meta: { title: '气象站数据', }
234 
+          },
235 
+          {
236 
+            path: 'weatherStationDataDetail',
237 
+            name: 'WeatherStationDataDetail',
238 
+            component: () => import('@/views/grainDetection/weatherStationData/detail'),
239 
+            hidden: true,
240 
+            meta: { title: '详情', activeMenu: '/grainDetection/weather/weatherStationData' }
241 
+          },
242 
+        ]
243 
+      },
244 
+      // 气密性检测
245 
+      {
246 
+        path: 'airTightnessTest',
247 
+        name: 'AirTightnessTest',
248 
+        component: () => import('@/views/grainDetection/airTightnessTest/index'),
249 
+        meta: { title: '气密性检测' }
77 250 
       }
78 251 
     ]
79 
-  }, */
252 
+  },
80 253 
   {
81 
-    path: '/front/example',
254 
+    path: '/example',
82 255 
     component: Layout,
83 256 
     redirect: '/example/table',
84 257 
     name: 'Example',
 
@@ -100,7 +273,7 @@ export const constantRoutes = [
100 273 
   },
101 274
102 275 
   {
103 
-    path: '/front/form',
276 
+    path: '/form',
104 277 
     component: Layout,
105 278 
     children: [
106 279 
       {
 
@@ -113,7 +286,7 @@ export const constantRoutes = [
113 286 
   },
114 287
115 288 
   {
116 
-    path: '/front/nested',
289 
+    path: '/nested',
117 290 
     component: Layout,
118 291 
     redirect: '/nested/menu1',
119 292 
     name: 'Nested',
 
@@ -172,7 +345,7 @@ export const constantRoutes = [
172 345 
   },
173 346
174 347 
   {
175 
-    path: '/front/external-link',
348 
+    path: '/external-link',
176 349 
     component: Layout,
177 350 
     children: [
178 351 
       {
 
@@ -187,7 +360,7 @@ export const constantRoutes = [
187 360 
 ]
188 361
189 362 
 const createRouter = () => new Router({
190 
-  mode: 'history', // require service support
363 
+  // mode: 'history', // require service support
191 364 
   scrollBehavior: () => ({ y: 0 }),
192 365 
   routes: constantRoutes
193 366 
 })
 
@@ -195,7 +368,7 @@ const createRouter = () => new Router({
195 368 
 const router = createRouter()
196 369
197 370 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
198 
-export function resetRouter() {
371 
+export function resetRouter () {
199 372 
   const newRouter = createRouter()
200 373 
   router.matcher = newRouter.matcher // reset router
201 374 
 }

+ 2 - 2
src/store/modules/app.js
View File 

@@ -15,11 +15,11 @@ const mutations = {
15 15 
     if (state.sidebar.opened) {
16 16 
       Cookies.set('sidebarStatus', 1)
17 17 
     } else {
18 
-      Cookies.set('sidebarStatus', 0)
18 
+      Cookies.set('sidebarStatus', 1)
19 19 
     }
20 20 
   },
21 21 
   CLOSE_SIDEBAR: (state, withoutAnimation) => {
22 
-    Cookies.set('sidebarStatus', 0)
22 
+    Cookies.set('sidebarStatus', 1)
23 23 
     state.sidebar.opened = false
24 24 
     state.sidebar.withoutAnimation = withoutAnimation
25 25 
   },

+ 60 - 1
src/styles/index.scss
View File 

@@ -61,5 +61,64 @@ div:focus {
61 61
62 62 
 // main-container global css
63 63 
 .app-container {
64 
-  padding: 20px;
64 
+  padding: 15px;
65 
+
65 66 
 }
67 
+.boxShadow {
68 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
69 
+}
70 
+.el-button--primary {
71 
+  color: #fff;
72 
+  background-color: #5989e8;
73 
+  border-color: #5989e8
74 
+}
75 
+
76 
+.el-button--primary:focus,
77 
+.el-button--primary:hover {
78 
+  background: #497ee7;
79 
+  border-color: #497ee7;
80 
+  color: #fff
81 
+}
82 
+
83 
+/* .el-button--primary:active {
84 
+  background: #3a835d;
85 
+  border-color: #3a835d;
86 
+  color: #fff;
87 
+  outline: 0
88 
+}
89 
+
90 
+.el-button--primary.is-active {
91 
+  background: #3a835d;
92 
+  border-color: #3a835d;
93 
+  color: #fff
94 
+}
95 
+
96 
+.el-button--primary.is-disabled,
97 
+.el-button--primary.is-disabled:active,
98 
+.el-button--primary.is-disabled:focus,
99 
+.el-button--primary.is-disabled:hover {
100 
+  color: #fff;
101 
+  background-color: #a0c8b3;
102 
+  border-color: #a0c8b3
103 
+} */
104 
+.pagination-container {
105 
+  margin: 15px 0;
106 
+  margin-right: 20px;
107 
+  text-align: right;
108 
+  .btn-prev {
109 
+    background-color: #fff;
110 
+  }
111 
+  .el-page {
112 
+    .number {
113 
+      background-color: #fff;
114 
+    }
115 
+  }
116 
+}
117 
+.el-pagination.is-background .btn-prev,.el-pagination.is-background .btn-next {
118 
+  // border-color: #037d41;
119 
+  background-color: #fff;
120 
+}
121 
+.el-pagination.is-background .el-pager li:not(.disabled) {
122 
+  // color: #037d41;
123 
+  background-color: #fff;
124 
+}

+ 16 - 10
src/styles/sidebar.scss
View File 

@@ -3,18 +3,18 @@
3 3 
   .main-container {
4 4 
     min-height: 100%;
5 5 
     transition: margin-left .28s;
6 
-    margin-left: $sideBarWidth;
6 
+    // margin-left: $sideBarWidth;
7 7 
     position: relative;
8 8 
   }
9 9
10 10 
   .sidebar-container {
11 11 
     transition: width 0.28s;
12 12 
     width: $sideBarWidth !important;
13 
-    background-color: $menuBg;
14 
-    height: 100%;
15 
-    position: fixed;
13 
+    // background-color: $menuBg;
14 
+    // height: 100%;
15 
+    position: absolute;
16 16 
     font-size: 0px;
17 
-    top: 0;
17 
+    top: 46px;
18 18 
     bottom: 0;
19 19 
     left: 0;
20 20 
     z-index: 1001;
 
@@ -54,7 +54,9 @@
54 54 
     }
55 55
56 56 
     .svg-icon {
57 
-      margin-right: 16px;
57 
+      // margin-right: 16px;
58 
+      margin-right: 12px;
59 
+      margin-left: -2px;
58 60 
     }
59 61
60 62 
     .sub-el-icon {
 
@@ -71,22 +73,25 @@
71 73 
     // menu hover
72 74 
     .submenu-title-noDropdown,
73 75 
     .el-submenu__title {
76 
+      color: #000;
74 77 
       &:hover {
75 
-        background-color: $menuHover !important;
78 
+        // background-color: $menuHover !important;
79 
+        background-color:#e5edfb !important;
76 80 
       }
77 81 
     }
78 82
79 83 
     .is-active>.el-submenu__title {
80 
-      color: $subMenuActiveText !important;
84 
+      color: #000 !important;
81 85 
     }
82 86
83 87 
     & .nest-menu .el-submenu>.el-submenu__title,
84 88 
     & .el-submenu .el-menu-item {
89 
+      padding-left: 50px !important;
85 90 
       min-width: $sideBarWidth !important;
86 
-      background-color: $subMenuBg !important;
91 
+      background-color: #f6f9fe !important;
87 92
88 93 
       &:hover {
89 
-        background-color: $subMenuHover !important;
94 
+        background-color: #e5edfb !important;
90 95 
       }
91 96 
     }
92 97 
   }
 
@@ -199,6 +204,7 @@
199 204
200 205 
   .nest-menu .el-submenu>.el-submenu__title,
201 206 
   .el-menu-item {
207 
+    color: #000;
202 208 
     &:hover {
203 209 
       // you can use $subMenuHover
204 210 
       background-color: $menuHover !important;

+ 2 - 2
src/styles/variables.scss
View File 

@@ -1,7 +1,7 @@
1 1 
 // sidebar
2 
-$menuText:#bfcbd9;
2 
+$menuText:#000;
3 3 
 $menuActiveText:#409EFF;
4 
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
4 
+$subMenuActiveText:#000; //https://github.com/ElemeFE/element/issues/12951
5 5
6 6 
 $menuBg:#304156;
7 7 
 $menuHover:#263445;

+ 191 - 0
src/views/grainDetection/airTightnessTest/index.vue
View File 

@@ -0,0 +1,191 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <router-view />
4 
+    <div class="header boxShadow">
5 
+      <div class="header-title">气密性检测</div>
6 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o" v-if="notice">
7 
+        今日检测共有10个仓房气密性异常！
8 
+      </van-notice-bar>
9 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
10 
+
11 
+        <el-form-item label="仓房名称">
12 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
13 
+            <el-option label="区域一" value="shanghai"></el-option>
14 
+            <el-option label="区域二" value="beijing"></el-option>
15 
+          </el-select>
16 
+        </el-form-item>
17 
+        <el-form-item label="检测日期">
18 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
19 
+          </el-date-picker>
20 
+        </el-form-item>
21 
+        <el-form-item>
22 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
23 
+          <el-button type="primary" @click="onSubmit">气密性检测</el-button>
24 
+        </el-form-item>
25 
+      </el-form>
26 
+    </div>
27 
+    <van-list>
28 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
29 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
30 
+        <div class="list-main">
31 
+
32 
+          <div class="list-content">
33 
+            <div class="list-title">{{ item.title}}</div>
34 
+            <van-row class="content-1">
35 
+              <van-col span="6">检测方式: <span class="text-colorc">{{item.jcfs}}</span></van-col>
36 
+              <van-col span="6">压力值低限: <span class="text-colorc">{{item.ylzdx}}</span></van-col>
37 
+              <van-col span="6">压力值高限: <span class="text-colorc">{{item.ylzgx}} </span></van-col>
38 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
39 
+            </van-row>
40 
+            <van-row class="content-1">
41 
+              <van-col span="6">抽排气时间: <span class="text-colorc">{{item.cpqsj}} </span></van-col>
42 
+              <van-col span="6">计时时间: <span class="text-colorc">{{item.jssj}} </span></van-col>
43 
+              <van-col span="6"></van-col>
44 
+            </van-row>
45 
+          </div>
46 
+          <div class="list-btns">
47 
+            <!-- <el-button type="primary" @click="handleDetail">详情</el-button> -->
48 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
49 
+          </div>
50 
+        </div>
51 
+
52 
+      </div>
53 
+    </van-list>
54 
+    <div class="pagination-container">
55 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
56 
+    </div>
57 
+  </div>
58 
+</template>
59 
+
60 
+<script>
61 
+import { getList } from '@/api/table'
62 
+
63 
+export default {
64 
+  filters: {
65 
+
66 
+  },
67 
+  data () {
68 
+    return {
69 
+      formInline: {
70 
+        barnName: '',
71 
+        testDate: ''
72 
+      },
73 
+      list: [
74 
+        {title: '1号仓房', jcfs: '负压抽气', ylzdx: '4', ylzgx: '22', cpqsj: '2022.15.23', jssj: '2021-01-12'},
75 
+        {title: '1号仓房', jcfs: '负压抽气', ylzdx: '4', ylzgx: '22', cpqsj: '2022.15.23', jssj: '2021-01-12'},
76 
+        {title: '1号仓房', jcfs: '负压抽气', ylzdx: '4', ylzgx: '22', cpqsj: '2022.15.23', jssj: '2021-01-12'},
77 
+        {title: '1号仓房', jcfs: '负压抽气', ylzdx: '4', ylzgx: '22', cpqsj: '2022.15.23', jssj: '2021-01-12'},
78 
+        {title: '1号仓房', jcfs: '负压抽气', ylzdx: '4', ylzgx: '22', cpqsj: '2022.15.23', jssj: '2021-01-12'},
79 
+      ],
80 
+      loading: 'false',
81 
+      finished: 'false',
82 
+
83 
+      listQuery: {
84 
+        condition: "",
85 
+        page: 1,
86 
+        limit: 10,
87 
+        total: 10,
88 
+      },
89 
+    }
90 
+  },
91 
+  created () {
92 
+
93 
+  },
94 
+  methods: {
95 
+    onSubmit () {
96 
+      console.log('submit!');
97 
+    },
98 
+    handleSizeChange (val) {
99 
+      console.log(`每页 ${val} 条`);
100 
+    },
101 
+     handleHistory () {
102 
+      this.$router.push({ name: 'HistoryTendency' })
103 
+    },
104 
+    handleDetail() {
105 
+      this.$router.push({ name: 'GrainDetail' })
106 
+    },
107 
+    sizeChange (v) {
108 
+      this.listQuery.limit = v
109 
+      console.log(`每页 ${v} 条`);
110 
+      this.list.splice(v, this.list.length - 1)
111 
+    },
112 
+    pageChange (v) {
113 
+      this.listQuery.page = v
114 
+      console.log(`当前页: ${v}`);
115 
+    },
116 
+  }
117 
+}
118 
+</script>
119 
+<style lang='scss' scoped>
120 
+.boxShadow {
121 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
122 
+}
123 
+::v-deep .van-notice-bar {
124 
+  font-weight: 600;
125 
+  padding: 0;
126 
+  cursor: pointer;
127 
+}
128 
+.header {
129 
+  background-color: #fff;
130 
+  border-radius: 15px;
131 
+  padding: 15px;
132 
+  // height: 160px;
133 
+  min-height: 100px;
134 
+  display: flex;
135 
+  flex-direction: column;
136 
+  justify-content: space-between;
137 
+  .header-title {
138 
+    font-size: 14px;
139 
+    font-weight: 600;
140 
+    padding-left: 10px;
141 
+    border-left: 4px solid #5283e7;
142 
+  }
143 
+  .el-form {
144 
+    .el-form-item {
145 
+      margin-bottom: 0;
146 
+    }
147 
+  }
148 
+}
149 
+.list {
150 
+  background-color: #fff;
151 
+  border-radius: 15px;
152 
+  margin-top: 10px;
153 
+  .list-main {
154 
+    padding-left: 15px;
155 
+    margin-top: 15px;
156 
+    display: flex;
157 
+    justify-content: space-between;
158 
+    .list-title {
159 
+      font-size: 15px;
160 
+      font-weight: 700;
161 
+      padding: 10px 0;
162 
+    }
163 
+    .list-content {
164 
+      width: 90%;
165 
+      .content-1 {
166 
+        font-size: 14px;
167 
+        display: flex;
168 
+        justify-content: space-between;
169 
+        margin-top: 10px;
170 
+        // padding: 5px 0;
171 
+        strong {
172 
+          color: #d24848;
173 
+        }
174 
+        .text-colorc {
175 
+          color: #b8b8b8;
176 
+        }
177 
+      }
178 
+      .content-1:nth-last-child(1) {
179 
+        padding-bottom: 10px;
180 
+      }
181 
+    }
182 
+    .list-btns {
183 
+      width: 10%;
184 
+      background-color: #edf2fd;
185 
+      display: flex;
186 
+      justify-content: space-evenly;
187 
+      align-items: center;
188 
+    }
189 
+  }
190 
+}
191 
+</style>

+ 184 - 0
src/views/grainDetection/energyConsumptionMonitoring/abnormalList.vue
View File 

@@ -0,0 +1,184 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="header boxShadow">
4 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
5 
+        <!-- <el-form-item label="仓房名称">
6 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
7 
+            <el-option label="区域一" value="shanghai"></el-option>
8 
+            <el-option label="区域二" value="beijing"></el-option>
9 
+          </el-select>
10 
+        </el-form-item> -->
11 
+        <el-form-item label="检测日期">
12 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
13 
+          </el-date-picker>
14 
+        </el-form-item>
15 
+        <el-form-item class="fr">
16 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
17 
+          <!-- <el-button type="primary" @click="onSubmit">粮情检测</el-button> -->
18 
+        </el-form-item>
19 
+      </el-form>
20 
+    </div>
21 
+    <van-list>
22 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
23 
+        <div class="list-main">
24 
+          <div class="list-content">
25 
+            <div class="list-title">{{ item.title}}</div>
26 
+            <van-row class="content-1">
27 
+              <van-col span="6">害虫监测单号:<span class="text-colorc">{{item.lhq}}</span></van-col>
28 
+              <van-col span="6">通道号:<span class="text-colorc">{{item.oxygen}}</span></van-col>
29 
+              <van-col span="6">害虫种类: <span class="text-colorc">{{item.co2}} </span></van-col>
30 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
31 
+            </van-row>
32 
+            <van-row class="content-1">
33 
+              <van-col span="6" class="color-red">虫情:<span>{{item.pest}} </span></van-col>
34 
+              <van-col span="6">检测时间:<span class="text-colorc">{{item.collectTime}} </span></van-col>
35 
+              <van-col span="6">采集人:<span class="text-colorc">{{item.gatherer}} </span></van-col>
36 
+              <!-- <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col> -->
37 
+            </van-row>
38 
+          </div>
39 
+          <div class="list-btns">
40 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
41 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
42 
+          </div>
43 
+        </div>
44 
+
45 
+      </div>
46 
+    </van-list>
47 
+    <div class="pagination-container">
48 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
49 
+    </div>
50 
+  </div>
51 
+</template>
52 
+
53 
+<script>
54 
+import { getList } from '@/api/table'
55 
+
56 
+export default {
57 
+  filters: {
58 
+
59 
+  },
60 
+  data () {
61 
+    return {
62 
+      formInline: {
63 
+        barnName: '',
64 
+        testDate: ''
65 
+      },
66 
+      list: [
67 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
68 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
69 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
70 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
71 
+
72 
+      ],
73 
+      loading: 'false',
74 
+      finished: 'false',
75 
+
76 
+      listQuery: {
77 
+        condition: "",
78 
+        page: 1,
79 
+        limit: 10,
80 
+        total: 10,
81 
+      },
82 
+    }
83 
+  },
84 
+  created () {
85 
+
86 
+  },
87 
+  methods: {
88 
+    onSubmit () {
89 
+      console.log('submit!');
90 
+    },
91 
+    handleSizeChange (val) {
92 
+      console.log(`每页 ${val} 条`);
93 
+    },
94 
+    handleDetail () {
95 
+      this.$router.push({ name: 'PestDetectionDetail' })
96 
+    },
97 
+    sizeChange (v) {
98 
+      this.listQuery.limit = v
99 
+      console.log(`每页 ${v} 条`);
100 
+      this.list.splice(v, this.list.length - 1)
101 
+    },
102 
+    pageChange (v) {
103 
+      this.listQuery.page = v
104 
+      console.log(`当前页: ${v}`);
105 
+    },
106 
+  }
107 
+}
108 
+</script>
109 
+<style lang='scss' scoped>
110 
+.boxShadow {
111 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
112 
+}
113 
+::v-deep .van-notice-bar {
114 
+  font-weight: 600;
115 
+  padding: 0;
116 
+  cursor: pointer;
117 
+}
118 
+.header {
119 
+  background-color: #fff;
120 
+  border-radius: 15px;
121 
+  padding: 15px;
122 
+  // height: 160px;
123 
+  .header-title {
124 
+    font-size: 14px;
125 
+    font-weight: 600;
126 
+    padding-left: 10px;
127 
+    border-left: 4px solid #5283e7;
128 
+  }
129 
+  .el-form {
130 
+    .el-form-item {
131 
+      margin-bottom: 0;
132 
+    }
133 
+    .fr {
134 
+      float: right;
135 
+    }
136 
+  }
137 
+}
138 
+.list {
139 
+  background-color: #fff;
140 
+  border-radius: 15px;
141 
+  margin-top: 10px;
142 
+  .list-main {
143 
+    padding-left: 15px;
144 
+    margin-top: 15px;
145 
+    display: flex;
146 
+    justify-content: space-between;
147 
+    .list-title {
148 
+      font-size: 15px;
149 
+      font-weight: 700;
150 
+      padding: 10px 0;
151 
+    }
152 
+    .list-content {
153 
+      width: 80%;
154 
+      .content-1 {
155 
+        font-size: 14px;
156 
+        display: flex;
157 
+        justify-content: space-between;
158 
+        margin-top: 10px;
159 
+        // padding: 5px 0;
160 
+        strong {
161 
+          color: #d24848;
162 
+        }
163 
+        .text-colorc {
164 
+          color: #b8b8b8;
165 
+        }
166 
+        .color-red {
167 
+          color: #f12b07;
168 
+          font-weight: 600;
169 
+        }
170 
+      }
171 
+      .content-1:nth-last-child(1) {
172 
+        padding-bottom: 10px;
173 
+      }
174 
+    }
175 
+    .list-btns {
176 
+      width: 20%;
177 
+      background-color: #edf2fd;
178 
+      display: flex;
179 
+      justify-content: space-evenly;
180 
+      align-items: center;
181 
+    }
182 
+  }
183 
+}
184 
+</style>

+ 115 - 0
src/views/grainDetection/energyConsumptionMonitoring/detail.vue
View File 

@@ -0,0 +1,115 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="info">
4 
+      <div class="title">检测信息</div>
5 
+      <el-form ref="form" :model="form" label-width="120px" label-position="left">
6 
+        <el-row :gutter="20">
7 
+          <el-col :span="11">
8 
+            <el-form-item label="仓房名称">
9 
+              <el-input v-model="form.name"></el-input>
10 
+            </el-form-item>
11 
+            <el-form-item label="累计用电">
12 
+              <el-input v-model="form.ljyd"></el-input>
13 
+            </el-form-item>
14 
+            <el-form-item label="电流(A)">
15 
+              <el-input v-model="form.dl"></el-input>
16 
+            </el-form-item>
17 
+            <el-form-item label="频率">
18 
+              <el-input v-model="form.pl"></el-input>
19 
+            </el-form-item>
20 
+            <el-form-item label="采集人">
21 
+              <el-input v-model="form.cjr"></el-input>
22 
+            </el-form-item>
23 
+          </el-col>
24 
+          <el-col :span="11" :offset="2">
25 
+            <el-form-item label="设备编号">
26 
+              <el-input v-model="form.sbbh"></el-input>
27 
+            </el-form-item>
28 
+            <el-form-item label="电压">
29 
+              <el-input v-model="form.dy"></el-input>
30 
+            </el-form-item>
31 
+            <el-form-item label="功率因数">
32 
+              <el-input v-model="form.glys"></el-input>
33 
+            </el-form-item>
34 
+            <el-form-item label="有功电能">
35 
+              <el-input v-model="form.ygdn"></el-input>
36 
+            </el-form-item>
37 
+            <el-form-item label="检测时间">
38 
+              <el-input v-model="form.jcsj"></el-input>
39 
+            </el-form-item>
40 
+          </el-col>
41 
+        </el-row>
42 
+      </el-form>
43 
+    </div>
44 
+  </div>
45 
+</template>
46 
+
47 
+<script>
48 
+import * as echarts from 'echarts';
49 
+export default {
50 
+  data () {
51 
+    return {
52 
+      form: {
53 
+        name: '1号仓',
54 
+        ljyd: '332',
55 
+        dl: '22',
56 
+        pl: '30%',
57 
+        cjr: '王曲娜',
58 
+        sbbh:'430901199802128911',
59 
+        dy: '220',
60 
+        glys:'无',
61 
+        ygdn:'无',
62 
+        jcsj:'2022-10-12'
63 
+      },
64 
+    }
65 
+  },
66 
+  created () {
67 
+    // console.log(this.$route.query, 'query')
68 
+  },
69 
+  mounted () {
70 
+
71 
+  },
72 
+  methods: {
73 
+    tableDataAdd() {
74 
+      // this.tableData.
75 
+    }
76 
+  }
77 
+}
78 
+</script>
79 
+<style lang='scss' scoped>
80 
+.info {
81 
+  background-color: #fff;
82 
+  border-radius: 15px;
83 
+  padding: 10px 15px;
84 
+  height: calc(100vh - 110px);
85 
+  .title {
86 
+    border-left: 4px solid #4a7de6;
87 
+    padding-left: 10px;
88 
+  }
89 
+  .el-form {
90 
+    margin-top: 15px;
91 
+  }
92 
+}
93 
+.table {
94 
+  border-radius: .185185rem;
95 
+
96 
+}
97 
+.th {
98 
+  height: 1.074074rem;
99 
+  line-height: 1.074074rem;
100 
+  background-color: #1d9eef;
101 
+  text-align: center;
102 
+  // border: 1px solid #000;
103 
+}
104 
+.list-tr {
105 
+  height: 1.074074rem;
106 
+  line-height: 1.074074rem;
107 
+  border: 1px solid #000;
108 
+}
109 
+td {
110 
+  text-align: center;
111 
+}
112 
+::v-deep .el-input__inner {
113 
+  text-align: center;
114 
+}
115 
+</style>

+ 203 - 0
src/views/grainDetection/energyConsumptionMonitoring/index.vue
View File 

@@ -0,0 +1,203 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <router-view />
4 
+    <div class="header boxShadow">
5 
+      <div class="header-title">能耗检测</div>
6 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o" v-if="notice">
7 
+        今日检测共有10个仓房能耗异常！
8 
+      </van-notice-bar>
9 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
10 
+
11 
+        <el-form-item label="仓房名称">
12 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
13 
+            <el-option label="区域一" value="shanghai"></el-option>
14 
+            <el-option label="区域二" value="beijing"></el-option>
15 
+          </el-select>
16 
+        </el-form-item>
17 
+        <el-form-item label="检测日期">
18 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
19 
+          </el-date-picker>
20 
+        </el-form-item>
21 
+        <el-form-item>
22 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
23 
+          <el-button type="primary" @click="onSubmit">能耗检测</el-button>
24 
+        </el-form-item>
25 
+      </el-form>
26 
+    </div>
27 
+    <van-list>
28 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
29 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
30 
+        <div class="list-main">
31 
+
32 
+          <div class="list-content">
33 
+            <div class="list-title">{{ item.title}}</div>
34 
+            <van-row class="content-1">
35 
+              <van-col span="6">设备编号: <span class="text-colorc">{{item.varieties}}</span></van-col>
36 
+              <van-col span="6">累计用电(度): <span class="text-colorc">{{item.property}}</span></van-col>
37 
+              <van-col span="6">电压(Y): <span class="text-colorc">{{item.temperature}} </span></van-col>
38 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
39 
+            </van-row>
40 
+            <van-row class="content-1">
41 
+              <van-col span="6">电流(A): <span>{{item.max}} </span></van-col>
42 
+              <van-col span="6">检测时间: <span class="text-colorc">{{item.detectionTime}} </span></van-col>
43 
+               <van-col span="6">采集人: <span class="text-colorc">{{item.gatherer}} </span></van-col>
44 
+            </van-row>
45 
+          </div>
46 
+          <div class="list-btns">
47 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
48 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
49 
+            <el-button type="primary" @click="handleHistory">历史记录</el-button>
50 
+          </div>
51 
+        </div>
52 
+
53 
+      </div>
54 
+    </van-list>
55 
+    <div class="pagination-container">
56 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
57 
+    </div>
58 
+  </div>
59 
+</template>
60 
+
61 
+<script>
62 
+import { getList } from '@/api/table'
63 
+
64 
+export default {
65 
+  filters: {
66 
+
67 
+  },
68 
+  data () {
69 
+    return {
70 
+      notice:false,
71 
+      formInline: {
72 
+        barnName: '',
73 
+        testDate: ''
74 
+      },
75 
+      list: [
76 
+        {
77 
+          title: '1号仓房', varieties: '323213213', property: '422', temperature: '220', max: '2',gatherer: '王全德', detectionTime: '2021-01-12'
78 
+        },
79 
+        {
80 
+          title: '1号仓房', varieties: '323213213', property: '422', temperature: '220', max: '2',gatherer: '王全德', detectionTime: '2021-01-12'
81 
+        },
82 
+        {
83 
+          title: '1号仓房', varieties: '323213213', property: '422', temperature: '220', max: '2',gatherer: '王全德', detectionTime: '2021-01-12'
84 
+        },
85 
+        {
86 
+          title: '1号仓房', varieties: '323213213', property: '422', temperature: '220', max: '2',gatherer: '王全德', detectionTime: '2021-01-12'
87 
+        },
88 
+      ],
89 
+      loading: 'false',
90 
+      finished: 'false',
91 
+
92 
+      listQuery: {
93 
+        condition: "",
94 
+        page: 1,
95 
+        limit: 10,
96 
+        total: 10,
97 
+      },
98 
+    }
99 
+  },
100 
+  created () {
101 
+
102 
+  },
103 
+  methods: {
104 
+    onSubmit () {
105 
+      console.log('submit!');
106 
+    },
107 
+    handleSizeChange (val) {
108 
+      console.log(`每页 ${val} 条`);
109 
+    },
110 
+     handleHistory () {
111 
+      this.$router.push({ name: 'EnergyConsumptionAbnormalList' })
112 
+    },
113 
+    handleDetail() {
114 
+      this.$router.push({ name: 'EnergyConsumptionDetail' })
115 
+    },
116 
+    sizeChange (v) {
117 
+      this.listQuery.limit = v
118 
+      console.log(`每页 ${v} 条`);
119 
+      this.list.splice(v, this.list.length - 1)
120 
+    },
121 
+    pageChange (v) {
122 
+      this.listQuery.page = v
123 
+      console.log(`当前页: ${v}`);
124 
+    },
125 
+  }
126 
+}
127 
+</script>
128 
+<style lang='scss' scoped>
129 
+.boxShadow {
130 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
131 
+}
132 
+::v-deep .van-notice-bar {
133 
+  font-weight: 600;
134 
+  padding: 0;
135 
+  cursor: pointer;
136 
+}
137 
+.header {
138 
+  background-color: #fff;
139 
+  border-radius: 15px;
140 
+  padding: 15px;
141 
+  // height: 160px;
142 
+  min-height: 100px;
143 
+  display: flex;
144 
+  flex-direction: column;
145 
+  justify-content: space-between;
146 
+  .header-title {
147 
+    font-size: 14px;
148 
+    font-weight: 600;
149 
+    padding-left: 10px;
150 
+    border-left: 4px solid #5283e7;
151 
+  }
152 
+  .van-notice-bar {
153 
+    padding: 10px 0 10px 0;
154 
+  }
155 
+  .el-form {
156 
+    .el-form-item {
157 
+      margin-bottom: 0;
158 
+    }
159 
+  }
160 
+}
161 
+.list {
162 
+  background-color: #fff;
163 
+  border-radius: 15px;
164 
+  margin-top: 10px;
165 
+  .list-main {
166 
+    padding-left: 15px;
167 
+    margin-top: 15px;
168 
+    display: flex;
169 
+    justify-content: space-between;
170 
+    .list-title {
171 
+      font-size: 15px;
172 
+      font-weight: 700;
173 
+      padding: 10px 0;
174 
+    }
175 
+    .list-content {
176 
+      width: 67%;
177 
+      .content-1 {
178 
+        font-size: 14px;
179 
+        display: flex;
180 
+        justify-content: space-between;
181 
+        margin-top: 10px;
182 
+        // padding: 5px 0;
183 
+        strong {
184 
+          color: #d24848;
185 
+        }
186 
+        .text-colorc {
187 
+          color: #b8b8b8;
188 
+        }
189 
+      }
190 
+      .content-1:nth-last-child(1) {
191 
+        padding-bottom: 10px;
192 
+      }
193 
+    }
194 
+    .list-btns {
195 
+      width: 33%;
196 
+      background-color: #edf2fd;
197 
+      display: flex;
198 
+      justify-content: space-evenly;
199 
+      align-items: center;
200 
+    }
201 
+  }
202 
+}
203 
+</style>

+ 207 - 0
src/views/grainDetection/gasDetection/abnormalList.vue
View File 

@@ -0,0 +1,207 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="header boxShadow">
4 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
5 
+        <el-form-item label="仓房名称">
6 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
7 
+            <el-option label="区域一" value="shanghai"></el-option>
8 
+            <el-option label="区域二" value="beijing"></el-option>
9 
+          </el-select>
10 
+        </el-form-item>
11 
+        <el-form-item label="检测日期">
12 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
13 
+          </el-date-picker>
14 
+        </el-form-item>
15 
+        <el-form-item class="fr">
16 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
17 
+          <!-- <el-button type="primary" @click="onSubmit">粮情检测</el-button> -->
18 
+        </el-form-item>
19 
+      </el-form>
20 
+    </div>
21 
+    <van-list>
22 
+     <div class="list boxShadow" v-for="(item,index) in list" :key="index">
23 
+        <div class="list-main">
24 
+
25 
+          <div class="list-content">
26 
+            <div class="list-title">{{ item.title}}</div>
27 
+            <van-row class="content-1">
28 
+              <van-col span="6" class="color-red">磷化氢(ppm):<span>{{item.lhq}}</span></van-col>
29 
+              <van-col span="6">氧气(%):<span class="text-colorc">{{item.oxygen}}</span></van-col>
30 
+              <van-col span="6">二氧化氮(ppm): <span class="text-colorc">{{item.co2}} </span></van-col>
31 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
32 
+            </van-row>
33 
+            <van-row class="content-1">
34 
+              <van-col span="6">采集人:<span class="text-colorc">{{item.gatherer}} </span></van-col>
35 
+              <van-col span="6">采集日期:<span class="text-colorc">{{item.collectTime}} </span></van-col>
36 
+              <van-col span="6"></van-col>
37 
+              <!-- <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col> -->
38 
+            </van-row>
39 
+          </div>
40 
+          <div class="list-btns">
41 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
42 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
43 
+          </div>
44 
+        </div>
45 
+
46 
+      </div>
47 
+    </van-list>
48 
+    <div class="pagination-container">
49 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
50 
+    </div>
51 
+  </div>
52 
+</template>
53 
+
54 
+<script>
55 
+import { getList } from '@/api/table'
56 
+
57 
+export default {
58 
+  filters: {
59 
+
60 
+  },
61 
+  data () {
62 
+    return {
63 
+      formInline: {
64 
+        barnName: '',
65 
+        testDate: ''
66 
+      },
67 
+      list: [
68 
+        {
69 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
70 
+            : '10', average: '20', detectionTime: '2021-01-12'
71 
+        },
72 
+        {
73 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
74 
+            : '10', average: '20', detectionTime: '2021-01-12'
75 
+        },
76 
+        {
77 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
78 
+            : '10', average: '20', detectionTime: '2021-01-12'
79 
+        },
80 
+        {
81 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
82 
+            : '10', average: '20', detectionTime: '2021-01-12'
83 
+        },
84 
+        {
85 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
86 
+            : '10', average: '20', detectionTime: '2021-01-12'
87 
+        },
88 
+        {
89 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
90 
+            : '10', average: '20', detectionTime: '2021-01-12'
91 
+        }
92 
+      ],
93 
+      loading: 'false',
94 
+      finished: 'false',
95 
+
96 
+      listQuery: {
97 
+        condition: "",
98 
+        page: 1,
99 
+        limit: 10,
100 
+        total: 10,
101 
+      },
102 
+    }
103 
+  },
104 
+  created () {
105 
+
106 
+  },
107 
+  methods: {
108 
+    onSubmit () {
109 
+      console.log('submit!');
110 
+    },
111 
+    handleSizeChange (val) {
112 
+      console.log(`每页 ${val} 条`);
113 
+    },
114 
+     handleHistory () {
115 
+      this.$router.push({ name: 'HistoryTendency' })
116 
+    },
117 
+    handleDetail() {
118 
+      this.$router.push({ name: 'GasDetectionDetail' })
119 
+    },
120 
+    sizeChange (v) {
121 
+      this.listQuery.limit = v
122 
+      console.log(`每页 ${v} 条`);
123 
+      this.list.splice(v, this.list.length - 1)
124 
+    },
125 
+    pageChange (v) {
126 
+      this.listQuery.page = v
127 
+      console.log(`当前页: ${v}`);
128 
+    },
129 
+  }
130 
+}
131 
+</script>
132 
+<style lang='scss' scoped>
133 
+.boxShadow {
134 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
135 
+}
136 
+::v-deep .van-notice-bar {
137 
+  font-weight: 600;
138 
+  padding: 0;
139 
+  cursor: pointer;
140 
+}
141 
+.header {
142 
+  background-color: #fff;
143 
+  border-radius: 15px;
144 
+  padding: 15px;
145 
+  // height: 160px;
146 
+  .header-title {
147 
+    font-size: 14px;
148 
+    font-weight: 600;
149 
+    padding-left: 10px;
150 
+    border-left: 4px solid #5283e7;
151 
+  }
152 
+  .el-form {
153 
+    .el-form-item {
154 
+      margin-bottom: 0;
155 
+    }
156 
+    .fr {
157 
+      float: right;
158 
+    }
159 
+  }
160 
+}
161 
+.list {
162 
+  background-color: #fff;
163 
+  border-radius: 15px;
164 
+  margin-top: 10px;
165 
+  .list-main {
166 
+    padding-left: 15px;
167 
+    margin-top: 15px;
168 
+    display: flex;
169 
+    justify-content: space-between;
170 
+    .list-title {
171 
+      font-size: 15px;
172 
+      font-weight: 700;
173 
+      padding: 10px 0;
174 
+    }
175 
+    .list-content {
176 
+      width:80%;
177 
+      .content-1 {
178 
+        font-size: 14px;
179 
+        display: flex;
180 
+        justify-content: space-between;
181 
+        margin-top: 10px;
182 
+        // padding: 5px 0;
183 
+        strong {
184 
+          color: #d24848;
185 
+        }
186 
+        .text-colorc {
187 
+          color: #b8b8b8;
188 
+        }
189 
+        .color-red {
190 
+          color: #f12b07;
191 
+          font-weight: 600;
192 
+        }
193 
+      }
194 
+      .content-1:nth-last-child(1) {
195 
+        padding-bottom: 10px;
196 
+      }
197 
+    }
198 
+    .list-btns {
199 
+      width: 20%;
200 
+      background-color: #edf2fd;
201 
+      display: flex;
202 
+      justify-content: space-evenly;
203 
+      align-items: center;
204 
+    }
205 
+  }
206 
+}
207 
+</style>

+ 103 - 0
src/views/grainDetection/gasDetection/detail.vue
View File 

@@ -0,0 +1,103 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="info">
4 
+      <div class="title">检测信息</div>
5 
+      <el-form ref="form" :model="form" label-width="120px" label-position="left">
6 
+        <el-row :gutter="20">
7 
+          <el-col :span="11">
8 
+            <el-form-item label="仓房名称">
9 
+              <el-input v-model="form.name"></el-input>
10 
+            </el-form-item>
11 
+            <el-form-item label="氧气(%)">
12 
+              <el-input v-model="form.variety"></el-input>
13 
+            </el-form-item>
14 
+            <el-form-item label="磷化氢(ppm)">
15 
+              <el-input v-model="form.grade"></el-input>
16 
+            </el-form-item>
17 
+            <el-form-item label="检测虫数">
18 
+              <el-input v-model="form.number"></el-input>
19 
+            </el-form-item>
20 
+          </el-col>
21 
+          <el-col :span="11" :offset="2">
22 
+            <el-form-item label="检测通道位数">
23 
+              <el-input v-model="form.type"></el-input>
24 
+            </el-form-item>
25 
+            <el-form-item label="二氧化氮(ppm)">
26 
+              <el-input v-model="form.property"></el-input>
27 
+            </el-form-item>
28 
+            <el-form-item label="检测虫种类">
29 
+              <el-input v-model="form.kind"></el-input>
30 
+            </el-form-item>
31 
+          </el-col>
32 
+        </el-row>
33 
+      </el-form>
34 
+    </div>
35 
+  </div>
36 
+</template>
37 
+
38 
+<script>
39 
+import * as echarts from 'echarts';
40 
+export default {
41 
+  data () {
42 
+    return {
43 
+      form: {
44 
+        name: '1号仓',
45 
+        variety: '60',
46 
+        grade: '30',
47 
+        type: '20122200202',
48 
+        property: '13',
49 
+        kind:'玉米虫',
50 
+        number: '3000'
51 
+      },
52 
+    }
53 
+  },
54 
+  created () {
55 
+    // console.log(this.$route.query, 'query')
56 
+  },
57 
+  mounted () {
58 
+
59 
+  },
60 
+  methods: {
61 
+    tableDataAdd() {
62 
+      // this.tableData.
63 
+    }
64 
+  }
65 
+}
66 
+</script>
67 
+<style lang='scss' scoped>
68 
+.info {
69 
+  background-color: #fff;
70 
+  border-radius: 15px;
71 
+  padding: 10px 15px;
72 
+  height: calc(100vh - 110px);
73 
+  .title {
74 
+    border-left: 4px solid #4a7de6;
75 
+    padding-left: 10px;
76 
+  }
77 
+  .el-form {
78 
+    margin-top: 15px;
79 
+  }
80 
+}
81 
+.table {
82 
+  border-radius: .185185rem;
83 
+
84 
+}
85 
+.th {
86 
+  height: 1.074074rem;
87 
+  line-height: 1.074074rem;
88 
+  background-color: #1d9eef;
89 
+  text-align: center;
90 
+  // border: 1px solid #000;
91 
+}
92 
+.list-tr {
93 
+  height: 1.074074rem;
94 
+  line-height: 1.074074rem;
95 
+  border: 1px solid #000;
96 
+}
97 
+td {
98 
+  text-align: center;
99 
+}
100 
+::v-deep .el-input__inner {
101 
+  text-align: center;
102 
+}
103 
+</style>

+ 27 - 0
src/views/grainDetection/gasDetection/gas.vue
View File 

@@ -0,0 +1,27 @@
1 
+<template>
2 
+  <div>
3 
+    <router-view />
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+import { getList } from '@/api/table'
9 
+
10 
+export default {
11 
+
12 
+  data () {
13 
+    return {
14 
+
15 
+    }
16 
+  },
17 
+  created () {
18 
+
19 
+  },
20 
+  methods: {
21 
+
22 
+  }
23 
+}
24 
+</script>
25 
+<style lang='scss' scoped>
26 
+
27 
+</style>

+ 199 - 0
src/views/grainDetection/gasDetection/index.vue
View File 

@@ -0,0 +1,199 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <router-view />
4 
+    <div class="header boxShadow">
5 
+      <div class="header-title">气体检测</div>
6 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o"  @click="handleAbnormal">
7 
+        今日检测共有10个仓房气体异常！
8 
+      </van-notice-bar>
9 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
10 
+
11 
+        <el-form-item label="仓房名称">
12 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
13 
+            <el-option label="区域一" value="shanghai"></el-option>
14 
+            <el-option label="区域二" value="beijing"></el-option>
15 
+          </el-select>
16 
+        </el-form-item>
17 
+        <el-form-item label="检测日期">
18 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
19 
+          </el-date-picker>
20 
+        </el-form-item>
21 
+        <el-form-item>
22 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
23 
+          <el-button type="primary" @click="onSubmit">气体检测</el-button>
24 
+        </el-form-item>
25 
+      </el-form>
26 
+    </div>
27 
+    <van-list>
28 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
29 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
30 
+        <div class="list-main">
31 
+
32 
+          <div class="list-content">
33 
+            <div class="list-title">{{ item.title}}</div>
34 
+            <van-row class="content-1">
35 
+              <van-col span="6" class="color-red">磷化氢(ppm):<span>{{item.lhq}}</span></van-col>
36 
+              <van-col span="6">氧气(%):<span class="text-colorc">{{item.oxygen}}</span></van-col>
37 
+              <van-col span="6">二氧化氮(ppm): <span class="text-colorc">{{item.co2}} </span></van-col>
38 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
39 
+            </van-row>
40 
+            <van-row class="content-1">
41 
+              <van-col span="6">采集人:<span class="text-colorc">{{item.gatherer}} </span></van-col>
42 
+              <van-col span="6">采集日期:<span class="text-colorc">{{item.collectTime}} </span></van-col>
43 
+              <van-col span="6"></van-col>
44 
+              <!-- <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col> -->
45 
+            </van-row>
46 
+          </div>
47 
+          <div class="list-btns">
48 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
49 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
50 
+          </div>
51 
+        </div>
52 
+
53 
+      </div>
54 
+    </van-list>
55 
+    <div class="pagination-container">
56 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
57 
+    </div>
58 
+  </div>
59 
+</template>
60 
+
61 
+<script>
62 
+import { getList } from '@/api/table'
63 
+
64 
+export default {
65 
+  filters: {
66 
+
67 
+  },
68 
+  data () {
69 
+    return {
70 
+      formInline: {
71 
+        barnName: '',
72 
+        testDate: ''
73 
+      },
74 
+      list: [
75 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '22', gatherer: '王全德', collectTime: '2021-01-12'},
76 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '22', gatherer: '王全德', collectTime: '2021-01-12'},
77 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '22', gatherer: '王全德', collectTime: '2021-01-12'},
78 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '22', gatherer: '王全德', collectTime: '2021-01-12'},
79 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '22', gatherer: '王全德', collectTime: '2021-01-12'},
80 
+
81 
+      ],
82 
+      loading: 'false',
83 
+      finished: 'false',
84 
+
85 
+      listQuery: {
86 
+        condition: "",
87 
+        page: 1,
88 
+        limit: 10,
89 
+        total: 10,
90 
+      },
91 
+    }
92 
+  },
93 
+  created () {
94 
+
95 
+  },
96 
+  methods: {
97 
+    onSubmit () {
98 
+      console.log('submit!');
99 
+    },
100 
+    handleSizeChange (val) {
101 
+      console.log(`每页 ${val} 条`);
102 
+    },
103 
+     handleHistory () {
104 
+      this.$router.push({ name: 'HistoryTendency' })
105 
+    },
106 
+    handleDetail() {
107 
+      this.$router.push({ name: 'GasDetectionDetail' })
108 
+    },
109 
+    handleAbnormal () {
110 
+      this.$router.push({ name: 'GasAbnormalList' })
111 
+    },
112 
+    sizeChange (v) {
113 
+      this.listQuery.limit = v
114 
+      console.log(`每页 ${v} 条`);
115 
+      this.list.splice(v, this.list.length - 1)
116 
+    },
117 
+    pageChange (v) {
118 
+      this.listQuery.page = v
119 
+      console.log(`当前页: ${v}`);
120 
+    },
121 
+  }
122 
+}
123 
+</script>
124 
+<style lang='scss' scoped>
125 
+.boxShadow {
126 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
127 
+}
128 
+::v-deep .van-notice-bar {
129 
+  font-weight: 600;
130 
+  padding: 0;
131 
+  cursor: pointer;
132 
+}
133 
+.header {
134 
+  background-color: #fff;
135 
+  border-radius: 15px;
136 
+  padding: 15px;
137 
+  height: 160px;
138 
+  display: flex;
139 
+  flex-direction: column;
140 
+  justify-content: space-between;
141 
+  .header-title {
142 
+    font-size: 14px;
143 
+    font-weight: 600;
144 
+    padding-left: 10px;
145 
+    border-left: 4px solid #5283e7;
146 
+  }
147 
+  .el-form {
148 
+    .el-form-item {
149 
+      margin-bottom: 0;
150 
+    }
151 
+  }
152 
+}
153 
+.list {
154 
+  background-color: #fff;
155 
+  border-radius: 15px;
156 
+  margin-top: 10px;
157 
+  .list-main {
158 
+    padding-left: 15px;
159 
+    margin-top: 15px;
160 
+    display: flex;
161 
+    justify-content: space-between;
162 
+    .list-title {
163 
+      font-size: 15px;
164 
+      font-weight: 700;
165 
+      padding: 10px 0;
166 
+    }
167 
+    .list-content {
168 
+      width: 80%;
169 
+      .content-1 {
170 
+        font-size: 14px;
171 
+        display: flex;
172 
+        justify-content: space-between;
173 
+        margin-top: 10px;
174 
+        // padding: 5px 0;
175 
+        strong {
176 
+          color: #d24848;
177 
+        }
178 
+        .text-colorc {
179 
+          color: #b8b8b8;
180 
+        }
181 
+        .color-red {
182 
+          color: #f12b07;
183 
+          font-weight: 600;
184 
+        }
185 
+      }
186 
+      .content-1:nth-last-child(1) {
187 
+        padding-bottom: 10px;
188 
+      }
189 
+    }
190 
+    .list-btns {
191 
+      width: 20%;
192 
+      background-color: #edf2fd;
193 
+      display: flex;
194 
+      justify-content: space-evenly;
195 
+      align-items: center;
196 
+    }
197 
+  }
198 
+}
199 
+</style>

+ 202 - 0
src/views/grainDetection/grainTemperatureDetection/abnormalList.vue
View File 

@@ -0,0 +1,202 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="header boxShadow">
4 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
5 
+        <el-form-item label="仓房名称">
6 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
7 
+            <el-option label="区域一" value="shanghai"></el-option>
8 
+            <el-option label="区域二" value="beijing"></el-option>
9 
+          </el-select>
10 
+        </el-form-item>
11 
+        <el-form-item label="检测日期">
12 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
13 
+          </el-date-picker>
14 
+        </el-form-item>
15 
+        <el-form-item class="fr">
16 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
17 
+          <!-- <el-button type="primary" @click="onSubmit">粮情检测</el-button> -->
18 
+        </el-form-item>
19 
+      </el-form>
20 
+    </div>
21 
+    <van-list>
22 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
23 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
24 
+        <div class="list-main">
25 
+          <div class="list-content">
26 
+            <div class="list-title">{{ item.title}}</div>
27 
+            <van-row class="content-1">
28 
+              <van-col span="6">粮食品种:<span class="text-colorc">{{item.varieties}}</span></van-col>
29 
+              <van-col span="6">粮食性质:<span class="text-colorc">{{item.property}}</span></van-col>
30 
+              <van-col span="6">仓内温度: <span class="text-colorc">{{item.temperature}} ℃</span></van-col>
31 
+              <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col>
32 
+            </van-row>
33 
+            <van-row class="content-1">
34 
+              <van-col span="6">最高温:<span>{{item.max}} ℃</span></van-col>
35 
+              <van-col span="6">最低温:<span>{{item.lowest}} ℃</span></van-col>
36 
+              <van-col span="6">平均温: <span>{{item.average}} ℃</span></van-col>
37 
+              <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col>
38 
+            </van-row>
39 
+          </div>
40 
+          <div class="list-btns">
41 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
42 
+          </div>
43 
+        </div>
44 
+
45 
+      </div>
46 
+    </van-list>
47 
+    <div class="pagination-container">
48 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
49 
+    </div>
50 
+  </div>
51 
+</template>
52 
+
53 
+<script>
54 
+import { getList } from '@/api/table'
55 
+
56 
+export default {
57 
+  filters: {
58 
+
59 
+  },
60 
+  data () {
61 
+    return {
62 
+      formInline: {
63 
+        barnName: '',
64 
+        testDate: ''
65 
+      },
66 
+      list: [
67 
+        {
68 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
69 
+            : '10', average: '20', detectionTime: '2021-01-12'
70 
+        },
71 
+        {
72 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
73 
+            : '10', average: '20', detectionTime: '2021-01-12'
74 
+        },
75 
+        {
76 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
77 
+            : '10', average: '20', detectionTime: '2021-01-12'
78 
+        },
79 
+        {
80 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
81 
+            : '10', average: '20', detectionTime: '2021-01-12'
82 
+        },
83 
+        {
84 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
85 
+            : '10', average: '20', detectionTime: '2021-01-12'
86 
+        },
87 
+        {
88 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
89 
+            : '10', average: '20', detectionTime: '2021-01-12'
90 
+        }
91 
+      ],
92 
+      loading: 'false',
93 
+      finished: 'false',
94 
+
95 
+      listQuery: {
96 
+        condition: "",
97 
+        page: 1,
98 
+        limit: 10,
99 
+        total: 10,
100 
+      },
101 
+    }
102 
+  },
103 
+  created () {
104 
+
105 
+  },
106 
+  methods: {
107 
+    onSubmit () {
108 
+      console.log('submit!');
109 
+    },
110 
+    handleSizeChange (val) {
111 
+      console.log(`每页 ${val} 条`);
112 
+    },
113 
+     handleHistory () {
114 
+      this.$router.push({ name: 'HistoryTendency' })
115 
+    },
116 
+    handleDetail() {
117 
+      this.$router.push({ name: 'GrainDetail' })
118 
+    },
119 
+    sizeChange (v) {
120 
+      this.listQuery.limit = v
121 
+      console.log(`每页 ${v} 条`);
122 
+      this.list.splice(v, this.list.length - 1)
123 
+    },
124 
+    pageChange (v) {
125 
+      this.listQuery.page = v
126 
+      console.log(`当前页: ${v}`);
127 
+    },
128 
+  }
129 
+}
130 
+</script>
131 
+<style lang='scss' scoped>
132 
+.boxShadow {
133 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
134 
+}
135 
+::v-deep .van-notice-bar {
136 
+  font-weight: 600;
137 
+  padding: 0;
138 
+  cursor: pointer;
139 
+}
140 
+.header {
141 
+  background-color: #fff;
142 
+  border-radius: 15px;
143 
+  padding: 15px;
144 
+  // height: 160px;
145 
+  .header-title {
146 
+    font-size: 14px;
147 
+    font-weight: 600;
148 
+    padding-left: 10px;
149 
+    border-left: 4px solid #5283e7;
150 
+  }
151 
+  .el-form {
152 
+    .el-form-item {
153 
+      margin-bottom: 0;
154 
+    }
155 
+    .fr {
156 
+      float: right;
157 
+    }
158 
+  }
159 
+}
160 
+.list {
161 
+  background-color: #fff;
162 
+  border-radius: 15px;
163 
+  margin-top: 10px;
164 
+  .list-main {
165 
+    padding-left: 15px;
166 
+    margin-top: 15px;
167 
+    display: flex;
168 
+    justify-content: space-between;
169 
+    .list-title {
170 
+      font-size: 15px;
171 
+      font-weight: 700;
172 
+      padding: 10px 0;
173 
+    }
174 
+    .list-content {
175 
+      width:90%;
176 
+      .content-1 {
177 
+        font-size: 14px;
178 
+        display: flex;
179 
+        justify-content: space-between;
180 
+        margin-top: 10px;
181 
+        // padding: 5px 0;
182 
+        strong {
183 
+          color: #d24848;
184 
+        }
185 
+        .text-colorc {
186 
+          color: #b8b8b8;
187 
+        }
188 
+      }
189 
+      .content-1:nth-last-child(1) {
190 
+        padding-bottom: 10px;
191 
+      }
192 
+    }
193 
+    .list-btns {
194 
+      width: 10%;
195 
+      background-color: #edf2fd;
196 
+      display: flex;
197 
+      justify-content: space-evenly;
198 
+      align-items: center;
199 
+    }
200 
+  }
201 
+}
202 
+</style>

+ 314 - 0
src/views/grainDetection/grainTemperatureDetection/detail.vue
View File 

@@ -0,0 +1,314 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="info">
4 
+      <div class="title">检测信息</div>
5 
+      <el-form ref="form" :model="form" label-width="80px">
6 
+        <el-row :gutter="20">
7 
+          <el-col :span="11">
8 
+            <el-form-item label="仓房名称">
9 
+              <el-input v-model="form.name"></el-input>
10 
+            </el-form-item>
11 
+            <el-form-item label="粮食品种">
12 
+              <el-input v-model="form.variety"></el-input>
13 
+            </el-form-item>
14 
+            <el-form-item label="粮食等级">
15 
+              <el-input v-model="form.grade"></el-input>
16 
+            </el-form-item>
17 
+          </el-col>
18 
+          <el-col :span="11" :offset="2">
19 
+            <el-form-item label="仓房类型">
20 
+              <el-input v-model="form.type"></el-input>
21 
+            </el-form-item>
22 
+            <el-form-item label="粮食性质">
23 
+              <el-input v-model="form.property"></el-input>
24 
+            </el-form-item>
25 
+            <el-form-item label="库存数量">
26 
+              <el-input v-model="form.number"></el-input>
27 
+            </el-form-item>
28 
+          </el-col>
29 
+        </el-row>
30 
+      </el-form>
31 
+      <div class="table">
32 
+        <table cellspacing="0" style="width:100%" class="table">
33 
+          <tr>
34 
+            <th class="th" v-for="(item, index) in option.column" :key="index">{{ item.label }}</th>
35 
+          </tr>
36 
+          <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
37 
+            <td v-for="(context, i) in option.column" :key="i">{{ item[context.tableDataprop] }}</td>
38 
+          </tr>
39 
+        </table>
40 
+
41 
+      </div>
42 
+    </div>
43 
+  </div>
44 
+</template>
45 
+
46 
+<script>
47 
+import * as echarts from 'echarts';
48 
+export default {
49 
+  data () {
50 
+    return {
51 
+      form: {
52 
+        name: '1号仓',
53 
+        variety: '60',
54 
+        grade: '30',
55 
+        type: '20122200202',
56 
+        property: '13',
57 
+        number: '30000'
58 
+      },
59 
+      tableData: [
60 
+        {
61 
+          closedAccount: 0,
62 
+          givePrice: 3,
63 
+          noAccount: 0,
64 
+          roomType: "1",
65 
+          totalPrice: 0
66 
+        },
67 
+        {
68 
+          closedAccount: 0,
69 
+          givePrice: 3,
70 
+          noAccount: 0,
71 
+          roomType: "2",
72 
+          totalPrice: 0
73 
+        },
74 
+        {
75 
+          closedAccount: 0,
76 
+          givePrice: 3,
77 
+          noAccount: 0,
78 
+          roomType: "3",
79 
+          totalPrice: 0
80 
+        },
81 
+        {
82 
+          closedAccount: 0,
83 
+          givePrice: 3,
84 
+          noAccount: 0,
85 
+          roomType: "4",
86 
+          totalPrice: 0
87 
+        },
88 
+        {
89 
+          closedAccount: 0,
90 
+          givePrice: 3,
91 
+          noAccount: 0,
92 
+          roomType: "5",
93 
+          totalPrice: 0
94 
+        },
95 
+        {
96 
+          closedAccount: 0,
97 
+          givePrice: 3,
98 
+          noAccount: 0,
99 
+          roomType: "6",
100 
+          totalPrice: 0
101 
+        },
102 
+        {
103 
+          closedAccount: 0,
104 
+          givePrice: 3,
105 
+          noAccount: 0,
106 
+          roomType: "7",
107 
+          totalPrice: 0
108 
+        },
109 
+        {
110 
+          closedAccount: 0,
111 
+          givePrice: 3,
112 
+          noAccount: 0,
113 
+          roomType: "8",
114 
+          totalPrice: 0
115 
+        },
116 
+        {
117 
+          closedAccount: 0,
118 
+          givePrice: 3,
119 
+          noAccount: 0,
120 
+          roomType: "9",
121 
+          totalPrice: 0
122 
+        },
123 
+        {
124 
+          closedAccount: 0,
125 
+          givePrice: 3,
126 
+          noAccount: 0,
127 
+          roomType: "10",
128 
+          totalPrice: 0
129 
+        },
130 
+        {
131 
+          closedAccount: 0,
132 
+          givePrice: 3,
133 
+          noAccount: 0,
134 
+          roomType: "11",
135 
+          totalPrice: 0
136 
+        },
137 
+        {
138 
+          closedAccount: 0,
139 
+          givePrice: 3,
140 
+          noAccount: 0,
141 
+          roomType: "12",
142 
+          totalPrice: 0
143 
+        },
144 
+        {
145 
+          closedAccount: 0,
146 
+          givePrice: 3,
147 
+          noAccount: 0,
148 
+          roomType: "13",
149 
+          totalPrice: 0
150 
+        },
151 
+        {
152 
+          closedAccount: 0,
153 
+          givePrice: 3,
154 
+          noAccount: 0,
155 
+          roomType: "14",
156 
+          totalPrice: 0
157 
+        },
158 
+        {
159 
+          closedAccount: 0,
160 
+          givePrice: 3,
161 
+          noAccount: 0,
162 
+          roomType: "15",
163 
+          totalPrice: 0
164 
+        },
165 
+        {
166 
+          closedAccount: 0,
167 
+          givePrice: 3,
168 
+          noAccount: 0,
169 
+          roomType: "16",
170 
+          totalPrice: 0
171 
+        },
172 
+        {
173 
+          closedAccount: 0,
174 
+          givePrice: 3,
175 
+          noAccount: 0,
176 
+          roomType: "17",
177 
+          totalPrice: 0
178 
+        },
179 
+        {
180 
+          closedAccount: 0,
181 
+          givePrice: 3,
182 
+          noAccount: 0,
183 
+          roomType: "18",
184 
+          totalPrice: 0
185 
+        },
186 
+        {
187 
+          closedAccount: 0,
188 
+          givePrice: 3,
189 
+          noAccount: 0,
190 
+          roomType: "19",
191 
+          totalPrice: 0
192 
+        },
193 
+        {
194 
+          closedAccount: 0,
195 
+          givePrice: 3,
196 
+          noAccount: 0,
197 
+          roomType: "20",
198 
+          totalPrice: 0
199 
+        },
200 
+        {
201 
+          closedAccount: 0,
202 
+          givePrice: 3,
203 
+          noAccount: 0,
204 
+          roomType: "21",
205 
+          totalPrice: 0
206 
+        },
207 
+        {
208 
+          closedAccount: 0,
209 
+          givePrice: 3,
210 
+          noAccount: 0,
211 
+          roomType: "22",
212 
+          totalPrice: 0
213 
+        },
214 
+      ],
215 
+      option: {
216 
+        column: [
217 
+          {
218 
+            label: '杆号',
219 
+            tableDataprop: 'roomType',
220 
+
221 
+          },
222 
+          {
223 
+            label: '1',
224 
+            tableDataprop: 'closedAccount'
225 
+          },
226 
+          {
227 
+            label: '2',
228 
+            tableDataprop: 'noAccount'
229 
+          },
230 
+          {
231 
+            label: '3',
232 
+            tableDataprop: 'givePrice'
233 
+          },
234 
+          {
235 
+            label: '4',
236 
+            tableDataprop: 'totalPrice'
237 
+          },
238 
+          {
239 
+            label: '杆号',
240 
+            tableDataprop: 'roomType',
241 
+
242 
+          },
243 
+          {
244 
+            label: '1',
245 
+            tableDataprop: 'closedAccount'
246 
+          },
247 
+          {
248 
+            label: '2',
249 
+            tableDataprop: 'noAccount'
250 
+          },
251 
+          {
252 
+            label: '3',
253 
+            tableDataprop: 'givePrice'
254 
+          },
255 
+          {
256 
+            label: '4',
257 
+            tableDataprop: 'totalPrice'
258 
+          },
259 
+        ]
260 
+      },
261 
+    }
262 
+  },
263 
+  created () {
264 
+    // console.log(this.$route.query, 'query')
265 
+  },
266 
+  mounted () {
267 
+
268 
+  },
269 
+  methods: {
270 
+    tableDataAdd() {
271 
+      // this.tableData.
272 
+    }
273 
+  }
274 
+}
275 
+</script>
276 
+<style lang='scss' scoped>
277 
+.info {
278 
+  background-color: #fff;
279 
+  border-radius: 15px;
280 
+  padding: 10px 15px;
281 
+  .title {
282 
+    border-left: 4px solid #4a7de6;
283 
+    padding-left: 10px;
284 
+  }
285 
+  .el-form {
286 
+    margin-top: 15px;
287 
+  }
288 
+}
289 
+.table {
290 
+  border-radius: .185185rem;
291 
+
292 
+}
293 
+.th {
294 
+  height: 1.074074rem;
295 
+  line-height: 1.074074rem;
296 
+  background-color: #1d9eef;
297 
+  text-align: center;
298 
+  // border: 1px solid #000;
299 
+}
300 
+.list-tr {
301 
+  height: 1.074074rem;
302 
+  line-height: 1.074074rem;
303 
+  border: 1px solid #000;
304 
+}
305 
+.list-tr:nth-child(2n) {
306 
+  /*background-color: #33333b;*/
307 
+}
308 
+td {
309 
+  text-align: center;
310 
+}
311 
+::v-deep .el-input__inner {
312 
+  text-align: center;
313 
+}
314 
+</style>

+ 172 - 0
src/views/grainDetection/grainTemperatureDetection/history.vue
View File 

@@ -0,0 +1,172 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div id="tendencyChart" class="tendencyChart boxShadow"></div>
4 
+    <div class="warnning">
5 
+      <div class="warnning-item">
6 
+        <div class="title"><span>2022-02-15</span></div>
7 
+        <div class="list">
8 
+          <div class="list-item">
9 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
10 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
11 
+          </div>
12 
+          <div class="list-item">
13 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
14 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
15 
+          </div>
16 
+          <div class="list-item">
17 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
18 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
19 
+          </div>
20 
+        </div>
21 
+      </div>
22 
+      <div class="warnning-item">
23 
+        <div class="title"><span>2022-02-15</span></div>
24 
+        <div class="list">
25 
+          <div class="list-item">
26 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
27 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
28 
+          </div>
29 
+          <div class="list-item">
30 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
31 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
32 
+          </div>
33 
+          <div class="list-item">
34 
+            <div class="colorRed">1号仓粮温检测存在异常</div>
35 
+            <div>异常温度: <strong class="colorRed">最高温30℃</strong> </div>
36 
+          </div>
37 
+        </div>
38 
+      </div>
39 
+    </div>
40 
+  </div>
41 
+</template>
42 
+
43 
+<script>
44 
+import * as echarts from 'echarts';
45 
+export default {
46 
+  data () {
47 
+    return {
48 
+
49 
+    }
50 
+  },
51 
+  created () {
52 
+    // console.log(this.$route.query, 'query')
53 
+  },
54 
+  mounted () {
55 
+    this.initChart()
56 
+  },
57 
+  methods: {
58 
+    initChart () {
59 
+      var chartDom = document.getElementById('tendencyChart');
60 
+      var myChart = echarts.init(chartDom);
61 
+      var option;
62 
+
63 
+      option = {
64 
+        color: ['#ff6161', '#09e96f', '#28b6ff'],
65 
+        tooltip: {
66 
+          trigger: 'axis'
67 
+        },
68 
+        legend: {
69 
+          right: "2%",
70 
+          top: "20%",
71 
+          itemGap: 18,
72 
+          icon: 'path://M904 476H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z',
73 
+          orient: "vertical",
74 
+          data: ['最高温', '最低温', '平均温']
75 
+        },
76 
+        grid: {
77 
+          left: '3%',
78 
+          right: '14%',
79 
+          bottom: '3%',
80 
+          containLabel: true
81 
+        },
82 
+        toolbox: {
83 
+          feature: {
84 
+            saveAsImage: {}
85 
+          }
86 
+        },
87 
+        xAxis: {
88 
+          type: 'category',
89 
+          boundaryGap: false,
90 
+          data: ['2-01', '2-02', '2-03', '2-04', '2-05', '2-06', '2-07', '2-08', '2-09', '2-10', '2-11', '2-12', '2-13', '2-14', '2-15']
91 
+        },
92 
+        yAxis: {
93 
+          type: 'value'
94 
+        },
95 
+        series: [
96 
+          {
97 
+            name: '最高温',
98 
+            type: 'line',
99 
+            // stack: 'Total',
100 
+            smooth: true,
101 
+            data: [12, 13, 10, 13, 9, 23, 21, 12, 13, 10, 13, 9, 23, 21, 29]
102 
+          },
103 
+          {
104 
+            name: '最低温',
105 
+            type: 'line',
106 
+            // stack: 'Total',
107 
+            smooth: true,
108 
+            data: [5, 18, 19, 23, 29, 33, 31, 14, 16, 20, 18, 16, 26, 23, 15]
109 
+          },
110 
+          {
111 
+            name: '平均温',
112 
+            type: 'line',
113 
+            // stack: 'Total',
114 
+            smooth: true,
115 
+            data: [15, 23, 20, 15, 19, 33, 21, 15, 13, 24, 22, 10, 14, 24, 22]
116 
+          }
117 
+        ]
118 
+      };
119 
+
120 
+      option && myChart.setOption(option);
121 
+      // 屏幕宽度变化，图表自适应变化
122 
+      window.addEventListener('resize', () => {
123 
+        myChart.resize()
124 
+      })
125 
+    }
126 
+  }
127 
+}
128 
+</script>
129 
+<style lang='scss' scoped>
130 
+.tendencyChart {
131 
+  width: 100%;
132 
+  height: 370px;
133 
+  border-radius: 15px;
134 
+  background-color: #fff;
135 
+}
136 
+.warnning  {
137 
+  margin-top: 10px;
138 
+  .warnning-item {
139 
+    background-color: #fff;
140 
+    border-radius: 15px;
141 
+    padding: 10px 15px;
142 
+    .title {
143 
+      font-size: 16px;
144 
+      font-weight: 600;
145 
+
146 
+    }
147 
+    .list {
148 
+      padding-top: 10px;
149 
+      .list-item {
150 
+        font-size: 14px;
151 
+
152 
+        padding-bottom: 8px;
153 
+        display: flex;
154 
+        justify-content: flex-start;
155 
+        .colorRed {
156 
+          color: #d45353;
157 
+          font-weight: bolder;
158 
+        }
159 
+        div {
160 
+          width: 25%;
161 
+        }
162 
+      }
163 
+       .list-item:nth-last-child(1) {
164 
+        padding-bottom: 0;
165 
+       }
166 
+    }
167 
+  }
168 
+  .warnning-item:nth-child(n-1) {
169 
+    margin-top: 10px;
170 
+  }
171 
+}
172 
+</style>

+ 233 - 0
src/views/grainDetection/grainTemperatureDetection/index.vue
View File 

@@ -0,0 +1,233 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="header boxShadow">
4 
+      <div class="header-title">粮温检测</div>
5 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o" @click="handleAbnormal">
6 
+        今日检测共有10个仓房粮温异常！
7 
+      </van-notice-bar>
8 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
9 
+
10 
+        <el-form-item label="仓房名称">
11 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
12 
+            <el-option label="区域一" value="shanghai"></el-option>
13 
+            <el-option label="区域二" value="beijing"></el-option>
14 
+          </el-select>
15 
+        </el-form-item>
16 
+        <el-form-item label="检测日期">
17 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
18 
+          </el-date-picker>
19 
+        </el-form-item>
20 
+        <el-form-item>
21 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
22 
+          <el-button type="primary" @click="onSubmit">粮情检测</el-button>
23 
+        </el-form-item>
24 
+      </el-form>
25 
+    </div>
26 
+    <van-list>
27 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
28 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
29 
+        <div class="list-main">
30 
+
31 
+          <div class="list-content">
32 
+            <div class="list-title">{{ item.title}}</div>
33 
+            <van-row class="content-1">
34 
+              <van-col span="6">粮食品种:<span class="text-colorc">{{item.varieties}}</span></van-col>
35 
+              <van-col span="6">粮食性质:<span class="text-colorc">{{item.property}}</span></van-col>
36 
+              <van-col span="6">仓内温度: <span class="text-colorc">{{item.temperature}} ℃</span></van-col>
37 
+              <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col>
38 
+            </van-row>
39 
+            <van-row class="content-1">
40 
+              <van-col span="6">最高温:<span>{{item.max}} ℃</span></van-col>
41 
+              <van-col span="6">最低温:<span>{{item.lowest}} ℃</span></van-col>
42 
+              <van-col span="6">平均温: <span>{{item.average}} ℃</span></van-col>
43 
+              <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col>
44 
+            </van-row>
45 
+          </div>
46 
+          <div class="list-btns">
47 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
48 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
49 
+            <el-button type="primary" @click="handleHistory">历史温度趋势</el-button>
50 
+          </div>
51 
+        </div>
52 
+
53 
+      </div>
54 
+    </van-list>
55 
+    <div class="pagination-container">
56 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
57 
+    </div>
58 
+  </div>
59 
+</template>
60 
+
61 
+<script>
62 
+import { getList } from '@/api/table'
63 
+
64 
+export default {
65 
+  filters: {
66 
+
67 
+  },
68 
+  data () {
69 
+    return {
70 
+      formInline: {
71 
+        barnName: '',
72 
+        testDate: ''
73 
+      },
74 
+      list: [
75 
+        {
76 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
77 
+            : '10', average: '20', detectionTime: '2021-01-12'
78 
+        },
79 
+        {
80 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
81 
+            : '10', average: '20', detectionTime: '2021-01-12'
82 
+        },
83 
+        {
84 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
85 
+            : '10', average: '20', detectionTime: '2021-01-12'
86 
+        },
87 
+        {
88 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
89 
+            : '10', average: '20', detectionTime: '2021-01-12'
90 
+        },
91 
+        {
92 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
93 
+            : '10', average: '20', detectionTime: '2021-01-12'
94 
+        },
95 
+        {
96 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
97 
+            : '10', average: '20', detectionTime: '2021-01-12'
98 
+        },
99 
+        {
100 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
101 
+            : '10', average: '20', detectionTime: '2021-01-12'
102 
+        },
103 
+        {
104 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
105 
+            : '10', average: '20', detectionTime: '2021-01-12'
106 
+        },
107 
+        {
108 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
109 
+            : '10', average: '20', detectionTime: '2021-01-12'
110 
+        },
111 
+        {
112 
+          title: '1号仓房', varieties: '小麦', property: '中央储备粮', temperature: '22', isAbnormal: '是', max: '29', lowest
113 
+            : '10', average: '20', detectionTime: '2021-01-12'
114 
+        },
115 
+      ],
116 
+      loading: 'false',
117 
+      finished: 'false',
118 
+
119 
+      listQuery: {
120 
+        condition: "",
121 
+        page: 1,
122 
+        limit: 10,
123 
+        total: 10,
124 
+      },
125 
+    }
126 
+  },
127 
+  created () {
128 
+
129 
+  },
130 
+  methods: {
131 
+    onSubmit () {
132 
+      console.log('submit!');
133 
+    },
134 
+    handleSizeChange (val) {
135 
+      console.log(`每页 ${val} 条`);
136 
+    },
137 
+    handleHistory () {
138 
+      this.$router.push({ name: 'HistoryTendency' })
139 
+    },
140 
+    handleDetail () {
141 
+      this.$router.push({ name: 'GrainDetail' })
142 
+    },
143 
+    handleAbnormal () {
144 
+      this.$router.push({ name: 'AbnormalList' })
145 
+    },
146 
+    sizeChange (v) {
147 
+      this.listQuery.limit = v
148 
+      console.log(`每页 ${v} 条`);
149 
+      this.list.splice(v, this.list.length - 1)
150 
+    },
151 
+    pageChange (v) {
152 
+      this.listQuery.page = v
153 
+      console.log(`当前页: ${v}`);
154 
+    },
155 
+  }
156 
+}
157 
+</script>
158 
+<style lang='scss' scoped>
159 
+.boxShadow {
160 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
161 
+}
162 
+::v-deep .van-notice-bar {
163 
+  font-weight: 600;
164 
+  padding: 0;
165 
+  cursor: pointer;
166 
+}
167 
+.header {
168 
+  background-color: #fff;
169 
+  border-radius: 15px;
170 
+  padding: 15px;
171 
+  height: 160px;
172 
+  display: flex;
173 
+  flex-direction: column;
174 
+  justify-content: space-between;
175 
+  .header-title {
176 
+    font-size: 14px;
177 
+    font-weight: 600;
178 
+    padding-left: 10px;
179 
+    border-left: 4px solid #5283e7;
180 
+  }
181 
+
182 
+  .el-form {
183 
+    .fr {
184 
+      float: right;
185 
+    }
186 
+    .el-form-item {
187 
+      margin-bottom: 0;
188 
+    }
189 
+  }
190 
+}
191 
+.list {
192 
+  background-color: #fff;
193 
+  border-radius: 15px;
194 
+  margin-top: 10px;
195 
+  .list-main {
196 
+    padding-left: 15px;
197 
+    margin-top: 15px;
198 
+    display: flex;
199 
+    justify-content: space-between;
200 
+    .list-title {
201 
+      font-size: 15px;
202 
+      font-weight: 700;
203 
+      padding: 10px 0;
204 
+    }
205 
+    .list-content {
206 
+      width: 67%;
207 
+      .content-1 {
208 
+        font-size: 14px;
209 
+        display: flex;
210 
+        justify-content: space-between;
211 
+        margin-top: 10px;
212 
+        // padding: 5px 0;
213 
+        strong {
214 
+          color: #d24848;
215 
+        }
216 
+        .text-colorc {
217 
+          color: #b8b8b8;
218 
+        }
219 
+      }
220 
+      .content-1:nth-last-child(1) {
221 
+        padding-bottom: 10px;
222 
+      }
223 
+    }
224 
+    .list-btns {
225 
+      width: 33%;
226 
+      background-color: #edf2fd;
227 
+      display: flex;
228 
+      justify-content: space-evenly;
229 
+      align-items: center;
230 
+    }
231 
+  }
232 
+}
233 
+</style>

+ 184 - 0
src/views/grainDetection/pestDetection/abnormalList.vue
View File 

@@ -0,0 +1,184 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="header boxShadow">
4 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
5 
+        <!-- <el-form-item label="仓房名称">
6 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
7 
+            <el-option label="区域一" value="shanghai"></el-option>
8 
+            <el-option label="区域二" value="beijing"></el-option>
9 
+          </el-select>
10 
+        </el-form-item> -->
11 
+        <el-form-item label="检测日期">
12 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
13 
+          </el-date-picker>
14 
+        </el-form-item>
15 
+        <el-form-item class="fr">
16 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
17 
+          <!-- <el-button type="primary" @click="onSubmit">粮情检测</el-button> -->
18 
+        </el-form-item>
19 
+      </el-form>
20 
+    </div>
21 
+    <van-list>
22 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
23 
+        <div class="list-main">
24 
+          <div class="list-content">
25 
+            <div class="list-title">{{ item.title}}</div>
26 
+            <van-row class="content-1">
27 
+              <van-col span="6">害虫监测单号:<span class="text-colorc">{{item.lhq}}</span></van-col>
28 
+              <van-col span="6">通道号:<span class="text-colorc">{{item.oxygen}}</span></van-col>
29 
+              <van-col span="6">害虫种类: <span class="text-colorc">{{item.co2}} </span></van-col>
30 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
31 
+            </van-row>
32 
+            <van-row class="content-1">
33 
+              <van-col span="6" class="color-red">虫情:<span>{{item.pest}} </span></van-col>
34 
+              <van-col span="6">检测时间:<span class="text-colorc">{{item.collectTime}} </span></van-col>
35 
+              <van-col span="6">采集人:<span class="text-colorc">{{item.gatherer}} </span></van-col>
36 
+              <!-- <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col> -->
37 
+            </van-row>
38 
+          </div>
39 
+          <div class="list-btns">
40 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
41 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
42 
+          </div>
43 
+        </div>
44 
+
45 
+      </div>
46 
+    </van-list>
47 
+    <div class="pagination-container">
48 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
49 
+    </div>
50 
+  </div>
51 
+</template>
52 
+
53 
+<script>
54 
+import { getList } from '@/api/table'
55 
+
56 
+export default {
57 
+  filters: {
58 
+
59 
+  },
60 
+  data () {
61 
+    return {
62 
+      formInline: {
63 
+        barnName: '',
64 
+        testDate: ''
65 
+      },
66 
+      list: [
67 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
68 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
69 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
70 
+        { title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害', pest: '玉米虫', gatherer: '王全德', collectTime: '2021-01-12' },
71 
+
72 
+      ],
73 
+      loading: 'false',
74 
+      finished: 'false',
75 
+
76 
+      listQuery: {
77 
+        condition: "",
78 
+        page: 1,
79 
+        limit: 10,
80 
+        total: 10,
81 
+      },
82 
+    }
83 
+  },
84 
+  created () {
85 
+
86 
+  },
87 
+  methods: {
88 
+    onSubmit () {
89 
+      console.log('submit!');
90 
+    },
91 
+    handleSizeChange (val) {
92 
+      console.log(`每页 ${val} 条`);
93 
+    },
94 
+    handleDetail () {
95 
+      this.$router.push({ name: 'PestDetectionDetail' })
96 
+    },
97 
+    sizeChange (v) {
98 
+      this.listQuery.limit = v
99 
+      console.log(`每页 ${v} 条`);
100 
+      this.list.splice(v, this.list.length - 1)
101 
+    },
102 
+    pageChange (v) {
103 
+      this.listQuery.page = v
104 
+      console.log(`当前页: ${v}`);
105 
+    },
106 
+  }
107 
+}
108 
+</script>
109 
+<style lang='scss' scoped>
110 
+.boxShadow {
111 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
112 
+}
113 
+::v-deep .van-notice-bar {
114 
+  font-weight: 600;
115 
+  padding: 0;
116 
+  cursor: pointer;
117 
+}
118 
+.header {
119 
+  background-color: #fff;
120 
+  border-radius: 15px;
121 
+  padding: 15px;
122 
+  // height: 160px;
123 
+  .header-title {
124 
+    font-size: 14px;
125 
+    font-weight: 600;
126 
+    padding-left: 10px;
127 
+    border-left: 4px solid #5283e7;
128 
+  }
129 
+  .el-form {
130 
+    .el-form-item {
131 
+      margin-bottom: 0;
132 
+    }
133 
+    .fr {
134 
+      float: right;
135 
+    }
136 
+  }
137 
+}
138 
+.list {
139 
+  background-color: #fff;
140 
+  border-radius: 15px;
141 
+  margin-top: 10px;
142 
+  .list-main {
143 
+    padding-left: 15px;
144 
+    margin-top: 15px;
145 
+    display: flex;
146 
+    justify-content: space-between;
147 
+    .list-title {
148 
+      font-size: 15px;
149 
+      font-weight: 700;
150 
+      padding: 10px 0;
151 
+    }
152 
+    .list-content {
153 
+      width: 80%;
154 
+      .content-1 {
155 
+        font-size: 14px;
156 
+        display: flex;
157 
+        justify-content: space-between;
158 
+        margin-top: 10px;
159 
+        // padding: 5px 0;
160 
+        strong {
161 
+          color: #d24848;
162 
+        }
163 
+        .text-colorc {
164 
+          color: #b8b8b8;
165 
+        }
166 
+        .color-red {
167 
+          color: #f12b07;
168 
+          font-weight: 600;
169 
+        }
170 
+      }
171 
+      .content-1:nth-last-child(1) {
172 
+        padding-bottom: 10px;
173 
+      }
174 
+    }
175 
+    .list-btns {
176 
+      width: 20%;
177 
+      background-color: #edf2fd;
178 
+      display: flex;
179 
+      justify-content: space-evenly;
180 
+      align-items: center;
181 
+    }
182 
+  }
183 
+}
184 
+</style>

+ 119 - 0
src/views/grainDetection/pestDetection/detail.vue
View File 

@@ -0,0 +1,119 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="info">
4 
+      <div class="title">检测信息</div>
5 
+      <el-form ref="form" :model="form" label-width="120px" label-position="left">
6 
+        <el-row :gutter="20">
7 
+          <el-col :span="11">
8 
+            <el-form-item label="仓房名称">
9 
+              <el-input v-model="form.name"></el-input>
10 
+            </el-form-item>
11 
+            <el-form-item label="虫害检测方法">
12 
+              <el-input v-model="form.ff"></el-input>
13 
+            </el-form-item>
14 
+            <el-form-item label="密度(头/公斤)">
15 
+              <el-input v-model="form.md"></el-input>
16 
+            </el-form-item>
17 
+            <el-form-item label="害虫抗药性分析">
18 
+              <el-input v-model="form.kyxfx"></el-input>
19 
+            </el-form-item>
20 
+            <el-form-item label="二氧化氮(ppm)">
21 
+              <el-input v-model="form.co2"></el-input>
22 
+            </el-form-item>
23 
+            <el-form-item label="检测时间">
24 
+              <el-input v-model="form.jcsj"></el-input>
25 
+            </el-form-item>
26 
+          </el-col>
27 
+          <el-col :span="11" :offset="2">
28 
+            <el-form-item label="虫害检测单号">
29 
+              <el-input v-model="form.jcdh"></el-input>
30 
+            </el-form-item>
31 
+            <el-form-item label="害虫种类">
32 
+              <el-input v-model="form.kind"></el-input>
33 
+            </el-form-item>
34 
+            <el-form-item label="虫害等级">
35 
+              <el-input v-model="form.chdj"></el-input>
36 
+            </el-form-item>
37 
+            <el-form-item label="氧气">
38 
+              <el-input v-model="form.o2"></el-input>
39 
+            </el-form-item>
40 
+            <el-form-item label="磷化氢(ppm)">
41 
+              <el-input v-model="form.lhq"></el-input>
42 
+            </el-form-item>
43 
+          </el-col>
44 
+        </el-row>
45 
+      </el-form>
46 
+    </div>
47 
+  </div>
48 
+</template>
49 
+
50 
+<script>
51 
+import * as echarts from 'echarts';
52 
+export default {
53 
+  data () {
54 
+    return {
55 
+      form: {
56 
+        name: '1号仓',
57 
+        ff: '自动检测',
58 
+        md: '2.3',
59 
+        kyxfx: '无抗药性',
60 
+        co2: '0.3',
61 
+        jcsj:'2022-01-12',
62 
+        jcdh: '43091199802128911',
63 
+        kind:'玉米虫',
64 
+        chdj:'三级',
65 
+        o2:'60',
66 
+        lhq:'3'
67 
+      },
68 
+    }
69 
+  },
70 
+  created () {
71 
+    // console.log(this.$route.query, 'query')
72 
+  },
73 
+  mounted () {
74 
+
75 
+  },
76 
+  methods: {
77 
+    tableDataAdd() {
78 
+      // this.tableData.
79 
+    }
80 
+  }
81 
+}
82 
+</script>
83 
+<style lang='scss' scoped>
84 
+.info {
85 
+  background-color: #fff;
86 
+  border-radius: 15px;
87 
+  padding: 10px 15px;
88 
+  height: calc(100vh - 110px);
89 
+  .title {
90 
+    border-left: 4px solid #4a7de6;
91 
+    padding-left: 10px;
92 
+  }
93 
+  .el-form {
94 
+    margin-top: 15px;
95 
+  }
96 
+}
97 
+.table {
98 
+  border-radius: .185185rem;
99 
+
100 
+}
101 
+.th {
102 
+  height: 1.074074rem;
103 
+  line-height: 1.074074rem;
104 
+  background-color: #1d9eef;
105 
+  text-align: center;
106 
+  // border: 1px solid #000;
107 
+}
108 
+.list-tr {
109 
+  height: 1.074074rem;
110 
+  line-height: 1.074074rem;
111 
+  border: 1px solid #000;
112 
+}
113 
+td {
114 
+  text-align: center;
115 
+}
116 
+::v-deep .el-input__inner {
117 
+  text-align: center;
118 
+}
119 
+</style>

+ 191 - 0
src/views/grainDetection/pestDetection/index.vue
View File 

@@ -0,0 +1,191 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <router-view />
4 
+    <div class="header boxShadow">
5 
+      <div class="header-title">虫情检测</div>
6 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o" @click="handleAbnormal">
7 
+        今日检测共有10个仓房虫情异常！
8 
+      </van-notice-bar>
9 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
10 
+        <el-form-item label="仓房名称">
11 
+          <el-select v-model="formInline.barnName" placeholder="活动区域" clearable>
12 
+            <el-option label="区域一" value="shanghai"></el-option>
13 
+            <el-option label="区域二" value="beijing"></el-option>
14 
+          </el-select>
15 
+        </el-form-item>
16 
+        <el-form-item label="检测日期">
17 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
18 
+          </el-date-picker>
19 
+        </el-form-item>
20 
+        <el-form-item>
21 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
22 
+          <el-button type="primary" @click="onSubmit">虫情检测</el-button>
23 
+        </el-form-item>
24 
+      </el-form>
25 
+    </div>
26 
+    <van-list>
27 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
28 
+        <div class="list-main">
29 
+          <div class="list-content">
30 
+            <div class="list-title">{{ item.title}}</div>
31 
+            <van-row class="content-1">
32 
+              <van-col span="6" >害虫监测单号:<span class="text-colorc">{{item.lhq}}</span></van-col>
33 
+              <van-col span="6">通道号:<span class="text-colorc">{{item.oxygen}}</span></van-col>
34 
+              <van-col span="6">害虫种类: <span class="text-colorc">{{item.co2}} </span></van-col>
35 
+              <!-- <van-col span="6">是否存在异常:<span><strong>{{item.isAbnormal}}</strong> </span></van-col> -->
36 
+            </van-row>
37 
+            <van-row class="content-1">
38 
+              <van-col span="6">虫情:<span>{{item.pest}} </span></van-col>
39 
+              <van-col span="6">检测时间:<span class="text-colorc">{{item.collectTime}} </span></van-col>
40 
+              <van-col span="6">采集人:<span class="text-colorc">{{item.gatherer}} </span></van-col>
41 
+              <!-- <van-col span="6">检测时间:<span class="text-colorc">{{item.detectionTime}} </span></van-col> -->
42 
+            </van-row>
43 
+          </div>
44 
+          <div class="list-btns">
45 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
46 
+            <el-button type="primary" @click="onSubmit">检测</el-button>
47 
+          </div>
48 
+        </div>
49 
+
50 
+      </div>
51 
+    </van-list>
52 
+    <div class="pagination-container">
53 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
54 
+    </div>
55 
+  </div>
56 
+</template>
57 
+
58 
+<script>
59 
+import { getList } from '@/api/table'
60 
+
61 
+export default {
62 
+  filters: {
63 
+
64 
+  },
65 
+  data () {
66 
+    return {
67 
+      formInline: {
68 
+        barnName: '',
69 
+        testDate: ''
70 
+      },
71 
+      list: [
72 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害',pest:'玉米虫', gatherer: '王全德', collectTime: '2021-01-12'},
73 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害',pest:'玉米虫', gatherer: '王全德', collectTime: '2021-01-12'},
74 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害',pest:'玉米虫', gatherer: '王全德', collectTime: '2021-01-12'},
75 
+        {title: '1号仓房', lhq: '32', oxygen: '4', co2: '虫害',pest:'玉米虫', gatherer: '王全德', collectTime: '2021-01-12'},
76 
+
77 
+      ],
78 
+      loading: 'false',
79 
+      finished: 'false',
80 
+
81 
+      listQuery: {
82 
+        condition: "",
83 
+        page: 1,
84 
+        limit: 10,
85 
+        total: 10,
86 
+      },
87 
+    }
88 
+  },
89 
+  created () {
90 
+
91 
+  },
92 
+  methods: {
93 
+    onSubmit () {
94 
+      console.log('submit!');
95 
+    },
96 
+    handleSizeChange (val) {
97 
+      console.log(`每页 ${val} 条`);
98 
+    },
99 
+     handleHistory () {
100 
+      this.$router.push({ name: 'HistoryTendency' })
101 
+    },
102 
+    handleDetail() {
103 
+      this.$router.push({ name: 'PestDetectionDetail' })
104 
+    },
105 
+    handleAbnormal () {
106 
+      this.$router.push({ name: 'PestAbnormalList' })
107 
+    },
108 
+    sizeChange (v) {
109 
+      this.listQuery.limit = v
110 
+      console.log(`每页 ${v} 条`);
111 
+      this.list.splice(v, this.list.length - 1)
112 
+    },
113 
+    pageChange (v) {
114 
+      this.listQuery.page = v
115 
+      console.log(`当前页: ${v}`);
116 
+    },
117 
+  }
118 
+}
119 
+</script>
120 
+<style lang='scss' scoped>
121 
+.boxShadow {
122 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
123 
+}
124 
+::v-deep .van-notice-bar {
125 
+  font-weight: 600;
126 
+  padding: 0;
127 
+  cursor: pointer;
128 
+}
129 
+.header {
130 
+  background-color: #fff;
131 
+  border-radius: 15px;
132 
+  padding: 15px;
133 
+  height: 160px;
134 
+  display: flex;
135 
+  flex-direction: column;
136 
+  justify-content: space-between;
137 
+  .header-title {
138 
+    font-size: 14px;
139 
+    font-weight: 600;
140 
+    padding-left: 10px;
141 
+    border-left: 4px solid #5283e7;
142 
+  }
143 
+  .el-form {
144 
+    .el-form-item {
145 
+      margin-bottom: 0;
146 
+    }
147 
+  }
148 
+}
149 
+.list {
150 
+  background-color: #fff;
151 
+  border-radius: 15px;
152 
+  margin-top: 10px;
153 
+  .list-main {
154 
+    padding-left: 15px;
155 
+    margin-top: 15px;
156 
+    display: flex;
157 
+    justify-content: space-between;
158 
+    .list-title {
159 
+      font-size: 15px;
160 
+      font-weight: 700;
161 
+      padding: 10px 0;
162 
+    }
163 
+    .list-content {
164 
+      width: 80%;
165 
+      .content-1 {
166 
+        font-size: 14px;
167 
+        display: flex;
168 
+        justify-content: space-between;
169 
+        margin-top: 10px;
170 
+        // padding: 5px 0;
171 
+        strong {
172 
+          color: #d24848;
173 
+        }
174 
+        .text-colorc {
175 
+          color: #b8b8b8;
176 
+        }
177 
+      }
178 
+      .content-1:nth-last-child(1) {
179 
+        padding-bottom: 10px;
180 
+      }
181 
+    }
182 
+    .list-btns {
183 
+      width: 20%;
184 
+      background-color: #edf2fd;
185 
+      display: flex;
186 
+      justify-content: space-evenly;
187 
+      align-items: center;
188 
+    }
189 
+  }
190 
+}
191 
+</style>

+ 115 - 0
src/views/grainDetection/weatherStationData/detail.vue
View File 

@@ -0,0 +1,115 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="info">
4 
+      <div class="title">检测信息</div>
5 
+      <el-form ref="form" :model="form" label-width="120px" label-position="left">
6 
+        <el-row :gutter="20">
7 
+          <el-col :span="11">
8 
+            <el-form-item label="温度">
9 
+              <el-input v-model="form.wd"></el-input>
10 
+            </el-form-item>
11 
+            <el-form-item label="风速">
12 
+              <el-input v-model="form.fs"></el-input>
13 
+            </el-form-item>
14 
+            <el-form-item label="降雨量">
15 
+              <el-input v-model="form.jyl"></el-input>
16 
+            </el-form-item>
17 
+            <el-form-item label="有无雨雪">
18 
+              <el-input v-model="form.ywyx"></el-input>
19 
+            </el-form-item>
20 
+            <el-form-item label="PM2.5">
21 
+              <el-input v-model="form.PM2"></el-input>
22 
+            </el-form-item>
23 
+          </el-col>
24 
+          <el-col :span="11" :offset="2">
25 
+            <el-form-item label="湿度">
26 
+              <el-input v-model="form.sd"></el-input>
27 
+            </el-form-item>
28 
+            <el-form-item label="风向">
29 
+              <el-input v-model="form.fx"></el-input>
30 
+            </el-form-item>
31 
+            <el-form-item label="气压">
32 
+              <el-input v-model="form.qy"></el-input>
33 
+            </el-form-item>
34 
+            <el-form-item label="辐射强度">
35 
+              <el-input v-model="form.fsqd"></el-input>
36 
+            </el-form-item>
37 
+            <el-form-item label="检测时间">
38 
+              <el-input v-model="form.jcsj"></el-input>
39 
+            </el-form-item>
40 
+          </el-col>
41 
+        </el-row>
42 
+      </el-form>
43 
+    </div>
44 
+  </div>
45 
+</template>
46 
+
47 
+<script>
48 
+import * as echarts from 'echarts';
49 
+export default {
50 
+  data () {
51 
+    return {
52 
+      form: {
53 
+        wd: '26',
54 
+        fs: '5',
55 
+        jyl: '60',
56 
+        ywyx: '无',
57 
+        PM2: '20',
58 
+        sd:'22',
59 
+        fx: '西北',
60 
+        qy:'40',
61 
+        fsqd:'4级',
62 
+        jcsj:'2022-10-12'
63 
+      },
64 
+    }
65 
+  },
66 
+  created () {
67 
+    // console.log(this.$route.query, 'query')
68 
+  },
69 
+  mounted () {
70 
+
71 
+  },
72 
+  methods: {
73 
+    tableDataAdd() {
74 
+      // this.tableData.
75 
+    }
76 
+  }
77 
+}
78 
+</script>
79 
+<style lang='scss' scoped>
80 
+.info {
81 
+  background-color: #fff;
82 
+  border-radius: 15px;
83 
+  padding: 10px 15px;
84 
+  height: calc(100vh - 110px);
85 
+  .title {
86 
+    border-left: 4px solid #4a7de6;
87 
+    padding-left: 10px;
88 
+  }
89 
+  .el-form {
90 
+    margin-top: 15px;
91 
+  }
92 
+}
93 
+.table {
94 
+  border-radius: .185185rem;
95 
+
96 
+}
97 
+.th {
98 
+  height: 1.074074rem;
99 
+  line-height: 1.074074rem;
100 
+  background-color: #1d9eef;
101 
+  text-align: center;
102 
+  // border: 1px solid #000;
103 
+}
104 
+.list-tr {
105 
+  height: 1.074074rem;
106 
+  line-height: 1.074074rem;
107 
+  border: 1px solid #000;
108 
+}
109 
+td {
110 
+  text-align: center;
111 
+}
112 
+::v-deep .el-input__inner {
113 
+  text-align: center;
114 
+}
115 
+</style>

+ 195 - 0
src/views/grainDetection/weatherStationData/index.vue
View File 

@@ -0,0 +1,195 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <router-view />
4 
+    <div class="header boxShadow">
5 
+      <div class="header-title">气象站数据</div>
6 
+      <van-notice-bar color="#f12b07" background="#fff" left-icon="info-o" v-if="notice">
7 
+        今日检测共有10个气象站数据异常！
8 
+      </van-notice-bar>
9 
+      <el-form :inline="true" :model="formInline" class="demo-form-inline">
10 
+        <el-form-item label="检测日期">
11 
+          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.testDate" style="width: 100%;" clearable></el-date-picker>
12 
+          </el-date-picker>
13 
+        </el-form-item>
14 
+        <el-form-item class="fr">
15 
+          <el-button type="primary" @click="onSubmit">查询</el-button>
16 
+          <el-button type="primary" @click="onSubmit">气象检测</el-button>
17 
+        </el-form-item>
18 
+      </el-form>
19 
+    </div>
20 
+    <van-list>
21 
+      <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
22 
+      <div class="list boxShadow" v-for="(item,index) in list" :key="index">
23 
+        <div class="list-main">
24 
+
25 
+          <div class="list-content">
26 
+            <div class="list-title">{{ item.title}}</div>
27 
+            <van-row class="content-1">
28 
+              <van-col span="6">温度(℃): <span class="text-colorc">{{item.wd}}</span></van-col>
29 
+              <van-col span="6">湿度(%RH): <span class="text-colorc">{{item.sd}}</span></van-col>
30 
+              <van-col span="6">风速: <span class="text-colorc">{{item.fs}} </span></van-col>
31 
+              <van-col span="6">风向: <span class="text-colorc">{{item.fx}}</span></van-col>
32 
+            </van-row>
33 
+            <van-row class="content-1">
34 
+              <van-col span="6">气压: <span>{{item.qy}} </span></van-col>
35 
+              <van-col span="6">降雨量: <span class="text-colorc">{{item.jyl}} </span></van-col>
36 
+               <van-col span="6">检测时间: <span class="text-colorc">{{item.detectionTime}} </span></van-col>
37 
+               <van-col span="6"></van-col>
38 
+            </van-row>
39 
+          </div>
40 
+          <div class="list-btns">
41 
+            <el-button type="primary" @click="handleDetail">详情</el-button>
42 
+          </div>
43 
+        </div>
44 
+
45 
+      </div>
46 
+    </van-list>
47 
+    <div class="pagination-container">
48 
+      <el-pagination class="right" background :current-page.sync="listQuery.page" :page-size="listQuery.limit" :page-sizes="[5, 10, 20, 30]" :total="listQuery.total" @size-change="sizeChange" @current-change="pageChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
49 
+    </div>
50 
+  </div>
51 
+</template>
52 
+
53 
+<script>
54 
+import { getList } from '@/api/table'
55 
+
56 
+export default {
57 
+  filters: {
58 
+
59 
+  },
60 
+  data () {
61 
+    return {
62 
+      notice:false,
63 
+      formInline: {
64 
+        barnName: '',
65 
+        testDate: ''
66 
+      },
67 
+      list: [
68 
+        {
69 
+          title: '城东气象站', wd: '24', sd: '4', fs: '16', fx: '东',qy: '111',jyl:'123', detectionTime: '2021-01-12'
70 
+        },
71 
+        {
72 
+          title: '城东气象站', wd: '24', sd: '4', fs: '16', fx: '东',qy: '111',jyl:'123', detectionTime: '2021-01-12'
73 
+        },
74 
+        {
75 
+          title: '城东气象站', wd: '24', sd: '4', fs: '16', fx: '东',qy: '111',jyl:'123', detectionTime: '2021-01-12'
76 
+        },
77 
+        {
78 
+          title: '城东气象站', wd: '24', sd: '4', fs: '16', fx: '东',qy: '111',jyl:'123', detectionTime: '2021-01-12'
79 
+        },
80 
+      ],
81 
+      loading: 'false',
82 
+      finished: 'false',
83 
+
84 
+      listQuery: {
85 
+        condition: "",
86 
+        page: 1,
87 
+        limit: 10,
88 
+        total: 10,
89 
+      },
90 
+    }
91 
+  },
92 
+  created () {
93 
+
94 
+  },
95 
+  methods: {
96 
+    onSubmit () {
97 
+      console.log('submit!');
98 
+    },
99 
+    handleSizeChange (val) {
100 
+      console.log(`每页 ${val} 条`);
101 
+    },
102 
+    handleDetail() {
103 
+      this.$router.push({ name: 'WeatherStationDataDetail' })
104 
+    },
105 
+    sizeChange (v) {
106 
+      this.listQuery.limit = v
107 
+      console.log(`每页 ${v} 条`);
108 
+      this.list.splice(v, this.list.length - 1)
109 
+    },
110 
+    pageChange (v) {
111 
+      this.listQuery.page = v
112 
+      console.log(`当前页: ${v}`);
113 
+    },
114 
+  }
115 
+}
116 
+</script>
117 
+<style lang='scss' scoped>
118 
+.boxShadow {
119 
+  box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
120 
+}
121 
+::v-deep .van-notice-bar {
122 
+  font-weight: 600;
123 
+  padding: 0;
124 
+  cursor: pointer;
125 
+}
126 
+.header {
127 
+  background-color: #fff;
128 
+  border-radius: 15px;
129 
+  padding: 15px;
130 
+  // height: 160px;
131 
+  min-height: 100px;
132 
+  display: flex;
133 
+  flex-direction: column;
134 
+  justify-content: space-between;
135 
+  .header-title {
136 
+    font-size: 14px;
137 
+    font-weight: 600;
138 
+    padding-left: 10px;
139 
+    border-left: 4px solid #5283e7;
140 
+  }
141 
+  .van-notice-bar {
142 
+    padding: 10px 0 10px 0;
143 
+  }
144 
+  .el-form {
145 
+    .el-form-item {
146 
+      margin-bottom: 0;
147 
+    }
148 
+    .fr {
149 
+      float: right;
150 
+    }
151 
+  }
152 
+}
153 
+.list {
154 
+  background-color: #fff;
155 
+  border-radius: 15px;
156 
+  margin-top: 10px;
157 
+  .list-main {
158 
+    padding-left: 15px;
159 
+    margin-top: 15px;
160 
+    display: flex;
161 
+    justify-content: space-between;
162 
+    .list-title {
163 
+      font-size: 15px;
164 
+      font-weight: 700;
165 
+      padding: 10px 0;
166 
+    }
167 
+    .list-content {
168 
+      width: 90%;
169 
+      .content-1 {
170 
+        font-size: 14px;
171 
+        display: flex;
172 
+        justify-content: space-between;
173 
+        margin-top: 10px;
174 
+        // padding: 5px 0;
175 
+        strong {
176 
+          color: #d24848;
177 
+        }
178 
+        .text-colorc {
179 
+          color: #b8b8b8;
180 
+        }
181 
+      }
182 
+      .content-1:nth-last-child(1) {
183 
+        padding-bottom: 10px;
184 
+      }
185 
+    }
186 
+    .list-btns {
187 
+      width: 10%;
188 
+      background-color: #edf2fd;
189 
+      display: flex;
190 
+      justify-content: space-evenly;
191 
+      align-items: center;
192 
+    }
193 
+  }
194 
+}
195 
+</style>

+ 1 - 1
src/views/login/index copy.vue
View File 

@@ -175,7 +175,7 @@ export default {
175 175 
         if (valid) {
176 176 
           this.loading = true
177 177 
           this.$store.dispatch('user/login', this.loginForm).then(() => {
178 
-            this.$router.push({ path: this.redirect || '/' })
178 
+            this.$router.push({ path: this.redirect || '/front/dashboard' })
179 179 
             this.loading = false
180 180 
           }).catch(() => {
181 181 
             this.loading = false

+ 1 - 1
src/views/login/index.vue
View File 

@@ -184,7 +184,7 @@ export default {
184 184 
                 type: "success"
185 185 
               })
186 186
187 
-              this.$router.push({ path: this.redirect || '/front/dashboard' })
187 
+              this.$router.push({ path: this.redirect || '/dashboard' })
188 188 
             } else {
189 189 
               this.loading = false
190 190 
             }

+ 26 - 0
src/views/statisticalAnalysis/energyConsumption/index.vue
View File 

@@ -0,0 +1,26 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+      统计分析/图形分析
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+import { getList } from '@/api/table'
9 
+
10 
+export default {
11 
+  filters: {
12 
+
13 
+  },
14 
+  data() {
15 
+    return {
16 
+
17 
+    }
18 
+  },
19 
+  created() {
20 
+
21 
+  },
22 
+  methods: {
23 
+
24 
+  }
25 
+}
26 
+</script>

+ 433 - 0
src/views/statisticalAnalysis/graph/index.vue
View File 

@@ -0,0 +1,433 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <div class="tabs boxShadow">
4 
+      <el-tabs v-model="activeName" @tab-click="handleClick">
5 
+        <el-tab-pane label="设备类型" name="sblx">
6 
+          <div class="tab-content">
7 
+            <div class="tab-content_item">
8 
+              <div class="imgdiv">
9 
+                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
10 
+              </div>
11 
+              <div class="textdiv">
12 
+                <span class="text-total">设备总数(个)</span>
13 
+                <span class="text-number">124,345</span>
14 
+                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
15 
+              </div>
16 
+            </div>
17 
+            <div class="tab-content_item">
18 
+              <div class="imgdiv">
19 
+                <img src="~@/assets/statisticAnalysis/设备种类.png" alt="">
20 
+              </div>
21 
+              <div class="textdiv">
22 
+                <span class="text-total">设备种类(种)</span>
23 
+                <span class="text-number">60</span>
24 
+                <span class="textCompare">同比上周 <i class="triangle-up"></i><strong>10%</strong></span>
25 
+              </div>
26 
+            </div>
27 
+          </div>
28 
+
29 
+        </el-tab-pane>
30 
+        <el-tab-pane label="设备状态" name="sbzt">
31 
+          <div class="tab-content">
32 
+            <div class="tab-content_item">
33 
+              <div class="imgdiv">
34 
+                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
35 
+              </div>
36 
+              <div class="textdiv">
37 
+                <span class="text-total">设备总数(个)</span>
38 
+                <span class="text-number">124,345</span>
39 
+                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
40 
+              </div>
41 
+            </div>
42 
+            <div class="tab-content_item">
43 
+              <div class="imgdiv">
44 
+                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
45 
+              </div>
46 
+              <div class="textdiv">
47 
+                <span class="text-total">设备种类(种)</span>
48 
+                <span class="text-number">60</span>
49 
+                <span class="textCompare">同比上周 <i class="triangle-up"></i><strong>10%</strong></span>
50 
+              </div>
51 
+            </div>
52 
+          </div>
53 
+        </el-tab-pane>
54 
+        <el-tab-pane label="报警统计" name="bjtj">
55 
+          <div class="tab-content">
56 
+            <div class="tab-content_item">
57 
+              <div class="imgdiv">
58 
+                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
59 
+              </div>
60 
+              <div class="textdiv">
61 
+                <span class="text-total">设备总数(个)</span>
62 
+                <span class="text-number">124,345</span>
63 
+                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
64 
+              </div>
65 
+            </div>
66 
+            <div class="tab-content_item">
67 
+              <div class="imgdiv">
68 
+                <img src="~@/assets/statisticAnalysis/设备总数.png" alt="">
69 
+              </div>
70 
+              <div class="textdiv">
71 
+                <span class="text-total">设备总数(个)</span>
72 
+                <span class="text-number">124,345</span>
73 
+                <span class="textCompare">同比上周 <i class="triangle-down"></i><strong>10%</strong></span>
74 
+              </div>
75 
+            </div>
76 
+          </div>
77 
+        </el-tab-pane>
78 
+      </el-tabs>
79 
+    </div>
80 
+    <div class="tab-main" v-if="activeName == 'sblx'">
81 
+      <div class="typeStatistics boxShadow">
82 
+        <div class="itemHeader"><span>设备类型统计</span></div>
83 
+        <div class="type-main">
84 
+          <div class="type-item tf">
85 
+            <div class="type-text">
86 
+              <span class="type-title">通风设备(个)</span>
87 
+              <span><strong>54,332</strong></span>
88 
+            </div>
89 
+          </div>
90 
+          <div class="type-item zm">
91 
+            <div class="type-text">
92 
+              <span class="type-title">照明设备(个)</span>
93 
+              <span><strong>68,123</strong></span>
94 
+            </div>
95 
+          </div>
96 
+          <div class="type-item kw">
97 
+            <div class="type-text">
98 
+              <span class="type-title">控温设备(个)</span>
99 
+              <span><strong>67,985</strong></span>
100 
+            </div>
101 
+          </div>
102 
+          <div class="type-item qt">
103 
+            <div class="type-text">
104 
+              <span class="type-title">其他设备(个)</span>
105 
+              <span><strong>54,332</strong></span>
106 
+            </div>
107 
+          </div>
108 
+        </div>
109 
+      </div>
110 
+      <div class="type-charts">
111 
+        <div class="charts-item boxShadow">
112 
+          <div class="itemHeader"><span>各类型设备数量占比</span></div>
113 
+          <div class="kindsChart">
114 
+            <div id="equipNums" style="width:485px;height:300px"></div>
115 
+          </div>
116 
+        </div>
117 
+        <div class="charts-item boxShadow">
118 
+          <div class="itemHeader"><span>各类型设备报警占比统计</span></div>
119 
+          <div class="kindsChart">
120 
+            <div class="table-box">
121 
+              <van-row class="th-row">
122 
+                <van-col :span="24/dataList.title.length" v-for="warn in dataList.title" :key="warn">
123 
+                  {{warn}}
124 
+                </van-col>
125 
+              </van-row>
126 
+              <van-row class="tb-row" v-for="(wb,index) of dataList.tbData" :key="index" :style="{background:index % 2 === 0 ?'#fff':'#F4F9FE'}">
127 
+                <van-col :span="6" v-for="item in Object.keys(wb)" :key="item">{{wb[item]}}</van-col>
128 
+                <van-col :span="12" class="progress">
129 
+                  <van-progress :percentage="wb.num" stroke-width="18" color="linear-gradient(to right, #2d98ff,#8a2ff4, #e3127e)"/>
130 
+                </van-col>
131 
+              </van-row>
132 
+            </div>
133 
+
134 
+          </div>
135 
+        </div>
136 
+      </div>
137 
+    </div>
138 
+    <div class="tab-main" v-if="activeName == 'sbzt'">123</div>
139 
+    <div class="tab-main" v-if="activeName == 'bjtj'">45432</div>
140 
+    <!-- <div></div> -->
141 
+  </div>
142 
+</template>
143 
+
144 
+<script>
145 
+import { getList } from '@/api/table'
146 
+import * as echarts from 'echarts'
147 
+export default {
148 
+  filters: {
149 
+
150 
+  },
151 
+  data () {
152 
+    return {
153 
+      activeName: 'sblx',
154 
+      // equipNums:'equipNums'+Date.now()+Math.random(),
155 
+      tabsList: ["设备类型", "设备状态", "报警统计", "设备类型", "设备状态", "报警统计"],
156 
+      dataList: {
157 
+        title: ['设备类型', '报警数量', '占比'],
158 
+        tbData: [
159 
+          { typeName: '通风设备', num: 88, },
160 
+          { typeName: '照明设备', num: 25, },
161 
+          { typeName: '控温设备', num: 20, },
162 
+          { typeName: '监控设备', num: 15, },
163 
+          { typeName: '其他', num: 10, }
164 
+        ]
165 
+      },
166 
+      gradientColor: {
167 
+        '0%': '#2d98ff',
168 
+        '100%': '#6149f6',
169 
+      },
170 
+
171 
+    }
172 
+  },
173 
+  created () {
174 
+
175 
+  },
176 
+  mounted () {
177 
+    this.chartsA()
178 
+  },
179 
+  methods: {
180 
+    handleClick (tab, event) {
181 
+      // console.log(tab.$options.propsData.name, event);
182 
+      if (tab.$options.propsData.name == 'sbzt') {
183 
+        this.$nextTick(() => {
184 
+          this.chartsA()
185 
+        })
186 
+      }
187 
+
188 
+    },
189 
+    chartsA () {
190 
+      let chartDom = document.getElementById('equipNums');
191 
+      let myChart = echarts.init(chartDom);
192 
+      let option;
193 
+
194 
+      option = {
195 
+        tooltip: {
196 
+          trigger: 'item'
197 
+        },
198 
+        legend: {
199 
+          bottom: '5%',
200 
+          left: 'center',
201 
+          data: ["通风设备", "照明设备", "控温设备", "监控设备", "其他"]
202 
+        },
203 
+        // grid: {
204 
+        //   // top: "10%",
205 
+        //   bottom: '25%'
206 
+        // },
207 
+        series: [
208 
+          {
209 
+            name: 'Access From',
210 
+            type: 'pie',
211 
+            radius: ['30%', '70%'],
212 
+            // avoidLabelOverlap: true,
213 
+            /* label: {
214 
+              show: false,
215 
+              position: 'center'
216 
+            }, */
217 
+            bottom:'10%',
218 
+            label: {
219 
+              show: true,
220 
+              formatter: function (arg) {
221 
+                // return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
222 
+                return arg.percent + '%'
223 
+              }
224 
+            },
225 
+
226 
+            emphasis: {
227 
+              label: {
228 
+                show: true,
229 
+                fontSize: 40,
230 
+                fontWeight: 'bold'
231 
+              }
232 
+            },
233 
+            labelLine: {
234 
+              show: true
235 
+            },
236 
+            data: [
237 
+              { value: 1048, name: '通风设备' },
238 
+              { value: 735, name: '照明设备' },
239 
+              { value: 580, name: '控温设备' },
240 
+              { value: 484, name: '监控设备' },
241 
+              { value: 300, name: '其他' }
242 
+            ]
243 
+          }
244 
+        ]
245 
+      };
246 
+
247 
+      option && myChart.setOption(option);
248 
+    }
249 
+  }
250 
+}
251 
+</script>
252 
+<style lang="scss" scoped>
253 
+.app-container {
254 
+  width: 100%;
255 
+  height: 100%;
256 
+  // background-color: purple;
257 
+  .tabs {
258 
+    background-color: #ffffff;
259 
+    border-radius: 15px;
260 
+    padding: 10px;
261 
+    .el-tab-pane {
262 
+      display: flex;
263 
+      flex-direction: column;
264 
+      justify-content: space-between;
265 
+    }
266 
+    .tab-content {
267 
+      display: flex;
268 
+      justify-content: flex-start;
269 
+      .tab-content_item {
270 
+        // width: px;
271 
+        display: flex;
272 
+        justify-content: flex-start;
273 
+        .imgdiv {
274 
+          width: 66px;
275 
+          height: 66px;
276 
+          img {
277 
+            width: 66px;
278 
+            height: 66px;
279 
+          }
280 
+        }
281 
+        .textdiv {
282 
+          width: 105px;
283 
+          display: flex;
284 
+          flex-direction: column;
285 
+          justify-content: space-between;
286 
+          padding: 5px 10px;
287 
+          font-size: 12px;
288 
+          .text-total {
289 
+            color: #aaa3a3;
290 
+          }
291 
+          .text-number {
292 
+            font-size: 20px;
293 
+            font-weight: 700;
294 
+          }
295 
+          .textCompare {
296 
+            display: flex;
297 
+            align-items: center;
298 
+            // justify-content: space-between;
299 
+          }
300 
+          .triangle-down {
301 
+            width: 0;
302 
+            height: 0;
303 
+            border-left: 5px solid transparent;
304 
+            border-right: 5px solid transparent;
305 
+            border-top: 8px solid red;
306 
+          }
307 
+          .triangle-up {
308 
+            width: 0;
309 
+            height: 0;
310 
+            border-left: 5px solid transparent;
311 
+            border-right: 5px solid transparent;
312 
+            border-bottom: 8px solid green;
313 
+          }
314 
+        }
315 
+      }
316 
+    }
317 
+  }
318 
+  .tab-main {
319 
+    width: 100%;
320 
+    height: calc(100vh - 246px);
321 
+    // background-color: red;
322 
+    margin-top: 10px;
323 
+    display: flex;
324 
+    flex-direction: column;
325 
+    justify-content: space-between;
326 
+    .itemHeader {
327 
+      border-left: 4px solid #5283e7;
328 
+      color: #000;
329 
+      font-size: 14px;
330 
+      font-weight: 800;
331 
+      padding: 1px 15px;
332 
+      margin-left: 10px;
333 
+      margin-top: 10px;
334 
+    }
335 
+    .typeStatistics {
336 
+      background-color: #fff;
337 
+      border: 1px solid #ccc;
338 
+      border-radius: 15px;
339 
+
340 
+      .type-main {
341 
+        padding: 10px;
342 
+        display: flex;
343 
+        justify-content: space-between;
344 
+        .type-item {
345 
+          width: 220px;
346 
+          height: 180px;
347 
+          display: flex;
348 
+          align-items: center;
349 
+          .type-text {
350 
+            width: 130px;
351 
+            height: 60px;
352 
+            color: #fff;
353 
+            display: flex;
354 
+            flex-direction: column;
355 
+            justify-content: space-between;
356 
+            align-items: center;
357 
+            .type-title {
358 
+              font-size: 13px;
359 
+            }
360 
+            strong {
361 
+              font-size: 25px;
362 
+              font-weight: 700;
363 
+            }
364 
+          }
365 
+        }
366 
+      }
367 
+      .tf {
368 
+        background: url("~@/assets/statisticAnalysis/通风.png") no-repeat;
369 
+      }
370 
+      .zm {
371 
+        background: url("~@/assets/statisticAnalysis/照明.png") no-repeat;
372 
+      }
373 
+      .kw {
374 
+        background: url("~@/assets/statisticAnalysis/控温.png") no-repeat;
375 
+      }
376 
+      .qt {
377 
+        background: url("~@/assets/statisticAnalysis/其他.png") no-repeat;
378 
+      }
379 
+    }
380 
+    .type-charts {
381 
+      // background: purple;
382 
+      overflow: auto;
383 
+      height: 330px;
384 
+      display: flex;
385 
+      justify-content: space-between;
386 
+      .charts-item {
387 
+        width: 485px;
388 
+        width: 49%;
389 
+        // height: 320px;
390 
+        background-color: #fff;
391 
+        border-radius: 15px;
392 
+        .kindsChart {
393 
+          // background: red;
394 
+          width: 100%;
395 
+          height: 300px;
396 
+        }
397 
+      }
398 
+    }
399 
+  }
400 
+  .boxShadow {
401 
+    box-shadow: 5px -5px 10px -4px #efe3e3, -5px 5px 10px -4px #efe3e3;
402 
+  }
403 
+  #equipNums {
404 
+    width: 485px;
405 
+    height: 300px;
406 
+  }
407 
+  .table-box {
408 
+    // margin: 12px 0px;
409 
+    padding: 10px;
410 
+    .th-row {
411 
+      height: 40px;
412 
+      line-height: 40px;
413 
+      background: #e6efff;
414 
+      padding: 0px 12px;
415 
+      font-size: 14px;
416 
+      font-weight: 600;
417 
+    }
418 
+    .tb-row {
419 
+      height: 40px;
420 
+      line-height: 40px;
421 
+      padding: 0px 12px;
422 
+      .van-progress {
423 
+        margin-top: 10px;
424 
+      }
425 
+      /* .progress {
426 
+        display: flex;
427 
+        align-items: center;
428 
+        justify-content: space-between;
429 
+      } */
430 
+    }
431 
+  }
432 
+}
433 
+</style>

+ 26 - 0
src/views/statisticalAnalysis/maintenanceManagement/index.vue
View File 

@@ -0,0 +1,26 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+      统计分析/图形分析
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+import { getList } from '@/api/table'
9 
+
10 
+export default {
11 
+  filters: {
12 
+
13 
+  },
14 
+  data() {
15 
+    return {
16 
+
17 
+    }
18 
+  },
19 
+  created() {
20 
+
21 
+  },
22 
+  methods: {
23 
+
24 
+  }
25 
+}
26 
+</script>

+ 26 - 0
src/views/statisticalAnalysis/warrantyManagement/index.vue
View File 

@@ -0,0 +1,26 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+      统计分析/图形分析
4 
+  </div>
5 
+</template>
6 
+
7 
+<script>
8 
+import { getList } from '@/api/table'
9 
+
10 
+export default {
11 
+  filters: {
12 
+
13 
+  },
14 
+  data() {
15 
+    return {
16 
+
17 
+    }
18 
+  },
19 
+  created() {
20 
+
21 
+  },
22 
+  methods: {
23 
+
24 
+  }
25 
+}
26 
+</script>

+ 3 - 3
vue.config.js
View File 

@@ -24,10 +24,10 @@ module.exports = {
24 24 
    * In most cases please use '/' !!!
25 25 
    * Detail: https://cli.vuejs.org/config/#publicpath
26 26 
    */
27 
-  // publicPath: '/',
28 
-  publicPath: '/front', //测试环境 放开
27 
+  publicPath: '/',
28 
+  // publicPath: '/front', //测试环境 放开
29 29 
   // publicPath: process.env.NODE_ENV === 'production' ? '/front/' : '/',
30 
-  outputDir: 'front',
30 
+  outputDir: 'dist',
31 31 
   assetsDir: 'static',
32 32 
   // lintOnSave: process.env.NODE_ENV === 'development',
33 33 
   lintOnSave:false,