su

su1124

2024-03-08 7672bba9fc11315da4c42cba74504b7fd417df0c

 src/views/standard/renshunum/index.vue

@@ -1,22 +1,37 @@
<template>
    <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="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>
                <el-button type="primary" @click="submitForm">搜索</el-button>
            </el-form-item>
        </el-form>
  <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="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>
        <el-button type="primary" @click="submitForm">搜索</el-button>
      </el-form-item>
    </el-form>

        <div class="data-view">
            <div id="main"></div>
        </div>
    <div class="data-view">
      <div id="main"></div>
    </div>
  </div>
</template>
    
        
@@ -27,143 +42,170 @@
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: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        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: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
  name: "chart",
  data() {
    return {
      pickerOptions: {
        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]);
            },
            value1: "",
            DateList: [],
            startTime: [],
            dateAll: [],
            queryParams: {
                date: null,
                beginTime: null,
                endTime: null,
          },
          {
            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: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      DateList: [],
      startTime: [],
      dateAll: [],
      queryParams: {
        date: null,
        beginTime: null,
        endTime: null,
      },
    };
  },
  created() {
    // 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"),
        ];
      });
    },
    created() {
        this.getNowTime();
        this.getList();
    getList() {
      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",
            },
          ],
        });
      });
    },
    // 时间
    dateChangebirthday1(val) {
      this.startTime = val;
    },

    methods: {
        getList() {
            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'
                        }
                    ]
                });
            })


        },
        // 时间
        dateChangebirthday1(val) {
            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();
        },
    // / 处理默认选中当前日期
    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();
    },
  },
};
</script>
<style>
.data-view {
    margin: 5px 15px;
    height: 580px;
  margin: 5px 15px;
  height: 580px;
}

#main {
    padding: 10px;
    height: 580px;
    background-color: #fff;
  padding: 10px;
  height: 580px;
  background-color: #fff;
}
</style>