与临床沟通记录列表统计图修改

src/views/component/statistics/clinical.vue

@@ -1,32 +1,48 @@
 <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">
+    <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>
+        <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="echart5" style="width: 100%; height: 100%"></div>
-        </div>
-        <div class="chart-item">
-          <div id="echart6" style="width: 100%; height: 100%"></div>
-        </div>
-      </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>
@@ -46,45 +62,51 @@ export default {
   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]);
+        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: ''
+      diDian: '',
+      showEcharts:
+        this.$store.getters?.setting?.clinical?.showEcharts ||
+        'echart3,echart4,echart5,echart6'
     }
   },
-  watch: {
-  },
+  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);
+    const today = new Date()
+    const halfYearAgo = new Date()
+    halfYearAgo.setMonth(halfYearAgo.getMonth() - 6)
     this.monthValues = [this.formatDate(halfYearAgo), this.formatDate(today)]
 
     this.$nextTick(() => {
@@ -95,7 +117,6 @@ export default {
     })
   },
   methods: {
-
     searchData() {
       this.formatData3()
       this.getFangshi()
@@ -105,17 +126,17 @@ export default {
 
     // 格式化日期为 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}`;
+      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()
+    // console.log('riqi ', value)
+    // this.formatData3()
+    // this.getFangshi()
+    // this.getKeshi()
     // },
     // 关闭当前窗口
     closeDialog(needRefresh) {
@@ -128,9 +149,9 @@ export default {
       })
       const { data = [] } = res.variables
 
-      var chartDom = document.getElementById('echart3');
-      var myChart = echarts.init(chartDom);
-      var option;
+      var chartDom = document.getElementById('echart3')
+      var myChart = echarts.init(chartDom)
+      var option
 
       option = {
         title: {
@@ -161,21 +182,19 @@ export default {
           }
         ]
       }
-      option && myChart.setOption(option);
-
+      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;
+      var chartDom = document.getElementById('echart4')
+      var myChart = echarts.init(chartDom)
+      var option
 
       option = {
         title: {
@@ -207,20 +226,19 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option);
+      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;
+      var chartDom = document.getElementById('echart5')
+      var myChart = echarts.init(chartDom)
+      var option
 
       option = {
         title: {
@@ -252,10 +270,9 @@ export default {
         ]
       }
 
-      option && myChart.setOption(option);
+      option && myChart.setOption(option)
     },
     async getMonths() {
-
       const res = await this.$common.request('query', {
         key: 'hqlcgtlbj12ysj',
         params: [this.diDian]
@@ -264,14 +281,14 @@ export default {
 
       let xAxis = []
       let yAxis = []
-      data.forEach(item => {
+      data.forEach((item) => {
         xAxis.push(item.months)
         yAxis.push(item.data_count)
       })
 
-      var chartDom = document.getElementById('echart6');
-      var myChart = echarts.init(chartDom);
-      var option;
+      var chartDom = document.getElementById('echart6')
+      var myChart = echarts.init(chartDom)
+      var option
       option = {
         title: {
           text: '近12个月趋势',
@@ -299,8 +316,7 @@ export default {
           }
         ]
       }
-      option && myChart.setOption(option);
-
+      option && myChart.setOption(option)
     }
   }
 }
@@ -317,24 +333,20 @@ export default {
   font-size: 16px;
 }
 
-.chart-wrap {
+.dialog-footer {
   display: flex;
-  align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
+}
+.custom-wrap {
+  display: flex;
+  flex-wrap: wrap;
   padding: 0 20px;
   box-sizing: border-box;
-
   .chart-item {
-    width: 50%;
+    width: 100%;
     height: 300px;
     margin: 20px 0;
     overflow: hidden;
   }
 }
-
-
-.dialog-footer {
-  display: flex;
-  justify-content: center;
-}
 </style>