Merge branch '20200710_pc_vue_new_branch' of http://git.shengws.com/csx/Vue_New into 20200710_pc_vue_new_branch

src/xt_pages/qcd/indicatorControlAnalysis/components/office.vue

@@ -108,18 +108,18 @@
 
       </el-table>
 
-      <!--<el-pagination-->
-        <!--align="right"-->
-        <!--@size-change="handleSizeChange"-->
-        <!--@current-change="handleCurrentChange"-->
-        <!--:current-page="query.page"-->
-        <!--:page-sizes="[10, 20, 50, 100]"-->
-        <!--:page-size="10"-->
-        <!--background-->
-        <!--style="margin-top:20px;"-->
-        <!--layout="total, sizes, prev, pager, next, jumper"-->
-        <!--:total="total"-->
-      <!--&gt;</el-pagination>-->
+      <el-pagination
+        align="right"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="query.page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="10"
+        background
+        style="margin-top:20px;"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
     </div>
   </div>
 </template>

src/xt_pages/qcd/indicatorControlAnalysis/patientInspectionDetail.vue

@@ -104,7 +104,10 @@
           <div class="tableTitle">统计图</div>
           <div>
             <!--<line-chart :options="options2"></line-chart>-->
-            <line-chart :options="options2"></line-chart>
+            <line-chart v-if="this.$route.query.range_type == 1" :options="options"></line-chart>
+            <line-chart v-if="this.$route.query.range_type == 2" :options="options2"></line-chart>
+
+
 
           </div>
         </div>
@@ -247,6 +250,171 @@
             }
           ]
         },
+        options: {
+          title: {
+            text: "ECharts 入门示例"
+          },
+          tooltip: {},
+          legend: {
+            data: [""],
+            left: 0
+          },
+          xAxis: {
+            data: [],
+            axisLabel: {
+              interval: 0,
+              formatter: function(value) {
+                var ret = ""; //拼接加\n返回的类目项
+                var maxLength = 4; //每项显示文字个数
+                var valLength = value.length; //X轴类目项的文字个数
+                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+                if (rowN > 1) {
+                  //如果类目项的文字大于3,
+                  for (var i = 0; i < rowN; i++) {
+                    var temp = ""; //每次截取的字符串
+                    var start = i * maxLength; //开始截取的位置
+                    var end = start + maxLength; //结束截取的位置
+                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                    temp = value.substring(start, end) + "\n";
+                    ret += temp; //凭借最终的字符串
+                  }
+                  return ret;
+                } else {
+                  return value;
+                }
+              },
+            }
+          },
+          yAxis: {
+            axisLabel: {
+              formatter: "{value} %"
+            },
+            show: false
+          },
+          series: [
+            {
+              name: "",
+              type: "line",
+              data: [],
+              barWidth: 30,
+              label: {
+                normal: {
+                  show: true,
+                  position: "top",
+                  formatter: "{c}"
+                }
+              },
+              //配置样式
+              itemStyle: {
+                //通常情况下：
+
+                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+                normal: {
+                  color: function (params) {
+                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
+                    var colorList = [
+                      ["#A9E0F3", "#9FBDFC"],
+
+                      ["#FFD7C0", "#FF9994"]
+                    ];
+
+                    var index = params.dataIndex;
+                    if (params.dataIndex >= colorList.length) {
+                      index = params.dataIndex % colorList.length;
+                    }
+
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {offset: 0, color: colorList[index][0]},
+                      // { offset: 0.5, color: colorList[index][1] },
+                      {offset: 1, color: colorList[index][1]}
+                    ]);
+                  },
+                  lineStyle: {
+                    color: '#5B98FF' //改变折线颜色
+                  },
+                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+                },
+
+                //鼠标悬停时：
+                emphasis: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+              }
+            },
+            {
+              name: "",
+              type: "line",
+              data: [],
+              barWidth: 30,
+              label: {
+                normal: {
+                  show: true,
+                  position: "top",
+                  formatter: "{c}"
+                }
+              },
+              //配置样式
+              itemStyle: {
+                //通常情况下：
+
+                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+                normal: {
+                  color: function (params) {
+                    //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
+                    var colorList = [
+                      ["#A9E0F3", "#9FBDFC"],
+
+                      ["#FFD7C0", "#FF9994"]
+                    ];
+
+                    var index = params.dataIndex;
+                    if (params.dataIndex >= colorList.length) {
+                      index = params.dataIndex % colorList.length;
+                    }
+
+                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      {offset: 0, color: colorList[index][0]},
+                      // { offset: 0.5, color: colorList[index][1] },
+                      {offset: 1, color: colorList[index][1]}
+                    ]);
+                  },
+                  lineStyle: {
+                    color: '#f56c6c' //改变折线颜色
+                  },
+                  barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+                },
+
+                //鼠标悬停时：
+                emphasis: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+              }
+            }
+
+          ],
+          dataZoom: [
+            {
+              //Y轴固定,让内容滚动
+              type: "slider",
+              show: false,
+              xAxisIndex: [0],
+              start: 1,
+              end: 20, //设置X轴刻度之间的间隔(根据数据量来调整)
+              zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+            },
+            {
+              type: "inside",
+              xAxisIndex: [0],
+              start: 1,
+              end: 20,
+              zoomLock: true //锁定区域禁止缩放
+            }
+          ],
+        },
         query: {
           patient_id: this.$route.query.patient_id,
           start_time: '',
@@ -415,6 +583,9 @@
         }
       },
       GetPatientInspectionIndexChart(params) {
+        this.options.xAxis.data = []
+        this.options.series[0].data = []
+
         this.options2.xAxis.data = []
         this.options2.series[0].data = []
         GetPatientInspectionIndexChart(params)
@@ -426,17 +597,19 @@
               let otherData = []
 
               for (let i = 0; i < resp.data.data.length; i++) {
-                this.options2.xAxis.data.push(resp.data.data[i].date)
-
-                if (this.query.range_type == 1) {
-                  this.options2.series[0].data.push(resp.data.data[i].value)
-                } else {
-                  this.options2.series[0].data.push('1')
+                if (this.$route.query.range_type == 1) {
+                  this.options.xAxis.data.push(resp.data.data[i].date)
+                  this.options.series[0].data.push(resp.data.data[i].value)
+                }else{
+                  this.options2.series[0].data.push("1")
+                  this.options2.xAxis.data.push(resp.data.data[i].date)
                   tempData.push(resp.data.data[i].value)
                   otherData.push(resp.data.data[i].value)
                 }
               }
 
+              console.log(this.options.series[0].data)
+
               //获取无法确定选项的颜色
               if (this.query.range_type == 2) {
                 //去重复