zdqy_firm_former/src/views/component/statistics/consult.vue

<template>
  <div>
    <el-dialog center append-to-body title="医疗咨询记录统计" :visible.sync="dialogVisible" width="80%" top
      :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="date-wrap">
        <div class="date-label">编制时间：</div>
        <el-date-picker v-model="monthValues" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
          align="left" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
          <el-button type="primary" @click="searchData" style="margin-left: 20px;">查询</el-button>
      </div>


      <div class="chart-wrap">
        <div class="chart-item">
          <div id="echart3" style="width: 100%; height: 100%"></div>
        </div>
        <div class="chart-item">
          <div id="echart4" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="chart-wrap">
        <div class="chart-item">
          <div id="echart6" style="width: 100%; height: 100%"></div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  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]);
          }
        }]
      },
      monthValues: [],
      diDian: ''
    }
  },
  watch: {
  },
  mounted() {
    const { first = '', second = '' } = this.$store.getters.level || {}
    this.diDian = second || first

    const today = new Date();
    const halfYearAgo = new Date();
    halfYearAgo.setMonth(halfYearAgo.getMonth() - 6);
    this.monthValues = [this.formatDate(halfYearAgo), this.formatDate(today)]

    this.$nextTick(() => {
      this.formatData3()
      this.getFangshi()
      this.getMonths()
    })
  },
  methods: {
    searchData() {
      this.formatData3()
      this.getFangshi()
      this.$message.success('查询成功')
    },

    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    changeDate(value) {
      this.formatData3()
      this.getFangshi()
    },
    // 关闭当前窗口
    closeDialog(needRefresh) {
      this.$emit('update:dialogVisible', false, needRefresh)
    },
    async formatData3() {
      const res = await this.$common.request('query', {
        key: 'hqylzxjlzxlxsj',
        params: [this.monthValues[0], this.monthValues[1], this.diDian]
      })
      const { data = [] } = res.variables

      var chartDom = document.getElementById('echart3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '咨询类型占比',
          textStyle: { fontSize: 16 },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          confine: true,  // 把提示框限制在图表容器内
          extraCssText: 'max-width: 400px; white-space: normal; word-wrap: break-word;',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: { width: 200, overflow: 'break' }
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      option && myChart.setOption(option);

    },

    async getFangshi() {

      const res = await this.$common.request('query', {
        key: 'hqylzxzxkssj',
        params: [this.monthValues[0], this.monthValues[1], this.diDian]
      })
      const { data = [] } = res.variables

      var chartDom = document.getElementById('echart4');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '咨询科室占比',
          textStyle: { fontSize: 16 },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          confine: true,  // 把提示框限制在图表容器内
          extraCssText: 'max-width: 400px; white-space: normal; word-wrap: break-word;',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: { width: 200, overflow: 'break' }
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option);
    },

    async getMonths() {

      const res = await this.$common.request('query', {
        key: 'hqylzxjl12ysj',
        params: [this.diDian]
      })
      const { data = [] } = res.variables

      let xAxis = []
      let yAxis = []
      data.forEach(item => {
        xAxis.push(item.months)
        yAxis.push(item.data_count)
      })

      var chartDom = document.getElementById('echart6');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: '近12个月趋势',
          textStyle: { fontSize: 16 },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: 30
          },
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yAxis,
            type: 'line'
          }
        ]
      }
      option && myChart.setOption(option);

    }
  }
}
</script>

<style scoped lang="scss">
.date-wrap {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #333;
  font-size: 16px;
}

.chart-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  box-sizing: border-box;

  .chart-item {
    width: 50%;
    height: 300px;
    margin: 20px 0;
    overflow: hidden;
  }
}


.dialog-footer {
  display: flex;
  justify-content: center;
}
</style>