2021-10-27

src/views/Environment/Environment.vue

@@ -1,13 +1,190 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-21 17:51:22
+ * @LastEditTime: 2021-10-27 10:50:16
+ * @LastEditors: Please set LastEditors
+ * @Description: 环境监测
+ * @FilePath: \hyyfScreen\src\views\Environment\Environment.vue
+-->
 <template>
-  <div>环境监测</div>
+  <div class="environment">
+    <div class="env-side">
+      <div class="env-side-item">
+        <pro-board :title="'PH'">
+          <div class="env-side-item-content">
+            <chart-dashboard :id="1" :data="phData"></chart-dashboard>
+          </div>
+        </pro-board>
+      </div>
+      <div class="env-side-item">
+        <pro-board :title="'COD'">
+          <div class="env-side-item-content">
+            <chart-dashboard :id="2" :data="codData"></chart-dashboard>
+          </div>
+        </pro-board>
+      </div>
+    </div>
+    
+    <div class="env-certain">
+      <div class="env-certain-top">
+        <div class="kuang"></div>
+      </div>
+
+      <div class="env-certain-bottom">
+        <div class="env-certain-bottom-item">
+          <pro-board :title="'总磷'">
+            <div class="certain-bottom-item-chart">
+              <chart-dashboard :id="3" :data="totalPData"></chart-dashboard>
+            </div>
+          </pro-board>
+        </div>
+        <div class="env-certain-bottom-item">
+          <pro-board :title="'总氮'">
+            <div class="certain-bottom-item-chart">
+              <chart-dashboard :id="4" :data="totalNData"></chart-dashboard>
+            </div>
+          </pro-board>
+        </div>
+      </div>
+    </div>
+
+    <div class="env-side">
+      <div class="env-side-item item-bgc">
+        <pro-board :title="'流量'">
+          <div class="env-side-item-content">
+            <chart-dashboard :id="5" :data="liuData"></chart-dashboard>
+          </div>
+        </pro-board>
+      </div>
+      <div class="env-side-item item-bgc">
+        <pro-board :title="'氨氮'">
+          <div class="env-side-item-content">
+            <chart-dashboard :id="6" :data="nhData"></chart-dashboard>
+          </div>
+        </pro-board>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import ProBoard from '../Production/board/ProBoard.vue'
+import ChartDashboard from './charts/ChartDashboard.vue'
+
 export default {
-name: "Environment"
+  name: "Environment",
+  components: {
+    ProBoard,
+    ChartDashboard
+  },
+  data() {
+    return {
+      phData: {
+        data: 5.67,
+        splitNumber: 13,
+        max: 13,
+        unit: ''
+      },
+      codData: {
+        data: 61.091,
+        splitNumber: 12,
+        max: 120,
+        unit: 'mg/L'
+      },
+      totalPData: {
+        data: 0.323,
+        splitNumber: 12,
+        max: 1.2,
+        unit: 'mg/L'
+      },
+      totalNData: {
+        data: 31.091,
+        splitNumber: 12,
+        max: 60,
+        unit: 'mg/L'
+      },
+      liuData: {
+        data: 143.26,
+        splitNumber: 12,
+        max: 240,
+        unit: 'T'
+      },
+      nhData: {
+        data: 0.6191,
+        splitNumber: 12,
+        max: 1.2,
+        unit: 'mg/L'
+      }
+    }
+  },
 }
 </script>
 
 <style scoped>
+.environment {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+/* 两边 */
+.env-side {
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+.env-side-item {
+  width: 100%;
+  height: 40%;
+  background-color: rgb(3,16,50);
+}
+.env-side-item-content {
+  width: 80%;
+  height: 78%;
+  padding: 0 10%;
+}
 
+/* 中间 */
+.env-certain {
+  width: 55%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+/* 中间 —— 上面 */
+.env-certain-top {
+  width: 100%;
+  height: 68%;
+  background-color: rgb(3,16,50);
+}
+.kuang {
+  margin: auto;
+  width: 90%;
+  height: 100%;
+  background: url("../../assets/BioSafety/kuang.png") no-repeat;
+  background-size: contain;
+}
+
+/* 中间 —— 下面 */
+.env-certain-bottom {
+  width: 100%;
+  height: 30%;
+  display: flex;
+  justify-content: space-between;
+}
+.env-certain-bottom-item {
+  background-color: rgb(3,16,50);
+  height: 100%;
+  width: 46%;
+}
+.certain-bottom-item-chart {
+  width: 79%;
+  height: 100%;
+  margin: auto;
+}
 </style>

src/views/Production/Production.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-21 17:51:22
- * @LastEditTime: 2021-10-26 18:02:41
+ * @LastEditTime: 2021-10-27 11:05:42
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营页面
  * @FilePath: \hyyfScreen\src\views\Production\Production.vue
@@ -144,14 +144,16 @@
 
       <div class="production-column-item2">
         <pro-board :title="'成本分析'">
-          <div>
+          <div style="height: 100%">
             <el-select size="mini" style="float: right; margin: 10px 5px 0 0;">
               <el-option></el-option>
             </el-select>
-            <!-- 扇形图 -->
-            <chart-cost-pie :data="costPieData"></chart-cost-pie>
-            <!-- 柱状图 -->
-            <chart-cost-line :data="costLineData"></chart-cost-line>
+            <div style="height: 90%;padding-top:30px;">
+              <!-- 扇形图 -->
+              <chart-cost-pie :data="costPieData"></chart-cost-pie>
+              <!-- 柱状图 -->
+              <chart-cost-line :data="costLineData"></chart-cost-line>
+            </div>
           </div>
         </pro-board>
       </div>

src/views/Production/board/ChartAmountLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 10:35:56
- * @LastEditTime: 2021-10-26 11:09:18
+ * @LastEditTime: 2021-10-27 10:56:17
  * @LastEditors: Please set LastEditors
  * @Description: 存栏变动
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountLine.vue
@@ -209,9 +209,9 @@ export default {
 
 <style scoped>
 .chart-inventory-lines {
-  display: inline-block;
+  /* display: inline-block; */
   width: 100%;
-  height: 220px;
+  height: 100%;
 }
 #chartAmountLines {
   width: 100%;

src/views/Production/board/ChartAmountPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:15:22
- * @LastEditTime: 2021-10-26 10:54:54
+ * @LastEditTime: 2021-10-27 10:55:49
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartAmountPie.vue
@@ -100,8 +100,8 @@ export default {
           {
             name: 'Access From',
             type: 'pie',
-            radius: ['45%', '60%'], // 半径
-            center: ['28%', '38%'],
+            radius: ['58%', '73%'], // 半径
+            center: ['28%', '46%'],
             avoidLabelOverlap: false,
             label: {
               show: false,
@@ -157,7 +157,7 @@ export default {
 <style scoped>
 .chart-inventory-pie {
   width: 100%;
-  height: 300px;
+  height: 100%;
 }
 #chartAmountPie {
   width: 100%;

src/views/Production/board/ChartCostLine.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:37
- * @LastEditTime: 2021-10-26 18:05:33
+ * @LastEditTime: 2021-10-27 11:05:10
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析柱状图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostLine.vue
@@ -167,9 +167,8 @@ export default {
 </script>
 <style scoped>
 .cost-histogram {
-  display: inline-block;
   width: 90%;
-  height: 200px;
+  height: 50%;
 }
 #costHistogram {
   width: 100%;

src/views/Production/board/ChartCostPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 17:53:30
- * @LastEditTime: 2021-10-26 18:04:09
+ * @LastEditTime: 2021-10-27 11:05:22
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析扇形图
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartCostPie.vue
@@ -102,9 +102,8 @@ export default {
 </script>
 <style scoped>
 .cost-pie {
-  display: inline-block;
   width: 100%;
-  height: 200px;
+  height: 50%;
 }
 #chartCostPie {
   width: 100%;

src/views/Production/board/ChartSowBar.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 11:02:38
- * @LastEditTime: 2021-10-26 11:09:54
+ * @LastEditTime: 2021-10-27 10:56:56
  * @LastEditors: Please set LastEditors
  * @Description: 母猪分布
  * @FilePath: \hyyfScreen\src\views\Production\board\ChartSowBar.vue
@@ -145,9 +145,9 @@ export default {
 
 <style scoped>
 .chart-inventory-lines {
-  display: inline-block;
+  /* display: inline-block; */
   width: 100%;
-  height: 220px;
+  height: 100%;
 }
 #chartSowBar {
   width: 100%;

src/views/Production/board/ProBoard.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 09:03:16
- * @LastEditTime: 2021-10-26 09:58:30
+ * @LastEditTime: 2021-10-27 09:26:16
  * @LastEditors: Please set LastEditors
  * @Description: 生产经营 - 面板
  * @FilePath: \hyyfScreen\src\views\Production\board\ProBoard.vue
@@ -81,4 +81,8 @@ export default {
   top: 0;
   right: 0;
 }
+.content {
+  width: 100%;
+  height: 90%;
+}
 </style>

src/views/Production/board/WorkItems.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-26 14:46:34
- * @LastEditTime: 2021-10-26 17:32:27
+ * @LastEditTime: 2021-10-27 10:59:55
  * @LastEditors: Please set LastEditors
  * @Description: 工作看板
  * @FilePath: \hyyfScreen\src\views\Production\board\WorkItems.vue
@@ -96,7 +96,7 @@ export default {
 }
 .content {
   padding: 10px 0;
-  height: 90px;
+  height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-around;