su

su1124

2024-03-08 7672bba9fc11315da4c42cba74504b7fd417df0c

 src/views/standard/tijiancom/index.vue

@@ -1,21 +1,36 @@
<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="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>
                <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="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>
        <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>
    
        
@@ -26,123 +41,148 @@
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,
                startDate: null,
                endDate: 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,
        startDate: null,
        endDate: null,
      },
    };
  },

  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"),
        ];
      });
    },


    methods: {
        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超室','新生儿科', '儿童科']
                },
                yAxis: {
                    type: 'value'
                },
                legend: {
                    data: ['剩余体检人数', '已完成体检人数']
                },

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


            });

    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超室",
            "新生儿科",
            "儿童科",
          ],
        },
        // 时间
        dateChangebirthday1(val) {
            this.startTime = val;
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["剩余体检人数", "已完成体检人数"],
        },

        // 搜索
        submitForm() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        series: [
          {
            name: "剩余体检人数",
            color: ["#2f4554"],
            data: [100, 150, 120, 90, 50, 130, 110, 80, 90, 100],
            type: "bar",
            label: {
              // show: true,
              position: "right",
            },
          },
          {
            name: "已完成体检人数",
            color: ["#c23531"],
            data: [120, 130, 110, 70, 60, 110, 140, 80, 90, 80],
            type: "bar",
            label: {
              // show: true,
              position: "right",
            },
          },
        ],
      });
    },
    // 时间
    dateChangebirthday1(val) {
      this.startTime = val;
    },

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

  mounted() {
    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>