udiwms-vue-frame/src/views/collect/CollectOrderStats.vue

<template>
  <div class="app-container home">
    <div>
<!--      <h2>单据上传统计</h2>-->
<!--      <el-divider/>-->
      <el-card>
        <el-form v-if="queryList && queryList.length > 0" :model="filterQuery" class="query-form"
                 size="mini" label-width="100px"
        >
          <el-row style=" display:flex;  flex-wrap: wrap; ">
            <template v-for="(item, index) in queryList">
              <div v-if="showSearch || item.isImport">
                <el-form-item v-if="item.columnType == 'input' && executeEval(row,item.expression,true)"
                              class="query-form-item"
                              :label="item.columnDesc+`:`" :key="item.id"
                >
                  <el-input
                    v-model="filterQuery[item.columnName]"
                    :placeholder="item.columnDesc == '模糊查询' ? '单据号/来源系统/收货方/发货方' : item.columnDesc"
                    :disabled="executeEval(null,item.disabledFuc,false)"
                    @keyup.enter.native="executeFuc($event,'5',item.clickFuc)"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item v-if="item.columnType == 'select' && executeEval(row,item.expression,true)"
                              class="query-form-item"
                              :label="item.columnDesc+`:`"
                >
                  <el-select v-model="filterQuery[item.columnName]"
                             :placeholder="item.columnDesc"
                             :disabled="executeEval(null,item.disabledFuc,false)"
                             clearable
                  >
                    <el-option
                      v-for="dict in item.lableRuleObj"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-if="item.columnType == 'selectServer' && executeEval(row,item.expression,true)"
                              class="query-form-item"
                              :label="item.columnDesc+`:`"
                >
                  <el-select
                    v-model="filterQuery[item.columnName]"
                    :placeholder="item.columnDesc"
                    @change="executeFuc($event,'5',item.checkRules)"
                    :disabled="executeEval(null,item.disabledFuc,false)"
                    filterable
                    remote
                    :remote-method="(query) => executeFuc(query,'5',item.clickFuc)"
                    clearable
                  >
                    <el-option
                      v-for="item in options[item.clickFuc]"
                      :key="item.code"
                      :label="item.label"
                      :value="item.code"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-if="item.columnType == 'datePicker' && executeEval(row,item.expression,true)"
                              class="query-form-item"
                              :label="item.columnDesc+`:`"
                >
                  <el-date-picker
                    :picker-options="pickerOptions"
                    v-model="actDateRange"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </el-form-item>
                <el-form-item v-if="item.columnType == 'date' && executeEval(row,item.expression,true)"
                              class="query-form-item"
                              :label="item.columnDesc+`:`"
                >
                  <el-date-picker
                    v-model="filterQuery[item.columnName]"
                    :style="`width:${item.width+'px'}`"
                    value-format="yyyy-MM-dd"
                    :disabled="executeEval(null,item.disabledFuc,false)"
                    type="date"
                    :placeholder="item.columnDesc"
                  ></el-date-picker>
                </el-form-item>
              </div>
            </template>
          </el-row>
        </el-form>
        <div class="top-right-btn">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            >重置
            </el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit(this)"
            >查询
            </el-button
            >
          </el-button-group>
        </div>
      </el-card>

    </div>
    <!-- 分割线 -->
    <!--    <div class="m0 grid-container grid-container1" style="height: 100%; display: flex; flex-wrap: wrap;">-->
    <!--      <el-card-->
    <!--        @click.native="handleClick(index)"-->
    <!--        v-for="(card, index) in stationList"-->
    <!--        :key="index"-->
    <!--        class="grid-itemCard"-->
    <!--        :body-style="{ padding: '0px', height: '100px', width: '100px', display: 'flex', justifyContent: 'center', alignItems: 'center' }"-->
    <!--      >-->
    <!--        {{ card.workplaceName }}-->
    <!--      </el-card>-->

    <!--    </div>-->


    <div class="mt10 grid-container grid-container3" style="height: 15%">


      <el-card class="grid-item" body-style="padding:0px;height:100%"  >

        <el-row >
          <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
            <el-image style="border-radius: 4%;width: 90%;height: 90%"
                      :src="alreadyUploadingSvg"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=2')">
              <span class="header d-block">
                已上传单据
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
                {{ alreadyUploadingCount }}
              </span>
          </div>
        </el-row>
      </el-card>

      <el-card class="grid-item" body-style="padding:0px;height:100%">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
            <el-image style="border-radius: 4%;width: 90%;height: 90%"
                      :src="notUploadingSvg"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=1')">
              <span class="header d-block">
               未上传单据
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">

                {{ notUploadingCount }}
              </span>
          </div>
        </el-row>
      </el-card>
      <el-card class="grid-item" body-style="padding:0px;height:100%">
        <el-row>
          <div class="height-full fl center ml20" style="width: 30%" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
            <el-image style="border-radius: 4%;width: 90%;height: 90%"
                      :src="uploadingFailSvg"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <div class="height-full fr center mr20" @click="linkPage('/dept/use/prescribeDir/inout/split/tag/upload?status=3')">
              <span class="header d-block">
                上传失败单据
              </span>
            <span class="d-block mt10" :style="{'font-size': '32px','font-weight': 'bolder',color:'#394047'}">
                {{ uploadingFailCount }}
              </span>
          </div>
        </el-row>
      </el-card>
    </div>

  </div>
</template>

<script>
import alreadyUploadingSvg from '@/assets/svg/已上传.svg'
import notUploadingSvg from '@/assets/svg/未上传.svg'
import uploadingFailSvg from '@/assets/svg/上传失败.svg'
import { executeFuc, getHead } from '@/utils/customConfig'
import { convertDate } from '@/utils/date'
import { uploadCount } from '@/api/collect/collectOrder'

// import {getOrderList} from "../api/inout/order";
// import {sysMsgTodoPage} from "../api/system/sysMsgTodoApi";
// import productSvg from "@/assets/svg/已对照产品.svg"
// import invSvg from "@/assets/svg/库存预警.svg"
// import certSvg from "@/assets/svg/资质预警.svg"
// import {getInvRemindMsgList} from "../api/system/invRemindMsg";
// import {getUdiInfos} from "../api/basic/udiRelevance";
// // import {listPage} from "@/api/basic/sysWorkplaceManage.js";
// import {getSupCertgetCount, getSupCertRemindMsgList} from "../api/purchase/supCertRedmindMsg";

export default {
  name: 'Index',
  data() {
    return {
      alreadyUploadingSvg: alreadyUploadingSvg,
      notUploadingSvg: notUploadingSvg,
      uploadingFailSvg: uploadingFailSvg,
      alreadyUploadingCount: 0,
      notUploadingCount: 0,
      uploadingFailCount: 0,
      // 待办==================================================
      msgLoading: false,
      todoCount: 0,
      msgList: [],
      // =======================================================================
      // 单据==================================================
      orderLoading: false,
      orderTotal: 0,
      orderList: [],
      // =======================================================================
      //界面配置相关
      //患者处方
      tableHeader: [],
      queryList: [],
      tableObj: [],
      fromList: [],
      //处方明细
      tableHeader1: [],
      queryList1: [],
      tableObj1: [],
      fromList1: [],

      convertDateFun: convertDate,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      actDateRange: [],
      //界面配置-------------end
      filterQuery: {
        startTime:null,
        endTime:null
      }
    }
  },
  methods: {
    //界面配置相关------------
    executeFuc(row, type, clickFuc, value) {
      return executeFuc(this, row, type, clickFuc, value)
    },
    executeEval(row, expression, defaultRet) {
      if (expression) {
        return eval(expression)
      }
      return defaultRet
    },
    onReset() {
      this.filterQuery = {
        startTime:null,
        endTime:null

      }
      this.actDateRange = []

      this.getList()
    },
    onSubmit(_this) {
      if (_this == null) {
        _this = this
      }
      _this.getList()
    },

    getList() {
      // this.loading = true
      if (this.actDateRange !== null) {
        this.filterQuery.startTime = this.actDateRange[0]
        this.filterQuery.endTime = this.actDateRange[1]
      } else {
        this.filterQuery.startTime = null
        this.filterQuery.endTime = null
      }
      uploadCount(this.filterQuery).then(res => {
        // console.log('res',res)

        if (res.code === 20000) {
          // this.loading = false
          // this.list = res.data || []
          // console.log('res.data',res.data)
          this.notUploadingCount = 0
          this.alreadyUploadingCount = 0
          this.uploadingFailCount = 0

          for (let map of res.data) {

            if(map.uploadStatus == "1"){
              this.notUploadingCount = map.count
            }else if(map.uploadStatus == "2"){
              this.alreadyUploadingCount  = map.count
            }else if(map.uploadStatus == "3"){
              this.uploadingFailCount = map.count
            }
          }
        }else {
          // this.loading = false
          this.$message.error(res.message);

        }


        // this.total = res.data.total || 0
        // this.panelALive = false
      }).catch(() => {
        // this.loading = false
        // this.list = []
        // this.total = 0
      })
    },
    linkPage(path) {
      console.log(path)
      this.$router.push(path)
    },
  },
  mounted() {

    getHead('collectOrderStats', '1').then((re) => {
      // 处理返回的数据
      this.tableObj = re.data
      this.tableHeader = re.data.tableList
      this.queryList = re.data.queryList
      this.fromList = re.data.fromList
      this.getList()

    })
  }
}
</script>

<style scoped lang="scss">
.center {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.el-row .el-card {
  margin: 0;

  .el-card__body {
    padding: 0 !important;
  }
}

.el-card {
  /* margin-right: 15px; */
  /* margin-left: 15px; */
  margin-top: 15px;
  /* transition: all .5s; */
}

.grid-itemCard {
  /* 确保卡片是正方形，并且有一定的间距 */
  margin: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.grid-item {
  height: 100%;
  padding: 15px;

  .el-row, .el-col {
    height: 100%;
  }

  .header {
    color: #676a6c;
    font-size: 20px;
    font-weight: bolder;
  }

  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}

.grid-container {
  height: inherit;
  display: grid;
  grid-gap: 10px;

  .el-card {
    margin: 0;
  }
}

.grid-container1 {
  grid-template-columns: repeat(1, 1fr);
  padding: 10px;
}


.grid-container2 {
  grid-template-columns: repeat(2, 1fr);

}

.grid-container3 {
  grid-template-columns: repeat(3, 1fr);

}

.grid-container4 {
  grid-template-columns: repeat(4, 1fr);

}

.home {

  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  height: calc(100%);
  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    color: #000610;
    font-weight: bolder;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>