elizebeth/src/xt_pages/qcd/indicatorControlAnalysis/bloodPressureDetails.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="page_bloodPressureDetails">
        <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>
              <el-select
                v-model="value"
                placeholder="请选择"
                @change="chooseType"
                style="width:110px;margin-right:10px"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <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>
              <line-chart :options="chart"></line-chart>
            </div>
            <div class="tableTitle">统计表</div>
            <div>
              <el-table :data="tableData1" style="width: 100%" border>
                <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="省份"></el-table-column>
                <el-table-column prop="city" label="市区"></el-table-column>
              </el-table>

              <el-pagination
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.page"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                background
                style="margin-top:20px;"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </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
      },
      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: {
              normal: {
                color: "#5b98ff", //折点颜色
                lineStyle: {
                  color: "#5b98ff" //折线颜色
                }
              }
            }
          },
          {
            name: "舒张压",
            type: "line",
            data: ["10", "20", "30", "53.33", "42.86", "100", "60", "27", "97"],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}次"
              }
            },
            //配置样式
            itemStyle: {
              normal: {
                color: "#dd7383", //折点颜色
                lineStyle: {
                  color: "#dd7383" //折线颜色
                }
              }
            }
          }
        ]
      },
      tableData1: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333
        }
      ]
    };
  },
  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;
}
</style>


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