|
@@ -0,0 +1,298 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2021-12-07 10:07:56
|
|
|
+ * @LastEditTime: 2021-12-07 16:16:22
|
|
|
+ * @LastEditors: Please set LastEditors
|
|
|
+ * @Description: 电子秤
|
|
|
+ * @FilePath: \hyyfClient\src\views\Env\SalePig.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="sale-pig">
|
|
|
+ <div class="reply" :style="{ color: color }">卖猪重量计量</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>
|
|
|
+ <table-content
|
|
|
+ :listData="elecDataList"
|
|
|
+ :tableItems="tableItems"
|
|
|
+ :shows="shows"
|
|
|
+ >
|
|
|
+ </table-content>
|
|
|
+ <table-footer
|
|
|
+ :totals="total"
|
|
|
+ :size="pageSize"
|
|
|
+ @sizeChange="sizeChange"
|
|
|
+ @pageChange="pageChange"
|
|
|
+ >
|
|
|
+ </table-footer>
|
|
|
+ </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,
|
|
|
+ elecAllCount: "123.1",
|
|
|
+ elecData: {
|
|
|
+ month: [
|
|
|
+ "07-01周六",
|
|
|
+ "07-02周日",
|
|
|
+ "07-03周一",
|
|
|
+ "07-04周二",
|
|
|
+ "07-05周三",
|
|
|
+ "07-06周四",
|
|
|
+ "07-07周五",
|
|
|
+ ],
|
|
|
+ elecList: [36.5, 37.8, 38.5, 37.7, 37.9, 37.4, 36.4],
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ params: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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() {
|
|
|
+ getDayWeight({
|
|
|
+ pageNo: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 10000) {
|
|
|
+ this.elecDataList = res.data.content;
|
|
|
+ this.elecDataList.forEach((item) => {
|
|
|
+ item.addTime = item.addTime.split("T")[0];
|
|
|
+ item.grossWeight += " kg";
|
|
|
+ item.tareWeight += " kg";
|
|
|
+ item.netWeight += " kg";
|
|
|
+ });
|
|
|
+ this.total = res.data.totalElements;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 近七次
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 本月
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 指定日期
|
|
|
+ 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);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+}
|
|
|
+.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>
|