ylyx-cli 1.0.0

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

@@ -0,0 +1,1385 @@
+<template>
+  <div class="app-container institutionMonitor" ref="monitorContainer">
+    <div class="monitor-top" ref="fixedDiv" style="width: calc(100%)">
+      <el-form
+        :inline="true"
+        :model="query"
+        ref="topForm"
+        class="form-inline-hospital"
+        size="small">
+        <el-form-item prop="address">
+          <!--  区域   -->
+          <el-cascader
+            v-model="query.address"
+            clearable
+            placeholder="机构地区"
+            :options="provinceList"
+            :props="props"
+            @active-item-change="handleItemChange"
+            @change="provinceChange">
+          </el-cascader>
+        </el-form-item>
+        <!--  类别      -->
+        <el-form-item prop="hospitalTypeList">
+          <el-select
+            v-model="query.hospitalTypeList"
+            clearable
+            multiple
+            placeholder="机构类别"
+            class="filter-item"
+            style="width: 160px"
+            @change="rightChange">
+            <el-option
+              v-for="item in dict.ins_category"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <!--    机构等级   -->
+        <el-form-item prop="levelList">
+          <el-select
+            v-model="query.levelList"
+            clearable
+            multiple
+            placeholder="机构等级"
+            class="filter-item"
+            style="width: 160px"
+            @change="rightChange">
+            <el-option
+              v-for="item in dict.agency_hos_rank"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <!-- 机构名称 -->
+        <el-form-item prop="hospitalName">
+          <el-input
+            placeholder="请输入机构名称"
+            v-model.trim="query.hospitalName"
+            class="filter-item"
+            style="width: 160px"
+            @input="inputChange"
+            clearable>
+          </el-input>
+        </el-form-item>
+        <!--    是否联网    -->
+        <el-form-item prop="connectStatus">
+          <el-select
+            v-model="query.connectStatus"
+            clearable
+            placeholder="是否联网"
+            class="filter-item"
+            style="width: 160px"
+            @input="forceUpdate">
+            <el-option
+              v-for="item in dict.connect_status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <!--    看图情况    -->
+        <el-form-item prop="lookPicStatus">
+          <el-select
+            v-model="query.lookPicStatus"
+            clearable
+            placeholder="看图情况"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.gateway_status.filter(x => x.label != '停止')"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="dayDataStatus">
+          <el-select
+            v-model="query.dayDataStatus"
+            clearable
+            placeholder="日报上传监测"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dayDataMonitorList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="qualityDataStatus">
+          <el-select
+            v-model="query.qualityDataStatus"
+            clearable
+            placeholder="归档数据质量情况"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.quality_data_status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="chargeAmountStatus">
+          <el-select
+            v-model="query.chargeAmountStatus"
+            clearable
+            placeholder="客户端运行情况"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.chargeAmount_status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="autoUploadType">
+          <el-select
+            v-model="query.autoUploadType"
+            clearable
+            placeholder="自动上传方式"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.auto_upload_type"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="runningStatus">
+          <el-select
+            v-model="query.runningStatus"
+            clearable
+            placeholder="机构状态"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.running_status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="monitorStatus">
+          <el-select
+            v-model="query.monitorStatus"
+            clearable
+            placeholder="是否监测"
+            class="filter-item"
+            style="width: 160px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in dict.monitor_status"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="urlKey">
+          <el-input
+            placeholder="urlKey"
+            v-model.trim="query.urlKey"
+            class="filter-item"
+            style="width: 160px"
+            @input="inputChange"
+            clearable>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="isMissDrawing">
+          <el-select
+            v-model="query.isMissDrawing"
+            clearable
+            placeholder="是否漏图"
+            class="filter-item"
+            style="width: 120px"
+            @change="forceUpdate">
+            <el-option
+              v-for="item in archiveFlagArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="lookPicAbnormalMonitor">
+          <el-select
+            v-model="query.lookPicAbnormalMonitor"
+            clearable
+            placeholder="是否开启看图异常监测"
+            class="filter-item"
+            style="width: 180px"
+            @change="rightChange">
+            <el-option
+              v-for="item in archiveFlagArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="leakageMonitor">
+          <el-select
+            v-model="query.leakageMonitor"
+            clearable
+            placeholder="是否开启漏图监测"
+            class="filter-item"
+            style="width: 180px"
+            @change="rightChange">
+            <el-option
+              v-for="item in archiveFlagArr"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <date-range-picker
+            style="width: 300px; height: 34px"
+            popper-class="isDisabledDate"
+            @change="dateChange"
+            :clearable="false"
+            v-model="query.checkTime"
+            valueFormat="yyyy-MM-dd"
+            :picker-options="pickerOptions"
+            @blur="forceUpdate" />
+        </el-form-item>
+        <el-button @click="getToQuery" class="filter-item" size="small">查询</el-button>
+        <el-button @click="resetForm" class="filter-item" size="small" style="margin-left: 5px"
+          >重置</el-button
+        >
+        <el-button
+          @click="exportTable1"
+          class="filter-item"
+          size="small"
+          style="margin-left: 5px"
+          :loading="downloadLoading1"
+          >导出列表</el-button
+        >
+        <el-button
+          @click="exportTable"
+          class="filter-item"
+          size="small"
+          style="margin-left: 5px"
+          :loading="downloadLoading"
+          >导出维护记录</el-button
+        >
+        <el-button
+          @click="exportMonitorDetail"
+          class="filter-item"
+          size="small"
+          style="margin-left: 5px"
+          :loading="downloadLoading2"
+          >导出看图监测详情</el-button
+        >
+
+        <el-popover placement="top" width="160" v-model="visible">
+          <p>一键异常监测需要很长时间，请耐心等待，稍后刷新页面查看机构最新状态</p>
+          <div style="text-align: right; margin: 0">
+            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
+            <el-button type="primary" size="mini" @click="fastMonitorFn">确定</el-button>
+          </div>
+          <el-button slot="reference" class="filter-item" size="small" style="margin-left: 5px"
+            >一键异常监测
+          </el-button>
+        </el-popover>
+        <el-button
+          @click="EmailConfiguration"
+          class="filter-item"
+          size="small"
+          style="margin-left: 5px"
+          >邮箱配置</el-button
+        >
+      </el-form>
+      <!-- 统计模块 -->
+      <div class="hospital_statics">
+        <div class="left">
+          <!-- 所有机构 -->
+          <div class="hospital_total">
+            <img src="~@/assets/images/hospital_icon.png" alt="" />
+
+            <div class="picture">
+              <p>
+                看图异常情况
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="统计自开始监测以来的所有被监测机构的总体看图异常情况，异常率=（看图监测异常量+患者扫码异常量+人工统计异常量）/归档量"
+                  placement="top">
+                  <span class="el-icon-question"></span>
+                </el-tooltip>
+              </p>
+              <p class="special">
+                归档总量：<span>{{ numberDeal(totalMonitoringData.archivedAmount) }}</span>
+              </p>
+              <p class="special">
+                异常总量：<span>{{ numberDeal(totalMonitoringData.abnormalTotal) }}</span>
+              </p>
+              <p class="special">
+                总异常率：<span>{{ totalMonitoringData.abnormalTotalRate }}</span>
+              </p>
+            </div>
+          </div>
+          <!-- 联网机构 -->
+          <div class="hospital_network">
+            <div class="picture" style="width: 90%">
+              <p>
+                <img src="~@/assets/images/hospital_icon.png" alt="" />
+                漏图情况
+                <el-tooltip
+                  class="item"
+                  effect="dark"
+                  content="传图异常情况：统计自开始监测以来的所有被监测机构的总体传图异常情况，漏图率=（漏图总张数/应上传图像数量*1000000）；多图率=（多图总张数/应上传图像数量*1000000）"
+                  placement="top">
+                  <span class="el-icon-question"></span>
+                </el-tooltip>
+              </p>
+              <p class="special">
+                图像总张数：<span>{{ numberDeal(totalMonitoringData.imageCount) }}</span>
+              </p>
+              <el-row>
+                <el-col :span="12">
+                  <p class="special">
+                    漏图总张数：<span>{{
+                      numberDeal(totalMonitoringData.missingDrawingsTotal)
+                    }}</span>
+                  </p>
+                  <p class="special">
+                    总漏图率：<span>{{ totalMonitoringData.missingDrawingsRate }} PPM</span>
+                  </p>
+                </el-col>
+                <el-col :span="12">
+                  <p class="special">
+                    多图总张数：<span>{{
+                      totalMonitoringData.moreDrawingsTotal
+                        ? numberDeal(totalMonitoringData.moreDrawingsTotal)
+                        : '0'
+                    }}</span>
+                  </p>
+                  <p class="special">
+                    总多图率：<span>{{ totalMonitoringData.moreDrawingsRate || 0 }} PPM</span>
+                  </p>
+                </el-col>
+              </el-row>
+            </div>
+          </div>
+          <h3 class="title-text">总监测</h3>
+        </div>
+        <!-- 关键数据 -->
+        <div class="left right">
+          <div class="hospital_total">
+            <img src="~@/assets/images/archive.png" alt="" />
+            <div class="picture">
+              <p>看图情况</p>
+              <p class="special">
+                正常：<span>{{ numberDeal(hospitalTotalData.lookPicNormal) }}</span>
+              </p>
+              <p class="special">
+                异常：<span>{{ numberDeal(hospitalTotalData.lookPicException) }}</span>
+              </p>
+            </div>
+          </div>
+          <div class="hospital_network">
+            <img src="~@/assets/images/archive.png" alt="" />
+            <div class="picture">
+              <p>客户端运行情况</p>
+              <p class="special">
+                正常：<span>{{ numberDeal(hospitalTotalData.iuWorkStationNormal) }}</span>
+              </p>
+              <p class="special">
+                异常：<span>{{ numberDeal(hospitalTotalData.iuWorkStationException) }}</span>
+              </p>
+            </div>
+          </div>
+          <h3 class="title-text">今日监测</h3>
+        </div>
+      </div>
+    </div>
+    <!--工具栏-->
+
+    <div class="tableData">
+      <!-- 查询条件 -->
+
+      <!-- 表格 -->
+      <div ref="monitorTable">
+        <el-table :data="crud.data" v-loading="crud.loading" :element-loading-text="loadingText">
+          <el-table-column label="序号" width="85px" :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 prop="hospitalName" label="机构名称" min-width="180px">
+          </el-table-column>
+          <el-table-column prop="hospitalType" label="机构类别" min-width="80">
+            <template slot-scope="scope">
+              {{ hosCategory(scope.row.hospitalType) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="level" label="机构等级" min-width="80">
+            <template slot-scope="scope">
+              {{ hosRank(scope.row.level) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="connectStatus" label="是否联网" min-width="80">
+            <template slot-scope="scope">
+              {{ scope.row.connectStatus == 1 ? '已联网' : '未联网' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="runningState" label="机构状态" min-width="80">
+            <template slot-scope="scope">
+              {{ runningStateFilter(scope.row.runningState) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="monitorStatus" label="是否监测" min-width="100">
+            <template slot-scope="scope">
+              {{ monitorStatusFilter(scope.row.monitorStatus) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="lookPicStatus" label="看图情况" min-width="100">
+            <template slot-scope="scope">
+              <div v-if="scope.row.lookPicStatus == 1" class="warn">
+                <i></i>
+                <span>异常</span>
+              </div>
+              <div v-if="scope.row.lookPicStatus == 2" class="normal">
+                <i></i>
+                <span>正常</span>
+              </div>
+              <div v-if="scope.row.lookPicStatus == '-'">
+                <p>{{ scope.row.lookPicStatus }}</p>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="abnormalRate" label="看图异常率" min-width="120">
+          </el-table-column>
+          <el-table-column prop="missingDrawingsRate" label="漏图率（PPM）" min-width="140">
+          </el-table-column>
+          <el-table-column prop="moreDrawingsRate" label="多图率（PPM）" min-width="140">
+          </el-table-column>
+          <el-table-column prop="qualityDataStatus" label="归档数据质量情况" min-width="80">
+            <template slot-scope="scope">
+              <div v-if="scope.row.qualityDataStatus == 1" class="warn">
+                <i></i>
+                <span>异常</span>
+              </div>
+              <div v-else-if="scope.row.qualityDataStatus == 2" class="normal">
+                <i></i>
+                <span>正常</span>
+              </div>
+              <div v-else>
+                <span>{{ '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="iuWorkStationStatus" label="客户端运行情况" min-width="80">
+            <template slot-scope="scope">
+              <div v-if="scope.row.iuWorkStationStatus == 1" class="warn">
+                <i></i>
+                <span>异常</span>
+              </div>
+              <div v-else-if="scope.row.iuWorkStationStatus == 2" class="normal">
+                <i></i>
+                <span>正常</span>
+              </div>
+              <div v-else>
+                <span>{{ '-' }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="dayDataStatus" label="日报上传监测" min-width="120">
+            <template slot-scope="scope">
+              <div v-if="scope.row.dayDataStatus == 1" class="warn">
+                <i></i>
+                <span>异常</span>
+              </div>
+              <div v-else-if="scope.row.dayDataStatus == 2" class="normal">
+                <i></i>
+                <span>正常</span>
+              </div>
+              <div v-else>
+                <span>-</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="urlKey" label="urlKey" min-width="70">
+            <template slot-scope="scope">
+              {{ scope.row.urlKey || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="autoUploadType" label="自动上传方式" min-width="120">
+            <template slot-scope="scope">
+              {{ autoUploadType(scope.row.autoUploadType) || '-' }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" fixed="right" width="250">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="toAddRecord(scope.row)"
+                >维护记录</el-button
+              >
+              <el-button
+                size="mini"
+                type="text"
+                :disabled="
+                  scope.row.lookPicMonitor == 0 &&
+                  scope.row.gatewayMonitor == 0 &&
+                  scope.row.monitorStatus == 0
+                "
+                @click="lookMonitor(scope.row.scenceId)"
+                >重新监测</el-button
+              >
+              <el-button size="mini" type="text" @click="monitorPath(scope.row)"
+                >监测详情</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <!--分页组件-->
+        <pagination />
+      </div>
+    </div>
+
+    <!-- 维护记录弹窗 -->
+    <el-dialog
+      :title="hospitalName"
+      top="5vh"
+      :visible.sync="recordVisible"
+      :close-on-click-modal="false"
+      :before-close="closeDialog"
+      v-if="recordVisible">
+      <el-form :model="upHoldForm" ref="upHoldForm" :rules="rules">
+        <el-form-item prop="maintainContent">
+          <el-input
+            type="textarea"
+            placeholder="请输入信息"
+            v-model.trim="upHoldForm.maintainContent"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer-bottom">
+        <div>
+          <span class="el-icon-warning"></span>
+          <span>提示：【保存】后不可修改，请确认无误后再提交！</span>
+        </div>
+        <div>
+          <el-button @click="closeDialog">取 消</el-button>
+          <el-button class="sure" type="primary" @click="toSubmit('upHoldForm')">保 存</el-button>
+        </div>
+      </div>
+      <!-- 统计次数 -->
+      <div class="total">
+        共维护 <span>{{ maintainRecordTotal }}</span> 次
+      </div>
+      <!-- 时间线 -->
+      <div class="timeLine" ref="rightDiv">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in maintainRecordData"
+            :key="index"
+            color="#1890FF"
+            placement="top">
+            <div class="content">
+              <p>
+                <span>{{ activity.operator }}</span
+                >&ensp;&ensp;{{ activity.createTime }}
+              </p>
+              <p>{{ activity.maintainContent }}</p>
+            </div>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-dialog>
+    <el-dialog
+      title="邮箱配置"
+      top="10vh"
+      width="560px"
+      :visible.sync="emailShow"
+      :close-on-click-modal="false">
+      <el-dialog width="300px" title="定时发送cron" :visible.sync="innerVisibleCron" append-to-body>
+        <span>
+          <div v-for="(item, index) in innerVisibleCronList" :key="index">
+            <p style="line-height: 1.75em; font-size: 15px; padding-left: 25px">
+              {{ item }}
+            </p>
+          </div>
+        </span>
+      </el-dialog>
+      <span class="EmailSet">
+        <el-form size="small" :model="form" ref="form" :rules="rules" label-width="110px">
+          <el-form-item label="定时发送cron" prop="cron">
+            <el-input v-model.trim="form.cron" placeholder="请输入定时发送cron"></el-input>
+            <div class="testCron">
+              <el-button type="primary" @click="checkCorn">测试cron</el-button>
+            </div>
+          </el-form-item>
+          <div v-for="(item, index) in form.cardForm" :key="index" class="cardForm">
+            <el-form-item
+              label="邮箱地址"
+              :prop="`cardForm.${index}.mailAdress`"
+              :rules="rules.cardForm.mailAdress">
+              <!-- " -->
+              <el-input v-model.trim="item.mailAdress" placeholder="请输入邮箱"></el-input>
+            </el-form-item>
+            <div class="emailAdd">
+              <el-button
+                type="primary"
+                size="mini"
+                icon="el-icon-plus"
+                @click="EmailCickAdd"
+                circle></el-button>
+              <el-button
+                v-if="form.cardForm.length != 1"
+                type="danger"
+                @click="EmailCickDel(index)"
+                size="mini"
+                icon="el-icon-minus"
+                circle></el-button>
+            </div>
+          </div>
+        </el-form>
+      </span>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="emailShow = false">取 消</el-button>
+        <el-button
+          size="small"
+          type="primary"
+          :loading="submitFormLoading"
+          @click="submitForm('form')"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+import institutionMonitor, {
+  monitorAllType,
+  totalMonitoring,
+} from '@/api/institutionMonitor/index';
+import pagination from '@crud/Pagination';
+import CRUD, { presenter, header, crud } from '@crud/crud';
+import { downloadFile } from '@/utils/index';
+import { download } from '@/api/data';
+import DateRangePicker from '@/components/DateRangePicker';
+import { getDay } from '@/utils/getTime';
+
+const start = getDay(-30) + ' 00:00:00';
+const end = getDay(-1) + ' 23:59:59';
+export default {
+  name: 'institutionMonitor',
+  components: {
+    institutionMonitor,
+    pagination,
+    DateRangePicker,
+  },
+  dicts: [
+    'monitor_status',
+    'ins_category',
+    'agency_hos_rank',
+    'gateway_status',
+    'connect_status',
+    'running_status',
+    'auto_upload_type',
+    'quality_data_status',
+    'iu_workstation_status',
+    'machineInfo_status',
+    'chargeAmount_status',
+  ],
+  cruds() {
+    return CRUD({
+      title: '机构',
+      url: '',
+      crudMethod: { ...institutionMonitor },
+      sort: [],
+      query: {
+        checkTime: [start, end],
+      },
+    });
+  },
+  data() {
+    var checkEmailAdress = (rule, value, callback) => {
+      let indexOfNun = rule.field.indexOf('.mailAdress');
+      let num = Number(rule.field.substring(9, indexOfNun));
+      if (this.form.cardForm.length > 1) {
+        let data = [];
+        this.form.cardForm.forEach((tmp, index) => {
+          if (tmp.mailAdress == this.form.cardForm[num].mailAdress) {
+            data.push(tmp);
+          }
+        });
+        if (data.length == 1) {
+          callback();
+        } else {
+          callback(new Error('邮箱地址已存在，请重新输入'));
+        }
+      } else {
+        callback();
+      }
+    };
+    return {
+      waterMarkProp: {
+        zIndex: 1,
+        devicePixelRatio: 2,
+        text: '',
+        showTime: true,
+      },
+      rules: {
+        query: {},
+        maintainContent: [{ required: true, message: '请输入维护记录', trigger: 'blur' }],
+      },
+      fixedDivHeight: 0,
+      tableHeight: '500px',
+      archiveFlagArr: [
+        { value: '0', label: '否' },
+        { value: '1', label: '是' },
+      ],
+      dayDataMonitorList: [
+        { value: '1', label: '异常' },
+        { value: '2', label: '正常' },
+      ],
+      // 机构总数数据
+      hospitalTotalData: {},
+      // 维护记录弹窗显示与隐藏
+      recordVisible: false,
+      formatEmpty: '-',
+      // 表单传取参数
+      upHoldForm: {
+        maintainContent: '',
+      },
+      // 机构地区存取数据
+      provinceList: [],
+      // 机构地区绑定的关系
+      props: {
+        value: 'value',
+        children: 'cities',
+        label: 'label',
+        checkStrictly: true,
+      },
+      // 维护记录
+      maintainRecordTotal: 0,
+      maintainRecordData: [],
+      // 添加维护记录的id
+      scenceId: '',
+      hospitalName: '',
+      // 维护记录分页加载
+      recordPage: 0,
+      // 导出加载图标的显示与隐藏
+      downloadLoading: false,
+      downloadLoading1: false,
+      downloadLoading2: false,
+      emailShow: false,
+      loadingText: '',
+      visible: false,
+      form: {
+        cron: '',
+        cardForm: [{ mailAdress: '' }],
+      },
+      rules: {
+        cron: [{ required: true, message: '请输入定时发送cron', trigger: ['blur', 'change'] }],
+        cardForm: {
+          mailAdress: [
+            { required: true, message: '请输入邮箱地址', trigger: ['blur', 'change'] },
+            {
+              type: 'email',
+              message: '请输入正确的邮箱地址',
+              trigger: ['blur', 'change'],
+            },
+            { validator: checkEmailAdress, trigger: ['blur', 'change'] },
+          ],
+        },
+      },
+      emailList: [],
+      innerVisibleCron: false,
+      innerVisibleCronList: [],
+      submitFormLoading: false,
+      cron: '',
+      empty: '-',
+      crudShow: false,
+      tableShowHeight: '0',
+      // 总监测数据
+      totalMonitoringData: {},
+      pickerOptions: {
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: '近一周',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              end.setTime(end.getTime() - 3600 * 1000 * 24);
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: '近一个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              end.setTime(end.getTime() - 3600 * 1000 * 24);
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: '近三个月',
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              end.setTime(end.getTime() - 3600 * 1000 * 24);
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: '最近一年',
+            onClick: picker => {
+              const end = new Date(); // 当前日期
+              const start = new Date(); // 开始日期
+
+              end.setDate(end.getDate() - 1); // 设置结束日期为昨天
+              start.setFullYear(start.getFullYear() - 1); // 设置开始日期为一年前
+
+              picker.$emit('pick', [start, end]);
+            },
+          },
+          {
+            text: '本年度',
+            onClick: picker => {
+              const end = new Date(); // 当前日期
+              const start = new Date(); // 开始日期
+              start.setDate(1);
+              end.setDate(end.getDate() - 1); // 设置结束日期为昨天
+              start.setMonth(0); // 设置开始日期为今年的1月份
+              picker.$emit('pick', [start, end]);
+            },
+          },
+        ],
+      },
+    };
+  },
+
+  created() {
+    this.query.checkTime = [start, end];
+    this.dateChange(1);
+    // 加载机构地区;
+    this.getPosition(null, () => {});
+    this.getMailAdress();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      // console.log(this.$refs.fixedDiv.clientHeight, this.fixedDivHeight);
+      this.fixedDivHeight = this.$refs.fixedDiv.clientHeight;
+      if (this.$refs.topForm)
+        this.tableHeight =
+          this.$refs.monitorContainer.clientHeight - this.$refs.topForm.$el.offsetHeigh - 150;
+      window.addEventListener('resize', () => {
+        this.fixedDivHeight = this.$refs.fixedDiv.clientHeight;
+      });
+      this.waterMarkProp.text = this.user.name;
+    });
+    // 获取机构总数
+  },
+
+  computed: {
+    ...mapGetters(['user', 'sidebar']),
+  },
+  mixins: [presenter(), header(), crud()],
+
+  methods: {
+    inputChange() {
+      this.$forceUpdate();
+    },
+    getToQuery() {
+      this.crud.url = 'monitor/hospitalPage';
+      this.getHospitalTotal();
+      this.totalMonitoring();
+      this.crud.toQuery();
+    },
+    // 转换千分位
+    numberDeal(value) {
+      return value != '-' ? parseInt(value).toLocaleString() : value;
+    },
+    // 日期改变
+    dateChange(status) {
+      this.query.monitorStartDate = this.query.checkTime[0];
+      this.query.monitorEndDate = this.query.checkTime[1];
+      if (status == 1) {
+        this.provinceChange();
+      } else {
+        this.getToQuery();
+      }
+      this.forceUpdate();
+    },
+    // 总监测接口
+    totalMonitoring() {
+      let data = JSON.parse(JSON.stringify(this.query));
+      const query = {
+        ...data,
+        hospitalTypeList: this.query.hospitalTypeList
+          ? this.query.hospitalTypeList.join(',')
+          : this.query.hospitalTypeList,
+        levelList: this.query.levelList ? this.query.levelList.join(',') : this.query.levelList,
+      };
+      delete query.checkTime;
+      delete query.address;
+
+      totalMonitoring(query).then(res => {
+        this.totalMonitoringData = res;
+      });
+    },
+    //一键监测
+    fastMonitorFn() {
+      const { city, district, hospitalTypeList, levelList, province } = this.crud.query;
+      let data = {
+        city,
+        district,
+        ...this.crud.query,
+        hospitalTypeList: this.crud.query.hospitalTypeList
+          ? this.crud.query.hospitalTypeList.join(',')
+          : this.crud.query.hospitalTypeList,
+        levelList: this.crud.query.levelList
+          ? this.crud.query.levelList.join(',')
+          : this.crud.query.levelList,
+        province,
+      };
+      if (this.crud.query.address && this.crud.query.address[0]) {
+        data.province = this.crud.query.address[0];
+      }
+      if (this.crud.query.address && this.crud.query.address[1]) {
+        data.city = this.crud.query.address[1];
+      }
+      if (this.crud.query.address && this.crud.query.address[2]) {
+        data.district = this.crud.query.address[2];
+      }
+      delete data['address'];
+      delete data['checkTime'];
+      monitorAllType(data).then(res => {
+        if (res) {
+          this.visible = false;
+          this.$message.success('一键异常监测成功');
+        } else {
+          console.log('监测中', 1111);
+          this.visible = false;
+          this.$message.warning('监测中，请30秒后再试');
+        }
+      });
+    },
+    [CRUD.HOOK.beforeRefresh](crud) {
+      if (!this.query.address && !this.crudShow)
+        this.query.address = [window.config.defaultAddress];
+      this.crudShow = true;
+      // this.setTableHeight();
+    },
+    autoUploadType(category) {
+      return this.dict.label.auto_upload_type[category];
+    },
+    runningStateFilter(rank) {
+      return this.dict.label.running_status[rank] || '-';
+    },
+    monitorStatusFilter(rank) {
+      return this.dict.label.monitor_status[rank] || '-';
+    },
+    // 邮箱配置
+    EmailConfiguration() {
+      this.$nextTick(() => {
+        this.form.cron = this.cron;
+        this.form.cardForm = [{ mailAdress: '' }];
+        this.form.cardForm = JSON.parse(JSON.stringify(this.emailList));
+        if (this.form.cardForm.length == 0) {
+          this.form.cardForm = [{ mailAdress: '' }];
+        }
+        setTimeout(() => {
+          this.emailShow = true;
+        }, 500);
+        // setTimeout(() => { this.$refs['form'].resetFields() }, 800)
+      });
+    },
+    EmailCickAdd() {
+      this.form.cardForm.push({ mailAdress: '' });
+      this.$nextTick(() => {
+        // this.$refs.form.clearValidate();
+        this.$refs.form.$el.scrollTop = this.$refs.form.$el.scrollHeight;
+      });
+    },
+    EmailCickDel(index) {
+      this.form.cardForm.splice(index, 1);
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.submitFormLoading = true;
+          institutionMonitor
+            .checkCorn(this.form.cron)
+            .then(res => {
+              if (res.content && res.content.length != 0) {
+                this.emailShow = false;
+                let data = {
+                  corn: this.form.cron,
+                  mailAdress: [],
+                  taskName: 'SEND_MAIL',
+                };
+                this.form.cardForm.forEach(tmp => data.mailAdress.push(tmp.mailAdress));
+                institutionMonitor.updateMailAdress(data).then(res => {
+                  this.submitFormLoading = false;
+                  this.getMailAdress();
+                  this.emailShow = false;
+                  this.$message.success('保存成功');
+                });
+              } else {
+                this.submitFormLoading = false;
+                this.form.cron = '';
+                this.$message.error('定时发送cron输入错误，请重新输入');
+              }
+            })
+            .catch(err => {
+              this.submitFormLoading = false;
+              this.$message.error('定时发送cron格式错误，请重新输入');
+            });
+          // this.emailShow = false
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    lookMonitor(id) {
+      this.crud.loading = true;
+      this.loadingText = '正在监测...';
+      institutionMonitor.monitorAgain({ scenceId: id, type: 1 }).then(res => {
+        this.crud.toQuery();
+        this.loadingText = '';
+        this.$message.success('监测完成');
+      });
+    },
+    getMailAdress() {
+      institutionMonitor.getMailAdress().then(res => {
+        this.cron = res.corn;
+        this.emailList = JSON.parse(JSON.stringify(res.mailAdress));
+      });
+    },
+    // 测试cron
+    checkCorn() {
+      if (this.form.cron) {
+        institutionMonitor
+          .checkCorn(this.form.cron)
+          .then(res => {
+            this.innerVisibleCron = true;
+            this.innerVisibleCronList = res.content;
+          })
+          .catch(error => {
+            this.$message.error('定时发送cron格式错误，请重新输入');
+          });
+      } else {
+        this.$message.error('请输入定时发送cron');
+      }
+    },
+    // 获取机构总数
+    getHospitalTotal() {
+      let data = JSON.parse(JSON.stringify(this.query));
+      const query = {
+        ...data,
+        hospitalTypeList: this.query.hospitalTypeList
+          ? this.query.hospitalTypeList.join(',')
+          : this.query.hospitalTypeList,
+        levelList: this.query.levelList ? this.query.levelList.join(',') : this.query.levelList,
+      };
+      delete query.checkTime;
+      delete query.address;
+      institutionMonitor.hospitalTotal(query).then(res => {
+        this.hospitalTotalData = res;
+      });
+    },
+    // 处理数据
+    dealData(query, status) {
+      let str;
+      if (query && status) {
+        str = status;
+      } else {
+        str = '';
+      }
+      return str;
+    },
+    // 监测详情跳转
+    monitorPath(row) {
+      this.$router.push({
+        name: 'monitorDetail',
+        params: {
+          scenceId: row.scenceId,
+        },
+      });
+    },
+    // 导出
+    exportTable() {
+      if (this.crud.data.length != 0) {
+        this.downloadLoading = true;
+        download('monitor/download', this.query)
+          .then(result => {
+            this.downloadLoading = false;
+          })
+          .catch(e => {
+            downloadFile(e, '维护记录', 'xlsx');
+            this.downloadLoading = false;
+          });
+      } else {
+        this.$message.error('没有相关详情数据, 无法导出');
+      }
+    },
+    exportMonitorDetail() {
+      if (this.crud.data.length != 0) {
+        this.downloadLoading2 = true;
+        download('monitor/downloadMonitorInfo', this.query)
+          .then(result => {
+            this.downloadLoading2 = false;
+          })
+          .catch(e => {
+            downloadFile(e, '看图监测详情', 'xlsx');
+            this.downloadLoading2 = false;
+          });
+      } else {
+        this.$message.error('没有相关详情数据, 无法导出');
+      }
+    },
+    exportTable1() {
+      if (this.crud.data.length != 0) {
+        this.downloadLoading1 = true;
+        download('monitor/downloadHosp', this.query)
+          .then(result => {
+            this.downloadLoading1 = false;
+          })
+          .catch(e => {
+            downloadFile(e, '机构监测详情', 'xlsx');
+            this.downloadLoading1 = false;
+          });
+      } else {
+        this.$message.error('没有相关详情数据, 无法导出');
+      }
+    },
+    // 机构类别和机构等级改变，接口调用
+    rightChange(e) {
+      this.crud.toQuery();
+      this.getHospitalTotal();
+      this.totalMonitoring();
+    },
+    // 一级二级改变的时候调取下一级数据
+    handleItemChange(val) {
+      this.getPosition(val);
+    },
+    // 地区联动获取数据
+    getPosition(val, cb) {
+      let vm = this; //查询省市县
+      let params = { parent: 1 };
+      if (!val) {
+        //初始化加载 获取所有省份数据
+        params = { parent: 1 };
+      } else if (val.length === 1) {
+        //加载二级  获取市级数据
+        params = { parent: val[0] };
+      } else {
+        //加载3级   获取县级数据
+        params = { parent: val[1] };
+      }
+      institutionMonitor
+        .queryNation(params)
+        .then(res => {
+          if (!val) {
+            //初始化加载   查询省份数据
+            vm.provinceList = res.content.map(e => {
+              return {
+                value: e.saleid,
+                label: e.province,
+                cities: [],
+              };
+            });
+          } else if (val.length === 1) {
+            //加载二级    查询该省下市级数据
+            vm.provinceList.map(item => {
+              if (item.value === val[0]) {
+                item.cities = res.content.map(e => {
+                  return {
+                    value: e.saleid,
+                    label: e.city || e.county,
+                    cities: [],
+                  };
+                });
+              }
+            });
+          } else {
+            //加载3级   查询该省市下县级数据
+            vm.provinceList.map(item => {
+              if (item.value === val[0]) {
+                item.cities.map(value => {
+                  if (value.value === val[1]) {
+                    value.cities = res.content.map(e => {
+                      return { value: e.saleid, label: e.county };
+                    });
+                  }
+                });
+              }
+            });
+          }
+          cb && cb(res);
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+    //  地区选择改变，刷新数据
+    provinceChange(e) {
+      if (e) {
+        let provinceList = [];
+        let cityList = [];
+        let districtList = [];
+        for (let item of e) {
+          if (item.length == 1) {
+            provinceList.push(item[item.length - 1]);
+          }
+          if (item.length == 2) {
+            cityList.push(item[item.length - 1]);
+          }
+          if (item.length == 3) {
+            districtList.push(item[item.length - 1]);
+          }
+        }
+        this.query.provinceList = provinceList;
+        this.query.cityList = cityList;
+        this.query.districtList = districtList;
+      }
+      this.query.province = this.dealData(this.query.address, this.query.address[0]);
+      this.query.city = this.dealData(this.query.address, this.query.address[1]);
+      this.query.district = this.dealData(this.query.address, this.query.address[2]);
+      this.getToQuery();
+    },
+
+    // 返回机构类别对应的名称
+    hosCategory(category) {
+      return this.dict.label.ins_category[category];
+    },
+    // 返回机构等级对应的名称
+    hosRank(rank) {
+      return this.dict.label.agency_hos_rank[rank];
+    },
+    // 获取维护记录详情
+    getMaintainRecordPage() {
+      institutionMonitor
+        .getRecord({
+          scenceId: this.scenceId,
+          page: this.recordPage,
+          size: 3,
+        })
+        .then(res => {
+          this.maintainRecordTotal = res.totalElements;
+          this.maintainRecordData = this.maintainRecordData.concat(res.content);
+        });
+    },
+    // 关闭对话框
+    closeDialog() {
+      this.recordVisible = false;
+      this.upHoldForm = {
+        maintainContent: '',
+      };
+      this.recordPage = 0;
+    },
+    // 添加记录
+    toAddRecord(row) {
+      this.maintainRecordData = [];
+      this.recordVisible = true;
+      this.scenceId = row.scenceId;
+      this.hospitalName = '维护记录   ' + '(' + row.hospitalName + ')';
+      this.getMaintainRecordPage();
+      this.$nextTick(() => {
+        this.$refs.rightDiv.addEventListener('scroll', this.scroll);
+      });
+    },
+    // 提交
+    toSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          const query = {
+            scenceId: this.scenceId,
+            operator: this.user.name || 'ygadmin',
+            ...this.upHoldForm,
+          };
+          institutionMonitor.addRecord(query).then(res => {
+            this.$message.success('添加成功');
+            this.closeDialog();
+          });
+        } else {
+          this.$message.error('请输入内容');
+          return false;
+        }
+      });
+    },
+    // 监听滚动，加载下一页
+    scroll() {
+      const scrollTop = this.$refs.rightDiv.scrollTop;
+      // 获取可视区的高度
+      const windowHeight = this.$refs.rightDiv.clientHeight;
+      // 获取滚动条的总高度
+      const scrollHeight = this.$refs.rightDiv.scrollHeight;
+      if (scrollTop + windowHeight >= scrollHeight) {
+        // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
+        // 调用函数
+        this.recordPage++;
+        this.getMaintainRecordPage();
+      }
+    },
+    // 重置
+
+    resetForm() {
+      this.$refs.topForm.resetFields();
+      this.query.checkTime = [start, end];
+      this.query.province = '';
+      this.query.city = '';
+      this.query.district = '';
+      this.dateChange(1);
+    },
+    forceUpdate() {
+      this.$forceUpdate();
+    },
+    qualityDataFilter(status) {
+      return this.dict.label.quality_data_status[status];
+    },
+    iuWorkStationFilter(status) {
+      return this.dict.label.iu_workstation_status[status];
+    },
+    machineInfoFilter(status) {
+      return this.dict.label.machineInfo_status[status];
+    },
+  },
+
+  destroyed() {
+    window.removeEventListener('scroll', this.scroll); //  离开页面清除（移除）滚轮滚动事件
+  },
+  activated() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.fixedDivHeight = this.$refs.fixedDiv.clientHeight;
+        // console.log(this.fixedDivHeight);
+      }, 1000);
+    });
+    this.crud.toQuery();
+    this.getHospitalTotal();
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import './index.scss';
+.form-inline-hospital {
+  position: relative;
+  background-color: #fff;
+  // z-index: 10;
+}
+</style>