统计配置开发

src/xt_pages/qcd/a.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+    </div>
+    <div class="app-container">
+      <div class="cell clearfix">
+        <label class="title">
+          <span class="name">转归状态</span> :
+        </label>
+        <div class="time">
+          <ul class>
+            <li
+              :class="item.state == stateType ? 'active' : ''"
+              @click="selectLapseTo(item.state)"
+              v-for="item in month"
+              :key="item.value"
+            >{{ item.label }}</li>
+          </ul>
+        </div>
+        <el-date-picker
+          v-model="listQuery.start_time"
+          prefix-icon="el-icon-date"
+          @change="changeTime"
+          :editable="false"
+          style="width: 196px;"
+          type="date"
+          placeholder="选择日期时间"
+          align="right"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+        ></el-date-picker>
+        <span class>-</span>
+        <el-date-picker
+          v-model="listQuery.end_time"
+          prefix-icon="el-icon-date"
+          @change="changeEndTime"
+          :editable="false"
+          style="width: 196px;"
+          type="date"
+          placeholder="选择日期时间"
+          align="right"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+        ></el-date-picker>
+      </div>
+       <el-container>
+      <div style="width:150px">
+        <div class="tableTitle">患者列表</div>
+        <el-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 style="padding-left:10px;flex:1">
+         <div class="tableTitle">统计图</div>
+           <div>
+            <line-chart :options="chart"></line-chart>
+           </div>
+      </div>
+    </el-container>
+    </div>
+  </div>
+</template>
+
+
+
+<script>
+const moment = require('moment')
+import { GetOICData } from "@/api/qcd";
+import PieChart from "../qcd/components/BarChart";
+import { uParseTime } from "@/utils/tools";
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
+export default {
+  name: "dialysisTotal",
+  components: {
+    PieChart,
+    BreadCrumb
+  },
+  data() {
+    return {
+       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;;
+        }
+      }, 
+      crumbs: [
+        { path: false, name: "质控管理" },
+        { path: false, name: "基本信息统计" }
+      ],
+      listQuery: {
+        start_time: "",
+        end_time: "",
+        page: 1,
+        limit: 10
+      },
+      stateType: 0,
+      month: [
+        { value: 0, label: "本月", state: 0 },
+        { value: 1, label: "近三个月", state: 1 },
+        { value: 2, label: "近半年", state: 2 },
+        { value: 3, label: "近一年", state: 3 },
+        { value:4,label:"自定义",state:4}
+      ],
+    };
+  },
+  methods: {
+  
+  },
+  created() {
+     
+  },
+};
+</script>
+
+ <style rel="stylesheet/scss" lang="scss" scoped>
+ .tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+.infoBox {
+  display: flex;
+  flex-wrap: wrap;
+  .infoOne {
+    margin-right: 30px;
+    margin-top: 30px;
+    .titleBox {
+      display: flex;
+      align-items: center;
+    }
+    .point {
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      background: linear-gradient(
+        90deg,
+        rgba(169, 224, 243, 1),
+        rgba(159, 189, 252, 1)
+      );
+      border-radius: 50%;
+    }
+    .point1 {
+      width: 7px;
+      height: 7px;
+      background: linear-gradient(
+        90deg,
+        rgba(255, 215, 192, 1),
+        rgba(255, 153, 148, 1)
+      );
+      border-radius: 50%;
+    }
+    .point2 {
+      width: 7px;
+      height: 7px;
+      background: linear-gradient(
+        90deg,
+        rgba(215, 195, 253, 1),
+        rgba(179, 168, 247, 1)
+      );
+      border-radius: 50%;
+    }
+    .infoTitle {
+      font-size: 16px;
+      font-weight: bold;
+      margin-left: 5px;
+      color: #000;
+    }
+    .borderBox {
+      width: 340px;
+      min-height: 140px;
+      background: rgba(255, 255, 255, 1);
+      border: 1px solid rgba(229, 229, 229, 1);
+      border-radius: 10px;
+      padding: 0 14px 20px;
+      margin-top: 10px;
+      p {
+        font-size: 14px;
+        color: #000;
+        margin: 10px 0 3px;
+      }
+    }
+    .borderBox1 {
+      width: 340px;
+      min-height: 140px;
+      background: rgba(255, 255, 255, 1);
+      border: 1px solid rgba(229, 229, 229, 1);
+      border-radius: 10px;
+      padding: 0 14px 20px;
+      margin-top: 10px;
+      p {
+        font-size: 14px;
+        color: #000;
+        margin: 10px 0 3px;
+      }
+    }
+    .borderBox2 {
+      width: 340px;
+      min-height: 140px;
+      background: rgba(255, 255, 255, 1);
+      border: 1px solid rgba(229, 229, 229, 1);
+      border-radius: 10px;
+      padding: 0 14px 20px;
+      margin-top: 10px;
+      p {
+        font-size: 14px;
+        color: #000;
+        margin: 10px 0 3px;
+      }
+    }
+  }
+}
+</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;
+      }
+    }
+    .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/basicInformationAnalysis.vue

@@ -234,14 +234,24 @@
                 <p class="infoTitle">透龄统计</p>
               </div>
               <div class="borderBox1">
-                <p>透析龄≤12:{{totalone}}人({{(totalone/patientCount*100).toFixed(1)}}%)</p>
-                <el-progress :percentage="(totalone/patientCount*100).toFixed(1)"></el-progress>
-                <p>12&lt;透析龄≤36:{{totaltwo}}人({{(totaltwo/patientCount*100).toFixed(1)}}%)</p>
-                <el-progress :percentage="(totaltwo/patientCount*100).toFixed(1)"></el-progress>
-                <p>36≤透析龄≤60:{{totalthree}}/人({{(totalthree/patientCount*100).toFixed(1)}}%)</p>
-                <el-progress :percentage="(totalthree/patientCount*100).toFixed(1)"></el-progress>
-                <p>透析龄 ≥60:{{patientCount-totalone-totaltwo-totalthree}}人({{((patientCount-totalone-totaltwo-totalthree)/patientCount*100).toFixed(1)}}%)</p>
-                <el-progress :percentage="((patientCount-totalone-totaltwo-totalthree)/patientCount*100).toFixed(1)"></el-progress>
+                <div v-for="(item,index) in dialysisAge" :key="index">
+                 <span v-if="item.age== 1">
+                  <p>透析龄≤12:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
+                  <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
+                </span>
+                <span v-if="item.age == 2">
+                  <p>12&lt;透析龄≤36:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
+                 <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
+                </span>
+                <span v-if="item.age == 3">
+                   <p>36≤透析龄≤60:{{item.count}}/人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
+                   <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
+                </span>
+                <span v-if="item.age == 4">
+                   透析龄 ≥60:{{item.count}}人({{((item.count)/patientCount*100).toFixed(1)}}%)
+                   <el-progress :percentage="((item.count)/patientCount*100).toFixed(1)"></el-progress>
+                </span>
+               </div>
               </div>
             </div>
           </div>
@@ -310,6 +320,7 @@ export default {
       totalthree:0,
       rollOutTotal:0,
       outTotal:0,
+      dialysisAge:[],
     };
   },
   methods: {
@@ -570,33 +581,7 @@ export default {
          if(response.data.state == 1){
            var dataage =  response.data.data.dataage
            console.log("dataage",dataage)
-           var nowtime =  response.data.data.nowtime
-           console.log("nowtime",nowtime)
-           var patients = response.data.data.patients
-           var arr =[]
-           var arrtwo = []
-           var arrthree = []
-           for(let i=0;i<patients.length;i++){
-             if(nowtime - patients[i].first_dialysis_date <= 378691200){
-                arr.push(patients[i].first_dialysis_date)
-             }
-             if((nowtime-patients[i].first_dialysis_date)>378691200 && (nowtime-patients[i].first_dialysis_date)<=1136073600){
-               arrtwo.push(patients[i].first_dialysis_date)
-             }
-             if((nowtime-patients[i].first_dialysis_date)>1136073600 && (nowtime-patients[i].first_dialysis_date)<=1893456000){
-               arrthree.push(patients[i].first_dialysis_date)
-             }
-           }
-           this.totalone = arr.length
-           this.totaltwo = arrtwo.length
-           this.totalthree = arrthree.length
-           console.log("长度",arr.length)
-           console.log("长度2",arrtwo.length)
-           console.log("长度3",arrthree.length)
-           console.log("patients",patients)
-
-            var date =  new Date(1212508800)
-          console.log("date",date)
+           this.dialysisAge = dataage
 
          }
       })