ylyx-cli 1.0.0

package/templates/vue-app/files/src/views/institutionMonitor/monitorDetail/index.vue

@@ -0,0 +1,686 @@
+<template>
+  <div class="app-container">
+    <!-- 统计模块 -->
+    <div class="hospitalName">
+      <img src="~@/assets/images/location.png" alt="" />
+      <span>{{ hospitalName }}</span>
+    </div>
+    <el-tabs v-loading="loading" type="border-card" v-model="Monitore" @tab-click="handleClick">
+      <el-tab-pane name="imageMonitore" label="看图监测">
+        <div class="warningStyle" v-show="lookPicMonitor == '1'">
+          <div>
+            <i class="el-icon-warning warning-icon"></i>
+            提示：该机构系统看图监测机制：每天11点，15点，19点，22点，抽取{{
+              abnormalDataInfo.lookPicHourTime
+            }}个小时内五例数据，但不抽近{{ abnormalDataInfo.lookPicMinuteTime }}分钟的数据
+          </div>
+        </div>
+        <span style="font-size: 15px; font-weight: bold">看图情况：</span>
+        <span style="font-size: 15px" :class="{ red: isNormal == '异常' }">{{ isNormal }}</span>
+
+        <h4 style="padding: 25px 0 10px; font-size: 15px">
+          看图异常数据
+          <el-button
+            @click="lookMonitor"
+            size="mini"
+            style="margin-left: 8px"
+            type="primary"
+            :disabled="isStatus"
+            >重新监测
+          </el-button>
+        </h4>
+        <el-table
+          v-loading="lookPhotoLoading"
+          element-loading-text="正在监测..."
+          :data="lookPhotoAbnormal">
+          <template slot="empty">
+            <span>{{ emptyText }}</span>
+          </template>
+          <el-table-column label="序号" width="65px" fixed :show-overflow-tooltip="true">
+            <template slot-scope="scope">
+              <span>{{ (crud.page.page - 1) * crud.page.size + scope.$index + 1 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            v-for="(item, index) in checkTable"
+            :key="index"
+            :label="item.label"
+            :prop="item.prop"
+            :width="item.width">
+            <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
+            <template slot-scope="scope">
+              <span v-if="item.prop == 'patientSex'">
+                {{ scope.row.patientSex ? (scope.row.patientSex == '1' ? '男' : '女') : '-' }}
+              </span>
+              <span v-else-if="item.prop == 'remark'">
+                <el-tooltip
+                  popper-class="tooltipAbnormal"
+                  :content="scope.row.remark"
+                  placement="top">
+                  <p class="showOverTooltip">{{ scope.row.remark }}</p>
+                </el-tooltip>
+              </span>
+              <span v-else>
+                {{ scope.row[item.prop] || '-' }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="100" fixed="right">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="ignoreFn(scope.row)">忽略</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+
+      <el-tab-pane name="imageAbnormalMonitor" label="看图异常监测">
+        <image-abnormal-monitor v-if="Monitore == 'imageAbnormalMonitor'"></image-abnormal-monitor>
+      </el-tab-pane>
+
+      <el-tab-pane name="leakageMonitor" label="漏图监测">
+        <leakage-anomaly
+          v-if="Monitore == 'leakageMonitor'"
+          :hospitalName="hospitalName"></leakage-anomaly>
+      </el-tab-pane>
+      <el-tab-pane name="qualityMonitore" label="数据质量监测">
+        <qualityMonitore v-if="Monitore == 'qualityMonitore'"> </qualityMonitore>
+      </el-tab-pane>
+      <el-tab-pane name="moveMonitore" label="客户端运行监测">
+        <moveMonitore v-if="Monitore == 'moveMonitore'"> </moveMonitore>
+      </el-tab-pane>
+      <el-tab-pane name="fileMonitore" label="日报上传监测" :lazy="true">
+        <div class="warningStyle" v-show="dayDataMonitor == '1'">
+          <div>
+            <i class="el-icon-warning warning-icon"></i>
+            提示：日报上传监测逻辑为每日归档量和日报上传量不相同则为异常
+          </div>
+        </div>
+        <span style="font-size: 15px; font-weight: bold">日报上传监测情况：</span>
+        <span style="font-size: 15px" :class="{ red: dayDataMonitorIsNormal == '异常' }">{{
+          dayDataMonitorIsNormal
+        }}</span>
+        <el-button @click="dayMonitorSituation" style="margin-left: 8px" type="primary"
+          >重新监测
+        </el-button>
+        <h4 style="padding: 25px 0 10px; font-size: 15px">
+          日报上传监测数据
+          <DateRangePickerProhibitTodayNext
+            v-model="dailyTime"
+            type="daterange"
+            class="date-item"
+            value-format="yyyy-MM-dd"
+            @input="dailyTimeChange"
+            unlink-panels
+            :clearable="false" />
+          <!-- <date-range-picker
+
+          /> -->
+          <el-button size="small" type="primary" @click="crud.toQuery">查询</el-button>
+          <el-button
+            @click="dayMonitor"
+            style="margin-left: 8px"
+            type="primary"
+            plain
+            :disabled="dayDataMonitor == '0'"
+            >刷新
+          </el-button>
+          <el-button style="margin-left: 8px" @click="upload">上传同步 </el-button>
+        </h4>
+        <div class="echarts" v-show="dayDataMonitor == '1'">
+          <!-- 日期选择器 -->
+
+          <el-row style="background: #fff; padding: 16px 16px 0">
+            <el-col :span="24">
+              <el-tabs v-model="activeName" @tab-click="tableHandleChange">
+                <el-tab-pane label="表格" name="second">
+                  <el-table
+                    :data="crud.data"
+                    :row-class-name="tableRowClassName"
+                    ref="workstationManageTableref"
+                    lazy
+                    v-loading="crud.loading"
+                    class="table-fixed"
+                    row-key="id"
+                    min-height="600px">
+                    <!-- fixed="left" -->
+                    <el-table-column
+                      label="序号"
+                      width="80px"
+                      align="center"
+                      :show-overflow-tooltip="true">
+                      <template slot-scope="scope">
+                        <span>{{ (crud.page.page - 1) * crud.page.size + scope.$index + 1 }}</span>
+                        <!-- <span>{{ scope.$index + 1 }}</span> -->
+                      </template>
+                    </el-table-column>
+                    <el-table-column
+                      v-for="(item, index) in projectHeader"
+                      :key="index"
+                      align="center"
+                      :label="item.label"
+                      :prop="item.prop"
+                      :min-width="item.width">
+                      <template slot-scope="scope">
+                        <span>
+                          {{ scope.row[item.prop] }}
+                        </span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="120px">
+                      <template slot-scope="scope">
+                        <el-button
+                          type="text"
+                          size="small"
+                          @click="monitorInfoPageRefresh(scope.row)"
+                          v-if="scope.row.pigCount != scope.row.checkCount"
+                          >刷新</el-button
+                        >
+                        <el-button type="text" size="small" @click="deleteData(scope.row)"
+                          >删除</el-button
+                        >
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <pagination />
+                </el-tab-pane>
+                <el-tab-pane label="折线图" name="first">
+                  <line-chart
+                    :height="`400px`"
+                    :className="'lineChart'"
+                    :chart-data="achiveChartData"
+                    :x-data="dayTime" />
+                </el-tab-pane>
+              </el-tabs>
+            </el-col>
+          </el-row>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane name="checkProjectCode" label="检查项目编码监测" :lazy="true">
+        <checkProjectCode v-if="Monitore == 'checkProjectCode'" />
+      </el-tab-pane>
+    </el-tabs>
+
+    <el-dialog title="选择忽略原因" :visible.sync="ingoreDialogVisible" width="350px">
+      <h4 style="margin: 8px 0">忽略后，该数据不再进入监测范围</h4>
+      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+        <el-form-item label="" prop="delReson">
+          <el-select
+            v-model="ruleForm.delReson"
+            clearable
+            placeholder="选择忽略原因"
+            class="filter-item"
+            style="width: 320px">
+            <el-option
+              v-for="item in dict.delete_reason"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="ingoreDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="ignoreResonBtn">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import LineChart from '../components/LineChart.vue';
+import qualityMonitore from './qualityMonitore.vue';
+import moveMonitore from './moveMonitore.vue';
+
+import institutionMonitor, {
+  deleteRecord,
+  qualityDataMonitorConfigInfo,
+  monitorInfoPageRefresh,
+  dayMonitorAgain,
+  removeDayDataByHosAndDate,
+  uploadHandleDataMonitor,
+  dayMonitorRefresh,
+} from '@/api/institutionMonitor/index';
+import DateRangePicker from '@/components/DateRangePicker';
+import DateRangePickerProhibitTodayNext from '@/components/DateRangePickerProhibitTodayNext';
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import pagination from '@crud/Pagination';
+import { getDay } from '@/utils/getTime';
+import imageAbnormalMonitor from './imageAbnormalMonitor.vue';
+import leakageAnomaly from './leakageAnomaly.vue';
+import checkProjectCode from './checkProjectCode.vue';
+const start = getDay(-7);
+const end = getDay(-1);
+export default {
+  cruds() {
+    return CRUD({
+      title: '机构管理',
+      url: '',
+      sort: ['updateTime,desc'],
+      query: {
+        startTime: start,
+        endTime: end,
+      },
+    });
+  },
+  dicts: ['delete_reason'],
+  // name: "monitorDetail",
+  components: {
+    LineChart,
+    qualityMonitore,
+    moveMonitore,
+    DateRangePicker,
+    pagination,
+    imageAbnormalMonitor,
+    leakageAnomaly,
+    checkProjectCode,
+    DateRangePickerProhibitTodayNext,
+  },
+  mixins: [presenter(), header(), crud()],
+  data() {
+    return {
+      Monitore: 'imageMonitore', //'imageMonitore' ,
+      // 日期选中
+      time: [],
+      dailyTime: [],
+      // 存取图表数据
+      achiveChartData: {
+        // 日均检查量
+        dayAverageCount: [],
+        // 每日检查量
+        dayMonitorInfo: [],
+        dayuploadCount: [],
+      },
+      // 存取归档总量
+      archiveTotalData: {
+        archiveTotal: 0,
+        todayArchiveCount: 0,
+      },
+      // 存取图表时间
+      dayTime: [],
+      hospitalName: '',
+      hospitalNameId: '',
+      hospitalId: '',
+      lookPicMonitor: '',
+      dayDataMonitor: '',
+      takePhotoAbnormal: [],
+      lookPhotoAbnormal: [],
+      checkTable: [
+        { label: '检查编号', prop: 'accessNumber', width: '120px' },
+        { label: '姓名', prop: 'patientName', width: '120px' },
+        { label: '性别', prop: 'patientSex', width: '80px' },
+        { label: '年龄', prop: 'patientAge', width: '80px' },
+        { label: 'studyUid', prop: 'studyUid', minWidth: '140px' },
+        { label: '检查时间', prop: 'patientCheckDate', width: '150px' },
+        { label: '监测时间', prop: 'monitorTime', width: '150px' },
+        { label: '错误原因', prop: 'remark', minWidth: '250px' },
+      ],
+      lookPhotoLoading: false,
+      takePhotoLoading: false,
+      loading: false,
+      isStatus: '',
+      emptyText: '',
+      isNormal: '',
+      dayDataMonitorIsNormal: '',
+      activeName: 'second',
+      lineData: [],
+      projectHeader: [
+        { label: '日期', prop: 'patientCheckDate', width: '120px' },
+        { label: '归档量', prop: 'pigCount', width: '100px' },
+        { label: '日报上传量', prop: 'checkCount', width: '100px' },
+        { label: '异常数据', prop: 'accessNumbers', width: '340px' },
+      ],
+      formatEmpty: '-',
+      abnormalDataInfo: {},
+      ingoreDialogVisible: false,
+      chargeAmountRate: 0,
+      chargeAmountStatus: '',
+      machineInfoStatus: '',
+      chargeAmountMonitor: '',
+      machineInfoMonitor: '',
+      currentRow: {},
+      scenceId: '',
+      delReson: '',
+      ruleForm: {
+        delReson: '',
+      },
+      rules: {
+        delReson: [{ required: true, message: '请选择忽略原因', trigger: 'change' }],
+      },
+    };
+  },
+  created() {
+    // 默认选中一周时间
+    // this.loading = true;
+    this.getTimeFn();
+    this.crud.url = '/monitor/monitorInfoPage';
+    this.scenceId = this.$route.params.scenceId;
+    // this.hospitalName = this.$route.params.hospitalName;
+    // this.hospitalNameId = this.$route.params.hospitalId;
+    // this.hospitalId = this.$route.params.hospitalId;
+    this.qualityDataMonitorConfigInfo();
+    this.getAbnormalData();
+  },
+  mounted() {},
+  methods: {
+    qualityDataMonitorConfigInfo() {
+      qualityDataMonitorConfigInfo({
+        scenceId: this.$route.params.scenceId,
+      }).then(res => {
+        this.dayDataMonitorIsNormal =
+          res.dayDataStatus == 1 ? '异常' : res.dayDataStatus == 2 ? '正常' : '-';
+        this.hospitalName = res.hospitalName;
+        this.hospitalNameId = res.hospitalId;
+        this.hospitalId = res.hospitalId;
+        this.lookPicMonitor = res.lookPicMonitor; // 看图监测
+        this.dayDataMonitor = res.dayDataMonitor;
+        this.chargeAmountRate = res.chargeAmountRate; // 收费量监测
+        this.chargeAmountStatus = res.chargeAmountStatus; // 收费量监测情况1异常2正常
+        this.chargeAmountMonitor = res.chargeAmountMonitor; // 收费量监测是否开启0否1是
+        this.machineInfoStatus = res.machineInfoStatus; // 自助机监测状态 1异常2正常
+        this.machineInfoMonitor = res.machineInfoMonitor; // 自助机监测是否开启0否1是
+        this.crud.toQuery();
+      });
+    },
+    // 日报监测删除
+    deleteData(row) {
+      this.$confirm('是否删除此条数据, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          let data = {
+            hospitalId: this.$route.params.scenceId,
+            date: row.patientCheckDate,
+          };
+          removeDayDataByHosAndDate(data).then(res => {
+            this.$message({
+              type: 'success',
+              message: '删除成功!',
+            });
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除',
+          });
+        });
+    },
+    tableRowClassName({ row, rowIndex }) {
+      if (row.pigCount != row.checkCount) {
+        return 'rowRed';
+      }
+      return '';
+    },
+    // 忽略
+    ignoreFn(row) {
+      this.ruleForm.delReson = '';
+      this.currentRow = row;
+      this.ingoreDialogVisible = true;
+    },
+    ignoreResonBtn() {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          const { patientId, scenceId } = this.currentRow;
+          let data = [{ patientId, scenceId, deleteReason: this.ruleForm.delReson }];
+          deleteRecord(data).then(res => {
+            this.$message.success('忽略成功！');
+            this.getAbnormalData();
+            this.ingoreDialogVisible = false;
+          });
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    getTimeFn() {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
+      this.time[0] = this.formatDate(start);
+      this.time[1] = this.formatDate(end);
+    },
+    formatDate(date) {
+      var myyear = date.getFullYear();
+      var mymonth = date.getMonth() + 1;
+      var myweekday = date.getDate();
+
+      if (mymonth < 10) {
+        mymonth = '0' + mymonth;
+      }
+      if (myweekday < 10) {
+        myweekday = '0' + myweekday;
+      }
+      return myyear + '-' + mymonth + '-' + myweekday;
+    },
+    getMonitorDetail(row) {
+      this.loading = true;
+      // 置空图表数据
+      this.achiveChartData = {
+        dayAverageCount: [],
+        dayMonitorInfo: [],
+        dayuploadCount: [],
+      };
+      this.dayTime = [];
+      // 调用接口
+      institutionMonitor
+        .monitorDetail({
+          scenceId: this.scenceId,
+          hospitalId: this.hospitalId,
+          startTime: this.time ? this.time[0] : null,
+          endTime: this.time ? this.time[1] : null,
+        })
+        .then(res => {
+          // if (row) this.Monitore = "imageMonitore";
+          this.loading = false;
+          this.archiveTotalData.archiveTotal = res.archiveTotal;
+          this.archiveTotalData.todayArchiveCount = res.todayArchiveCount;
+          this.lineData = res.dayMonitorInfo;
+          let dayMonitorInfo = res.dayMonitorInfo;
+          let dayAverageCount = res.dayAverageCount;
+          for (let list of dayMonitorInfo) {
+            // dayMonitorInfo 每日 dayArchiveCount 归档
+            this.achiveChartData.dayMonitorInfo.push(list.dayCheckCount);
+            this.achiveChartData.dayAverageCount.push(list.dayArchiveCount);
+            this.achiveChartData.dayuploadCount.push(list.dayuploadCount);
+            this.dayTime.push(list.dayTime);
+          }
+        });
+    },
+    handleClick(val, event) {
+      if (val.name == 'fileMonitore') {
+        if ((this.dailyTime && this.dailyTime.length == 0) || !this.dailyTime) {
+          this.dailyTime = [getDay(-7), getDay(-1)];
+          this.crud.query.startTime = this.dailyTime[0];
+          this.crud.query.endTime = this.dailyTime[1];
+        }
+        console.log(this.crud.query, 'this.crud.query');
+        this.crud.toQuery();
+      }
+    },
+    tableHandleChange(val, event) {
+      if (val.name == 'first') {
+        this.getMonitorDetail(true);
+      }
+    },
+    dailyTimeChange(e) {
+      if (e && e.length != 0) {
+        this.crud.query.startTime = this.dailyTime[0];
+        this.crud.query.endTime = this.dailyTime[1];
+      }
+      this.$forceUpdate();
+    },
+    // 日期改变调用接口
+    timeChange(e) {
+      this.$nextTick(() => {
+        this.getMonitorDetail();
+        setTimeout(() => {
+          this.crud.toQuery();
+        }, 500);
+      });
+    },
+    takeMonitor() {
+      this.takePhotoLoading = true;
+      setTimeout(() => {
+        this.takePhotoLoading = false;
+        this.$message.success('监测完成');
+      }, 10000);
+    },
+    // 看图异常
+    getAbnormalData(row) {
+      institutionMonitor.getAbnormalData({ scenceId: this.scenceId }).then(res => {
+        this.abnormalDataInfo = res;
+        this.lookPhotoAbnormal = res.abnormalData;
+        this.isStatus = res.lookPicMonitor == 0;
+        this.isNormal = res.lookPicStatus == 1 ? '异常' : res.lookPicStatus == 2 ? '正常' : '-';
+        if (res.lookPicStatus == 1 && res.abnormalData.length == 0) {
+          this.emptyText = '数据不足5例';
+        } else if (res.lookPicStatus == '-') {
+          this.emptyText = '暂无数据';
+          this.lookPhotoAbnormal = [];
+        } else {
+          this.emptyText = '暂无数据';
+        }
+        if (row) {
+          this.lookPhotoLoading = false;
+          this.$message.success('监测完成');
+        }
+      });
+    },
+    dayMonitor() {
+      dayMonitorAgain({
+        scenceId: this.scenceId,
+        startTime: this.dailyTime[0],
+        endTime: this.dailyTime[1],
+      }).then(res => {
+        this.$message.success('刷新成功');
+        this.qualityDataMonitorConfigInfo();
+      });
+    },
+    dayMonitorSituation() {
+      dayMonitorRefresh({ scenceId: this.scenceId }).then(res => {
+        this.$message.success('监测完成');
+        this.qualityDataMonitorConfigInfo();
+      });
+    },
+    // 刷新状态
+    monitoreClick(str) {
+      this.qualityDataMonitorConfigInfo();
+      this.$message.success(str);
+    },
+    lookMonitor() {
+      this.qualityDataMonitorConfigInfo();
+      this.lookPhotoLoading = true;
+      institutionMonitor.monitorAgain({ scenceId: this.scenceId, type: 2 }).then(res => {
+        if (res) {
+          this.getAbnormalData(res);
+        }
+      });
+    },
+    getMonitorInfoPage() {
+      let data = {
+        startTime: this.time ? `${this.time[0]}` : undefined,
+        endTime: this.time ? `${this.time[1]}` : undefined,
+        scenceId: this.scenceId,
+        hospitalId: this.hospitalId,
+      };
+      console.log('data', data);
+      institutionMonitor.monitorInfoPage(data).then(res => {});
+    },
+
+    monitorInfoPageRefresh(row) {
+      let data = {
+        hospitalId: this.scenceId,
+        checkDate: row.patientCheckDate,
+      };
+      monitorInfoPageRefresh(data).then(res => {
+        this.$message.success('刷新成功');
+        this.crud.toQuery();
+      });
+    },
+    upload() {
+      const params = {
+        hospitalId: this.scenceId,
+        startDate: this.dailyTime[0],
+        endDate: this.dailyTime[1],
+        handleType: 2,
+      };
+      uploadHandleDataMonitor(params).then(res => {
+        this.$message.success('上传同步成功');
+      });
+    },
+    [CRUD.HOOK.beforeRefresh](crud) {
+      // crud.query = {
+      //   // startTime: this.time[0] ? `${this.time[0]}` : start,
+      //   // endTime: this.time[1] ? `${this.time[1]}` : end,
+      //   hospitalId: this.scenceId,
+      //   // hospitalId: this.hospitalId,
+      // };
+      crud.query.hospitalId = this.scenceId;
+    },
+    [CRUD.HOOK.afterRefresh](crud) {},
+  },
+};
+</script>
+<style>
+.tooltipAbnormal {
+  /* max-height: 60vh;
+    overflow: auto; */
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+::v-deep .el-table .rowRed td {
+  color: red;
+}
+
+.red {
+  color: red;
+}
+
+.hospitalName {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+
+  img {
+    margin-right: 8px;
+    width: 12px;
+    height: 16px;
+  }
+
+  span {
+    font-size: 14px;
+  }
+}
+
+.echarts {
+  background-color: #fff;
+  margin-top: 0.5rem;
+  border: 1px solid #dcdfe6;
+  width: 100% !important;
+}
+
+.date {
+  padding: 1rem;
+}
+
+::v-deep .el-date-editor--daterange.el-input__inner {
+  width: 280px;
+}
+
+::v-deep .el-date-editor .el-range-separator {
+  width: 10%;
+}
+
+.showOverTooltip {
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  /*这里是3行*/
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+</style>