5月30日杨青

src/xt_pages/qcd/hemoglobin/index.vue

@@ -0,0 +1,98 @@
+<!-- 血红蛋白 -->
+<template>
+    <div class="main-contain">
+      <div class="position">
+        <bread-crumb :crumbs="crumbs"></bread-crumb>
+      </div>
+      <div class="app-container">
+        <div class="page_patientControlAnalysis">
+            <el-tabs v-model="activeName" @tab-click="handleClick" >
+                <el-tab-pane label="统计全部" name="first">
+                    <!-- <totalSstatistics></totalSstatistics> -->
+                </el-tab-pane>
+                
+                <el-tab-pane label="统计个人" name="second">
+                    <!-- <individual></individual> -->
+                </el-tab-pane>
+            
+            </el-tabs>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+<script>
+import echarts from 'echarts'
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+// import totalSstatistics from './totalSstatistics.vue'
+// import individual from './individual.vue'
+export default {
+    name:'thyroidGland',
+    components: {
+        BreadCrumb,
+        // totalSstatistics,
+        // individual
+    },
+    data() {
+        return {
+            activeName: 'first'
+        }
+    },
+    methods:{
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// .page_patientControlAnalysis {
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// .chartTitle {
+//   font-size: 16px;
+//   font-weight: bold;
+//   color: #000000;
+// }
+
+// .point {
+//   width: 13px;
+//   height: 13px;
+//   background: linear-gradient(
+//       0deg,
+//       rgba(169, 224, 243, 1),
+//       rgba(159, 189, 252, 1)
+//   );
+//   border-radius: 7px;
+//   margin-right: 8px;
+// }
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// }
+
+</style>
+
+<style lang="scss">
+// .page_patientControlAnalysis {
+
+// .el-form-item {
+//   margin-bottom: 0;
+// }
+
+// .cell {
+//   text-align: center;
+// }
+
+// ::-webkit-scrollbar {
+//   height: 15px !important;
+// }
+
+// }
+</style>

src/xt_pages/qcd/qualitycontrol/individual.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+       <div class="content_top">
+            <el-autocomplete
+            class="inline-input"
+            v-model="inputValue"
+            :fetch-suggestions="querySearch"
+            :trigger-on-focus="false"
+            placeholder="请输入患者名字或透析号"
+            @select="handleSubmit"
+            ></el-autocomplete>
+            <div>
+                <span>查询时间:</span>
+                <el-date-picker
+                v-model="stat_time"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                v-model="end_time"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+                <el-select v-model="value" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-select v-model="value" placeholder="请选择">
+                    <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                    </el-option>
+                </el-select>
+                <el-button type="primary">查询</el-button>
+            </div>
+            <div>
+                <el-button type="primary">打印</el-button>
+                <el-button type="primary">导出</el-button>
+            </div>
+       </div>
+       <div >
+        <el-row :gutter="20">
+            <el-col :span="4">
+              <div class="grid-content bg-purple">
+                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
+                <h2>患者列表</h2>
+                <el-table
+                :data="tableData"
+                border
+                style="width: 100%">
+                    <el-table-column
+                        align="center"
+                        prop="date"
+                        label="透析号"
+                       >
+                    </el-table-column>
+                    <el-table-column
+                        align="center"
+                        prop="name"
+                        label="姓名"
+                        >
+                    </el-table-column>
+                </el-table>
+              </div>
+            </el-col>
+            <el-col :span="19">
+               <div class="grid-content bg-purple">
+                <div class="echart" id="germychart" :style={width:width,height:height}></div>
+                <el-table
+                    :data="tableData"
+                    style="width: 100%"
+                    border
+                    align="center"
+                    max-height="250">
+                    <el-table-column
+                    fixed
+                    prop="date"
+                    label="姓名"
+                   >
+                    </el-table-column>
+                    <el-table-column
+                    prop="name"
+                    label="检查日期"
+                    >
+                    </el-table-column>
+                    <el-table-column
+                    prop="province"
+                    label="甲状旁腺激素（pg/ml）"
+                    >
+                    </el-table-column>
+                    
+                </el-table>
+               </div>
+           </el-col>
+        </el-row>
+       </div>
+
+    </div>
+</template>
+<script>
+  import * as echarts from 'echarts'
+export default{
+    props: {
+   
+        width: {
+            type: String,
+            default: "100%"
+        },
+        height: {
+            type: String,
+            default: "400px"
+        },
+    
+    },
+    data() {
+        return {
+            inputValue:'',
+            stat_time:'',
+            end_time:'',
+            value:'',
+            myChart: {},
+            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
+            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
+            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
+            tableData:[],
+        }
+    },
+    created(){
+        
+    },
+    mounted() {
+        // this.$nextTick(function() {
+            this.initEcharts();
+		// })  
+    },
+    methods:{
+        handleSubmit(){
+            console.log('asdfa');
+        },
+        initEcharts() {
+            const option = {
+                xAxis: {
+                    type: 'category',
+                        boundaryGap:true,
+                        axisTick:{
+                            alignWithLabel:true //保证刻度线和标签对齐
+                        },
+                    data: this.xData,
+                    splitNumber:this.xData.length, //纵坐标数
+                    interval:this.xData //强制设置坐标轴分割间隔
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: true,
+                    splitNumber:4, //纵坐标数
+                    interval:10 //强制设置坐标轴分割间隔
+                },
+                legend: {
+                    show: true,
+                    align:'left',//文字在前图标在后
+                    left:'15%',
+                    top:'5%',
+                    data: [{name:'甲状旁腺激素 pg/ml'}]
+                },
+                series: [
+                {
+                    data: this.opinionData,
+                    name:'甲状旁腺激素 pg/ml',
+                    type: "line",// 类型设置为折线图
+                    symbol: 'circle',
+                    itemStyle: {
+                        normal: {
+                            color: '#409eff', //改变折线点的颜色#a80000
+                            lineStyle: {
+                                color: '#409eff' //改变折线颜色
+                            }
+                        }
+                    },
+
+                },
+                
+                ],
+                
+            };
+            this.myChart = echarts.init(document.getElementById("germychart"));
+            this.myChart.setOption(option);
+            //随着屏幕大小调节图表
+            // window.addEventListener("resize", () => {
+            //     this.myChart.resize();
+            // });
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.content_top{
+    display: flex;
+    justify-content: space-around;
+    margin-bottom: 20px;
+}
+</style>

src/xt_pages/qcd/qualitycontrol/thyroidGland.vue

@@ -0,0 +1,98 @@
+<!-- 甲状旁腺激素分析 -->
+<template>
+    <div class="main-contain">
+      <div class="position">
+        <bread-crumb :crumbs="crumbs"></bread-crumb>
+      </div>
+      <div class="app-container">
+        <div class="page_patientControlAnalysis">
+            <el-tabs v-model="activeName" @tab-click="handleClick" >
+                <el-tab-pane label="统计全部" name="first">
+                    <totalSstatistics style="width: 100%; height: 400px;"></totalSstatistics>
+                </el-tab-pane>
+                
+                <el-tab-pane label="统计个人" name="second">
+                    <individual></individual>
+                </el-tab-pane>
+            
+            </el-tabs>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+<script>
+import echarts from 'echarts'
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+import totalSstatistics from './totalSstatistics.vue'
+import individual from './individual.vue'
+export default {
+    name:'thyroidGland',
+    components: {
+        BreadCrumb,
+        totalSstatistics,
+        individual
+    },
+    data() {
+        return {
+            activeName: 'first'
+        }
+    },
+    methods:{
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+// .page_patientControlAnalysis {
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// .chartTitle {
+//   font-size: 16px;
+//   font-weight: bold;
+//   color: #000000;
+// }
+
+// .point {
+//   width: 13px;
+//   height: 13px;
+//   background: linear-gradient(
+//       0deg,
+//       rgba(169, 224, 243, 1),
+//       rgba(159, 189, 252, 1)
+//   );
+//   border-radius: 7px;
+//   margin-right: 8px;
+// }
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// }
+
+</style>
+
+<style lang="scss">
+// .page_patientControlAnalysis {
+
+// .el-form-item {
+//   margin-bottom: 0;
+// }
+
+// .cell {
+//   text-align: center;
+// }
+
+// ::-webkit-scrollbar {
+//   height: 15px !important;
+// }
+
+// }
+</style>

src/xt_pages/qcd/qualitycontrol/totalSstatistics.vue

@@ -0,0 +1,212 @@
+<template>
+    <div>
+        <div class="content_top">
+            <div class="block">
+                <span>查询时间:</span>
+                <el-date-picker
+                v-model="time_month"
+                type="month"
+                placeholder="选择月">
+                </el-date-picker>
+            </div>
+            <div>
+                <el-date-picker
+                v-model="stat_time"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                v-model="end_time"
+                type="date"
+                placeholder="选择日期">
+                </el-date-picker>
+            </div>
+            <div style="width: 200px;">
+                <el-input v-model="input" placeholder="请输入内容"></el-input>
+            </div>
+            <el-button type="primary">查询</el-button>
+        </div>
+        <div class="cell clearfix">
+          <p class="chartTitle">统计图</p>
+        </div>
+        <div class="echart" id="mychart" :style={width:width,height:height}></div>
+        <div style="width: 80%;margin: auto;">
+            <el-table
+            :data="tableData"
+            :show-summary = true
+            border
+            style="width: 100%;">
+                <el-table-column
+                    prop="date"
+                    align="center"
+                    label="甲状旁腺激素"
+                    >
+                </el-table-column>
+                <el-table-column
+                    prop="name"
+                    
+                    label="人数"
+                    >
+                </el-table-column>
+                <el-table-column
+                    prop="address"
+                    align="center"
+                    label="操作">
+                    <template slot-scope="scope">
+                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
+                                type="text" >查看详情
+                        </el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default{
+    props: {
+   
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "400px"
+    },
+    
+  },
+    data() {
+        return {
+            time_month:'',
+            stat_time:'',
+            end_time:'',
+            input:'',
+            myChart: {},
+            pieData : [
+            {
+          value: 463,
+          name: "不达标值患者"
+        },
+        {
+          value: 395,
+          name: "未检查患者"
+        },
+        {
+          value: 157,
+          name: "达标值患者"
+        },
+        // {
+        //   value: 149,
+        //   name: "广东"
+        // },
+        // {
+        //   value: 147,
+        //   name: "湖南"
+        // }
+            
+            ],
+            pieName: [],
+            // myChartStyle:{float: "right", width: "100%", height: "400px"},
+            tableData:[],
+        }
+    },
+    mounted() {
+    this.initDate(); //数据初始化
+    this.initEcharts();
+  },
+  methods: {
+    initDate() {
+      for (let i = 0; i < this.pieData.length; i++) {
+        this.pieName[i] = this.pieData[i].name;
+      }
+    },
+    initEcharts() {
+      // 饼图
+      const option = {
+        legend: {
+          // 图例
+          data: this.pieName,
+          left: "10%",
+          top: "30%",
+          orient: "vertical"
+        },
+        color:['#ff7f9f','#fff67f','#1e5feb'],
+        title: {
+          // 设置饼图标题，位置设为顶部居中
+        //   text: "国内院士前五省份图示",
+          top: "0%",
+          left: "center"
+        },
+        series: [
+          {
+            type: "pie",
+            label: {
+              show: true,
+              formatter:"{b} : {d}% ({c})"
+              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
+            },
+            radius: "65%", //饼图半径
+            data: this.pieData
+          }
+        ]
+      };
+    //   console.log(this.seriesData);
+      const optionFree = {
+        series: [
+          {
+            data: this.seriesData,
+            type: "line",
+            smooth: true
+          }
+        ]
+      };
+      this.myChart = echarts.init(document.getElementById("mychart"));
+      this.myChart.setOption(option);
+      //随着屏幕大小调节图表
+    //   window.addEventListener("resize", () => {
+    //     this.myChart.resize();
+    //   });
+    },
+    getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '总价';
+            return;
+          }
+          const values = data.map(item => Number(item[column.property]));
+          if (!values.every(value => isNaN(value))) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr);
+              if (!isNaN(value)) {
+                return prev + curr;
+              } else {
+                return prev;
+              }
+            }, 0);
+            sums[index] += ' 元';
+          } else {
+            sums[index] = 'N/A';
+          }
+        });
+
+        return sums;
+    },
+    handleClick(id){
+        console.log(id);
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.content_top{
+    display: flex;
+    justify-content: space-around;
+    color: #1e5feb;
+}
+</style>