Vue_New/src/xt_pages/qcd/a.vue

<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>