qxtj

qinxianzhangyao

2023-11-30 be330a8520fce4f9010295a8d727461962e76969

 src/views/standard/renshunum/index.vue

@@ -2,7 +2,10 @@
    <div>
        <el-form :model="queryParams" ref="tableList" :inline="true" label-width="76px" style="margin: 10px 10px">
            <el-form-item label="体检时间" prop="date">
                <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                <el-date-picker v-model="startTime" type="datetimerange" align="right" :picker-options="pickerOptions"
                    style="width: 310px" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:00:00']" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                    @change="dateChangebirthday1">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
@@ -18,7 +21,7 @@
    
        
<script>
import { GetChartByDate } from "@/api/count/chart";
import { getTiaoNumsByDate } from "@/api/count/chart";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
@@ -58,46 +61,52 @@
            },
            value1: "",
            DateList: [],
            startTime: "",
            startTime: [],
            dateAll: [],
            queryParams: {
                date: null,
                startDate: null,
                endDate: null,
                beginTime: null,
                endTime: null,
            },
        };
    },

    created() {
        this.getNowTime();
        this.getList();
    },

    methods: {
        getList() {
            this.queryParams.startDate = this.startTime[0];
            this.queryParams.endDate = this.startTime[1];
            let myChart = this.$echarts.init(document.getElementById("main"));
            //你进入页面先把图表渲染了  然后才获取的数据把
            myChart.setOption({
                color: ['#5470c6'],
                legend: {},
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['体检人数', '男生数量', '女生数量', '收入', '个检人数', '单位体检人数']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 80, 40, {
                            value: 380,
                            itemStyle: {
                                color: '#a90000'
                            }
                        }, 100, 200],
                        type: 'bar'
                    }
                ]
            });
            this.queryParams.beginTime = this.startTime[0];
            this.queryParams.endTime = this.startTime[1];
            getTiaoNumsByDate(this.queryParams).then(res => {
                let myChart = this.$echarts.init(document.getElementById("main"));
                //你进入页面先把图表渲染了  然后才获取的数据把
                myChart.setOption({
                    color: ['#5470c6'],
                    legend: {},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['体检人数', '男生数量', '女生数量', '收入', '个检人数', '单位体检人数']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [res.data.tijianNum, res.data.boysNum, res.data.girlsNum, {
                                value: res.data.moneysNum,
                                itemStyle: {
                                    color: '#a90000'
                                }
                            }, res.data.personNum, res.data.tuanDuiNum],
                            type: 'bar'
                        }
                    ]
                });
            })


        },
        // 时间
@@ -105,15 +114,43 @@
            this.startTime = val;
        },

        // / 处理默认选中当前日期
        getNowTime() {
            var curDate = new Date().getTime();
            var dayNum = 7 * 24 * 3600 * 1000;
            var threeDays = curDate - dayNum;
            var sDay = this.getLocalTime(threeDays);
            var end = this.getLocalTime(curDate);
            this.startTime = [sDay, end];
        },
        add0(m) {
            return m < 10 ? "0" + m : m;
        },
        getLocalTime(nS) {
            var time = new Date(nS);
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            var h = time.getHours();
            var mm = time.getMinutes();
            return (
                y +
                "-" +
                this.add0(m) +
                "-" +
                this.add0(d) +
                " " +
                this.add0(h) +
                ":" +
                this.add0(mm)
            );
        },

        // 搜索
        submitForm() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
    },

    mounted() {
        this.getList();
    },
};
</script>