hyyfClient/src/views/BioSafety/DoorAdmin.vue

<!--
 * @Author: your name
 * @Date: 2021-12-17 15:50:33
 * @LastEditTime: 2021-12-22 09:33:53
 * @LastEditors: Please set LastEditors
 * @Description: 大门事件
 * @FilePath: \hyyfClient\src\views\BioSafety\DoorAdmin.vue
-->
<template>
  <div class="door-admin">
    <!-- 筛选条件 -->
    <query-conditions
      :defaultEmit="true"
      :formItems="formItems"
      :propFormData="propFormData"
      @getQueryParams="handleQuery"
    ></query-conditions>

    <!-- 表格 -->
    <new-table
      :title="title"
      :listData="listData"
      :tableItems="tableItems"
      :shows="tableShows"
      :height="535"
    >
      <template v-slot:alarmPicture="slotProps">
        <img
          :src="slotProps.row.alarmPicture"
          @click="clickImg(slotProps.row.alarmPicture)"
          alt="死猪图片"
          width="100%"
        />
      </template>

      <!-- 回放按钮 -->
      <template v-slot:handler="slotProps">
        <el-button size="mini" @click="clickEvent(slotProps.row)">
          查看回放
        </el-button>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="size"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    >
    </table-footer>
    <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>
    <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%"
        >
        </iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoVisible = false">取 消</el-button>
        <el-button type="primary" @click="videoVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QueryConditions from "components/bioSafety/QueryConditions";
import NewTable from "components/newTable/NewTable";
import TableFooter from "../../components/TableFooter";

import { formItems, propFormData } from "./doorAdmin/queryCondition.config";
import { title, tableItems, tableShows } from "./doorAdmin/table.config";
import { mapState } from "vuex";
import { timeDate } from "../../utils/index";

import {
  getCarWash,
  // getCarWashTotal,
  getCarWashVideo,
} from "../../utils/chenApi";

export default {
  name: "DeadPig",
  components: {
    QueryConditions,
    NewTable,
    TableFooter,
  },
  computed: {
    ...mapState(["ip"]),
  },
  data() {
    return {
      formItems: [], // 传给 QueryCondition 组件的 formItems
      propFormData: {}, // 传给 QueryCondition 组件的 propFormData
      title: "", // 传给 BioTable 组件的 title
      listData: [], // 传给 BioTable 组件的表格展示的值 listData
      tableItems: [], // 传给 BioTable 组件的表格的列表 tableItems
      tableShows: {},
      // table的翻页
      total: 0,
      size: 20,
      pageNum: 1,
      selectId: "",
      params: {},
      dialogVisible: false,
      imgUrl: "",
      rtsp: "",
      videoVisible: false,
    };
  },
  mounted() {
    this.formItems = formItems;
    this.propFormData = propFormData;
    this.title = title;
    this.tableItems = tableItems;
    this.tableShows = tableShows;
    this.pigManage();
    // this.pigTotal();
  },
  methods: {
    // 获取查询条件
    handleQuery(params) {
      this.params = params;
      this.pageNum = 1;
      this.pigManage();
      // this.pigTotal();
    },
    // 修改size
    sizeChange(val) {
      this.size = val;
      // this.init();
      this.pageNum = 1;
      this.pigManage();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      // this.init();
      this.pigManage();
    },
    // 死猪管理
    pigManage() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
          timeDate(new Date().getTime()),
        ];
      }
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        alarmStartDateString: this.params.time[0] + " 00:00:00",
        alarmEndDateString: this.params.time[1] + " 23:59:59",
        eventType: 2
      };
      getCarWash(queryParams).then(async (res) => {
        loading.close();
        if (res && res.code === 0) {
          const result = JSON.parse(res.data);
          this.listData = result.data.pageData;
          this.listData.forEach((item) => {
            item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}&farmId=${localStorage.getItem('lastFarmId')}`;
          });
          this.total = parseInt(res.total);
        } else {
          res && this.$message.warning(res.message);
        }
      });
    },
    // 死猪管理 - 总数
    pigTotal() {
      // if (!this.params.time) {
      //   this.params.time = [
      //     timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
      //     timeDate(new Date().getTime()),
      //   ];
      // }
      // let queryParams = {
      //   orgCodeList: [],
      //   nodeCodeList: [
      //     "1002874$1$0$0",
      //     "1002875$1$0$0",
      //     "1002876$1$0$0",
      //     "1002877$1$0$0",
      //     "1002878$1$0$0",
      //     "1002879$1$0$0",
      //     "1002880$1$0$0",
      //     "1002881$1$0$0",
      //     "1002882$1$0$0",
      //     "1002883$1$0$0",
      //     "1002884$1$0$0",
      //     "1002885$1$0$0",
      //     "1002886$1$0$0",
      //     "1002887$1$0$0",
      //     "1002888$1$0$0",
      //     "1002889$1$0$0",
      //     "1002890$1$0$0",
      //     "1002891$1$0$0",
      //     "1002892$1$0$0",
      //     "1002893$1$0$0",
      //     "1002894$1$0$0",
      //     "1002895$1$0$0",
      //     "1002896$1$0$0",
      //     "1002897$1$0$0",
      //     "1002898$1$0$0",
      //     "1002899$1$0$0",
      //     "1002900$1$0$0",
      //     "1002901$1$0$0",
      //     "1002902$1$0$0",
      //     "1002903$1$0$0",
      //     "1002904$1$0$0",
      //     "1002905$1$0$0",
      //     "1002906$1$0$0",
      //     "1002907$1$0$0",
      //     "1002908$1$0$0",
      //     "1002909$1$0$0",
      //     "1002910$1$0$0",
      //     "1002911$1$0$0",
      //     "1002912$1$0$0",
      //     "1002913$1$0$0",
      //     "1002939$1$0$0",
      //     "1002939$1$0$1",
      //     "1002939$1$0$2",
      //     "1002939$1$0$3",
      //     "1002939$1$0$4",
      //     "1002939$1$0$5",
      //     "1002939$1$0$6",
      //     "1002939$1$0$7",
      //     "1002939$1$0$8",
      //     "1002939$1$0$9",
      //     "1002940$1$0$0",
      //     "1002940$1$0$1",
      //     "1002940$1$0$2",
      //     "1002940$1$0$3",
      //     "1002940$1$0$4",
      //     "1002940$1$0$5",
      //     "1002940$1$0$6",
      //     "1002940$1$0$7",
      //     "1002939$1$0$10",
      //     "1002939$1$0$11",
      //     "1002939$1$0$12",
      //     "1002939$1$0$13",
      //     "1002939$1$0$14",
      //     "1002939$1$0$15",
      //   ],
      //   deviceCategory: 1,
      //   alarmStartDateString: this.params.time[0] + " 00:00:00",
      //   alarmEndDateString: this.params.time[1] + " 23:59:59",
      //   alarmType: 303,
      //   dbType: 0,
      // };
      // getCarWashTotal(queryParams).then((res) => {
      //   this.total = JSON.parse(res.result).data.value;
      // });
    },
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
    // 大门回放
    clickEvent(row) {
      getCarWashVideo({
        happendTime: row.alarmDate,
        channelName: row.alarmPosition,
        nodeCode: row.nodeCode
      }).then((res) => {
        if (res.code === 0) {
          this.rtsp = res.data.url;
          this.videoVisible = true;
        } else {
          this.$message.error("视频获取失败");
        }
      });
    },
  },
};
</script>

<style scoped>
.door-admin {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>