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

package-lock.json

         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
           "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
           "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "resolved": false,
           "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
           "resolved": false,
           "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "resolved": false,
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },

src/xt_pages/qcd/basicInformationAnalysis.vue

 <style lang="scss">
 .infoBox {
   .infoOne {
+    .el-progress-bar__outer{
+      height:10px !important;
+    }
     .borderBox {
       .el-progress-bar__inner {
         background: linear-gradient(

src/xt_pages/qcd/components/LineChart1.vue

+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "230px"
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    },
+    title: {
+      type: String,
+      default: "chart"
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions: {
+        xAxis: [],
+        legend: [],
+        series: []
+      }
+    };
+  },
+  mounted() {
+    this.initChart();
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    if (this.autoResize) {
+      window.removeEventListener("resize", this.__resizeHanlder);
+    }
+
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
+
+    this.chart.dispose();
+    this.chart = null;
+  },
+  watch: {
+    // 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: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      }
+    }
+  },
+  created() {
+    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: {
+    //         text: this.title,
+    //     },
+    //     xAxis: {
+    //       data: this.chartOptions.xAxis,
+    //       boundaryGap: false,
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     grid: {
+    //       left: 50,
+    //       right: 50,
+    //       bottom: 20,
+    //       top: 30,
+    //       containLabel: true
+    //     },
+    //     tooltip: {
+    //       trigger: 'axis',
+    //       axisPointer: {
+    //         type: 'cross'
+    //       },
+    //       padding: [5, 10]
+    //     },
+    //     yAxis: {
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     legend: {
+    //       data: this.chartOptions.legend,
+    //     },
+    //     series: this.chartOptions.series,
+    //   })
+    // },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        // title: {
+        //   text: this.title
+        // },
+        xAxis: {
+          data: this.chartOptions.xAxis.data,
+          // boundaryGap: false
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //x轴颜色
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function(value) {
+              var ret = ""; //拼接加\n返回的类目项
+              var maxLength = 10; //每项显示文字个数
+              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;
+              }
+            },
+            textStyle: {
+              color:"#2F3133"
+            }
+          }
+        },
+        grid: {
+          left: 0,
+          right: 50,
+          bottom: 10,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //y轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color:"#2F3133"
+            }
+          },
+          max:2
+        },
+        // dataZoom: [
+        //   {
+        //     //Y轴固定,让内容滚动
+        //     type: "slider",
+        //     show: false,
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
+        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+        //   },
+        //   {
+        //     type: "inside",
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80,
+        //     zoomLock: true //锁定区域禁止缩放
+        //   }
+        // ],
+        legend: this.chartOptions.legend,
+        series: this.chartOptions.series,
+        dataZoom: this.chartOptions.dataZoom,
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.clear();
+      this.setOptions(this.chartData);
+    }
+  }
+};
+</script>

src/xt_pages/qcd/indicatorControlAnalysis/bloodPressure.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px;"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
           ></el-date-picker>
         </div>
         <el-container>
-          <div style="width:150px">
+          <div style="width:160px">
             <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
+            
 
             <el-table :data="patientsData" ref="table" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
                       :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                       highlight-current-row
                       @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center"> 
                 <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
               </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
+              <el-table-column prop="name" label="姓名" width="90" align="center">
                 <template slot-scope="scope">{{ scope.row.name }}</template>
               </el-table-column>
             </el-table>
           </div>
           <div style="padding-left:10px;flex:1">
-            <div class="tableTitle">指标趋势</div>
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
               <line-chart :options="bar"></line-chart>
 
                       @click.native.prevent="jumpDetail(scope.row.patient.id)"
                       type="text"
                       size="small"
+                      style="font-size:14px;"
                     >详情</el-button>
                   </template>
                 </el-table-column>
                       { offset: 1, color: colorList[index][1] }
                     ])
                   },
+                  lineStyle:{ 
+                    color:'#409eff' //改变折线颜色
+                  },
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
 
 </style>
 <style lang="scss">
   .page_process {
-
+    .el-tabs{
+      margin-bottom:0px !important;
+    }
     .el-button--medium {
       padding: 10px 8px;
     }

src/xt_pages/qcd/indicatorControlAnalysis/bloodPressureDetails.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px;"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
               </el-autocomplete>
             </el-form-item>
           </el-form>
-        </div>
-        <el-container>
-          <div style="width:150px">
-            <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
-
-            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
-                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                      highlight-current-row
-                      @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
-                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
-              </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
-                <template slot-scope="scope">{{ scope.row.name }}</template>
-              </el-table-column>
-            </el-table>
-
-          </div>
-          <div class="containerRight" style="flex:1;overflow: hidden">
-            <div class="cell clearfix">
               <label class="title" style="text-align:left">
                 <span class="name">血压阶段</span> :
               </label>
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
               ></el-date-picker>
-            </div>
-            <div class="tableTitle">指标趋势</div>
+        </div>
+        <el-container>
+          <div style="width:160px">
+            <div class="tableTitle">患者列表</div>
+            
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+
+          </div>
+          <div class="containerRight" style="flex:1;overflow: hidden">
+            
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
               <line-chart :options="chart"></line-chart>
             </div>

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

     </div>
     <div class="tableTitle">统计表</div>
     <div>
-      <el-table :data="tableData" style="width: 100%" border>
+      <el-table :data="tableData" style="width: 100%" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
         <el-table-column label="姓名" align="center">
           <template slot-scope="scope">
             {{scope.row.patient.name}}
               @click.native.prevent="jumpDetail(scope.row)"
               type="text"
               size="small"
+              style="font-size:14px;"
             >详情
             </el-button>
           </template>
                 normal: {
                   color: function(params) {
                     //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
-                    var colorList = ['#A9E0F3', '#9FBDFC']
+                    var colorList = [
+                    ["#A9E0F3", "#9FBDFC"],
 
-                    // var index = params.dataIndex;
-                    // if (params.dataIndex >= colorList.length) {
-                    //   index = params.dataIndex % colorList.length;
-                    // }
+                    ["#FFD7C0", "#FF9994"],
+                    ["#D7C3FD", "#B3A8F7"],
+                  ];
+
+                    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[0] },

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

             :trigger-on-focus="false"
             placeholder="请输入病人名字"
             @select="handleSelect"
+            style="width:160px;"
           >
             <i class="el-icon-search el-input__icon" slot="suffix"></i>
             <template slot-scope="{ item }">
 
         </el-form-item>
       </el-form>
-      <el-select v-model="query.project_id" placeholder="请选择" style="width:120px;margin-right:20px"
+      <el-select v-model="query.project_id" placeholder="请选择" style="width:120px;margin-right:10px"
                  @change="changeProject">
         <el-option
           v-for="item in project_columns"
       <el-select
         v-model="query.item_id"
         placeholder="请选择"
-        style="width:120px;margin-right:20px"
+        style="width:120px;margin-right:10px"
         @change="changeItem"
       >
         <el-option
       ></el-date-picker>
     </div>
     <el-container>
-      <div style="width:150px">
+      <div style="width:160px">
 
-        <div class="tableTitle">患者列表  <div class="tableTitle">当前患者:{{patient_name}}</div></div>
+        <div class="tableTitle">患者列表</div>
         <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
                   :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                   highlight-current-row
                   @current-change="handleChange">
-          <el-table-column prop="dialysis_no" label="透析号" width="80">
+          <el-table-column prop="dialysis_no" label="透析号" width="70">
             <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
           </el-table-column>
-          <el-table-column prop="name" label="姓名" width="80">
+          <el-table-column prop="name" label="姓名" width="90">
             <template slot-scope="scope">{{ scope.row.name }}</template>
           </el-table-column>
         </el-table>
       </div>
       <div style="padding-left:10px;flex:1">
-        <div class="tableTitle">统计图</div>
+        <div class="tableTitle" style="magrin-bottom:0;">统计图<span style="font-weight:normal">&nbsp;&nbsp;（当前患者:{{patient_name}}）</span></div>
         <div>
           <line-chart :options="options"></line-chart>
         </div>
                   color: function(params) {
                     //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                     var colorList = [
-                      ['#A9E0F3', '#9FBDFC'],
+                      ["#A9E0F3", "#9FBDFC"],
 
-                      ['#FFD7C0', '#FF9994']
-                    ]
+                      ["#FFD7C0", "#FF9994"],
+                      ["#D7C3FD", "#B3A8F7"],
+                    ];
 
                     var index = params.dataIndex
                     if (params.dataIndex >= colorList.length) {
                       { offset: 1, color: colorList[index][1] }
                     ])
                   },
+                  lineStyle:{ 
+                    color:'#409eff' //改变折线颜色
+                  }, 
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
 

src/xt_pages/qcd/indicatorControlAnalysis/monitor.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
           ></el-date-picker>
         </div>
         <el-container>
-          <div style="width:150px">
+          <div style="width:160px">
             <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
+            
 
             <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
                       :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                       highlight-current-row
                       @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
                 <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
               </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
+              <el-table-column prop="name" label="姓名" width="90" align="center">
                 <template slot-scope="scope">{{ scope.row.name }}</template>
               </el-table-column>
             </el-table>
           </div>
           <div style="padding-left:10px;flex:1;width:0;">
-            <div class="tableTitle">指标趋势</div>
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
               <line-chart :options="chart"></line-chart>
             </div>
                       { offset: 1, color: colorList[index][1] }
                     ])
                   },
+                  lineStyle:{ 
+                    color:'#409eff' //改变折线颜色
+                  },
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
 
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                 }
               }
             }
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                 }
               }
             }

src/xt_pages/qcd/indicatorControlAnalysis/patientInspectionDetail.vue

       <bread-crumb :crumbs="crumbs"></bread-crumb>
       <el-button type="primary" @click="$router.back(-1)">返回</el-button>
     </div>
-    <div class="app-container">
+    <div class="app-container pageInspection">
 
       <div class="cell clearfix">
         <label class="title">
           <span class="name">病人搜索</span> :
         </label>
-        <div >
-
-          <el-form :inline="true">
-            <el-form-item label>
-              <el-autocomplete
-                class="checkSearch"
-                style="margin-top: 20px;"
-                popper-class="my-autocomplete"
-                v-model="search_value"
-                :fetch-suggestions="querySearchAsync"
-                :trigger-on-focus="false"
-                placeholder="请输入病人名字"
-                @select="handleSelect"
-              >
-                <i class="el-icon-search el-input__icon" slot="suffix"></i>
-                <template slot-scope="{ item }">
-                  <div class="name">{{ item.name }}</div>
-                </template>
-              </el-autocomplete>
-            </el-form-item>
-          </el-form>
-        </div>
+        <el-form :inline="true">
+          <el-form-item label>
+            <el-autocomplete
+              class="checkSearch"
+              popper-class="my-autocomplete"
+              v-model="search_value"
+              :fetch-suggestions="querySearchAsync"
+              :trigger-on-focus="false"
+              placeholder="请输入病人名字"
+              @select="handleSelect"
+            >
+              <i class="el-icon-search el-input__icon" slot="suffix"></i>
+              <template slot-scope="{ item }">
+                <div class="name">{{ item.name }}</div>
+              </template>
+            </el-autocomplete>
+          </el-form-item>
+        </el-form>
 
       </div>
 
         ></el-date-picker>
       </div>
       <el-container>
-        <div style="width:150px">
+        <div style="width:160px">
           <div class="tableTitle">患者列表</div>
-          <div class="tableTitle">当前患者: {{patient_name}}</div>
+          
 
           <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
                     :row-style="{ color: '#303133' }"
                     :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                     highlight-current-row
                     @current-change="handleChange">
-            <el-table-column prop="dialysis_no" label="透析号" width="80">
+            <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
               <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
             </el-table-column>
-            <el-table-column prop="name" label="姓名" width="80">
+            <el-table-column prop="name" label="姓名" width="90" align="center">
               <template slot-scope="scope">{{ scope.row.name }}</template>
             </el-table-column>
           </el-table>
 
         </div>
         <div style="padding-left:10px;flex:1">
-          <div class="tableTitle">统计图</div>
+          <div class="tableTitle">统计图<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
           <div>
             <!--<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>
+            <line-chart1 v-if="this.$route.query.range_type == 2" :options="options2"></line-chart1>
 
 
 
   const moment = require('moment')
   import echarts from 'echarts'
   import LineChart from '../../qcd/components/LineChart'
+  import LineChart1 from '../../qcd/components/LineChart1'
   import { uParseTime } from '@/utils/tools'
   import BreadCrumb from '@/xt_pages/components/bread-crumb'
   import { getCurrentOrgPatients } from '@/api/common/common'
     name: 'dialysisTotal',
     components: {
       LineChart,
+      LineChart1,
       BreadCrumb
     },
     data() {
               name: '',
               type: 'line',
               data: [],
+              symbol: 'circle',//折线点设置为实心点
+              symbolSize: 15,   //折线点的大小
               barWidth: 30,
               label: {
                 normal: {
                   show: true,
-                  position: 'top',
-                  formatter: '{c}'
+                  position: "top",
+                  formatter: (params) => {
+                      let str = ''
+                      str = this.otherData[params.dataIndex]
+                      return str
+
+                  }
                 }
               },
               //配置样式
 
                 //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                 normal: {
-                  color: function(params) {
+                  color: (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] }
-                    ])
+                    var colorList = [
+                      ['#409EFF','#409EFF'],
+                      ['#f56c6c','#f56c6c']
+                      ];
+                    if(params.seriesName == this.otherData[params.dataIndex]){
+                      var index = 0 
+                    }else {
+                      var index = 1
+                    }
+                   
+
+                    // 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: {
+                    width:2,
+                    color: "#cccccc"//折线的颜色
                   },
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                 }
               }
             }
           { value: 4, label: '近一年', state: 4 },
           { value: 5, label: '自定义', state: 5 }
         ],
-        search_value: ''
+        search_value: '',
+        otherData:[]
       }
     },
     methods: {
                   this.options2.xAxis.data.push(resp.data.data[i].date)
                   tempData.push(resp.data.data[i].value)
                   otherData.push(resp.data.data[i].value)
+                  this.options2.series[0].name = resp.data.references.range_value
                 }
               }
-
+              this.otherData = otherData
+              if(this.$route.query.range_type == 1){
+                this.getArrLength(this.options.xAxis.data,1)
+              }else{
+                this.getArrLength(this.options2.xAxis.data,this.$route.query.range_type)
+              }
               console.log(this.options.xAxis.data)
 
               console.log(this.options.series[0].data)
       }, getTimestamp(time) {
         // 把时间日期转成时间戳
         return new Date(time).getTime() / 1000
+      },
+      getArrLength(result,type){
+        if(type == 1){
+          if(result.length > 10){
+            var dataZoom_end = (10/result.length)*100;
+            this.options.dataZoom[0].end = dataZoom_end
+          }else{
+            var dataZoom_end = 100;
+            this.options.dataZoom[0].end = dataZoom_end
+          }
+        }else{
+          if(result.length > 10){
+            var dataZoom_end = (10/result.length)*100;
+            this.options2.dataZoom[0].end = dataZoom_end
+          }else{
+            var dataZoom_end = 100;
+            this.options2.dataZoom[0].end = dataZoom_end
+          }
+        }
+
       }
 
     },
 </style>
 
 <style lang="scss">
-  .infoBox {
-
-  .infoOne {
-
-  .borderBox {
-
-  .el-progress-bar__inner {
-    background: linear-gradient(
-      90deg,
-      rgba(169, 224, 243, 1),
-      rgba(159, 189, 252, 1)
-    );
-  }
-
-  .el-progress-bar {
-    margin-right: -59px;
-    padding-right: 60px;
-  }
-
-  }
-  .borderBox1 {
-
-  .el-progress-bar__inner {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 215, 192, 1),
-      rgba(255, 153, 148, 1)
-    );
-  }
-
-  .el-progress-bar {
-    margin-right: -59px;
-    padding-right: 60px;
+.pageInspection{
+  .el-form-item{
+    margin-bottom:0px !important;
   }
+}
 
-  }
-  .borderBox2 {
-
-  .el-progress-bar__inner {
-    background: linear-gradient(
-      90deg,
-      rgba(215, 195, 253, 1),
-      rgba(179, 168, 247, 1)
-    );
-  }
-
-  .el-progress-bar {
-    margin-right: -59px;
-    padding-right: 60px;
-  }
-
-  }
-  }
-  }
 </style>
 
 

src/xt_pages/qcd/indicatorControlAnalysis/process.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px;"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
           ></el-date-picker>
         </div>
         <el-container>
-          <div style="width:150px">
+          <div style="width:160px">
 
             <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
+            
 
             <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
                       :row-style="{ color: '#303133' }"
                       :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                       highlight-current-row
                       @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
                 <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
               </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
+              <el-table-column prop="name" label="姓名" width="90" align="center">
                 <template slot-scope="scope">{{ scope.row.name }}</template>
               </el-table-column>
             </el-table>
           </div>
           <div style="padding-left:10px;flex:1;width:0;">
-            <div class="tableTitle">指标趋势</div>
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
               <line-chart :options="chart"
                           v-if="query.statistics_type != 9 && query.statistics_type != 10"></line-chart>
                       { offset: 1, color: colorList[index][1] }
                     ])
                   },
+                  lineStyle:{ 
+                    color:'#409eff' //改变折线颜色
+                  },
                   barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
                 },
 
 </style>
 <style lang="scss">
   .page_process {
-
+    .el-tabs{
+      margin-bottom:0 !important;
+    }
     .el-button--medium {
       padding: 10px 8px;
     }

src/xt_pages/qcd/indicatorControlAnalysis/weight.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px;"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
           ></el-date-picker>
         </div>
         <el-container>
-          <div style="width:150px">
+          <div style="width:160px">
 
             <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
+            
 
             <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
                       :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                       highlight-current-row
                       @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
+              <el-table-column prop="dialysis_no" label="透析号" width="70">
                 <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
               </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
+              <el-table-column prop="name" label="姓名" width="90">
                 <template slot-scope="scope">{{ scope.row.name }}</template>
               </el-table-column>
             </el-table>
           </div>
           <div style="padding-left:10px;flex:1">
-            <div class="tableTitle">指标趋势</div>
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
               <line-chart :options="bar"></line-chart>
 
                       @click.native.prevent="jumpDetail(scope.row.patient_id)"
                       type="text"
                       size="small"
+                      style="font-size:14px;"
                     >详情</el-button>
                   </template>
                 </el-table-column>
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                 }
               }
             }
 
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                 }
               }
             }

src/xt_pages/qcd/indicatorControlAnalysis/weightDetails.vue

                 :trigger-on-focus="false"
                 placeholder="请输入病人名字"
                 @select="handleSelect"
+                style="width:160px"
               >
                 <i class="el-icon-search el-input__icon" slot="suffix"></i>
                 <template slot-scope="{ item }">
 
             </el-form-item>
           </el-form>
-        </div>
-        <el-container>
-          <div style="width:150px">
-            <div class="tableTitle">患者列表</div>
-            <div class="tableTitle">当前患者: {{patient_name}}</div>
-            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
-                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
-                      highlight-current-row
-                      @current-change="handleChange">
-              <el-table-column prop="dialysis_no" label="透析号" width="80">
-                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
-              </el-table-column>
-              <el-table-column prop="name" label="姓名" width="80">
-                <template slot-scope="scope">{{ scope.row.name }}</template>
-              </el-table-column>
-            </el-table>
-
-
-          </div>
-          <div class="containerRight" style="flex:1;overflow: hidden">
-            <div class="cell clearfix">
               <label class="title" style="text-align:left">
                 <span class="name">体重类型</span> :
               </label>
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
               ></el-date-picker>
-            </div>
+        </div>
+        <el-container>
+          <div style="width:160px">
+            <div class="tableTitle">患者列表</div>
+            
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+
+
+          </div>
+          <div class="containerRight" style="flex:1;overflow: hidden">
+            
             <div class="tableTitle">指标趋势</div>
             <div>
               <line-chart :options="chart"></line-chart>

src/xt_pages/qcd/workAnalysis/doctor.vue

           <el-tab-pane label="护士" name="second"></el-tab-pane>
         </el-tabs>
         <div class="cell clearfix">
-          <el-select v-model="query.admin_user_id" placeholder="请选择" style="width:120px;margin-right:20px"               @change="changeDoctor"
+          <el-select v-model="query.admin_user_id" placeholder="请选择" style="width:120px;margin-right:10px"               @change="changeDoctor"
           >
             <el-option
               v-for="item in doctor_options"
             v-model="query.statistics_type"
             placeholder="请选择"
             @change="changeProject"
-            style="width:120px;margin-right:20px"
+            style="width:120px;margin-right:10px"
           >
             <el-option
               v-for="item in project_options"
               emphasis: {
                 shadowBlur: 10,
                 shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+                shadowColor: "rgba(0, 0, 0, 0.2)"
               }
             }
           }

src/xt_pages/qcd/workAnalysis/nurse.vue

           <el-tab-pane label="护士" name="second"></el-tab-pane>
         </el-tabs>
         <div class="cell clearfix">
-          <el-select v-model="query.admin_user_id" placeholder="请选择" style="width:120px;margin-right:20px"               @change="changeNurse"
+          <el-select v-model="query.admin_user_id" placeholder="请选择" style="width:120px;margin-right:10px"               @change="changeNurse"
           >
             <el-option
               v-for="item in nurse_options"
             v-model="query.statistics_type"
             placeholder="请选择"
             @change="changeProject"
-            style="width:120px;margin-right:20px"
+            style="width:120px;margin-right:10px"
           >
             <el-option
               v-for="item in project_options"
                 emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
-                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                  shadowColor: "rgba(0, 0, 0, 0.2)"
                 }
               }
             }