Vue_New/src/xt_pages/qcd/indicatorControlAnalysis/monitor.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="page_monitor">
        <new-nav activeName="monitor"></new-nav>
        <div class="cell clearfix">
          <el-form :inline="true" :model="listQuery">
            <el-form-item label>
              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:110px"></el-input>
              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
          <el-select v-model="value" placeholder="请选择" 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"
            style="width: 150px;"
            type="date"
            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"
            style="width: 150px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <el-container>
          <div style="width:150px">
            <div class="tableTitle">患者列表</div>
            <el-table :data="tableData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
              <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 style="padding-left:10px;flex:1">
            <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 :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
                <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-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="zip" 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 NewNav from "../indicatorControlAnalysis/components/NewNav";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import LineChart from "../../qcd/components/LineChart";
export default {
  components: {
    LineChart,
    BreadCrumb,
    NewNav
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "科室质控" },
        { path: false, name: "指标评估统计" },
        { path: false, name: "透析监测信息统计" }
      ],
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10
      },
      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: "王小虎"
        }
      ],
      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
        }
      ],
      chart: {
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["次数"],
          left: 0
        },
        xAxis: {
          data: ["达标", "未达标"]
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} %"
          },
          show: false
        },
        series: [
          {
            name: "次数",
            type: "line",
            data: ["78.57", "50"],
            barWidth: 30,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}次"
              }
            },
            //配置样式
            itemStyle: {
              //通常情况下：

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

                    ["#FFD7C0", "#FF9994"]
                  ];

                  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: {
    chooseWay(way) {
      this.wayType = way;
    }
  }
};
</script>

<style lang="scss" scoped>
.tableTitle {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.page_monitor {
  .el-button--medium {
    padding: 10px 8px;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>