hyyfClient/src/views/BioSafety/DeadPig.vue

<!--
 * @Author: your name
 * @Date: 2021-09-16 11:27:35
 * @LastEditTime: 2021-12-22 09:35:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hyyfClient\src\views\BioSafety\DeadPig.vue
-->
<template>
  <div class="dead-pig">
    <!-- 筛选条件 -->
    <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 "./deadPig/queryCondition.config";
import { title, tableItems, tableShows } from "./deadPig/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() {
      if (!this.params.time) {
        this.params.time = [
          timeDate(new Date().getTime() - 1000 * 60 * 60 * 24),
          timeDate(new Date().getTime()),
        ];
      }
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let queryParams = {
        pageNum: this.pageNum,
        pageSize: this.size,
        alarmStartDateString: this.params.time[0] + " 00:00:00",
        alarmEndDateString: this.params.time[1] + " 23:59:59",
        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,
        alarmType: 303,
        dbType: 0,
      };
      getCarWash(queryParams).then(async (res) => {
        if (res) {
          loading.close();
          const result = JSON.parse(res.result);
          this.listData = result.data.pageData;
          this.listData.forEach((item) => {
            item.alarmPicture = `${this.ip}/video/picture/get?alarmPicture=${item.alarmPicture}`;
          });
        }
        loading.close();
      });
    },
    // 死猪管理 - 总数
    async 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,
      };
      const res = await getCarWashTotal(queryParams);
      if (res) {
        this.total = JSON.parse(res.result).data.value;
      }
      // getCarWashTotal(queryParams).then((res) => {
      //   console.log(res.result);
      //   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,
      }).then((res) => {
        if (res.code === 0) {
          this.rtsp = res.URL;
          this.videoVisible = true;
        } else {
          this.$message.error("视频获取失败");
        }
      });
    },
  },
};
</script>

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