su

su1124

2024-03-08 7672bba9fc11315da4c42cba74504b7fd417df0c

 src/views/standard/tijiancom/index.vue

@@ -1,10 +1,25 @@
<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="value1" type="datetimerange" align="right" start-placeholder="开始日期"
                    :picker-options="pickerOptions" 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="value1"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          :picker-options="pickerOptions"
          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>
@@ -26,37 +41,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: [],
@@ -70,51 +91,70 @@
        };
    },


  created() {
    this.getdate();
  },
    methods: {
    getdate() {
      getNewDateList().then((res) => {
        this.value1 = [
          moment(res.data).format("YYYY-MM-DD 00:00:00"),
          moment(res.data).format("YYYY-MM-DD 23:59:00"),
        ];
      });
    },
        getList() {
            this.queryParams.startDate = this.startTime[0];
            this.queryParams.endDate = this.startTime[1];
            let myChart = this.$echarts.init(document.getElementById("main"));
            //你进入页面先把图表渲染了  然后才获取的数据把
            myChart.setOption({
               
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['一般检查','外科','内科', '化验科', '检验科', '心电图室','妇科','B超室','新生儿科', '儿童科']
          type: "category",
          data: [
            "一般检查",
            "外科",
            "内科",
            "化验科",
            "检验科",
            "心电图室",
            "妇科",
            "B超室",
            "新生儿科",
            "儿童科",
          ],
                },
                yAxis: {
                    type: 'value'
          type: "value",
                },
                legend: {
                    data: ['剩余体检人数', '已完成体检人数']
          data: ["剩余体检人数", "已完成体检人数"],
                },

                series: [{
                    name: '剩余体检人数',
                    color: ['#2f4554'],
        series: [
          {
            name: "剩余体检人数",
            color: ["#2f4554"],
                    data: [100, 150, 120, 90, 50, 130, 110,80,90,100],
                    type: 'bar',
            type: "bar",
                    label: {
                        // show: true,
                        position: 'right'
                    }
              position: "right",
            },
                },
                {
                    name: '已完成体检人数',
                    color: ['#c23531'],
            name: "已完成体检人数",
            color: ["#c23531"],
                    data: [120, 130, 110, 70, 60, 110, 140,80,90,80],
                    type: 'bar',
            type: "bar",
                    label: {
                        // show: true,
                        position: 'right'
                    }
                }]


              position: "right",
            },
          },
        ],
            });

        },
        // 时间
        dateChangebirthday1(val) {