elizebeth/src/xt_pages/qcd/patientComplianceDetails.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="page_patientComplianceDetails">
        <div class="cell clearfix" style="margin:0">
          <el-form :inline="true" :model="listQuery">
            <el-form-item label>
              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-container>
          <div style="width:150px">
            <div class="tableTitle">患者列表</div>
            <el-table :data="tableData" border style="width: 100%;" height="500">
              <el-table-column prop="date" label="日期" width="70"></el-table-column>
              <el-table-column prop="name" label="姓名" width="80"></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>
              <div class="time">
                <ul class>
                  <li
                    :class="item.state == monthType ? 'active' : ''"
                    @click="chooseMonth(item.state)"
                    v-for="item in month"
                    :key="item.value"
                  >{{ item.label }}</li>
                </ul>
              </div>
              <label class="title">
                <span class="name">日期查询</span> :
              </label>
              <el-date-picker
                v-model="listQuery.start_time"
                prefix-icon="el-icon-date"
                @change="changeTime"
                :editable="false"
                type="date"
                style="max-width:160px"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
              <span class>-</span>
              <el-date-picker
                v-model="listQuery.end_time"
                prefix-icon="el-icon-date"
                @change="changeEndTime"
                :editable="false"
                type="date"
                style="max-width:160px"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <div class="tableTitle">指标监控</div>
            <div style="width:100%;overflow-x:auto">
              <div class="qualityBox">
                <div
                  class="qualityOne"
                  v-for="(item,index) in arr"
                  :key="index"
                  :class="quality == index ? 'active' : ''"
                  @click="clickQuality(index)"
                >
                  <p>{{ item }}</p>
                  <i class="iconfont icon-gantanhao gth" v-if="index % 2 == 0"></i>
                  <i class="iconfont icon-gou gou" v-else></i>
                </div>
              </div>
            </div>
            <div class="tableTitle">指标趋势</div>
            <div>
              <line-chart :options="chart"></line-chart>
            </div>
          </div>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import LineChart from "../qcd/components/LineChart";
export default {
  components: {
    LineChart,
    BreadCrumb
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "患者达标详情" }
      ],
      tableData: [
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        },
        {
          date: "2016",
          name: "王小虎"
        }
      ],
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10
      },
      month: [
        { value: 0, label: "本月", state: 0 },
        { value: 1, label: "近三个月", state: 1 },
        { value: 2, label: "近半年", state: 2 },
        { value: 3, label: "近一年", state: 3 }
      ],
      monthType: 0,
      arr: ["钙", "磷", "钙萨达撒所多", "磷", "钙", "磷", "钙", "磷"],
      quality: 0,
      chart: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["次数"],
          left: 0
        },
        xAxis: {
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "次数",
            type: "line",
            data: [
              "78.57",
              "50",
              "80",
              "93.33",
              "92.86",
              "100",
              "12",
              "77",
              "37"
            ],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}次"
              }
            },
            //配置样式
            itemStyle: {
              //通常情况下：

              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
              normal: {
                color: function(params) {
                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
                  var colorList = [
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],
                    ["#A9E0F3", "#9FBDFC"],

                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#FFD7C0", "#FF9994"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#D7C3FD", "#B3A8F7"],
                    ["#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[index][0] },
                    // { offset: 0.5, color: colorList[index][1] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                },
                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
              },

              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  },
  methods: {
    chooseMonth(month) {
      this.monthType = month;
    },
    clickQuality(index) {
      this.quality = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.containerRight {
  padding-left: 10px;
}
.tableTitle {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 8px;
}
.qualityBox {
  display: flex;
  flex-wrap: nowrap;
  min-width: 1800px;
  .qualityOne {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.3125rem;
    border: 1px solid rgba(229, 229, 229, 1);
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-right: 0.875rem;
    cursor: pointer;
    //   justify-content: space-around;
    .gth {
      color: #ff974a;
      font-size: 1.25rem;
    }
    .gou {
      color: #5cd924;
      font-size: 1.25rem;
    }
    p {
      width: 100%;
      margin-top: 1.25rem;
      margin-bottom: 0.625rem;
      font-weight: bold;
      color: #666666;
      font-size: 0.875rem;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .active {
    background: #5b98ff;
    p {
      color: #fff;
    }
    .gth {
      color: #fff;
      font-size: 1.25rem;
    }
    .gou {
      color: #fff;
      font-size: 1.25rem;
    }
  }
}
</style>


<style lang="scss">
.page_patientComplianceDetails {
  .cell {
    text-align: center;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>