123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461 |
- <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>
- <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"
- ></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"
- ></el-date-picker>
- </div>
- <div class="cell clearfix">
- <label class="title"> <span class="name">统计方式</span> : </label>
- <div class="time">
- <ul class>
- <li
- :class="item.value == statisticalMethod ? 'active' : ''"
- @click="selectStatisticalMethod(item.value)"
- v-for="item in statisticalMethods"
- :key="item.value"
- >
- {{ item.label }}
- </li>
- </ul>
- </div>
- </div>
- <div class="cell clearfix">
- <label class="title"> <span class="name">转归状态</span> : </label>
- <div class="time">
- <ul class>
- <li
- :class="item.lapseto == lapsetoType ? 'active' : ''"
- @click="selectLapseTo(item.lapseto)"
- v-for="item in lapsetoState"
- :key="item.value"
- >
- {{ item.label }}
- </li>
- </ul>
- </div>
- </div>
-
- <div class="cell clearfix">
- <label class="title"> <span class="name">透析模式</span> : </label>
- <el-select
- v-model="listQuery.mode_id"
- placeholder="请选择"
- @change="changeModel()"
- >
- <el-option label="全部" value></el-option>
- <el-option
- v-for="item in modeOptions"
- :key="item.id"
- :label="item.name"
- :value="item.id"
- ></el-option>
- </el-select>
- </div>
-
- <div class="cqd-dataTitle">统计图</div>
- <el-row :gutter="32">
- <el-col :xs="24" :sm="24" :lg="24">
- <div class="chart-wrapper">
- <bar-chart
- :title="totitle + batotal + '人次'"
- :options="modesData"
- />
- </div>
- </el-col>
- </el-row>
- <div style="height:20px"> </div>
- <div class="cqd-dataTitle">统计表</div>
- <el-table
- ref="multipleTable"
- :data="tableData"
- id="qcddt"
- border
- fit
- highlight-current-row
- style="width: 100%;margin-top: 10px;"
- :row-style="{ color: '#303133' }"
- :header-cell-style="{
- backgroundColor: 'rgb(245, 247, 250)',
- color: '#606266'
- }"
- >
- <el-table-column
- fixed
- label="日期"
- width="100"
- property="date"
- align="center"
- ></el-table-column>
- <el-table-column
- :label="modeItem.name"
- property="number"
- align="center"
- min-width="100"
- v-for="(modeItem, index) in activeModes"
- :key="index"
- >
- <template slot-scope="scope">
- {{
- scope.row.data[modeItem.id].number
- ? scope.row.data[modeItem.id].number
- : ""
- }}
- </template>
- </el-table-column>
-
- <el-table-column
- fixed="right"
- label="总数"
- width="80"
- property="total"
- align="center"
- ></el-table-column>
- </el-table>
-
- <!-- <pagi-nation title="分页"></pagi-nation> -->
-
- <el-pagination
- align="right"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listQuery.pate"
- :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>
- </template>
-
- <script>
- import { getdialysistotaldata } from "@/api/qcd";
- import BarChart from "./components/BarChart";
- import BreadCrumb from "@/xt_pages/components/bread-crumb";
- export default {
- name: "dialysisTotal",
- data() {
- return {
- crumbs: [
- { path: false, name: "科室质控" },
- { path: false, name: "透析总量" }
- ],
- total: 0,
- totitle: "全部",
- batotal: 0,
- modesData: {
- xAxis: [],
- series: []
- },
- listQuery: {
- start_time: "",
- end_time: "",
- page: 1,
- limit: 10,
- lapseto: 0,
- statistical_method: 0,
- mode_id: ""
- },
- modeOptions: {},
- tableData: [],
- statisticalMethod: 0,
- statisticalMethods: [
- { value: 0, label: "全部" },
- { value: 1, label: "开始透析" }
- // { value: 2, label: "排班" }
- ],
- lapsetoType: 0,
- lapsetoState: [
- { value: 0, label: "全部", source: 0, lapseto: 0 },
- { value: 1, label: "转出", source: 0, lapseto: 2 },
- { value: 2, label: "留治", source: 0, lapseto: 1 }
- ]
- };
- },
- created() {
- this.modeOptions = this.$store.getters.treatment_mode;
-
- var nowDate = new Date();
- var nowYear = nowDate.getFullYear();
- var nowMonth = nowDate.getMonth() + 1;
- var nowDay = nowDate.getDate();
- this.listQuery.end_time =
- nowYear +
- "-" +
- (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
- "-" +
- (nowDay < 10 ? "0" + nowDay : nowDay);
- nowDate.setMonth(nowDate.getMonth() - 3);
- nowYear = nowDate.getFullYear();
- nowMonth = nowDate.getMonth() + 1;
- nowDay = nowDate.getDate();
- this.listQuery.start_time =
- nowYear +
- "-" +
- (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
- "-" +
- (nowDay < 10 ? "0" + nowDay : nowDay);
- this.getList();
- },
- methods: {
- getList() {
- getdialysistotaldata(this.listQuery).then(response => {
- if (response.data.state == 0) {
- this.$message.error(response.data.msg);
- return false;
- } else {
- this.tableData = [];
- var dtd = response.data.data.dtd;
- var dd = {};
- for (const index in dtd) {
- if (!(dtd[index].date in dd)) {
- dd[dtd[index].date] = {};
- }
- if (
- !(dtd[index].mode_id in dd[dtd[index].date]) &&
- dtd[index].mode_id != "0"
- ) {
- dd[dtd[index].date][dtd[index].mode_id] = dtd[index];
- }
- }
- for (const key in dd) {
- var total = 0;
- for (const mkey in this.modeOptions) {
- if (mkey in dd[key]) {
- dd[key][mkey].mode = this.modeOptions[mkey].name;
- var number = parseInt(dd[key][mkey].number);
- if (isNaN(number) || number == 0) {
- dd[key][mkey].number = "";
- number = 0;
- }
- total += number;
- } else {
- dd[key][mkey] = {
- mode: this.modeOptions[mkey].name,
- mode_id: mkey,
- number: 0,
- date: key
- };
- }
- }
- this.tableData.push({ date: key, data: dd[key], total: total });
- }
- this.total = response.data.data.total;
-
- this.modesData = {
- xAxis: [],
- series: []
- };
- var ttd = response.data.data.ttd;
- var modeMap = {};
- var batotal = 0;
- for (const index in ttd) {
- if (ttd[index].mode_id == "0") {
- continue;
- }
- modeMap[ttd[index].mode_id] = ttd[index];
- }
- for (const key in this.modeOptions) {
- this.modesData.xAxis.push(this.modeOptions[key].name);
- if (key in modeMap) {
- this.modesData.series.push(parseInt(modeMap[key].number));
- batotal += parseInt(modeMap[key].number);
- } else {
- this.modesData.series.push(0);
- }
- }
- this.batotal = batotal;
- }
- });
- },
- changeTime(val) {
- var time =
- this.getTimestamp(val) - this.getTimestamp(this.listQuery.end_time);
- if (time > 0) {
- this.$message.error("结束时间不能小于开始时间");
- this.listQuery.start_time = "";
- } else {
- this.getList();
- }
- },
- changeEndTime(val) {
- var time =
- this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
- if (time < 0) {
- this.$message.error("结束时间不能小于开始时间");
- this.listQuery.end_time = "";
- } else {
- this.getList();
- }
- },
- getTimestamp(time) {
- // 把时间日期转成时间戳
- return new Date(time).getTime() / 1000;
- },
- selectStatisticalMethod(type) {
- this.statisticalMethod = type;
- this.listQuery.statistical_method = type;
- if (type == 1) {
- this.totitle = "总透析";
- } else if (type == 2) {
- this.totitle = "总排班";
- } else {
- this.totitle = "全部";
- }
- this.getList();
- },
- selectLapseTo(lapseto) {
- this.lapsetoType = lapseto;
- this.listQuery.lapseto = lapseto;
- this.getList();
- },
- changeModel() {
- this.getList();
- },
- handleSizeChange(val) {
- this.listQuery.limit = val;
- this.getList();
- },
- handleCurrentChange(val) {
- this.listQuery.page = val;
- this.getList();
- }
- },
- computed: {
- activeModes: function() {
- var modes = [];
- for (const key in this.modeOptions) {
- if (this.listQuery.mode_id == key || this.listQuery.mode_id == "") {
- modes.push(this.modeOptions[key]);
- }
- }
- return modes;
- }
- },
- components: {
- BarChart,
- BreadCrumb
- }
- };
- </script>
-
- <style>
- #qcddt ::-webkit-scrollbar {
- height: 15px;
- }
- </style>
- <style rel="stylesheet/scss" lang="scss" scoped>
- .app-container {
- // margin: 20px;
- font-size: 15px;
- .filter-container {
- padding-bottom: 5px;
- }
- .cqd-dataTitle {
- color: #303133;
- font-size: 14px;
- border-bottom: 2px #e4e7ed solid;
- height: 36px;
- line-height: 36px;
- margin: 0 0 25px 0;
- position: relative;
- }
- .cqd-dataTitle::before {
- position: absolute;
- left: 0;
- bottom: -2px;
- content: "";
- width: 42px;
- height: 2px;
- background: #409eff;
- }
- .search-component {
- width: 500px;
- .searchBox {
- width: 300px;
- height: 36px;
- line-height: 36px;
- padding-left: 15px;
- border: 1px #dcdfe6 solid;
- border-right: none;
- outline: none;
- float: left;
- border-radius: 6px 0 0 6px;
- font-size: 14px;
- color: #333;
- background: #fff;
- box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
- }
- .searchBtn {
- background-color: #409eff;
- color: #fff;
- font-size: 15px;
- text-align: center;
- height: 36px;
- line-height: 36px;
- float: left;
- outline: none;
- width: 70px;
- border: none;
- border-radius: 0 6px 6px 0;
- font-family: "Microsoft Yahei";
- cursor: pointer;
- }
- }
- .amount {
- font-weight: normal;
- padding: 10px 0 0 0;
- color: #606266;
- font-size: 14px;
- span {
- color: #ef2525;
- font-family: "Arial";
- padding: 0 2px;
- }
- }
- }
- </style>
- <style>
- .el-table td,
- .el-table th.is-leaf,
- .el-table--border,
- .el-table--group {
- border-color: #d0d3da;
- }
- .el-table--border::after,
- .el-table--group::after,
- .el-table::before {
- background-color: #d0d3da;
- }
- </style>
|