zdqy_firm_former/src/views/component/statistics/clinical.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>
      <el-row class="custom-wrap">
        <el-col v-if="showEcharts.includes('echart3')" :span="12">
          <div class="chart-item"
            ><div id="echart3" style="width: 100%; height: 100%"></div></div
        ></el-col>
        <el-col v-if="showEcharts.includes('echart4')" :span="12">
          <div class="chart-item"
            ><div id="echart4" style="width: 100%; height: 100%"></div></div
        ></el-col>
        <el-col v-if="showEcharts.includes('echart5')" :span="12">
          <div class="chart-item"
            ><div id="echart5" style="width: 100%; height: 100%"></div></div
        ></el-col>
        <el-col v-if="showEcharts.includes('echart6')" :span="12">
          <div class="chart-item"
            ><div id="echart6" style="width: 100%; height: 100%"></div></div
        ></el-col>
      </el-row>
      <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: '',
      showEcharts:
        this.$store.getters?.setting?.clinical?.showEcharts ||
        'echart3,echart4,echart5,echart6'
    }
  },
  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.getKeshi()
      this.getMonths()
    })
  },
  methods: {
    searchData() {
      this.formatData3()
      this.getFangshi()
      this.getKeshi()
      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) {
    // console.log('riqi ', value)
    // this.formatData3()
    // this.getFangshi()
    // this.getKeshi()
    // },
    // 关闭当前窗口
    closeDialog(needRefresh) {
      this.$emit('update:dialogVisible', false, needRefresh)
    },
    async formatData3() {
      const res = await this.$common.request('query', {
        key: 'hqlcgtlbgtztsj',
        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'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        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: 'hqlcgtgtfssj',
        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'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },

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

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

      option = {
        title: {
          text: '临床科室占比',
          textStyle: { fontSize: 16 },
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },

        legend: {
          orient: 'vertical',
          left: 'left'
        },
        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: 'hqlcgtlbj12ysj',
        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;
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
.custom-wrap {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px;
  box-sizing: border-box;
  .chart-item {
    width: 100%;
    height: 300px;
    margin: 20px 0;
    overflow: hidden;
  }
}
</style>