su

su1124

2024-03-08 7672bba9fc11315da4c42cba74504b7fd417df0c

 src/views/standard/renshunum/index.vue

@@ -1,11 +1,26 @@
<template>
    <div>
        <el-form :model="queryParams" ref="tableList" :inline="true" label-width="76px" style="margin: 10px 10px">
    <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="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
          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>
@@ -27,37 +42,43 @@
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
import { getNewDateList } from "@/api/hosp/order";
import moment from "moment";

export default {
    name: "chart",
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
        shortcuts: [
          {
            text: "最近一周",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
              picker.$emit("pick", [start, end]);
            },
          },
        ],
            },
            value1: "",
            DateList: [],
@@ -71,43 +92,64 @@
        };
    },
    created() {
        this.getNowTime();
    // this.getNowTime();
        this.getList();
    this.getdate();
    },

    methods: {
    getdate() {
      getNewDateList().then((res) => {
        this.startTime = [
          moment(res.data).format("YYYY-MM-DD 00:00:00"),
          moment(res.data).format("YYYY-MM-DD 23:59:00"),
        ];
      });
    },
        getList() {
            this.queryParams.beginTime = this.startTime[0];
            this.queryParams.endTime = this.startTime[1];
            getTiaoNumsByDate(this.queryParams).then(res => {
      getTiaoNumsByDate(this.queryParams).then((res) => {
                let myChart = this.$echarts.init(document.getElementById("main"));
                //你进入页面先把图表渲染了  然后才获取的数据把
                myChart.setOption({
                    color: ['#5470c6'],
          color: ["#5470c6"],
                    legend: {},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['体检人数', '男生数量', '女生数量', '收入', '个检人数', '单位体检人数']
            type: "category",
            data: [
              "体检人数",
              "男生数量",
              "女生数量",
              "收入",
              "个检人数",
              "单位体检人数",
            ],
                    },
                    yAxis: {
                        type: 'value'
            type: "value",
                    },
                    series: [
                        {
                            data: [res.data.tijianNum, res.data.boysNum, res.data.girlsNum, {
              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'
                        }
                    ]
                    color: "#a90000",
                  },
                },
                res.data.personNum,
                res.data.tuanDuiNum,
              ],
              type: "bar",
            },
          ],
                });
            })


      });
        },
        // 时间
        dateChangebirthday1(val) {