2021-12-21

src/components/bioSafety/Board.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-12-21 10:15:53
- * @LastEditTime: 2021-12-21 10:24:21
+ * @LastEditTime: 2021-12-21 11:02:10
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\components\bioSafety\Board.vue
@@ -26,7 +26,7 @@
             fill="#bfbfbf"
           ></path>
         </svg>
-        <span>进出统计</span>
+        <span>近7小时进出统计</span>
       </div>
 
       <!--  收起筛选 + 按钮 -->
@@ -68,7 +68,7 @@ export default {
 <style scoped>
 .query-conditions {
   border: 1px solid rgba(228, 228, 228, 1);
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 /* 标题栏 */

src/utils/chenApi.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-11-18 13:40:39
- * @LastEditTime: 2021-12-17 15:57:47
+ * @LastEditTime: 2021-12-21 10:50:09
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \hyyfClient\src\utils\chenApi.js
@@ -88,6 +88,14 @@ export function getPersonFiles(params) {
     data: params
   })
 }
+/** 门禁管理图表 **/
+export function getRecord(data) {
+  return axios({
+    url: '/video/screen/person/count_person_record',
+    method: 'get',
+    params: data
+  })
+}
 
 /** 大门事件 */
 export function getDoorAdmin(params) {

src/views/Alarm/EventRem.vue

@@ -1,10 +1,7 @@
 <template>
   <div class="eventRem">
     <div class="reply" :style="{ color: color }">筛选查询</div>
-    <x-form
-      :formItems="selectItems"
-      @onClickType="onClickType"
-    ></x-form>
+    <x-form :formItems="selectItems" @onClickType="onClickType"></x-form>
     <new-table
       :height="600"
       :title="title"
@@ -12,6 +9,14 @@
       :tableItems="tableItems"
       :shows="tableShows"
     >
+      <template #alarmPicture="scope">
+        <img
+          :src="scope.row.alarmPicture"
+          @click="clickImg(scope.row.alarmPicture)"
+          alt="车辆通行"
+          width="140"
+        />
+      </template>
       <template #handler="scope">
         <el-button type="text" @click="open(scope.row)">视频回看</el-button>
       </template>
@@ -25,10 +30,10 @@
     <el-dialog title="回放视频" :visible.sync="videoVisible" width="50%">
       <div style="width: 100%; height: 600px">
         <iframe
-            v-if="videoVisible"
-            :src="'static/dahua/index.html?' + rtsp"
-            frameborder="0"
-            style="width: 100%; height: 100%"
+          v-if="videoVisible"
+          :src="'static/dahua/index.html?' + rtsp"
+          frameborder="0"
+          style="width: 100%; height: 100%"
         >
         </iframe>
       </div>
@@ -39,6 +44,15 @@
         </el-button>
       </span>
     </el-dialog>
+    <el-dialog title="事件提醒图片" :visible.sync="dialogVisible" width="50%">
+      <img :src="imgUrl" alt="事件提醒图片" width="100%" />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          确 定
+        </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -47,13 +61,13 @@ import { mapState } from "vuex";
 import XForm from "@/components/XForm";
 import NewTable from "@/components/newTable/NewTable";
 import TableFooter from "@/components/TableFooter";
-import {getEventList, getFaceToken} from "../../utils/api";
-import {getCarWashVideo} from "../../utils/chenApi";
+import { getEventList, getFaceToken } from "../../utils/api";
+import { getCarWashVideo } from "../../utils/chenApi";
 
 export default {
   name: "EventRem",
   computed: {
-    ...mapState(["color"]),
+    ...mapState(["color", "ip"]),
   },
   components: {
     XForm,
@@ -108,10 +122,10 @@ export default {
           slotName: "alarmPosition",
         },
         {
-          prop: "alarmTypeName",
-          label: "内容",
+          prop: "alarmPicture",
+          label: "图片",
           minWidth: "100",
-          slotName: "alarmTypeName",
+          slotName: "alarmPicture",
         },
         {
           label: "操作",
@@ -126,10 +140,12 @@ export default {
       total: 0,
       pageNum: 1,
       pageSize: 20,
-      alarmStartDateString: '',
-      alarmEndDateString: '',
-      rtsp: '',
+      alarmStartDateString: "",
+      alarmEndDateString: "",
+      rtsp: "",
       videoVisible: false,
+      dialogVisible: false,
+      imgUrl: "", // 点击图片后放大的图片路径
     };
   },
   methods: {
@@ -145,34 +161,39 @@ export default {
     },
     init() {
       let params = {
-        alarmStartDateString: this.alarmStartDateString ? this.alarmStartDateString + ' 00:00:00' : '',
-        alarmEndDateString: this.alarmEndDateString ? this.alarmEndDateString + ' 23:59:59' : '',
+        alarmStartDateString: this.alarmStartDateString
+          ? this.alarmStartDateString + " 00:00:00"
+          : "",
+        alarmEndDateString: this.alarmEndDateString
+          ? this.alarmEndDateString + " 23:59:59"
+          : "",
         pageNum: this.pageNum,
-        pageSize: this.pageSize
-      }
-      getEventList(params).then(async res => {
-        if(res.code === 0) {
+        pageSize: this.pageSize,
+      };
+      getEventList(params).then(async (res) => {
+        if (res.code === 0) {
           const result = JSON.parse(res.data.result);
           this.list = result.data.pageData;
+          console.log(this.list);
           this.total = parseInt(res.total);
           // const { token } = await getFaceToken();
-          // this.list.forEach((item) => {
-          //   item.alarmPicture = `https://36.26.62.70:447/evo-pic/${item.alarmPicture}?token=${token}&oss_addr=172.16.3.223:8925`;
-          // });
+          this.list.forEach((item) => {
+            item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
+          });
         }
-      })
+      });
     },
     setDay(data) {
       this.day = data.type;
     },
     onClickType(data) {
       console.log(data);
-      if(data.type === 'search') {
-        if(data.data.value1) {
+      if (data.type === "search") {
+        if (data.data.value1) {
           this.alarmStartDateString = data.data.value1[0];
           this.alarmEndDateString = data.data.value1[1];
         }
-        this.init()
+        this.init();
       }
     },
     open(row) {
@@ -188,10 +209,15 @@ export default {
         }
       });
     },
+    // 点击图片放大
+    clickImg(url) {
+      this.dialogVisible = true;
+      this.imgUrl = url;
+    },
   },
   mounted() {
-    this.init()
-  }
+    this.init();
+  },
 };
 </script>
 

src/views/BioSafety/CarAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-13 17:52:31
- * @LastEditTime: 2021-12-21 09:59:24
+ * @LastEditTime: 2021-12-21 13:50:07
  * @LastEditors: Please set LastEditors
  * @Description: 生物安全 - 车辆管理
  * @FilePath: \hyyfClient\src\views\BioSafety\CarAdmin.vue
@@ -271,7 +271,6 @@ export default {
         carNum: this.params.name || undefined,
       };
       getCarPassage(queryParams).then((res) => {
-        console.log("res:", JSON.parse(res.result));
         const result = JSON.parse(res.result);
         this.listData = result.data.pageData;
         this.listData.forEach((item) => {
@@ -290,7 +289,7 @@ export default {
     carWash() {
       if (!this.params.time) {
         this.params.time = [
-          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
+          timeDate(new Date().getTime()),
           timeDate(new Date().getTime()),
         ];
       }
@@ -298,7 +297,7 @@ export default {
         pageNum: this.pageNum,
         pageSize: this.size,
         alarmStartDateString: this.params.time[0] + " 00:00:00",
-        alarmEndDateString: this.params.time[1],
+        alarmEndDateString: this.params.time[1] + " 23:59:59",
         nodeCodeList: ["1002871$1$0$0", "1002872$1$0$0", "1002873$1$0$0"],
         deviceCategory: 1,
         alarmType: 303,
@@ -329,7 +328,7 @@ export default {
     carWashTotal() {
       if (!this.params.time) {
         this.params.time = [
-          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
+          timeDate(new Date().getTime()),
           timeDate(new Date().getTime()),
         ];
       }
@@ -350,7 +349,7 @@ export default {
     carDrying() {
       if (!this.params.time) {
         this.params.time = [
-          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
+          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24 * 3),
           timeDate(new Date().getTime()),
         ];
       }

src/views/BioSafety/PersonAdmin.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-09-16 11:27:35
- * @LastEditTime: 2021-12-21 10:26:30
+ * @LastEditTime: 2021-12-21 13:34:38
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \hyyfClient\src\views\BioSafety\PersonAdmin.vue
@@ -16,6 +16,20 @@
     >
     </head-btns>
 
+    <!-- 图 -->
+    <board v-if="btnSelected === 2">
+      <div
+        class="charts"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <chart-electro :total="total"></chart-electro>
+        <cost-histogram v-bind="recordData"></cost-histogram>
+      </div>
+    </board>
+
     <!-- 筛选条件 -->
     <query-conditions
       :formItems="formItems"
@@ -25,13 +39,6 @@
     >
     </query-conditions>
 
-    <!-- 图 -->
-    <board>
-      <div class="charts">
-        <chart-electro :total="total"></chart-electro>
-      </div>
-    </board>
-
     <!-- 表格 -->
     <new-table
       :title="title"
@@ -109,12 +116,17 @@ import NewTable from "components/newTable/NewTable";
 import TableFooter from "../../components/TableFooter";
 import Board from "components/bioSafety/Board";
 import ChartElectro from "./chart/ChartElectro.vue";
+import CostHistogram from "./chart/CostHistogram.vue";
 import { timeDate } from "../../utils/index";
 
 import { formItems, propFormData } from "./personAdmin/queryCondition.config";
 import { titles, tableItems, tableShows } from "./personAdmin/table.config";
 import { getFaceGuard } from "../../utils/api";
-import { getFaceGuardTotal, getPersonFiles } from "../../utils/chenApi";
+import {
+  getFaceGuardTotal,
+  getPersonFiles,
+  getRecord,
+} from "../../utils/chenApi";
 import { mapState } from "vuex";
 
 export default {
@@ -126,6 +138,7 @@ export default {
     TableFooter,
     Board,
     ChartElectro,
+    CostHistogram,
   },
   computed: {
     ...mapState(["ip"]),
@@ -155,6 +168,8 @@ export default {
       personSex: ["未知", "男", "女"], // 档案管理 - 性别
       dialogVisible: false, // 图片放大，也不知道得多老眼昏花，这么大的图片还要再大
       imgUrl: "", // 点击图片后放大的图片路径
+      recordData: {}, // 进出统计
+      loading: false,
     };
   },
   mounted() {
@@ -214,8 +229,9 @@ export default {
       console.log(params);
       // 获取后端数据
     },
-    // 人脸门禁的查询
+    // 人脸门禁的查询 + 近 7 小时进出统计
     faceGuard() {
+      this.loading = true;
       if (!this.params.time) {
         this.params.time = [
           timeDate(new Date().getTime()),
@@ -240,6 +256,20 @@ export default {
           // 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}`;
         });
+        // 近 7 小时进出统计
+        const recordRes = await getRecord({});
+        if (recordRes.code === 0) {
+          const timeList = [];
+          const dataList = [];
+          recordRes.data.forEach((item) => {
+            timeList.push(item.time);
+            dataList.push(item.value);
+          });
+          this.recordData = { timeList, dataList };
+        } else {
+          this.recordData = { timeList: [], dataList: [] };
+        }
+        this.loading = false;
       });
     },
     // 人脸门禁总条数

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

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-18 15:19:29
- * @LastEditTime: 2021-12-06 13:35:36
+ * @LastEditTime: 2021-12-21 13:55:49
  * @LastEditors: Please set LastEditors
  * @Description: 筛选条件的 formItems 和 propFormData
  * @FilePath: \hyyfClient\src\views\BioSafety\personAdmin\queryCondition.config.js
@@ -39,7 +39,7 @@ const formItems2 = [
 
 const propFormData2 = {
   // region: '',
-  time: [timeDate(new Date().getTime() - 1000*60*60*24), timeDate(new Date().getTime())]
+  time: [timeDate(new Date().getTime()), timeDate(new Date().getTime())]
 }
 
 const formItems3 = [
@@ -60,7 +60,7 @@ const formItems3 = [
 
 const propFormData3 = {
   // place: '',
-  time: [timeDate(new Date().getTime() - 1000*60*60*24), timeDate(new Date().getTime())]
+  time: [timeDate(new Date().getTime() - 1000 * 60 * 60 * 24 * 3), timeDate(new Date().getTime())]
 }
 
 export const formItems = [formItems1, formItems2, formItems3]

src/views/BioSafety/chart/ChartElectro.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="'chart-electro-pie-' + id" style="width: 100%; height: 100%"></div>
+  <div :id="'chart-electro-pie-' + id" style="width: 30%; height: 100%"></div>
 </template>
 
 <script>
@@ -71,7 +71,7 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["45%", "60%"],
+            radius: ["55%", "73%"],
             center: ["50%", "50%"],
             data: data,
             hoverAnimation: false,
@@ -123,7 +123,7 @@ export default {
           },
         ],
       };
-      this.myChart.setOption(options);
+      this.myChart.setOption(options, false);
     },
   },
   mounted() {

src/views/BioSafety/chart/CostHistogram.vue

@@ -0,0 +1,131 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-10-12 09:10:42
+ * @LastEditTime: 2021-12-21 13:29:30
+ * @LastEditors: Please set LastEditors
+ * @Description: 成本分析的柱状图
+ * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostHistogram.vue
+-->
+<template>
+  <div class="cost-histogram">
+    <div id="costHistogram"></div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+export default {
+  props: {
+    timeList: {
+      type: Array,
+      default: () => [],
+    },
+    dataList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    ...mapState(["color"]),
+  },
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  methods: {
+    init() {
+      let options = {
+        color: [this.color],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "12%",
+          bottom: "6%",
+          containLabel: true,
+        },
+        xAxis: {
+          name: "时间",
+          type: "category",
+          data: this.timeList,
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          // axisPointer: {
+          //   show: false,
+          // },
+          // axisTick: {
+          //   alignWithLabel: true,
+          // },
+        },
+        yAxis: {
+          name: "人次",
+          type: "value",
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+
+        series: [
+          {
+            name: "人次",
+            type: "bar",
+            barWidth: "15%",
+            data: this.dataList,
+            label: {
+              show: true,
+              verticalAlign: "bottom",
+            },
+          },
+        ],
+      };
+      this.myChart.setOption(options, false);
+    },
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById("costHistogram"));
+    this.init();
+  },
+  watch: {
+    color(newVal) {
+      if (newVal) {
+        this.myChart.clear();
+        this.init();
+      }
+    },
+    dataList: {
+      handler() {
+        this.myChart.clear();
+        this.init();
+      },
+    },
+    timeList: {
+      handler() {
+        this.myChart.clear();
+        this.init();
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+.cost-histogram {
+  display: inline-block;
+  flex: 1;
+  height: 100%;
+}
+#costHistogram {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/PdcData/Analysis.vue

@@ -12,9 +12,9 @@
             :shows="tableShows"
             :listData="tableData"
           >
-            <template v-slot:handleState="slotProps">
+            <!-- <template v-slot:handleState="slotProps">
               {{ slotProps.row.handleState ? "已处理" : "未处理" }}
-            </template>
+            </template> -->
           </table-content>
         </div>
       </div>
@@ -629,7 +629,6 @@ 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["nest_times"].stockQuantity,
             res.data["psy"].stockQuantity,

src/views/PdcData/analysis/CostPie.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-10-12 08:39:43
- * @LastEditTime: 2021-12-09 17:23:03
+ * @LastEditTime: 2021-12-21 10:32:42
  * @LastEditors: Please set LastEditors
  * @Description: 成本分析扇形图
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\CostPie.vue
@@ -91,7 +91,10 @@ export default {
                     // 这里简直完美好吗，解决了文字样式也解决了千分位
                     let value = params.value.toLocaleString();
                     let percent = ((params.value / total) * 100).toFixed(2);
-                    return `{b|${params.name}:}\n{c|${value}}元\n{d|${percent}%}`;
+                    if (value === "0") {
+                      return `{b|${params.name}:}\n{c|${value}元}`;
+                    }
+                    return `{b|${params.name}:}\n{c|${value}元}\n{d|${percent}%}`;
                   },
                   rich: {
                     b: {

src/views/PdcData/analysis/table.config.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-09-28 13:54:21
- * @LastEditTime: 2021-12-06 13:48:26
+ * @LastEditTime: 2021-12-21 10:53:09
  * @LastEditors: Please set LastEditors
  * @Description: 生产数据 - ERP数据分析 - 工作看板 的表格
  * @FilePath: \hyyfClient\src\views\PdcData\analysis\table.config.js
@@ -19,18 +19,18 @@ export const tableItems = [
     minWidth: '400',
     slotName: 'warningContent'
   },
-  {
-    prop: 'handleState',
-    label: '是否已处理',
-    minWidth: '400',
-    slotName: 'handleState'
-  },
-  {
-    prop: 'handleTime',
-    label: '处理时间',
-    minWidth: '200',
-    slotName: 'handleTime'
-  }
+  // {
+  //   prop: 'handleState',
+  //   label: '是否已处理',
+  //   minWidth: '400',
+  //   slotName: 'handleState'
+  // },
+  // {
+  //   prop: 'handleTime',
+  //   label: '处理时间',
+  //   minWidth: '200',
+  //   slotName: 'handleTime'
+  // }
 ]
 
 export const tableShows = {