修改

src/xt_pages/qcd/components/LineChart.vue

@@ -79,15 +79,22 @@ export default {
     this.chart = null;
   },
   watch: {
-    options: function() {
-      this.chartOptions = this.options;
-      this.initChart();
-      this.__resizeHanlder = debounce(() => {
-        if (this.chart) {
-          this.chart.resize();
-        }
-      }, 100);
-      window.addEventListener("resize", this.__resizeHanlder);
+    // options: function(a) {
+    //   console.log(a)
+    //   this.chartOptions = this.options;
+    //   this.initChart();
+    //   this.__resizeHanlder = debounce(() => {
+    //     if (this.chart) {
+    //       this.chart.resize();
+    //     }
+    //   }, 100);
+    //   window.addEventListener("resize", this.__resizeHanlder);
+    // },
+    options:{
+      handler(newValue,oldValue){
+        this.getInitChart();
+      },
+      deep:true
     },
 
     chartData: {
@@ -99,9 +106,19 @@ export default {
   },
   created() {
     this.chartOptions = this.options;
-    console.log("this.chartOptions", this.chartOptions, this.options);
+    // console.log("this.chartOptions", this.chartOptions, this.options);
   },
   methods: {
+    getInitChart() {
+      this.chartOptions = this.options;
+      this.initChart();
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    },
     // setOptions({ expectedData, actualData } = {}) {
     //   this.chart.setOption({
     //     title: {

src/xt_pages/qcd/treatmentControlAnalysis/components/TimeAll.vue

@@ -28,6 +28,7 @@
         align="right"
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
+        :picker-options="pickerOptions"
       ></el-date-picker>
       <span class>-</span>
       <el-date-picker
@@ -41,6 +42,7 @@
         align="right"
         format="yyyy-MM-dd"
         value-format="yyyy-MM-dd"
+        :picker-options="pickerOptions"
       ></el-date-picker>
     </div>
     <div class="tableTitle">统计图</div>
@@ -66,17 +68,13 @@
           :key="index"
         >
           <template slot-scope="scope">
-            {{
-              scope.row.data[modeItem.id].number
-                ? scope.row.data[modeItem.id].number
-                : ""
-            }}
+            {{ scope.row.data[modeItem.id].number ? scope.row.data[modeItem.id].number : "" }}
           </template>
         </el-table-column>
 
         <el-table-column
           fixed="right"
-          label="总数"
+          label="总次数"
           width="80"
           property="total"
           align="center"
@@ -89,7 +87,7 @@
         @current-change="handleCurrentChange"
         :current-page="listQuery.page"
         :page-sizes="[20, 40, 60, 80,100]"
-        :page-size="20"
+        :page-size="10"
         background
         style="margin-top:20px;"
         layout="total, sizes, prev, pager, next, jumper"
@@ -124,16 +122,13 @@ export default {
         },
       ],
       chart: {
-        title: {
-          text: "ECharts 入门示例"
-        },
         tooltip: {},
         legend: {
-          data: ["次数"],
+          data: ["次"],
           left: 0
         },
         xAxis: {
-          data: ["达标", "未达标"]
+          data: []
         },
         yAxis: {
           axisLabel: {
@@ -143,9 +138,9 @@ export default {
         },
         series: [
           {
-            name: "次数",
+            name: "次",
             type: "bar",
-            data: ["78.57", "50"],
+            data: [],
             barWidth: 30,
             label: {
               normal: {
@@ -164,8 +159,14 @@ export default {
                   //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                   var colorList = [
                     ["#A9E0F3", "#9FBDFC"],
-
-                    ["#FFD7C0", "#FF9994"]
+                    ["#A9E0F3", "#9FBDFC"],
+                    ["#A9E0F3", "#9FBDFC"],
+                    ["#FFD7C0", "#FF9994"],
+                    ["#FFD7C0", "#FF9994"],
+                    ["#FFD7C0", "#FF9994"],
+                    ["#D7C3FD", "#B3A8F7"],
+                    ["#D7C3FD", "#B3A8F7"],
+                    ["#D7C3FD", "#B3A8F7"]
                   ];
 
                   var index = params.dataIndex;
@@ -183,11 +184,11 @@ export default {
               },
 
               //鼠标悬停时：
-              emphasis: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
+              // emphasis: {
+              //   shadowBlur: 10,
+              //   shadowOffsetX: 0,
+              //   shadowColor: "rgba(0, 0, 0, 0.5)"
+              // }
             }
           }
         ]
@@ -207,6 +208,12 @@ export default {
         xAxis: [],
         series: []
       },
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear()-1)).getTime() - 24 * 3600 * 1000;
+          return time.getTime() > Date.now() || time.getTime() < threeMonths;;
+        }
+      }, 
     };
   },
   methods: {
@@ -250,16 +257,13 @@ export default {
       geStatistics(this.listQuery).then(response=>{
         if(response.data.state === 1){
           var dtd =  response.data.data.statistics
-         console.log("dtd",dtd)
-            var dd = {};
+          console.log("dtd",dtd)
+          var dd = {};
           for (const index in dtd) {
             if (!(dtd[index].date in dd)) {
-              dd[dtd[index].date] = {};
+               dd[dtd[index].date] = {};
             }
-            if (
-              !(dtd[index].mode_id in dd[dtd[index].date]) &&
-              dtd[index].mode_id != "0"
-            ) {
+            if (!(dtd[index].mode_id in dd[dtd[index].date]) && dtd[index].mode_id != "0") {
               dd[dtd[index].date][dtd[index].mode_id] = dtd[index];
             }
           }
@@ -278,78 +282,40 @@ export default {
                 dd[key][mkey] = {
                   mode: this.modeOptions[mkey].name,
                   mode_id: mkey,
-                  number: 0,
-                  date: key
+                  number: 0
                 };
               }
             }
             this.tableData.push({ date: key, data: dd[key], total: total });
           }
           var ttd = response.data.data.ttd
-         console.log("ttd",ttd)
-         // for(let i=0;i<ttd.length;i++){
-         //    if(ttd[i].mode_id == "1"){
-         //       ttd[i].mode_id == "HD"
-         //    }
-         //     if(ttd[i].mode_id == "2"){
-         //       ttd[i].mode_id == "HDF"
-         //    }
-         //     if(ttd[i].mode_id == "3"){
-         //       ttd[i].mode_id == "HD+HP"
-         //    }
-         //     if(ttd[i].mode_id == "4"){
-         //       ttd[i].mode_id == "HP"
-         //    }
-         //     if(ttd[i].mode_id == "5"){
-         //       ttd[i].mode_id == "HF"
-         //    }
-         //     if(ttd[i].mode_id == "6"){
-         //       ttd[i].mode_id == "SCUF"
-         //    }
-         //     if(ttd[i].mode_id == "7"){
-         //       ttd[i].mode_id == "IUF"
-         //    }
-         //     if(ttd[i].mode_id == "8"){
-         //       ttd[i].mode_id == "HFHD"
-         //    }
-         //     if(ttd[i].mode_id == "9"){
-         //       ttd[i].mode_id == "HFHD+HP"
-         //    }
-         //     if(ttd[i].mode_id == "10"){
-         //       ttd[i].mode_id == "PHF"
-         //    }
-         //     if(ttd[i].mode_id == "11"){
-         //       ttd[i].mode_id == "HFR"
-         //    }
-         //     if(ttd[i].mode_id == "12"){
-         //       ttd[i].mode_id == "HDF+HP"
-         //    }
-         //    if(ttd[i].mode_id == "13"){
-         //       ttd[i].mode_id == "CRRT"
-         //    }
-         //      if(ttd[i].mode_id == "14"){
-         //       ttd[i].mode_id == "腹水回输"
-         //    }
-         //      if(ttd[i].mode_id == "15"){
-         //       ttd[i].mode_id == "HD前置换"
-         //    }
-         //      if(ttd[i].mode_id == "16"){
-         //       ttd[i].mode_id == "HD后置换"
-         //    }
-         //      if(ttd[i].mode_id == "17"){
-         //       ttd[i].mode_id == "HDF前置换"
-         //    }
-         //      if(ttd[i].mode_id == "18"){
-         //       ttd[i].mode_id == "HDF后置换"
-         //    }
-         //
-         //      if(ttd[i].mode_id == "19"){
-         //       ttd[i].mode_id == IUF+HD
-         //    }
-        // }
+          console.log("ttd",ttd)
+          var modeMap = {};
+          var batotal = 0;
+          for (const index in ttd) {
+            if (ttd[index].mode_id == "0") {
+              continue;
+            }
+            modeMap[ttd[index].mode_id] = ttd[index];
+          }
+          console.log(111,modeMap)
+          for (const key in this.modeOptions) {
+            this.modesData.xAxis.push(this.modeOptions[key].name);
+            if (key in modeMap) {
+              this.modesData.series.push(parseInt(modeMap[key].number));
+              batotal += parseInt(modeMap[key].number);
+            } else {
+              this.modesData.series.push(0);
+            }
+          }
+          
+          this.chart.series[0].data = this.modesData.series
+          this.chart.xAxis.data = this.modesData.xAxis
+          console.log(this.chart.series[0].data)
+          console.log(this.chart.xAxis.data)
 
           this.total =  response.data.data.total
-           console.log("total",this.total)
+          console.log("total",this.total)
 
         }
       })
@@ -409,5 +375,10 @@ export default {
   .cell {
     text-align: center;
   }
+  .el-table{
+    ::-webkit-scrollbar{
+      height: 15px;
+    }
+  }
 }
 </style>