goldenPig/src/views/Env/SalePig.vue

<!--
 * @Author: your name
 * @Date: 2021-12-07 10:07:56
 * @LastEditTime: 2022-01-04 13:19:38
 * @LastEditors: Please set LastEditors
 * @Description: 电子秤 - TODO: 卖猪计量的视频回放按钮
 * @FilePath: \hyyfClient\src\views\Env\SalePig.vue
-->
<template>
  <div class="sale-pig">
    <div class="reply" :style="{ color: color }">
      <div class="reset-title">
        <span>卖猪重量计量</span>
        <div class="reset-btns">
          <span>视频监控：</span>
          <el-button size="small" @click="handlePlay(1)">卖猪台点猪</el-button>
          <el-button size="small" @click="handlePlay(2)">卖猪台猪舍</el-button>
        </div>
      </div>
    </div>
    <x-form
      :formItems="formItems"
      :day="day"
      @setDay="setDay"
      @onClickType="onClickType"
    >
    </x-form>
    <div class="echarts">
      <div class="echarts-l">
        <chart-sale-pig :starkCount="elecAllCount"></chart-sale-pig>
      </div>
      <div class="echarts-r">
        <!-- <chart-stark-bar :starkList="starkAllList"></chart-stark-bar> -->
        <chart-elec-lines :data="elecData"></chart-elec-lines>
      </div>
    </div>
    <br />
    <div class="reply" :style="{ color: color }">重量详情</div>
    <x-form
      :formItems="formItemsTable"
      :day="dayTable"
      @setDay="setDayTable"
      @onClickType="onClickTypeTable"
    >
    </x-form>
    <table-content
      :listData="elecDataList"
      :tableItems="tableItems"
      :shows="shows"
    >
    </table-content>
    <table-footer
      :totals="total"
      :size="pageSize"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    >
    </table-footer>
    <el-dialog title="实时视频" :visible.sync="videoVisible" width="50%">
      <div style="width: 100%; height: 560px">
        <iframe
          v-if="videoVisible"
          :src="rtsp"
          frameborder="0"
          style="width: 100%; height: 530px;"
        >
        </iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import XForm from "@/components/XForm";
import ChartSalePig from "./chart/ChartSalePig.vue";
import ChartElecLines from "./chart/ChartElecLines.vue";
import TableContent from "@/components/newTable/TableContent";
import TableFooter from "@/components/TableFooter";

import {
  getDayWeight,
  getDaysQuery,
  getMonthQuery,
  getQuery,
} from "@/utils/chenApi.js";

export default {
  components: {
    XForm,
    ChartSalePig,
    ChartElecLines,
    TableContent,
    TableFooter,
  },
  computed: {
    ...mapState(["color"]),
  },
  data() {
    return {
      formItems: [
        {
          id: 2,
          type: "text",
          text: "近七次",
          value: 1,
          col: 1.5,
        },
        {
          id: 3,
          type: "text",
          text: "本月",
          value: 2,
          col: 1,
        },
        {
          id: 4,
          type: "datepicker",
          placeholder: [],
          field: "value1",
          col: 6,
        },
        {
          id: 8,
          type: "button",
          text: "查询",
          col: 2,
          click: "search",
        },
      ],
      day: 1,
      params: {},
      // 卖猪详情的查询
      formItemsTable: [
        {
          id: 2,
          type: "text",
          text: "今日",
          value: 1,
          col: 1.5,
        },
        {
          id: 4,
          type: "datepicker",
          placeholder: [],
          field: "value1",
          col: 6,
        },
        {
          id: 8,
          type: "button",
          text: "查询",
          col: 2,
          click: "search",
        },
      ],
      dayTable: 1,
      paramsTable: {},
      elecAllCount: "0",
      elecData: {
        month: [],
        elecList: [],
      },
      elecDataList: [],
      tableItems: [
        {
          prop: "addTime",
          label: "时间",
          minWidth: "100",
          slotName: "addTime",
        },
        {
          prop: "grossWeight",
          label: "毛重",
          minWidth: "100",
          slotName: "grossWeight",
        },
        {
          prop: "tareWeight",
          label: "去皮",
          minWidth: "100",
          slotName: "tareWeight",
        },
        {
          prop: "netWeight",
          label: "净重",
          minWidth: "100",
          slotName: "netWeight",
        },
      ],
      shows: {
        showIndex: false,
        showSelect: false,
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      videoVisible: false, // 视频回放
      rtsp: "", // 视频回放的地址
    };
  },
  mounted() {
    this.initDayWeight();
    this.initDaysQuery();
  },
  methods: {
    setDay(data) {
      this.day = data.type;
      if (this.day === 1) {
        this.initDaysQuery();
      } else if (this.day === 2) {
        this.initMonthQuery();
      }
    },
    onClickType(data) {
      this.day = 3; // 让 近七次 和 本月 不选中
      this.params.time = data.data.value1;
      if (!this.params.time) {
        this.$message.info("请选择时间");
        return;
      }
      this.initQuery();
    },
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.initDayWeight();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initDayWeight();
    },
    // 重量详情
    initDayWeight() {
      this.pageNum = 1;
      getDayWeight({
        pageNo: this.pageNum,
        pageSize: this.pageSize,
        startDate: this.paramsTable.time ? this.paramsTable.time[0] : undefined,
        endDate: this.paramsTable.time ? this.paramsTable.time[1] : undefined,
        days: this.paramsTable.time ? undefined : 0,
      }).then((res) => {
        if (res.code === 10000) {
          this.elecDataList = res.data.content;
          this.elecDataList.forEach((item) => {
            item.grossWeight += " kg";
            item.tareWeight += " kg";
            item.netWeight += " kg";
          });
          this.total = res.data.totalElements;
        } else {
          this.elecDataList = [];
          this.total = 0;
        }
      });
    },
    // 近七次
    initDaysQuery() {
      getDaysQuery({
        days: 7,
      }).then((res) => {
        if (res.code === 10000) {
          this.elecAllCount = res.data.total;
          const list = res.data.weight;
          this.elecData = {
            month: [],
            elecList: [],
          };
          list.forEach((item) => {
            this.elecData.month.push(item.addTime.split("T")[0]);
            this.elecData.elecList.push(item.netWeight);
          });
        } else {
          this.elecAllCount = "0";
          this.elecData = {
            month: [],
            elecList: [],
          };
        }
      });
    },
    // 本月
    initMonthQuery() {
      getMonthQuery({}).then((res) => {
        if (res.code === 10000) {
          this.elecAllCount = res.data.total;
          const list = res.data.weight;
          this.elecData = {
            month: [],
            elecList: [],
          };
          list.forEach((item) => {
            this.elecData.month.push(item.addTime.split("T")[0]);
            this.elecData.elecList.push(item.netWeight);
          });
        } else {
          this.elecAllCount = "0";
          this.elecData = {
            month: [],
            elecList: [],
          };
        }
      });
    },
    // 指定日期
    initQuery() {
      getQuery({
        startDate: this.params.time[0],
        endDate: this.params.time[1],
      }).then((res) => {
        if (res.code === 10000) {
          this.elecAllCount = res.data.total;
          const list = res.data.weight;
          this.elecData = {
            month: [],
            elecList: [],
          };
          list.forEach((item) => {
            this.elecData.month.push(item.addTime.split("T")[0]);
            this.elecData.elecList.push(item.netWeight);
          });
        } else {
          this.elecAllCount = "0";
          this.elecData = {
            month: [],
            elecList: [],
          };
        }
      });
    },
    // 卖猪详情 - 今日
    setDayTable() {
      this.paramsTable = {};
      this.initDayWeight();
    },
    onClickTypeTable(data) {
      this.dayTable = 8; // 随便什么数字，反正今日不被选中
      this.paramsTable.time = data.data.value1;
      if (!this.paramsTable.time) {
        this.$message.info("请选择时间");
        return;
      }
      this.initDayWeight();
    },
    // 卖猪视频播放
    handlePlay(val) {
      if (val === 1) {
        this.rtsp =
          "static/jinm/index.html?" +
          "1" +
          "," +
          "ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.193" +
          "," +
          "rtsp://admin:hmkj6688@172.16.3.193/cam/realmonitor?channel=1&subtype=0" +
          "," +
          "100%" +
          "," +
          "0";
      } else {
        this.rtsp =
          "static/jinm/index.html?" +
          "1" +
          "," +
          "ws://36.26.62.70:9080/camera_relay?tcpaddr=admin%3Ahmkj6688%40172.16.3.192" +
          "," +
          "rtsp://admin:hmkj6688@172.16.3.193/cam/realmonitor?channel=1&subtype=0" +
          "," +
          "100%" +
          "," +
          "0";
      }
      this.videoVisible = true;
    },
  },
};
</script>
<style scoped>
.sale-pig {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  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;
}
/* 为了放视频按钮 */
.reset-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;
}
.reset-btns {
  display: flex;
  align-items: center;
}
.reset-btns > span {
  color: #000;
  margin-right: 3px;
}
.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%;
}
</style>