huanzi-vue/src/views/zh/qy/sjqyzl/index.vue

<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-row>
        <a-col :span="21">
          <a-radio-group v-model:value="parmas.type" @change="changeType">
            <a-radio-button value="1">当天</a-radio-button>
            <a-radio-button value="2">近3天</a-radio-button>
            <a-radio-button value="3">近7天</a-radio-button>
            <a-radio-button value="4">近30天</a-radio-button>
            <a-radio-button value="5">自定义</a-radio-button>
          </a-radio-group>
          <span v-show="parmas.type == '5'" style="margin-left: 5px;">
            <a-range-picker :value-format="valueFormat" @change="changeDate" />
          </span>
          <a-select ref="select" placeholder="请选司机" v-model:value="parmas.staffPhone"
            style="width: 200px;margin-left: 5px;" @change="handleStaff">
            <a-select-option value="">全部</a-select-option>
            <a-select-option :value="item.staffPhone" v-for="item in staffs" :key="item.staffPhone">{{item.staffName }}</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="3">
          <a-radio-group v-model:value="izList" button-style="solid" @change="loadDate">
            <a-radio-button :value="false">统计图</a-radio-button>
            <a-radio-button :value="true">列表页</a-radio-button>
          </a-radio-group>
        </a-col>
      </a-row>
      <LineMulti v-show="!izList" :chartData="dataSource" height="80vh"
        :option="{ title: { text: '货运司机清运重量统计', left: 'center' } }"
                 :seriesLabel="{show: true, position: 'top'}" type="line"></LineMulti>
      <div  v-show="izList" style="margin-top: 20px;">
        <a-table :dataSource="dataSource" :columns="sjqyzlColumns">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <a-button type="link" @click="handleView(record)">查看</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
    <a-modal v-model:visible="detailVisible" title="清运详情" width="80%" :footer="null">
      <a-spin :spinning="confirmLoading">
        <a-row>
          <a-col :span="20">
            <div style="margin: 5px 0px 5px 20px">清运状态
              <a-select ref="select"
                        placeholder="请选清运状态"
                        v-model:value="detailParmas.status"
                        style="width: 200px;margin-left: 5px;"
                        @change="loadDetailDate">
                <a-select-option value="" >全部</a-select-option>
                <a-select-option value="0">创建</a-select-option>
                <a-select-option value="1">完成</a-select-option>
                <a-select-option value="2">无效</a-select-option>
              </a-select>
            </div>
          </a-col>
        </a-row>
        <a-table :dataSource="detailData" :columns="detailSjqyColumns" rowKey="rowNumber">
        </a-table>
      </a-spin>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, reactive, onMounted } from 'vue';
import LineMulti from '/@/components/chart/LineMulti.vue';
import { staffList,sjQyList,sjQyZlList } from '../qy.api';
import { sjqyzlColumns,detailSjqyColumns } from '../qy.data';

const valueFormat = 'YYYY-MM-DD';
const dataSource = ref([]);
const dateValue = ref();
const staffs = ref();
const izList = ref(false)
const detailVisible = ref(false);
const confirmLoading = ref(false);
const detailData = ref([]);

async function getStaffs() {
  let params = {
    beginTime: parmas.beginTime,
    endTime: parmas.endTime,
  }
  staffs.value = await staffList(params);
}

const parmas = reactive<any>({
  beginTime: '',
  endTime: '',
  type: '1',
  staffPhone: '',
  pageSize: 10,
})

const detailParmas = reactive<any>({
  staffPhone: '',
  status: '',
})

function changeType() {
  parmas.endTime = getPreviousDate(0) + ' 23:59:59';
  if (parmas.type === '1') {
    parmas.beginTime = getPreviousDate(0) + ' 00:00:00';
    loadDate();
    getStaffs();
  }
  if (parmas.type === '2') {
    parmas.beginTime = getPreviousDate(2) + ' 00:00:00';
    loadDate();
    getStaffs();
  }
  if (parmas.type === '3') {
    parmas.beginTime = getPreviousDate(6) + ' 00:00:00';
    loadDate();
    getStaffs();
  }
  if (parmas.type === '4') {
    parmas.beginTime = getPreviousDate(29) + ' 00:00:00';
    loadDate();
    getStaffs();
  }
}

const changeDate = (date, dateString) => {
  parmas.beginTime = dateString[0] + ' 00:00:00';
  parmas.endTime = dateString[1] + ' 23:59:59';
  loadDate();
  getStaffs();
};

function handleStaff() {
  loadDate();
};

async function loadDate() {
  if(izList.value){
    parmas.pageSize=-1
  }else{
    parmas.pageSize=10
  }
  const resData = await sjQyZlList(parmas);
  const res = resData.records;
  dataSource.value = [];
  for (let i = 0; i < res.length; i++) {
    dataSource.value.push({
      type: '清运重量(吨)',
      rowNumber: res[i].rowNumber,
      phone: `${res[i].staffPhone}`,
      name: `${res[i].staffName}`,
      value: res[i].thisWeight,
    });
  }
}

// 查看详情
const handleView = async (record) => {
  detailParmas.staffPhone = record.phone;
  loadDetailDate();
}

// 查看详情
async function loadDetailDate(){
  detailVisible.value = true;
  try {
    confirmLoading.value = true;
    detailData.value = [];
    const res = await sjQyList({ beginTime:parmas.beginTime,endTime:parmas.endTime,staffPhone:detailParmas.staffPhone,status:detailParmas.status });
    detailData.value = res;
    confirmLoading.value = false;
  } catch (error) {
    console.error('获取详情失败:', error);
  }
}

function getPreviousDate(days) {
  const date = new Date();
  date.setDate(date.getDate() - days);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份+1（0-indexed）并补零
  const day = String(date.getDate()).padStart(2, '0');         // 日期补零
  const formattedDate = `${year}-${month}-${day}`;
  return formattedDate;
}

onMounted(() => {
  if (parmas.type == '1') {
    parmas.beginTime = getPreviousDate(0) + ' 00:00:00';
    parmas.endTime = getPreviousDate(0) + ' 23:59:59';
  }
  loadDate();
  getStaffs();
})

</script>