2021-12-21

src/views/BioSafety/CarAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-13 17:52:31
- * @LastEditTime: 2021-12-07 09:51:29
+ * @LastEditTime: 2021-12-21 09:59:24
  * @LastEditors: Please set LastEditors
  * @Description: 生物安全 - 车辆管理
  * @FilePath: \hyyfClient\src\views\BioSafety\CarAdmin.vue
@@ -33,10 +33,8 @@
       :height="475"
     >
       <!-- <template v-slot:right>
-        <template v-if="btnSelected === 1">
-          <div>
-            <el-button size="mini">黑名单</el-button>
-          </div>
+        <template>
+        <div>共{{ total }}辆车</div>
         </template>
         <template v-else-if="btnSelected === 2">
           <div>
@@ -160,7 +158,7 @@ export default {
     ChartCarDrying,
   },
   computed: {
-    ...mapState(['ip'])
+    ...mapState(["ip"]),
   },
   data() {
     return {
@@ -310,7 +308,7 @@ export default {
         const result = JSON.parse(res.result);
         this.listData = result.data.pageData;
         this.listData.forEach((item) => {
-          console.log(item)
+          console.log(item);
           item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
         });
       });

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-12-09 13:56:51
+ * @LastEditTime: 2021-12-21 10:26:30
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
@@ -25,6 +25,13 @@
     >
     </query-conditions>
 
+    <!-- 图 -->
+    <board>
+      <div class="charts">
+        <chart-electro :total="total"></chart-electro>
+      </div>
+    </board>
+
     <!-- 表格 -->
     <new-table
       :title="title"
@@ -33,24 +40,19 @@
       :shows="tableShows"
       :height="475"
     >
-      <template v-slot:right>
-        <!-- <template v-if="btnSelected === 1">
-          <div>
-            <el-button size="mini">添加人员</el-button>
-            <el-button size="mini">添加区域</el-button>
-          </div>
+      <!-- <template v-slot:right>
+        <template v-if="btnSelected === 1">
+          <div>共{{ total }}人，其中男 人，女 人</div>
         </template>
         <template v-else-if="btnSelected === 2">
-          <div>
-            <el-button size="mini">黑名单</el-button>
-          </div>
+          <div>共{{ total }}人，其中男 人，女 人</div>
         </template>
         <template v-else>
           <div>
             <el-button size="mini">添加赶猪人员</el-button>
           </div>
-        </template> -->
-      </template>
+        </template>
+      </template> -->
 
       <!-- 人员门禁 -->
       <template v-slot:recordImage="slotProps">
@@ -105,6 +107,8 @@ import HeadBtns from "components/bioSafety/Btns";
 import QueryConditions from "components/bioSafety/QueryConditions";
 import NewTable from "components/newTable/NewTable";
 import TableFooter from "../../components/TableFooter";
+import Board from "components/bioSafety/Board";
+import ChartElectro from "./chart/ChartElectro.vue";
 import { timeDate } from "../../utils/index";
 
 import { formItems, propFormData } from "./personAdmin/queryCondition.config";
@@ -120,9 +124,11 @@ export default {
     QueryConditions,
     NewTable,
     TableFooter,
+    Board,
+    ChartElectro,
   },
   computed: {
-    ...mapState(['ip'])
+    ...mapState(["ip"]),
   },
   data() {
     return {
@@ -212,7 +218,7 @@ export default {
     faceGuard() {
       if (!this.params.time) {
         this.params.time = [
-          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
+          timeDate(new Date().getTime()),
           timeDate(new Date().getTime()),
         ];
       }
@@ -232,7 +238,7 @@ export default {
         this.listData.forEach((item) => {
           item.channelName = item.channelName.split("人脸门禁")[0];
           // item.recordImage = `https://36.26.62.70:447/evo-pic/${item.recordImage}?token=${token}&oss_addr=172.16.3.223:8925`;
-          item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`
+          item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
         });
       });
     },
@@ -240,7 +246,7 @@ export default {
     faceGuardTotal() {
       if (!this.params.time) {
         this.params.time = [
-          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
+          timeDate(new Date().getTime()),
           timeDate(new Date().getTime()),
         ];
       }
@@ -268,7 +274,7 @@ export default {
         if (success) {
           const listData = JSON.parse(result);
           this.listData = listData.data.pageData;
-          console.log(this.listData)
+          console.log(this.listData);
           this.total = listData.data.totalRows;
           this.listData.forEach((item) => {
             item.personBiosignatures[0].path = `${this.ip}/video/picture/get?path=${item.personBiosignatures[0].path}`;
@@ -292,4 +298,12 @@ export default {
   box-sizing: border-box;
   padding: 20px;
 }
+/* 进出统计 */
+.charts {
+  height: 250px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+}
 </style>

src/views/BioSafety/chart/ChartElectro.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :id="'chart-electro-pie-' + id" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "ChartElectro",
+  computed: {
+    ...mapState(["color"]),
+  },
+  props: {
+    id: {
+      type: String,
+      default: () => "0",
+    },
+    total: {
+      type: Number,
+      default: () => 0,
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  watch: {
+    color(newVal) {
+      if (newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    },
+  },
+  methods: {
+    init() {
+      let data = [{ name: "总进出人次", value: this.total }];
+      let formatNumber = function(num) {
+        let reg = /(?=(\B)(\d{3})+$)/g;
+        return num.toString().replace(reg, ",");
+      };
+      let total = data.reduce((a, b) => {
+        return a + b.value * 1;
+      }, 0);
+      let options = {
+        color: [this.color],
+        title: [
+          {
+            text:
+              "{name|" + "总进出人次" + "}\n{val|" + formatNumber(total) + "}",
+            top: "center",
+            left: "center",
+            textStyle: {
+              rich: {
+                name: {
+                  fontSize: 14,
+                  fontWeight: "normal",
+                  color: "#666666",
+                  padding: [10, 0],
+                },
+                val: {
+                  fontSize: 32,
+                  fontWeight: "bold",
+                  color: "#333333",
+                },
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["50%", "50%"],
+            data: data,
+            hoverAnimation: false,
+            itemStyle: {
+              normal: {
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 120,
+                lineStyle: {
+                  color: "#e6e6e6",
+                },
+              },
+            },
+            label: {
+              normal: {
+                show: false,
+                formatter: (params) => {
+                  return (
+                    "{icon|●}{name|" +
+                    params.name +
+                    "}{value|" +
+                    formatNumber(params.value) +
+                    "}"
+                  );
+                },
+                padding: [0, -100, 25, -100],
+                rich: {
+                  icon: {
+                    fontSize: 16,
+                  },
+                  name: {
+                    fontSize: 14,
+                    padding: [0, 10, 0, 4],
+                    color: "#666666",
+                  },
+                  value: {
+                    fontSize: 18,
+                    fontWeight: "bold",
+                    color: "#333333",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      };
+      this.myChart.setOption(options);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(
+      document.getElementById("chart-electro-pie-" + this.id)
+    );
+    this.init();
+  },
+};
+</script>
+
+<style scoped></style>

src/views/BioSafety/personAdmin/queryCondition.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-18 15:19:29
- * @LastEditTime: 2021-11-30 14:04:46
+ * @LastEditTime: 2021-12-21 10:01:09
  * @LastEditors: Please set LastEditors
  * @Description: 筛选条件的 formItems 和 propFormData
  * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
@@ -52,7 +52,7 @@ const formItems2 = [
 
 const propFormData2 = {
   name: '',
-  time: [timeDate(new Date().getTime() - 1000*60*60*24), timeDate(new Date().getTime())]
+  time: [timeDate(new Date().getTime()), timeDate(new Date().getTime())]
 }
 
 const formItems3 = [

src/views/Env/DrinkWater.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="drinkWater">
-    <div class="reply" :style="{color: color}">全场饮水情况</div>
-    <x-form :formItems="formItems" :day="day" @setDay="setDay" @onClickType="onClickType"></x-form>
+    <div class="reply" :style="{ color: color }">全场饮水情况</div>
+    <x-form
+      :formItems="formItems"
+      :day="day"
+      @setDay="setDay"
+      @onClickType="onClickType"
+    ></x-form>
     <div class="echarts" v-if="allWaterCount && allWaterList.length > 0">
       <div class="echarts-l">
         <chart-water-pie :waterCount="allWaterCount"></chart-water-pie>
@@ -10,23 +15,33 @@
         <chart-water :dataValue="allWaterList"></chart-water>
       </div>
     </div>
-    <div  class="echarts" v-else>
+    <div class="echarts" v-else>
       <el-empty description="暂无数据" style="width: 100%;"></el-empty>
     </div>
-    <br/>
-    <div class="reply" :style="{color: color}">饮用水详情</div>
-    <el-skeleton style="width: 100%; height: 150px;" :loading="loading" animated>
+    <br />
+    <div class="reply" :style="{ color: color }">饮用水详情</div>
+    <el-skeleton
+      style="width: 100%; height: 150px;"
+      :loading="loading"
+      animated
+    >
       <div class="carousel">
         <swiper class="swiper" :options="swiperOption">
-          <swiper-slide v-for="(item, i) in list" :key="i" style="padding-top: 10px">
+          <swiper-slide
+            v-for="(item, i) in list"
+            :key="i"
+            style="padding-top: 10px"
+          >
             <div class="box">
-              <p>{{item.room}}</p>
+              <p>{{ item.room }}</p>
               <div class="flex">
                 <div>
                   <i class="icon1"></i>
                 </div>
                 <div>
-                  <span>{{item.water == null ? '设备暂无数据' : item.water + '吨'}}</span>
+                  <span>{{
+                    item.water == null ? "设备暂无数据" : item.water + "吨"
+                  }}</span>
                 </div>
               </div>
             </div>
@@ -37,15 +52,25 @@
         </swiper>
       </div>
     </el-skeleton>
-    <br/>
-    <div class="reply" :style="{color: color}">筛选查询</div>
-    <x-form :formItems="selectItems" :day="day1"  @setDay="setDay1" @setChange="setChange" @onClickType="onClickType1"></x-form>
-    <div class="echarts" v-if=" waterList.length > 0">
+    <br />
+    <div class="reply" :style="{ color: color }">筛选查询</div>
+    <x-form
+      :formItems="selectItems"
+      :day="day1"
+      @setDay="setDay1"
+      @setChange="setChange"
+      @onClickType="onClickType1"
+    ></x-form>
+    <div class="echarts" v-if="waterList.length > 0">
       <div class="echarts-l">
         <chart-water-pie :id="'1'" :waterCount="waterCount"></chart-water-pie>
       </div>
       <div class="echarts-r">
-        <chart-water :id="'1'" :dataValue="waterList" :room="waterRoom"></chart-water>
+        <chart-water
+          :id="'1'"
+          :dataValue="waterList"
+          :room="waterRoom"
+        ></chart-water>
       </div>
     </div>
     <div class="echarts" v-else>
@@ -58,11 +83,18 @@
 import XForm from "@/components/XForm";
 import ChartWaterPie from "@/views/Env/chart/ChartWaterPie";
 import ChartWater from "@/views/dashboard/chart/ChartWater";
-import { swiper, swiperSlide } from 'vue-awesome-swiper';
-import 'swiper/css/swiper.css';
-import { mapState } from 'vuex';
-import {getAllDayWater, getByFloor, getListAllWater, getListWater, getSchool, getUid} from "../../utils/api";
-import {timeDate} from "../../utils";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.css";
+import { mapState } from "vuex";
+import {
+  getAllDayWater,
+  getByFloor,
+  getListAllWater,
+  getListWater,
+  getSchool,
+  getUid,
+} from "../../utils/api";
+import { timeDate } from "../../utils";
 
 export default {
   name: "DrinkWater",
@@ -71,56 +103,56 @@ export default {
     ChartWaterPie,
     ChartWater,
     swiper,
-    swiperSlide
+    swiperSlide,
   },
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   data() {
     return {
       formItems: [
         {
           id: 1,
-          type: 'text',
-          text: '今日',
+          type: "text",
+          text: "今日",
           value: 1,
-          col: 1
+          col: 1,
         },
         {
           id: 2,
-          type: 'text',
-          text: '本周',
+          type: "text",
+          text: "本周",
           value: 2,
-          col: 1
+          col: 1,
         },
         {
           id: 3,
-          type: 'text',
-          text: '本月',
+          type: "text",
+          text: "本月",
           value: 3,
-          col: 1
+          col: 1,
         },
         {
           id: 4,
-          type: 'datepicker',
+          type: "datepicker",
           placeholder: [],
-          field: 'value1',
-          col: 6
+          field: "value1",
+          col: 6,
         },
         {
           id: 6,
-          type: 'button',
-          text: '查询',
+          type: "button",
+          text: "查询",
           col: 2,
-          click: 'search'
+          click: "search",
         },
         {
           id: 5,
-          type: 'button',
-          text: '导出数据',
+          type: "button",
+          text: "导出数据",
           col: 2,
-          click: 'derive'
-        }
+          click: "derive",
+        },
       ],
       day: 1,
       swiperOption: {
@@ -128,79 +160,79 @@ export default {
         spaceBetween: 30,
         autoplay: {
           delay: 2500,
-          disableOnInteraction: false
+          disableOnInteraction: false,
         },
         pagination: {
-          el: '.swiper-pagination',
-          type: 'progressbar'
+          el: ".swiper-pagination",
+          type: "progressbar",
         },
         navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
-        }
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
       },
       selectItems: [
         {
           id: 1,
-          type: 'select',
-          label: '栋舍：',
-          placeholder: '请选择栋舍',
-          field: 'floorId',
+          type: "select",
+          label: "栋舍：",
+          placeholder: "请选择栋舍",
+          field: "floorId",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 2,
-          type: 'select',
-          label: '楼层：',
-          placeholder: '请选择楼层',
-          field: 'uid',
+          type: "select",
+          label: "楼层：",
+          placeholder: "请选择楼层",
+          field: "uid",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 10,
-          type: 'select',
-          label: '单元：',
-          placeholder: '请选择单元',
-          field: 'unitId',
+          type: "select",
+          label: "单元：",
+          placeholder: "请选择单元",
+          field: "unitId",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 3,
-          type: 'text',
-          text: '今日',
+          type: "text",
+          text: "今日",
           value: 1,
-          col: 1
+          col: 1,
         },
         {
           id: 4,
-          type: 'text',
-          text: '本周',
+          type: "text",
+          text: "本周",
           value: 2,
-          col: 1
+          col: 1,
         },
         {
           id: 5,
-          type: 'text',
-          text: '本月',
+          type: "text",
+          text: "本月",
           value: 3,
-          col: 1
+          col: 1,
         },
         {
           id: 6,
-          type: 'datepicker',
+          type: "datepicker",
           placeholder: [],
-          field: 'value1',
-          col: 6
+          field: "value1",
+          col: 6,
         },
         {
           id: 8,
-          type: 'button',
-          text: '查询',
+          type: "button",
+          text: "查询",
           col: 1,
-          click: 'search'
+          click: "search",
         },
         // {
         //   id: 7,
@@ -217,237 +249,237 @@ export default {
       allWaterCount: null,
       waterList: [],
       waterCount: null,
-      waterRoom: '',
+      waterRoom: "",
       loading: true,
-    }
+    };
   },
   methods: {
     init() {
-      getAllDayWater({}).then(res => {
-        if(res.code === 10000) {
+      getAllDayWater({}).then((res) => {
+        if (res.code === 10000) {
           setTimeout(() => {
-            this.list = res.data
-            this.loading = false
-          }, 1000)
+            this.list = res.data;
+            this.loading = false;
+          }, 1000);
         }
-      })
+      });
     },
     initAllWater() {
-      getListAllWater({}).then(res => {
-        if(res.code === 10000) {
+      getListAllWater({}).then((res) => {
+        if (res.code === 10000) {
           let that = this;
           that.allWaterList = res.data.data;
           that.allWaterCount = res.data.countWater;
         }
-      })
+      });
     },
     initWater() {
-      getListWater({}).then(res => {
-        if(res.code === 10000) {
+      getListWater({}).then((res) => {
+        if (res.code === 10000) {
           this.waterList = res.data.data;
           this.waterCount = res.data.countWater;
           this.waterRoom = res.data.room;
         }
-      })
+      });
     },
     getSchool() {
-      getSchool({}).then(res => {
-        if(res.code === 10000) {
-          res.data.forEach(item => {
+      getSchool({}).then((res) => {
+        if (res.code === 10000) {
+          res.data.forEach((item) => {
             item.value = item.id;
             item.label = item.floorName;
-          })
+          });
           this.selectItems[0].options = res.data;
         }
-      })
+      });
     },
     setChange(item) {
-      if(item.type === 'floorId') {
+      if (item.type === "floorId") {
         let params = {
-          floorId: item.data
-        }
-        getByFloor(params).then(res => {
-          res.data.forEach(item => {
+          floorId: item.data,
+        };
+        getByFloor(params).then((res) => {
+          res.data.forEach((item) => {
             item.value = item.uid;
-            item.label = item.alias
-          })
+            item.label = item.alias;
+          });
           this.selectItems[1].options = res.data;
-        })
-      } else if(item.type === 'uid') {
+        });
+      } else if (item.type === "uid") {
         let params = {
-          uid: item.data
-        }
-        getUid(params).then(res => {
-          res.data.forEach(item => {
+          uid: item.data,
+        };
+        getUid(params).then((res) => {
+          res.data.forEach((item) => {
             item.value = item.id;
-            item.label = item.roomName
-          })
-          this.selectItems[2].options = res.data
-        })
+            item.label = item.roomName;
+          });
+          this.selectItems[2].options = res.data;
+        });
       }
     },
     setDay(data) {
       this.day = data.type;
       let params = {
         endDate: timeDate(new Date().getTime()),
-        type: this.day
-      }
-      getListAllWater(params).then(res => {
-        if(res.code === 10000) {
+        type: this.day,
+      };
+      getListAllWater(params).then((res) => {
+        if (res.code === 10000) {
           let that = this;
           that.allWaterList = res.data.data;
           that.allWaterCount = res.data.countWater;
         }
-      })
+      });
     },
     onClickType(data) {
       let params = {};
-      if(data.data.value1) {
+      if (data.data.value1) {
         params = {
           startDate: data.data.value1[0],
           endDate: data.data.value1[1],
-          type: 4
-        }
+          type: 4,
+        };
       } else {
         params = {
           endDate: timeDate(new Date().getTime()),
-          type: this.day
-        }
+          type: this.day,
+        };
       }
-      getListAllWater(params).then(res => {
-        if(res.code === 10000) {
+      getListAllWater(params).then((res) => {
+        if (res.code === 10000) {
           let that = this;
           that.allWaterList = res.data.data;
           that.allWaterCount = res.data.countWater;
         }
-      })
+      });
     },
     setDay1(data) {
       this.day1 = data.type;
       let data1 = data.data;
-      if(data1.unitId) {
-        let end = timeDate(new Date().getTime())
+      if (data1.unitId) {
+        let end = timeDate(new Date().getTime());
         let params = {
           roomId: data1.unitId,
           endDate: end,
-          type: this.day1
-        }
-        getListWater(params).then(res => {
-          if(res.code === 10000) {
+          type: this.day1,
+        };
+        getListWater(params).then((res) => {
+          if (res.code === 10000) {
             this.waterList = res.data.data;
             this.waterCount = res.data.countWater;
             this.waterRoom = res.data.room;
           }
-        })
+        });
       } else {
-        this.$message.error('请选择栋舍楼层单元查询');
+        this.$message.error("请选择栋舍楼层单元查询");
       }
     },
     onClickType1(data) {
-      if(data.type === 'search') {
+      if (data.type === "search") {
         let data1 = data.data;
-        if(data1.unitId) {
+        if (data1.unitId) {
           let params;
-          if(data1.value1) {
+          if (data1.value1) {
             params = {
               roomId: data1.unitId,
               startDate: data1.value1[0],
               endDate: data1.value1[1],
               type: 4,
-            }
+            };
           } else {
-            let end = timeDate(new Date().getTime())
+            let end = timeDate(new Date().getTime());
             params = {
               roomId: data1.unitId,
               endDate: end,
-              type: this.day1
-            }
+              type: this.day1,
+            };
           }
-          getListWater(params).then(res => {
-            if(res.code === 10000) {
+          getListWater(params).then((res) => {
+            if (res.code === 10000) {
               this.waterList = res.data.data;
               this.waterCount = res.data.countWater;
               this.waterRoom = res.data.room;
             }
-          })
+          });
         } else {
-          this.$message.error('请选择栋舍楼层单元查询');
+          this.$message.error("请选择栋舍楼层单元查询");
         }
       }
-    }
+    },
   },
   mounted() {
-    this.initAllWater()
-    this.initWater()
-    this.init()
-    this.getSchool()
-  }
-}
+    this.initAllWater();
+    this.initWater();
+    this.init();
+    this.getSchool();
+  },
+};
 </script>
 
 <style scoped>
-  .drinkWater {
-    width: 100%;
-    height: 100%;
-    padding: 20px 20px 0 20px;
-  }
-  .reply {
-    width: 100%;
-    border: 1px solid #ddd;
-    border-bottom: 0;
-    height: 50px;
-    background-color: #F3F3F3;
-    line-height: 50px;
-    font-size: 18px;
-    box-sizing: border-box;
-    padding-left: 20px;
-  }
-  .echarts {
-    width: 100%;
-    height: 401px;
-    box-sizing: border-box;
-    border: 1px solid #ddd;
-    border-top: 0;
-    display: flex;
-  }
-  .echarts-l {
-    width: 30%;
-    height: 100%;
-  }
-  .echarts-r {
-    width: 70%;
-    height: 100%;
-  }
-  .carousel {
-    width: 100%;
-    height: 150px;
-    border-top: 1px solid #ddd;
-  }
-  .swiper {
-    width: 100%;
-    height: 100%;
-  }
-  .box {
-    width: 100%;
-    height: 100%;
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    padding: 30px 0;
-    text-align: center;
-    cursor: pointer;
-  }
-  .flex {
-    width: 100%;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .icon1 {
-    width: 32px;
-    height: 32px;
-    background: url('../../assets/images/u3077.svg') no-repeat;
-    display: inline-block;
-    background-size: 100% 100%;
-  }
+.drinkWater {
+  width: 100%;
+  height: 100%;
+  padding: 20px 20px 0 20px;
+}
+.reply {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-bottom: 0;
+  height: 50px;
+  background-color: #f3f3f3;
+  line-height: 50px;
+  font-size: 18px;
+  box-sizing: border-box;
+  padding-left: 20px;
+}
+.echarts {
+  width: 100%;
+  height: 401px;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  border-top: 0;
+  display: flex;
+}
+.echarts-l {
+  width: 30%;
+  height: 100%;
+}
+.echarts-r {
+  width: 70%;
+  height: 100%;
+}
+.carousel {
+  width: 100%;
+  height: 150px;
+  border-top: 1px solid #ddd;
+}
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.box {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 30px 0;
+  text-align: center;
+  cursor: pointer;
+}
+.flex {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon1 {
+  width: 32px;
+  height: 32px;
+  background: url("../../assets/images/u3077.svg") no-repeat;
+  display: inline-block;
+  background-size: 100% 100%;
+}
 </style>

src/views/Env/PigHouseEnv.vue

@@ -1,17 +1,27 @@
 <template>
   <div class="pigHouse">
-    <el-skeleton style="width: 100%; height: 200px;" :loading="loading" animated>
+    <el-skeleton
+      style="width: 100%; height: 200px;"
+      :loading="loading"
+      animated
+    >
       <div style="height: 200px">
-        <swiper class="swiper" :options="swiperOption">
-          <swiper-slide v-for="(item, i) in list" :key="i" style="padding-top: 10px">
+        <swiper v-if="list.length > 0" class="swiper" :options="swiperOption">
+          <swiper-slide
+            v-for="(item, i) in list"
+            :key="i"
+            style="padding-top: 10px"
+          >
             <div class="box">
-              <p>{{item.room}}</p>
+              <p>{{ item.room }}</p>
               <div class="flex">
                 <div>
                   <i class="icon1"></i>
                 </div>
                 <div>
-                  <span>{{item.temperature ? item.temperature + '℃' : '设备暂无数据'}}</span>
+                  <span>{{
+                    item.temperature ? item.temperature + "℃" : "设备暂无数据"
+                  }}</span>
                 </div>
               </div>
               <div style="margin-top: 20px" class="flex">
@@ -19,40 +29,60 @@
                   <i class="icon2"></i>
                 </div>
                 <div>
-                  <span>{{item.humidity ? item.humidity + 'RH' : '设备暂无数据'}}</span>
+                  <span>{{
+                    item.humidity ? item.humidity + "RH" : "设备暂无数据"
+                  }}</span>
                 </div>
               </div>
             </div>
-
           </swiper-slide>
           <div class="swiper-pagination" slot="pagination"></div>
           <div class="swiper-button-prev" slot="button-prev"></div>
           <div class="swiper-button-next" slot="button-next"></div>
         </swiper>
+        <el-empty v-else description="暂无数据" style="height: 90%"></el-empty>
       </div>
     </el-skeleton>
-    <br/>
-    <x-form :formItems="formItems" :day="day" @setDay="setDay" @setChange="setChange" @onClickType="onClickType"></x-form>
-    <br/>
+    <br />
+    <x-form
+      :formItems="formItems"
+      :day="day"
+      @setDay="setDay"
+      @setChange="setChange"
+      @onClickType="onClickType"
+    ></x-form>
+    <br />
     <div style="height: 600px">
-      <chart-pig-temp v-if="tempList.list.length > 0" :tempList="tempList"></chart-pig-temp>
+      <chart-pig-temp
+        v-if="tempList.list.length > 0"
+        :tempList="tempList"
+      ></chart-pig-temp>
       <el-empty v-else description="暂无数据"></el-empty>
     </div>
     <div style="height: 600px">
-      <chart-pig-hum v-if="humList.list.length > 0" :humList="humList"></chart-pig-hum>
+      <chart-pig-hum
+        v-if="humList.list.length > 0"
+        :humList="humList"
+      ></chart-pig-hum>
       <el-empty v-else description="暂无数据"></el-empty>
     </div>
   </div>
 </template>
 
 <script>
-import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { swiper, swiperSlide } from "vue-awesome-swiper";
 import XForm from "@/components/XForm";
 import ChartPigTemp from "./chart/ChartPigTemp";
 import ChartPigHum from "./chart/ChartPigHum";
-import 'swiper/css/swiper.css'
-import { getEnv, getSchool, getByFloor, getUid, getByRoom } from "../../utils/api";
-import {timeDate} from "../../utils";
+import "swiper/css/swiper.css";
+import {
+  getEnv,
+  getSchool,
+  getByFloor,
+  getUid,
+  getByRoom,
+} from "../../utils/api";
+import { timeDate } from "../../utils";
 
 export default {
   name: "PigHouseEnv",
@@ -61,7 +91,7 @@ export default {
     swiperSlide,
     XForm,
     ChartPigTemp,
-    ChartPigHum
+    ChartPigHum,
   },
   data() {
     return {
@@ -70,80 +100,80 @@ export default {
         spaceBetween: 30,
         autoplay: {
           delay: 2500,
-          disableOnInteraction: false
+          disableOnInteraction: false,
         },
         pagination: {
-          el: '.swiper-pagination',
-          type: 'progressbar'
+          el: ".swiper-pagination",
+          type: "progressbar",
         },
         navigation: {
-          nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev'
-        }
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
       },
       list: [],
       formItems: [
         {
           id: 1,
-          type: 'select',
-          label: '栋舍：',
-          placeholder: '请选择栋舍',
-          field: 'floorId',
+          type: "select",
+          label: "栋舍：",
+          placeholder: "请选择栋舍",
+          field: "floorId",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 2,
-          type: 'select',
-          label: '楼层：',
-          placeholder: '请选择楼层',
-          field: 'uid',
+          type: "select",
+          label: "楼层：",
+          placeholder: "请选择楼层",
+          field: "uid",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 10,
-          type: 'select',
-          label: '单元：',
-          placeholder: '请选择单元',
-          field: 'unitId',
+          type: "select",
+          label: "单元：",
+          placeholder: "请选择单元",
+          field: "unitId",
           options: [],
-          col: 4
+          col: 4,
         },
         {
           id: 3,
-          type: 'text',
-          text: '今日',
+          type: "text",
+          text: "今日",
           value: 1,
-          col: 1
+          col: 1,
         },
         {
           id: 4,
-          type: 'text',
-          text: '本周',
+          type: "text",
+          text: "本周",
           value: 2,
-          col: 1
+          col: 1,
         },
         {
           id: 5,
-          type: 'text',
-          text: '本月',
+          type: "text",
+          text: "本月",
           value: 3,
-          col: 1
+          col: 1,
         },
         {
           id: 6,
-          type: 'datepicker',
+          type: "datepicker",
           placeholder: [],
-          field: 'value1',
-          col: 6
+          field: "value1",
+          col: 6,
         },
         {
           id: 8,
-          type: 'button',
-          text: '查询',
+          type: "button",
+          text: "查询",
           col: 1,
-          click: 'search'
+          click: "search",
         },
         // {
         //   id: 7,
@@ -156,187 +186,187 @@ export default {
       // 默认选择本周
       day: 2,
       tempList: {
-        name: '',
+        name: "",
         list: [],
       },
       humList: {
-        name: '',
+        name: "",
         list: [],
       },
-      loading: true
-    }
+      loading: true,
+    };
   },
   methods: {
     init() {
-      getEnv({}).then(res => {
-        if(res.code === 10000) {
+      getEnv({}).then((res) => {
+        if (res.code === 10000) {
           setTimeout(() => {
             this.list = res.data;
             this.loading = false;
-          }, 1000)
+          }, 1000);
         }
-      })
+      });
     },
     getSchool() {
-      getSchool({}).then(res => {
-        if(res.code === 10000) {
-          res.data.forEach(item => {
+      getSchool({}).then((res) => {
+        if (res.code === 10000) {
+          res.data.forEach((item) => {
             item.value = item.id;
             item.label = item.floorName;
-          })
+          });
           this.formItems[0].options = res.data;
         }
-      })
+      });
     },
     setChange(item) {
-      if(item.type === 'floorId') {
+      if (item.type === "floorId") {
         let params = {
-          floorId: item.data
-        }
-        getByFloor(params).then(res => {
-          res.data.forEach(item => {
+          floorId: item.data,
+        };
+        getByFloor(params).then((res) => {
+          res.data.forEach((item) => {
             item.value = item.uid;
-            item.label = item.alias
-          })
+            item.label = item.alias;
+          });
           this.formItems[1].options = res.data;
-        })
-      } else if(item.type === 'uid') {
+        });
+      } else if (item.type === "uid") {
         let params = {
-          uid: item.data
-        }
-        getUid(params).then(res => {
-          res.data.forEach(item => {
+          uid: item.data,
+        };
+        getUid(params).then((res) => {
+          res.data.forEach((item) => {
             item.value = item.id;
-            item.label = item.roomName
-          })
-          this.formItems[2].options = res.data
-        })
+            item.label = item.roomName;
+          });
+          this.formItems[2].options = res.data;
+        });
       }
     },
     setDay(data) {
       this.day = data.type;
       let data1 = data.data;
-      if(data1.unitId) {
-        let end = timeDate(new Date().getTime())
+      if (data1.unitId) {
+        let end = timeDate(new Date().getTime());
         let params = {
           roomId: data1.unitId,
           endDate: end,
-          type: this.day
-        }
-        getByRoom(params).then(res => {
-          if(res.code === 10000) {
+          type: this.day,
+        };
+        getByRoom(params).then((res) => {
+          if (res.code === 10000) {
             this.tempList = {
               name: res.data.roomName,
-              list: res.data.semperatures
-            }
+              list: res.data.semperatures,
+            };
             this.humList = {
               name: res.data.roomName,
-              list: res.data.humidities
-            }
+              list: res.data.humidities,
+            };
           }
-        })
+        });
       } else {
-        this.$message.error('请选择栋舍楼层单元查询');
+        this.$message.error("请选择栋舍楼层单元查询");
       }
     },
     onClickType(data) {
-      if(data.type === 'search') {
+      if (data.type === "search") {
         let data1 = data.data;
-        if(data1.unitId) {
+        if (data1.unitId) {
           let params;
-          if(data1.value1) {
+          if (data1.value1) {
             params = {
               roomId: data1.unitId,
               startDate: data1.value1[0],
               endDate: data1.value1[1],
               type: 4,
-            }
+            };
           } else {
-            let end = timeDate(new Date().getTime())
+            let end = timeDate(new Date().getTime());
             params = {
               roomId: data1.unitId,
               endDate: end,
-              type: this.day
-            }
+              type: this.day,
+            };
           }
-          getByRoom(params).then(res => {
-            if(res.code === 10000) {
+          getByRoom(params).then((res) => {
+            if (res.code === 10000) {
               this.tempList = {
                 name: res.data.roomName,
-                list: res.data.semperatures
-              }
+                list: res.data.semperatures,
+              };
               this.humList = {
                 name: res.data.roomName,
-                list: res.data.humidities
-              }
+                list: res.data.humidities,
+              };
             }
-          })
+          });
         } else {
-          this.$message.error('请选择栋舍楼层单元查询');
+          this.$message.error("请选择栋舍楼层单元查询");
         }
       }
     },
     // 默认显示
     getTempAndHum() {
-      getByRoom({}).then(res => {
-        if(res.code === 10000) {
+      getByRoom({}).then((res) => {
+        if (res.code === 10000) {
           this.tempList = {
             name: res.data.roomName,
-            list: res.data.semperatures
-          }
+            list: res.data.semperatures,
+          };
           this.humList = {
             name: res.data.roomName,
-            list: res.data.humidities
-          }
+            list: res.data.humidities,
+          };
         }
-      })
-    }
+      });
+    },
   },
   mounted() {
-    this.init()
-    this.getSchool()
-    this.getTempAndHum()
-  }
-}
+    this.init();
+    this.getSchool();
+    this.getTempAndHum();
+  },
+};
 </script>
 
 <style scoped>
-  .pigHouse {
-    width: 100%;
-    height: 100%;
-    padding: 20px 20px 0 20px;
-  }
-  .swiper {
-    width: 100%;
-    height: 100%;
-  }
-  .box {
-    width: 100%;
-    height: 100%;
-    border: 1px solid #ddd;
-    box-sizing: border-box;
-    padding: 30px 0;
-    text-align: center;
-    cursor: pointer;
-  }
-  .flex {
-    width: 100%;
-    height: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .icon1 {
-    width: 32px;
-    height: 32px;
-    background: url('../../assets/images/u3028.svg') no-repeat;
-    display: inline-block;
-  }
-  .icon2 {
-    width: 32px;
-    height: 32px;
-    background: url('../../assets/images/u3029.svg') no-repeat;
-    background-size: 100% 100%;
-    display: inline-block;
-  }
+.pigHouse {
+  width: 100%;
+  height: 100%;
+  padding: 20px 20px 0 20px;
+}
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+.box {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+  padding: 30px 0;
+  text-align: center;
+  cursor: pointer;
+}
+.flex {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.icon1 {
+  width: 32px;
+  height: 32px;
+  background: url("../../assets/images/u3028.svg") no-repeat;
+  display: inline-block;
+}
+.icon2 {
+  width: 32px;
+  height: 32px;
+  background: url("../../assets/images/u3029.svg") no-repeat;
+  background-size: 100% 100%;
+  display: inline-block;
+}
 </style>

src/views/Env/chart/ChartElecLines.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-08 17:24:29
- * @LastEditTime: 2021-12-07 13:19:19
+ * @LastEditTime: 2021-12-21 10:07:31
  * @LastEditors: Please set LastEditors
  * @Description: 存栏结构 - 存栏变动折线图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\ChartInventoryLines.vue
@@ -113,7 +113,7 @@ export default {
         //],
         series: [
           {
-            name: "用电",
+            name: "重量",
             type: "line",
             smooth: false,
             data: this.data.elecList,

src/views/Env/chart/ChartElectro.vue

@@ -3,61 +3,67 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "ChartElectro",
   computed: {
-    ...mapState(['color'])
+    ...mapState(["color"]),
   },
   props: {
     id: {
       type: String,
-      default: () => '0'
-    }
+      default: () => "0",
+    },
   },
   data() {
     return {
-      myChart: null
-    }
+      myChart: null,
+    };
   },
   watch: {
     color(newVal) {
-      if(newVal) {
+      if (newVal) {
         this.myChart.clear();
-        this.init()
+        this.init();
       }
-    }
+    },
   },
   methods: {
     init() {
-      let data = [{name: '总用电量', value: '123.1'}]
+      let data = [{ name: "总重量", value: "123.1" }];
       let formatNumber = function(num) {
         let reg = /(?=(\B)(\d{3})+$)/g;
-        return num.toString().replace(reg, ',');
-      }
+        return num.toString().replace(reg, ",");
+      };
       let total = data.reduce((a, b) => {
-        return a + b.value * 1
+        return a + b.value * 1;
       }, 0);
       let options = {
         color: [this.color],
         title: [
           {
-            text: '{name|' + '总用电量' + '}\n{val|' + formatNumber(total) + '度' +'}',
-            top: 'center',
-            left: 'center',
+            text:
+              "{name|" +
+              "总重量" +
+              "}\n{val|" +
+              formatNumber(total) +
+              "度" +
+              "}",
+            top: "center",
+            left: "center",
             textStyle: {
               rich: {
                 name: {
                   fontSize: 14,
-                  fontWeight: 'normal',
-                  color: '#666666',
+                  fontWeight: "normal",
+                  color: "#666666",
                   padding: [10, 0],
                 },
                 val: {
                   fontSize: 32,
-                  fontWeight: 'bold',
-                  color: '#333333',
+                  fontWeight: "bold",
+                  color: "#333333",
                 },
               },
             },
@@ -65,65 +71,68 @@ export default {
         ],
         series: [
           {
-            type: 'pie',
-            radius: ['45%', '60%'],
-            center: ['50%', '50%'],
+            type: "pie",
+            radius: ["45%", "60%"],
+            center: ["50%", "50%"],
             data: data,
             hoverAnimation: false,
             itemStyle: {
               normal: {
-                borderColor: '#fff',
-                borderWidth: 2
-              }
+                borderColor: "#fff",
+                borderWidth: 2,
+              },
             },
             labelLine: {
               normal: {
                 length: 20,
                 length2: 120,
                 lineStyle: {
-                  color: '#e6e6e6'
-                }
-              }
+                  color: "#e6e6e6",
+                },
+              },
             },
             label: {
               normal: {
-                formatter: params => {
+                formatter: (params) => {
                   return (
-                      '{icon|●}{name|' + params.name + '}{value|' +
-                      formatNumber(params.value) + '}'
+                    "{icon|●}{name|" +
+                    params.name +
+                    "}{value|" +
+                    formatNumber(params.value) +
+                    "}"
                   );
                 },
-                padding: [0 , -100, 25, -100],
+                padding: [0, -100, 25, -100],
                 rich: {
                   icon: {
-                    fontSize: 16
+                    fontSize: 16,
                   },
                   name: {
                     fontSize: 14,
                     padding: [0, 10, 0, 4],
-                    color: '#666666'
+                    color: "#666666",
                   },
                   value: {
                     fontSize: 18,
-                    fontWeight: 'bold',
-                    color: '#333333'
-                  }
-                }
-              }
+                    fontWeight: "bold",
+                    color: "#333333",
+                  },
+                },
+              },
             },
-          }
-        ]
-      }
-      this.myChart.setOption(options)
-    }
+          },
+        ],
+      };
+      this.myChart.setOption(options);
+    },
   },
   mounted() {
-    this.myChart = this.$echarts.init(document.getElementById('chart-electro-pie-' + this.id));
-    this.init()
-  }
-}
+    this.myChart = this.$echarts.init(
+      document.getElementById("chart-electro-pie-" + this.id)
+    );
+    this.init();
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/views/PdcData/Analysis.vue

@@ -629,7 +629,8 @@ export default {
             res.data["avg_farrow_3"].stockQuantity,
             res.data["break_grice"].stockQuantity,
             res.data["avg_weight"].stockQuantity,
-            res.data["avg_weight"].stockQuantity, // FIXME: 没有数据，随便放一个先
+            // res.data["avg_weight"].stockQuantity, // FIXME: 没有数据，随便放一个先
+            "",
             res.data["nest_times"].stockQuantity,
             res.data["psy"].stockQuantity,
           ];