khyznh-ui/src/views/statics/passengerFlow.vue

<template>
  <div class="p-2">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="车辆客流数据" name="first">
        <div>
          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
              <div style="width: 80%;">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                  <!-- <el-form-item label="路线">
                                        <el-select v-model="line" placeholder="请选择路线" style="width: 120px">
                                            <el-option v-for="item in carPathList" :key="item.id" :label="item.name"
                                                :value="item.id" />
                                        </el-select>
                                    </el-form-item> -->
                  <el-form-item label="车辆">
                    <el-select v-model="queryParams.carNum" placeholder="请选择车辆" style="width: 120px">
                      <el-option v-for="item in carInfoList" :key="item.carNum" :label="item.carNum" :value="item.carNum" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="单位">
                    <el-tree-select
                      v-model="deptId"
                      :data="deptOptions"
                      :props="{ value: 'id', label: 'label', children: 'children' }"
                      value-key="id"
                      placeholder="请选择归属部门"
                      check-strictly
                    />
                  </el-form-item>
                  <el-form-item label="时间" prop="carNum">
                    <el-date-picker
                      v-model="dataValue"
                      type="datetimerange"
                      :shortcuts="shortcuts"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div style="width: 20%;">
                <el-form-item>
                  <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
                                    <el-button type="primary" plain @click="resetQuery">昨天</el-button>
                                    <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
                  <el-button type="primary" @click="searchCar">查询</el-button>
                  <!-- <el-button @click="resetQuery">重置</el-button> -->
                </el-form-item>
              </div>
            </div>
          </transition>
          <el-card shadow="never">
            <tableElm @childToParent="childrenClick" :columns="columns1" ref="table1"></tableElm>
            <pagination
              v-show="total > 0"
              :total="total"
              v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize"
              @pagination="searchCar"
            />
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="站点客流数据" name="second">
        <div>
          <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
            <div class="search" v-show="showSearch" style="display: flex;flex-direction: row;">
              <div style="width: 80%;">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                  <el-form-item label="路线">
                    <el-select v-model="queryParams2.line" placeholder="请选择路线" style="width: 120px">
                      <el-option v-for="item in carPathList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="站点" prop="carNum">
                    <el-select v-model="queryParams2.site" placeholder="请选择站点" style="width: 300px">
                      <el-option v-for="item in sites" :key="item.dictLabel" :label="item.dictLabel" :value="item.dictLabel" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="时间" prop="carNum">
                    <el-date-picker
                      v-model="dataValue2"
                      type="datetimerange"
                      :shortcuts="shortcuts"
                      range-separator="至"
                      start-placeholder="开始时间"
                      end-placeholder="结束时间"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div style="width: 20%;">
                <el-form-item>
                  <!-- <el-button type="primary" plain @click="goadd">今天</el-button>
                                    <el-button type="primary" plain @click="resetQuery">昨天</el-button>
                                    <el-button type="primary" plain @click="resetQuery">近三天</el-button> -->
                  <el-button type="primary" @click="searchSite">查询</el-button>
                  <!-- <el-button @click="resetQuery">重置</el-button> -->
                </el-form-item>
              </div>
            </div>
          </transition>
          <el-card shadow="never">
            <tableElm @childToParent="childrenClick" :columns="columns2" ref="table2"></tableElm>
            <pagination
              v-show="total2 > 0"
              :total="total2"
              v-model:page="queryParams2.pageNum"
              v-model:limit="queryParams2.pageSize"
              @pagination="searchSite"
            />
          </el-card>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="CarInfo" lang="ts">
import { listCarInfo, getCarInfo, delCarInfo, addCarInfo, updateCarInfo } from '@/api/carInfo';
import { listCarSchedule, getCarSchedule, delCarSchedule, addCarSchedule, updateCarSchedule } from '@/api/carSchedule';
import { CarInfoVO, CarInfoQuery, CarInfoForm } from '@/api/carInfo/types';
import { updateData, listData } from "@/api/system/dict/data";
import { listCarPath, getCarPath, delCarPath, addCarPath, updateCarPath } from '@/api/carPath';
import api from "@/api/system/user"
import { liststaticFlow, listsitesFlow } from '@/api/gpsData';
import tableElm from "@/components/Public/table.vue";
import { useRoute, useRouter } from "vue-router";
import moment from 'moment';

const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const carInfoList = ref < CarInfoVO[] > ([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref < Array < string | number >> ([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const total2 = ref(0);
const value2 = ref('')
const carPathList = ref([])

const queryFormRef = ref < ElFormInstance > ();
const carInfoFormRef = ref < ElFormInstance > ();
const siteFlowList = ref([])

const dataValue = ref < [Date, Date] > ([
    new Date(new Date().getTime() - 3600 * 24 * 1000),
    new Date(),
])

const dataValue2 = ref < [Date, Date] > ([
    new Date(new Date().getTime() - 3600 * 24 * 1000),
    new Date(),
])

const dialog = reactive < DialogOption > ({
    visible: false,
    title: ''
});

const sites = ref([]);
const table = ref(tableElm)
const table1 = ref(tableElm)
const table2 = ref(tableElm)
const activeName = ref("first")
const carFlowList = ref([])
const lineFlowList = ref([])

const columns = ref([
    // {label: '上层位置', prop: 'v', visible: true},
    { label: '来源', prop: 'carNum', visible: true, isTemplate: false },
    { label: '时间', prop: 'workTime', visible: true, isTemplate: false, },
    { label: '内容', prop: 'workName', pprop: "ext1", visible: true, isTemplate: false },
])

const columns1 = ref([
    // {label: '上层位置', prop: 'v', visible: true},
    { label: '车牌号', prop: 'carNum', visible: true, isTemplate: false },
    { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
    { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
    { label: '上车总数', prop: 'others.incount', visible: true, isTemplate: false, },
    { label: '下车总数', prop: 'others.outcount', pprop: "ext1", visible: true, isTemplate: false },
])

const columns2 = ref([
    // {label: '上层位置', prop: 'v', visible: true},
    { label: '站点名', prop: 'dictLabel', visible: true, isTemplate: false },
    { label: '开始时间', prop: 'startTime', visible: true, isTemplate: false, },
    { label: '结束时间', prop: 'endTime', pprop: "ext1", visible: true, isTemplate: false },
    { label: '上车总数', prop: 'others.incount', visible: true, isTemplate: false, },
    { label: '下车总数', prop: 'others.outcount', pprop: "ext1", visible: true, isTemplate: false },
])

const deptId = ref(null)
const deptOptions = ref([]);

const initFormData: CarInfoForm = {
    id: undefined,
    carNum: undefined,
    carType: undefined,
    deviceInfos: undefined,
    repairInfo: undefined,
    maintenanceInfo: undefined,
    insuranceInfo: undefined,
    inspectionInfo: undefined,
    trafficAccidentInfo: undefined,
    violationInfo: undefined,
    changeInfo: undefined,
    ext1: undefined,
    ext2: undefined
}
const data = reactive < PageData < CarInfoForm, CarInfoQuery>> ({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        carNum: undefined,
        carType: undefined,
        deviceInfos: undefined,
        repairInfo: undefined,
        maintenanceInfo: undefined,
        insuranceInfo: undefined,
        inspectionInfo: undefined,
        trafficAccidentInfo: undefined,
        violationInfo: undefined,
        changeInfo: undefined,
        ext1: undefined,
        ext2: undefined,
        params: {
        }
    },
    queryParams2: {
        pageNum: 1,
        pageSize: 10,
        site: '',
        line: [],
    },
    rules: {
        id: [
            { required: true, message: "编号不能为空", trigger: "blur" }
        ],
        carNum: [
            { required: true, message: "车牌号不能为空", trigger: "blur" }
        ],
        carType: [
            { required: true, message: "车类型不能为空", trigger: "change" }
        ],
        deviceInfos: [
            { required: true, message: "所有车载设备信息不能为空", trigger: "blur" }
        ],
        repairInfo: [
            { required: true, message: "维修信息不能为空", trigger: "blur" }
        ],
        maintenanceInfo: [
            { required: true, message: "保养信息不能为空", trigger: "blur" }
        ],
        insuranceInfo: [
            { required: true, message: "保险信息不能为空", trigger: "blur" }
        ],
        inspectionInfo: [
            { required: true, message: "年检信息不能为空", trigger: "blur" }
        ],
        trafficAccidentInfo: [
            { required: true, message: "交通事故信息不能为空", trigger: "blur" }
        ],
        violationInfo: [
            { required: true, message: "违章信息不能为空", trigger: "blur" }
        ],
        changeInfo: [
            { required: true, message: "车辆变更信息不能为空", trigger: "blur" }
        ],
        ext1: [
            { required: true, message: "扩展1不能为空", trigger: "blur" }
        ],
        ext2: [
            { required: true, message: "扩展2不能为空", trigger: "blur" }
        ]
    }
});

const paramData = ref({
    starttime: '',
    endtime: ''
})

const { queryParams, queryParams2, form, rules } = toRefs(data);

const goadd = () => {
    router.push("/car/work/addWork")
}

const getSites = () => {
    listData({ dictType: "tbl_sites" }).then(res2 => {
        sites.value = res2.rows;
    });
}

const getTreeSelect = async () => {
    const res = await api.deptTreeSelect();
    console.log(res)
    deptOptions.value = res.data;
};

const searchData = () => {
    console.log(dataValue.value)
}

/** 查询车辆信息列表 */
const getList = async () => {
    // loading.value = true;
    // const res = await listCarInfo(queryParams.value);
    var res = {
        rows: [
            {
                carNum: '苏A862123',
                startTime: "2024-01-23 09:12:23",
                endTime: "2024-01-23 09:13:23",
                upCount: "10",
                downCount: "9",
            },
            {
                carNum: '苏A862123',
                startTime: "2024-01-23 10:12:23",
                endTime: "2024-01-23 10:13:23",
                upCount: "10",
                downCount: "9",

            }
        ],
        total: 1
    }
    var res1 = {
        rows: [
            {
                siteName: '松罗客运站',
                startTime: "2024-01-23 09:12:23",
                endTime: "2024-01-23 09:13:23",
                upCount: "10",
                downCount: "9",
            },
            {
                siteName: '福清客运站',
                startTime: "2024-01-23 10:12:23",
                endTime: "2024-01-23 10:13:23",
                upCount: "10",
                downCount: "9",

            }
        ],
        total: 1
    }
    var buttons = [
        { type: 'danger', text: '删除', func: "goAdd" },
    ]
    table1.value.setDataList(res.rows);
    table1.value.setButton(buttons);
    table2.value.setDataList(res1.rows);
    table2.value.setButton(buttons);
    total.value = res.total;
    loading.value = false;
}

/** 取消按钮 */
const cancel = () => {
    reset();
    dialog.visible = false;
}

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    carInfoFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: CarInfoVO[]) => {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
const handleAdd = () => {
    reset();
    dialog.visible = true;
    dialog.title = "添加车辆信息";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: CarInfoVO) => {
    reset();
    const _id = row?.id || ids.value[0]
    const res = await getCarInfo(_id);
    Object.assign(form.value, res.data);
    dialog.visible = true;
    dialog.title = "修改车辆信息";
}

const childrenClick = (data) => {
    eval(data.func + "(data.data)")
}

const openDialog = () => {
    dialog.visible = true
}

/** 提交按钮 */
const submitForm = () => {
    carInfoFormRef.value?.validate(async (valid: boolean) => {
        if (valid) {
            buttonLoading.value = true;
            if (form.value.id) {
                await updateCarInfo(form.value).finally(() => buttonLoading.value = false);
            } else {
                await addCarInfo(form.value).finally(() => buttonLoading.value = false);
            }
            proxy?.$modal.msgSuccess("修改成功");
            dialog.visible = false;
            await getList();
        }
    });
}

/** 删除按钮操作 */
const handleDelete = async (row?: CarInfoVO) => {
    const _ids = row?.id || ids.value;
    await proxy?.$modal.confirm('是否确认删除车辆信息编号为"' + _ids + '"的数据项？').finally(() => loading.value = false);
    await delCarInfo(_ids);
    proxy?.$modal.msgSuccess("删除成功");
    await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
    proxy?.download('system/carInfo/export', {
        ...queryParams.value
    }, `carInfo_${new Date().getTime()}.xlsx`)
}

const initData = async () => {
    const res = await listCarPath({ pageSize: 1000 });
    carPathList.value = res.rows
    const res2 = await listCarInfo({ pageSize: 1000 });
    carInfoList.value = res2.rows
    var params = {
        starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
        endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss")
    }
    const res3 = await listCarSchedule({ pageSize: 1000, params: params })
    getSites();
    carFlowList.value = [];
    siteFlowList.value = [];
    searchCar();
    searchSite();
    // for (var index in carInfoList.value) {
    //     if (carInfoList.value[index].deviceInfos != null) {
    //         var deviceCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
    //         console.log(deviceCode)
    //         await getFlowData(deviceCode, carInfoList.value[index].carNum)
    //     }
    //     //getFlowData();
    // }
    // for (var index in res3.data) {
    //     if (res3.data[index].ext1 != null) {
    //         var siteList = JSON.parse(res3.data[index].ext1)
    //         var gpsCode = ''
    //         for (var j in carInfoList.value) {
    //             if (carInfoList.value[j].carNum == res3.data[index]) {
    //                 gpsCode = JSON.parse(carInfoList.value[index].deviceInfos)[0].code
    //             }
    //         }
    //         for (var key in siteList) {
    //             var obj = siteList[key]
    //             await getSiteData(key, gpsCode, obj.intime, obj.outtime);
    //         }
    //     }
    // }
    // table2.value.setButton([]);
    // console.log(carFlowList.value)
    // table2.value.setDataList(siteFlowList.value);
}

const searchCar = () => {
    var obj = {
        pageSize: queryParams.value.pageSize,
        pageNum: queryParams.value.pageNum,
        carNum: queryParams.value.carNum,
        deviceInfos:"people_count",
        params: {
            starttime: moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss"),
            endtime: moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
        }
    }
    if (deptId.value != null) {
        obj.params["ext1$deptId"] = deptId.value
    }
    liststaticFlow(obj).then(res => {
        total.value = res.total
        table1.value.setButton([]);
        for (var index in res.rows) {
            res.rows[index].startTime = moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss")
            res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
        }
        table1.value.setDataList(res.rows);
    })
}

const searchSite = () => {
    var sites = []
    for (var index in carPathList.value) {
        if (queryParams2.value.line == carPathList.value[index].id) {
            for (var j in JSON.parse(carPathList.value[index].stationList)) {
                var station = JSON.parse(carPathList.value[index].stationList)[j].data
                sites.push(station.dictLabel)
            }
        }
    }
    var params = {
        starttime: moment(dataValue2.value[0]).format("YYYY-MM-DD HH:mm:ss"),
        endtime: moment(dataValue2.value[1]).format("YYYY-MM-DD HH:mm:ss")
    }
    if (sites.length > 0) {
        params.sites = sites.join(',')
    }
    var obj = {
        dictLabel: queryParams2.value.site,
        pageSize: queryParams2.value.pageSize,
        pageNum: queryParams2.value.pageNum,
        params: params
    }
    listsitesFlow(obj).then(res => {
        total2.value = res.total
        for (var index in res.rows) {
            res.rows[index].startTime = moment(dataValue.value[0]).format("YYYY-MM-DD HH:mm:ss")
            res.rows[index].endTime = moment(dataValue.value[1]).format("YYYY-MM-DD HH:mm:ss")
            if (res.rows[index].others == null || res.rows[index].others == '') {
                var countData = {
                    incount: 0,
                    outcount: 0
                }
                res.rows[index].others = countData
            }
        }
        console.log(res.rows)
        table2.value.setButton([]);
        table2.value.setDataList(res.rows);
    })
}

const getFlowData = (carCode, carNum) => {
    var obj = {
        starttime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
        endtime: moment(dataValue.value[1]).format('YYYY-MM-DD')
    }
    getCountData({ devicecode: carCode, params: obj }).then(res => {
        var data = {
            carNum: carNum,
            startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
            endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
            upCount: res.data.totalin,
            downCount: res.data.totalout
        }
        carFlowList.value.push(data);
    })
}

const getSiteData = (carCode, siteName, startTime, endTime) => {
    var obj = {
        starttime: startTime,
        endtime: endTime
    }
    getCountData({ devicecode: carCode, params: obj }).then(res => {
        var data = {
            siteName: siteName,
            startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
            endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
            upCount: res.data.totalin,
            downCount: res.data.totalout
        }
        siteFlowList.value.push(data);
    })
}

const getStationData = (carCode, siteName) => {
    var obj = {
        starttime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
        endtime: moment(dataValue.value[1]).format('YYYY-MM-DD')
    }
    getCountData({ devicecode: carCode, params: obj }).then(res => {
        var data = {
            siteName: siteName,
            startTime: moment(dataValue.value[0]).format('YYYY-MM-DD'),
            endTime: moment(dataValue.value[1]).format('YYYY-MM-DD'),
            upCount: res.data.totalin,
            downCount: res.data.totalout
        }
        carFlowList.value.push(data);
    })
}

onMounted(() => {
    initData();
    getTreeSelect();
});
</script>

<style></style>