task-5503 与临床沟通记录列表、医疗咨询记录

src/views/component/statistics/clinical.vue

@@ -0,0 +1,331 @@
+<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" @change="changeDate" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
+      </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="echart5" style="width: 100%; height: 100%"></div>
+        </div>
+        <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.getKeshi()
+      this.getMonths()
+    })
+  },
+  methods: {
+
+    // 格式化日期为 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, // 强制显示所有标签
+          },
+          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>

src/views/component/statistics/consult.vue

@@ -0,0 +1,281 @@
+<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" @change="changeDate" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
+      </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: {
+
+    // 格式化日期为 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'
+        },
+
+        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: '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'
+        },
+
+        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: '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, // 强制显示所有标签
+          },
+          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>