zy-view/src/views/AppIndex.vue

<template>
  <div class="app-index">
    <div class="specimen-view">
      <!-- 头部 -->
      <div class="specimen-header">
        <div class="specimen-logo">
          <img
            src="./../assets/images/login_logo.png"
            class="pharmacy-logo__img"
            alt=""
          />
          <h1 class="pharmacy-logo__name">大势医院输送保障管理平台</h1>
        </div>
        <div class="specimen-menu">
          <div
            class="specimen-menu-box"
            :class="{ active: currentNavIndex == item.id }"
            v-for="item in navInfo"
            :key="item.id"
            @click="navClick(item.id)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="totalNum" v-if="currentNavIndex == 1">
          今日产生标本<span>{{ totalNum }}</span
          >只
        </div>
        <div class="totalNum parent" v-if="currentNavIndex == 5">
          <div>
            今日请领药品总数：<span>{{ totalDrugNum.sum }}</span>
          </div>
          <div>
            今日待配送药品总数：<span>{{ totalDrugNum.dpssum }}</span>
          </div>
        </div>
        <div class="totalNum parent" v-if="currentNavIndex == 4">
          <div>
            <div>
              今日重点关注患者人数：<span>{{ totalParentNum.parentNum }}</span>
            </div>
            <div>
              今日待检查数：<span>{{ totalParentNum.speNum }}</span>
            </div>
          </div>
          <div>
            <div>
              今日转科总数：<span>{{ totalParentNum.zyNum }}</span>
            </div>
            <div>
              今日检查总数：<span>{{ totalParentNum.gdjczsNum }}</span>
            </div>
          </div>
        </div>
        <div class="totalNum currentNavIndex3" v-if="currentNavIndex == 2">
          <select v-model="groupId2" @change="selectGroup()">
            <option value="0">所有分组</option>
            <option :value="item.id" v-for="item in groups2" :key="item.id">
              {{ item.groupName }}
            </option>
          </select>
        </div>
        <div class="totalNum currentNavIndex3" v-if="currentNavIndex == 3">
          <select v-model="groupId3" @change="selectGroup()">
            <option value="0">所有人</option>
            <option :value="item.id" v-for="item in groups3" :key="item.id">
              {{ item.groupName }}
            </option>
          </select>
          <input type="text" v-model="parameter" placeholder="请输入搜索内容" />
          <button @click="search()">搜索</button>
          <button @click="resetCache()">重置缓存</button>
        </div>
      </div>
      <!-- 主体 -->
      <div
        class="main"
        style="position: relative"
        v-show="
          (!loading1 && !loading5 && currentNavIndex == 1) ||
            (!loading2 && !loading5 && !loading10 && currentNavIndex == 2) ||
            (!loading4 && !loading5 && !loading10 && currentNavIndex == 3) ||
            (!loading5 && !loading6 && currentNavIndex == 4) ||
            (!loading5 && !loading9 && currentNavIndex == 5)
        "
      >
        <!-- 科室标本视图 -->
        <div
          class="main-box"
          v-show="
            currentNavIndex == 1 && swiperList.length && !loading1 && !loading5
          "
          :class="{ marquee_top: animate }"
          :style="{
            transform: 'translateX(' + 100 * n + 'vw)',
            width: 100 * swiperList.length + 'vw',
          }"
        >
          <div
            class="main-box-item-wrap"
            v-for="(swiper, i) in swiperList"
            :key="i"
          >
            <div
              class="main-box-item main-box-item-w4--ks"
              v-for="item in swiper"
              :key="item.deptId"
              @click="detail(item)"
            >
              <div class="main-box-item-header">
                <h2>{{ item.deptName }}</h2>
                <strong>{{ item.num }}</strong>
                <strong v-if="item.userName">{{ item.userName }}</strong>
              </div>
              <div class="main-box-item-content">
                <div
                  class="main-box-item-contentBox"
                  :class="[item.urgent > 0 ? 'red' : 'green']"
                >
                  <h3>{{ item.urgent }}</h3>
                  <p>急标</p>
                </div>
                <div class="main-box-item-contentBox green">
                  <h3>{{ item.noUrgent }}</h3>
                  <p>普标</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="cot_img"
          v-show="
            currentNavIndex == 1 &&
              swiperList.length == 0 &&
              !loading1 &&
              !loading5
          "
        >
          <span>暂无数据</span>
        </div>
        <!-- 人员信息 -->
        <div
          class="main-box message_cot"
          v-show="currentNavIndex == 2 && !loading2 && !loading5 && !loading10"
        >
          <!-- --------------------------------start----------------------------- -->
          <div
            class="cot_all_wrap"
            v-show="currentNavIndex == 2 && workerMessage.length"
            :class="{ marquee_top: animate }"
            :style="{
              transform:
                'translateX(calc(' + 100 * n + 'vw - ' + 32 * n + 'px))',
              width:
                'calc(' +
                100 * workerMessage.length +
                'vw - ' +
                32 * workerMessage.length +
                'px)',
            }"
          >
            <div class="cot_all" v-for="(worke, i) in workerMessage" :key="i">
              <div class="cot sevenCol" v-for="data in worke" :key="data.id">
                <div class="first">
                  <div class="first_first">
                    <span>{{ data.name }}</span>
                    <span v-if="data.phone" class="first_firstPhone"
                      >({{ data.phone }})</span
                    >
                  </div>
                  <span>累计{{ data.totalCount }}单</span>
                  <span
                    class="times imptime"
                    v-if="
                      data.freetime === '今日还未接单' || data.freetime === null
                    "
                    >{{ data.freetime }}</span
                  >
                  <span
                    class="times imptime imptime-green"
                    v-if="
                      data.freetime !== '今日还未接单' && data.freetime !== null
                    "
                    >{{ "空闲时间" + data.freetime }}</span
                  >
                </div>
                <div class="second">
                  <span v-if="data.workingFlag">{{ data.gdType }}</span>
                  <span
                    :class="{ fr: true, colorRed: data.timeOut == true }"
                    v-if="data.workingFlag"
                    >{{ data.gdState }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="cot_img"
          v-show="
            currentNavIndex == 2 &&
              workerMessage.length == 0 &&
              !loading2 &&
              !loading5 &&
              !loading10
          "
        >
          <span>暂无数据</span>
        </div>
        <!-- 人员上班下班状态 -->
        <div
          class="main-box message_cot message_on"
          v-show="currentNavIndex == 3 && !loading4 && !loading5 && !loading10"
        >
          <!-- --------------------------------start----------------------------- -->
          <div
            class="cot_all_wrap"
            v-show="currentNavIndex == 3 && onlines.length"
            :class="{ marquee_top: animate }"
            :style="{
              transform:
                'translateX(calc(' + 100 * n + 'vw - ' + 32 * n + 'px))',
              width:
                'calc(' +
                100 * onlines.length +
                'vw - ' +
                32 * onlines.length +
                'px)',
            }"
          >
            <div class="cot_all" v-for="(online, i) in onlines" :key="i">
              <div class="cot sevenCol" v-for="data in online" :key="data.id">
                <div class="header_on">
                  <span style="font-weight: bold">{{ data.name }}</span>
                  <span :style="{ color: data.online ? 'green' : 'red' }"
                    ><button
                      v-if="data.online"
                      class="goWork"
                      @click="showModelC(data)"
                    >
                      下班</button
                    >{{ data.online ? "已上班" : "已下班" }}</span
                  >
                </div>
                <div
                  class="headerItem_on"
                  :title="data.dataList.length ? data.dataList[0][1] : '-'"
                >
                  {{
                    (data.dataList.length ? data.dataList[0][1] : "-") | length6
                  }}
                  <span v-if="data.online">{{ data.time }}</span>
                </div>
                <div class="headerItem_on_two" :title="data.depts || '-'">
                  {{ data.depts || "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="cot_img"
          v-show="
            currentNavIndex == 3 &&
              onlines.length == 0 &&
              !loading4 &&
              !loading5 &&
              !loading10
          "
        >
          <span>暂无数据</span>
        </div>
        <!-- 病房患者视图 -->
        <div
          class="main-box"
          v-show="
            currentNavIndex == 4 && parentList.length && !loading5 && !loading6
          "
          :class="{ marquee_top: animate }"
          :style="{
            transform: 'translateX(' + 100 * n + 'vw)',
            width: 100 * parentList.length + 'vw',
          }"
        >
          <div
            class="main-box-item-wrap"
            v-for="(swiper, i) in parentList"
            :key="i"
          >
            <div
              class="main-box-item main-box-item-w4"
              v-for="item in swiper"
              :key="item.id"
              @click="detailSpe(item)"
            >
              <div class="main-box-item-header pp">
                <h2 :title="item.name">{{ item.name }}</h2>
                <div>{{ item.gdjczs }}</div>
                <strong
                  >{{ item.userName ? item.userName : ""
                  }}<span>{{ item.phone ? item.phone : "" }}</span></strong
                >
              </div>
              <div class="main-box-item-content">
                <div
                  class="main-box-item-contentBox green"
                  @click.stop="detailParent(item)"
                >
                  <h3>{{ item.patientnum }}</h3>
                  <p>重点关注患者人数</p>
                </div>
                <div class="main-box-item-contentBox green">
                  <h3>{{ item.jczs }}</h3>
                  <p>待检查数</p>
                </div>
                <div class="main-box-item-contentBox green">
                  <h3>{{ item.gdnum }}</h3>
                  <p>转科总数</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="cot_img"
          v-show="
            currentNavIndex == 4 &&
              parentList.length == 0 &&
              !loading5 &&
              !loading6
          "
        >
          <span>暂无数据</span>
        </div>
        <!-- 药房药品请领单 -->
        <div
          class="main-box"
          v-show="
            currentNavIndex == 5 && drugList.length && !loading5 && !loading9
          "
          :class="{ marquee_top: animate }"
          :style="{
            transform: 'translateX(' + 100 * n + 'vw)',
            width: 100 * drugList.length + 'vw',
          }"
        >
          <div
            class="main-box-item-wrap"
            v-for="(swiper, i) in drugList"
            :key="i"
          >
            <div class="main-box-item" v-for="item in swiper" :key="item.id">
              <div class="main-box-item-header">
                <h2>{{ item.name }}</h2>
                <strong>{{ item.num }}</strong>
              </div>
              <div class="main-box-item-content">
                <div class="main-box-item-contentBox green" style="width: 100%">
                  <h3>{{ item.dpssum }}</h3>
                  <p>待配送</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="cot_img"
          v-show="
            currentNavIndex == 5 &&
              drugList.length == 0 &&
              !loading5 &&
              !loading9
          "
        >
          <span>暂无数据</span>
        </div>
        <!-- --------------------------------end----------------------------- -->
      </div>
      <div
        class="main loading"
        v-show="
          ((loading1 || loading5) && currentNavIndex == 1) ||
            ((loading2 || loading5 || loading10) && currentNavIndex == 2) ||
            ((loading4 || loading5 || loading10) && currentNavIndex == 3) ||
            ((loading5 || loading6) && currentNavIndex == 4) ||
            ((loading5 || loading9) && currentNavIndex == 5)
        "
      >
        <img src="./../assets/images/loading.gif" alt="" />
        <p>正在加载中</p>
      </div>
      <!-- 底部 -->
      <div
        class="footer"
        v-show="currentNavIndex == 1 && !loading5 && !loading1"
      >
        <div
          class="dot"
          v-for="(item, i) in swiperList"
          :key="i"
          :class="{ active: currentSwiperIndex == i }"
          @click="dotClick(i)"
        ></div>
      </div>
      <div
        class="footer"
        v-show="currentNavIndex == 2 && !loading5 && !loading2 && !loading10"
      >
        <div
          class="dot"
          v-for="(item, i) in workerMessage"
          :key="i"
          :class="{ active: currentSwiperIndex == i }"
          @click="dotClick(i)"
        ></div>
      </div>
      <div
        class="footer"
        v-show="currentNavIndex == 3 && !loading5 && !loading4 && !loading10"
      >
        <div
          class="dot"
          v-for="(item, i) in onlines"
          :key="i"
          :class="{ active: currentSwiperIndex == i }"
          @click="dotClick(i)"
        ></div>
      </div>
      <div
        class="footer"
        v-show="currentNavIndex == 4 && !loading5 && !loading6"
      >
        <div
          class="dot"
          v-for="(item, i) in parentList"
          :key="i"
          :class="{ active: currentSwiperIndex == i }"
          @click="dotClick(i)"
        ></div>
      </div>
      <div
        class="footer"
        v-show="currentNavIndex == 5 && !loading5 && !loading9"
      >
        <div
          class="dot"
          v-for="(item, i) in drugList"
          :key="i"
          :class="{ active: currentSwiperIndex == i }"
          @click="dotClick(i)"
        ></div>
      </div>
      <!-- 标本科室视图弹层 -->
      <div v-if="detailModel" :class="{ detailModel }">
        <div class="box">
          <h2 class="title">
            <div class="operateTitle">
              标本详情
              <div class="operate checkbox">
                <label>
                  <input type="checkbox" value="332" v-model="speState" /><span
                    >未收取</span
                  >
                </label>
                <label>
                  <input type="checkbox" value="333" v-model="speState" /><span
                    >已收取</span
                  >
                </label>
              </div>
            </div>
          </h2>
          <div class="table">
            <div class="table-content">
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>标本类型</th>
                    <th>标本编码</th>
                    <th>患者姓名</th>
                    <th>床号</th>
                    <th>采集时间</th>
                    <th>目标科室</th>
                    <th>收取人</th>
                  </tr>
                </thead>
                <tbody>
                  <vueCustomScrollbar
                    style="height: 100%"
                    v-if="detailList.length && !loading3"
                  >
                    <tr
                      v-for="(detail, i) in detailList"
                      :key="detail.id"
                      :style="{ background: i % 2 === 1 ? '#fff' : '#f9fafb' }"
                    >
                      <td>{{ i + 1 }}</td>
                      <td>{{ detail.stype ? detail.stype.name : "-" }}</td>
                      <td>{{ detail.scode || "-" }}</td>
                      <td>{{ detail.patientName || "-" }}</td>
                      <td>{{ detail.bedNum || "-" }}</td>
                      <td>
                        {{ detail.printDate || "-" }}
                      </td>
                      <td>
                        {{ detail.checkDept ? detail.checkDept.dept : "-" }}
                        <div
                          v-if="detail.urgent != 0"
                          :class="{
                            ji: detail.urgent == 1,
                          }"
                        ></div>
                      </td>
                      <td>{{ detail.receiver || "-" }}</td>
                    </tr>
                  </vueCustomScrollbar>

                  <div
                    style="font-size: 18px"
                    v-if="!detailList.length && !loading3"
                    class="noData"
                  >
                    暂无数据
                  </div>
                  <div class="loading" v-if="loading3">
                    <img src="./../assets/images/loading.gif" alt="" />
                    <p>正在加载中</p>
                  </div>
                </tbody>
              </table>
            </div>
          </div>
          <div class="btns">
            <div class="btn" @click="hideModel()">知道了</div>
          </div>
          <i class="icon_transport transport-guanbi" @click="hideModel()"></i>
        </div>
      </div>
      <!-- 病房患者视图弹层-重点关注患者详情 -->
      <div v-if="detailParentModel" :class="{ detailModel: detailParentModel }">
        <div class="box" style="width: 660px">
          <h2 class="title">重点关注患者详情</h2>
          <div class="table" style="width: 620px">
            <div class="table-content" style="width: 556px">
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>患者姓名</th>
                    <th>患者编码</th>
                    <th>床号</th>
                  </tr>
                </thead>
                <tbody>
                  <vueCustomScrollbar
                    style="height: 100%"
                    v-if="detailParentList.length && !loading7"
                  >
                    <tr
                      v-for="(detail, i) in detailParentList"
                      :key="detail.id"
                      :style="{ background: i % 2 === 1 ? '#fff' : '#f9fafb' }"
                    >
                      <td>{{ i + 1 }}</td>
                      <td>{{ detail.patientName || "-" }}</td>
                      <td>
                        {{ detail.patientCode || "-" }}
                      </td>
                      <td>
                        {{ detail.bedNum || "-" }}
                      </td>
                    </tr>
                  </vueCustomScrollbar>

                  <div
                    style="font-size: 18px"
                    v-if="!detailParentList.length && !loading7"
                    class="noData"
                  >
                    暂无数据
                  </div>
                  <div class="loading" v-if="loading7">
                    <img src="./../assets/images/loading.gif" alt="" />
                    <p>正在加载中</p>
                  </div>
                </tbody>
              </table>
            </div>
          </div>
          <div class="btns">
            <div class="btn" @click="hideParentModel()">知道了</div>
          </div>
          <i
            class="icon_transport transport-guanbi"
            @click="hideParentModel()"
          ></i>
        </div>
      </div>
      <!-- 病房患者视图弹层-患者检查详情 -->
      <div
        v-if="detailSpeModel"
        :class="{ detailModel: detailSpeModel }"
        class="detailModelParent"
      >
        <div class="box" style="width: 1274px">
          <h2 class="title">
            <div class="operateTitle">
              患者检查详情
              <div class="operate radio">
                <label>
                  <span>所有检查</span
                  ><input
                    type="radio"
                    value="666"
                    v-model="inspectState"
                  /><i></i>
                </label>
                <label>
                  <span>待检查</span
                  ><input
                    type="radio"
                    value="307"
                    v-model="inspectState"
                  /><i></i>
                </label>
              </div>
            </div>
          </h2>
          <div class="table" style="width: 1234px">
            <div class="table-content" style="width: 1170px">
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th style="width: 150px !important">患者姓名(床号)</th>
                    <th>检查项目</th>
                    <th>预约时间</th>
                    <th>叫号信息</th>
                    <th>检查科室</th>
                    <th style="width: 70px !important">是否建单</th>
                    <th style="width: 70px !important">是否送达</th>
                    <th>送达时间</th>
                    <th style="width: 70px !important">检查状态</th>
                    <th>陪检人</th>
                  </tr>
                </thead>
                <tbody>
                  <vueCustomScrollbar
                    style="height: 100%"
                    v-if="detailSpeList.length && !loading8"
                  >
                    <tr
                      v-for="(detail, i) in detailSpeList"
                      :key="detail.id"
                      :style="{ background: i % 2 === 1 ? '#fff' : '#f9fafb' }"
                    >
                      <td>{{ i + 1 }}</td>
                      <td
                        style="width: 150px !important"
                        :style="{
                          color: detail.focusPatient == 1 ? 'red' : '',
                        }"
                      >
                        {{ detail.patientName || "-" }}
                        <span v-if="detail.bedNum">({{ detail.bedNum }})</span>
                      </td>
                      <td>{{ detail.inspectName || "-" }}</td>
                      <td>{{ detail.yyTime || "-" }}</td>
                      <td>{{ detail.reservationNumber || "-" }}</td>
                      <td>
                        {{ detail.execDept ? detail.execDept.dept : "-" }}
                      </td>
                      <td style="width: 70px !important">
                        {{ detail.gdId ? "是" : "否" }}
                      </td>
                      <td style="width: 70px !important">
                        {{ detail.arriveTime ? "是" : "否" }}
                      </td>
                      <td>{{ detail.arriveTime || "-" }}</td>
                      <td style="width: 70px !important">
                        {{
                          detail.inspectState ? detail.inspectState.name : "-"
                        }}
                      </td>
                      <td></td>
                    </tr>
                  </vueCustomScrollbar>

                  <div
                    style="font-size: 18px"
                    v-if="!detailSpeList.length && !loading8"
                    class="noData"
                  >
                    暂无数据
                  </div>
                  <div class="loading" v-if="loading8">
                    <img src="./../assets/images/loading.gif" alt="" />
                    <p>正在加载中</p>
                  </div>
                </tbody>
              </table>
            </div>
          </div>
          <div class="btns">
            <div class="btn" @click="hideSpeModel()">知道了</div>
          </div>
          <i
            class="icon_transport transport-guanbi"
            @click="hideSpeModel()"
          ></i>
        </div>
      </div>
    </div>
    <!-- 模态框 -->
    <showModel
      :model="model"
      @ok="ok()"
      @know="know()"
      @cancel="cancel()"
      :operate="modelData"
      :content="modelContent"
      :icon="icon"
      :loading="loading"
    ></showModel>
  </div>
</template>

<script>
import { AES, mode, pad, enc } from "crypto-js";
import vueCustomScrollbar from "vue-custom-scrollbar";
import { get, post } from "./../http/http";
import showModel from "./../components/showModel";
export default {
  name: "AppIndex",
  components: {
    vueCustomScrollbar,
    showModel,
  },
  filters: {
    length6: function(value) {
      return value.slice(0, 6);
    },
  },
  data() {
    return {
      loading1: false, //科室标本视图列表加载
      loading2: false, //人员信息列表加载
      loading3: false,
      loading4: false, //人员上下班状态列表加载
      loading5: false, //当前工作分配方案获取加载
      loading6: false, //病房患者列表加载
      loading7: false,
      loading8: false,
      loading9: false, //获取药房药品请领单列表加载
      loading10: false, //获取所有分组加载
      detailModel: false, //详情弹层(标本科室视图)
      detailParentModel: false, //详情弹层(病房患者视图-患者)
      detailSpeModel: false, //详情弹层(病房患者视图-检查)
      userData: null, //当前登录人信息
      timer: null, //无限(请求接口1)
      timer1: null, //无限滚动(1)
      timer2: null, //无限(请求接口2)
      timer3: null, //无限滚动(2)
      timer4: null, //无限(请求接口3)
      timer44: null, //无限滚动(3)
      timer5: null, //无限(请求接口4)
      timer55: null, //无限滚动(4)
      timer6: null, //无限(请求接口5)
      timer66: null, //无限滚动(5)
      animate: false,
      n: 0,
      // 所有分组-人员信息
      groups2: [],
      // 所有人-人员上下班状态
      groups3: [],
      //导航信息
      navInfo: [],
      //当前导航选中
      currentNavIndex: 1,
      //轮播信息
      swiperList: [],
      //药房药品请领单信息
      drugList: [],
      //病房患者列表
      parentList: [],
      //当前轮播选中
      currentSwiperIndex: 0,
      //人员信息
      workerMessage: [],
      //详情列表(标本科室视图)
      detailList: [],
      //详情列表(病房患者列表-患者)
      detailParentList: [],
      //详情列表(病房患者列表-检查)
      detailSpeList: [],
      // 上下班信息列表
      onlines: [],
      // 今日产生标本多少只
      totalNum: 0,
      totalDrugNum: {
        sum: 0, //今日请领药品总数
        dpssum: 0, //今日待配送药品总数
      },
      totalParentNum: {
        parentNum: 0, //今日重点关注患者人数
        speNum: 0, //今日检查数
        zyNum: 0, //今日转科总数
        gdjczsNum: 0, //今日检查总数
      },
      // 模态框显示
      model: false,
      // 模态框按钮数据
      modelData: {},
      // 模态框按钮数据
      modelContent: "",
      // 模态框图标
      icon: "",
      // 模态框loading
      loading: false,
      // 当前选中的数据
      coopData: {},
      // 搜索的文本
      parameter: "",
      // 搜索的分组-人员信息
      groupId2: 0,
      // 搜索的分组-人员上下班
      groupId3: 0,
      // 1是综合排班，2是自选排班
      workType: 0,
      //科室标本的标本详情 332是未收取 333是已收取
      speState: [],
      //科室标本,当前选中的科室
      currentSpecimenDept: null,
      //病房患者的标本详情 307是待检查
      inspectState: "",
      //病房患者,当前选中的科室
      currentInspectDept: null,
    };
  },
  watch: {
    //科室标本的标本详情，已收取，未收取
    speState() {
      this.getDetailBySpecimen(this.currentSpecimenDept);
    },
    //病房患者的检查详情
    inspectState() {
      this.getDetailByInspect(this.currentInspectDept);
    },
  },
  methods: {
    // 搜索分组
    selectGroup() {
      this.navClick(this.currentNavIndex);
    },
    // 搜索
    search() {
      this.loading4 = true;
      this.navClick(3);
    },
    // 重置缓存
    resetCache() {
      this.model = true;
      this.loading = true;
      get("/ser/refreshTaskType")
        .then((res) => {
          this.loading = false;
          if (res.state == 200) {
            this.model = true;
            this.icon = "success";
            this.modelContent = "重置缓存成功！";
            this.modelData = {
              know: "知道了",
            };
          } else {
            this.model = true;
            this.icon = "error";
            this.modelContent = "重置缓存失败！";
            this.modelData = {
              know: "知道了",
            };
          }
        })
        .catch(() => {
          this.loading = false;
          this.model = true;
          this.icon = "error";
          this.modelContent = "重置缓存失败！";
          this.modelData = {
            know: "知道了",
          };
        });
    },
    // 下班
    showModelC(coopData) {
      this.model = true;
      this.icon = "warn";
      this.modelContent = `您确定要让【${coopData.name}】下班吗？`;
      this.modelData = {
        ok: "确定",
        cancel: "取消",
      };
      this.coopData = coopData;
    },
    cancel() {
      this.model = false;
    },
    know() {
      this.model = false;
      this.navClick(3);
    },
    normalWork() {
      get("/auth/onOrOffLinePc/off/" + this.coopData.id).then((result2) => {
        if (result2.status == 200) {
          post("/auth/sendOffline", { userid: this.coopData.id }).then(
            (res) => {
              if (res.status == 200) {
                this.model = true;
                this.icon = "success";
                this.modelContent = "下班成功！";
                this.modelData = {
                  know: "知道了",
                };
              }
            }
          );
        } else {
          this.model = true;
          this.icon = "error";
          this.modelContent = result2.msg;
          this.modelData = {
            know: "知道了",
          };
        }
      });
    },
    // 确认
    ok() {
      this.model = false;
      if (this.coopData.dataList.length) {
        if (this.workType == 2 && this.coopData.dataList[0][2] == 3) {
          //综合排班，并且是科室绑定人员
          post("/auth/customOfflinePc", { userId: this.coopData.id }).then(
            (result1) => {
              if (result1.status == 200) {
                this.normalWork();
              }
            }
          );
        }
      } else {
        this.normalWork();
      }
    },
    //aes解密
    encryptByDeAES(data) {
      let Key = "dsadmin";
      let tmpDeAES = AES.decrypt(data, Key, {
        mode: mode.CBC,
        padding: pad.Pkcs7,
      });
      return tmpDeAES.toString(enc.Utf8);
    },
    // 点击详情(标本科室视图)
    detail(item) {
      console.log(item);
      clearTimeout(this.timer);
      clearTimeout(this.timer1);
      this.speState = ["333", "332"];
      this.currentSpecimenDept = item;
      this.detailModel = true;
    },
    // 获取标本详情(标本科室视图)
    getDetailBySpecimen(item) {
      let postData = {
        hosIds: this.$route.params.hosIds,
        deptId: item.deptId,
        urgent: -1,
      };
      if (this.speState.length > 0) {
        postData.speState = this.speState.toString();
      } else if (this.speState.length === 0) {
        this.detailList = [];
        return;
      }
      this.loading3 = true;
      post("/nurse/getListSpecimenDetails", postData).then((result) => {
        this.loading3 = false;
        if (result.status == 200) {
          this.detailList = result.data || [];
        }
      });
    },
    hideModel() {
      this.detailModel = false;
      this.polling();
      this.scrollInfinite();
    },
    // 点击详情(病房患者视图->重点关注患者人数)
    detailParent(item) {
      console.log(item);
      clearTimeout(this.timer5);
      clearTimeout(this.timer55);
      this.detailParentModel = true;
      let postData = {
        hosIds: this.$route.params.hosIds,
        deptid: item.id,
      };
      this.loading7 = true;
      post("/nurse/getViewData/getPatient", postData).then((result) => {
        this.loading7 = false;
        this.detailParentList = result.patients || [];
      });
    },
    hideParentModel() {
      this.detailParentModel = false;
      this.polling();
      this.scrollInfinite();
    },
    // 点击详情(病房患者视图->患者检查详情)
    detailSpe(item) {
      console.log(item);
      clearTimeout(this.timer5);
      clearTimeout(this.timer55);
      this.currentInspectDept = item;
      this.detailSpeModel = true;
      this.getDetailByInspect(this.currentInspectDept);
      if (this.inspectState !== "666") {
        this.inspectState = "666";
      }
    },
    // 获取检查详情(病房患者视图)
    getDetailByInspect(item) {
      let postData = {
        hosIds: this.$route.params.hosIds,
        deptId: item.id,
      };
      if (this.inspectState) {
        if (this.inspectState === "307") {
          postData.inspectState = this.inspectState;
        }
      } else {
        this.detailSpeList = [];
        return;
      }
      this.loading8 = true;
      post("/nurse/getViewData/getInspect", postData).then((result) => {
        this.loading8 = false;
        this.detailSpeList = result.inspects || [];
      });
    },
    hideSpeModel() {
      this.detailSpeModel = false;
      this.polling();
      this.scrollInfinite();
    },
    // 导航菜单点击
    navClick(id) {
      this.currentNavIndex = id;
      this.n = 0;
      this.currentSwiperIndex = 0;
      this.animate = false;
      //id:1科室标本视图,id:2人员信息
      if (id == 1) {
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
        clearTimeout(this.timer4);
        clearTimeout(this.timer44);
        clearTimeout(this.timer5);
        clearTimeout(this.timer55);
        clearTimeout(this.timer6);
        clearTimeout(this.timer66);
        this.dotClick(0);
        this.polling();
        this.getListSpecimenWorkOrderMsg();
      } else if (id == 2) {
        clearTimeout(this.timer);
        clearTimeout(this.timer1);
        clearTimeout(this.timer4);
        clearTimeout(this.timer44);
        clearTimeout(this.timer5);
        clearTimeout(this.timer55);
        clearTimeout(this.timer6);
        clearTimeout(this.timer66);
        this.dotClick(0);
        this.polling();
        this.getWorkerMessage();
      } else if (id == 3) {
        clearTimeout(this.timer);
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
        clearTimeout(this.timer5);
        clearTimeout(this.timer55);
        clearTimeout(this.timer6);
        clearTimeout(this.timer66);
        this.dotClick(0);
        this.polling();
        this.getOnlines();
      } else if (id == 4) {
        clearTimeout(this.timer);
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
        clearTimeout(this.timer4);
        clearTimeout(this.timer44);
        clearTimeout(this.timer6);
        clearTimeout(this.timer66);
        this.dotClick(0);
        this.polling();
        this.getListParent();
      } else if (id == 5) {
        clearTimeout(this.timer);
        clearTimeout(this.timer1);
        clearTimeout(this.timer2);
        clearTimeout(this.timer3);
        clearTimeout(this.timer4);
        clearTimeout(this.timer44);
        clearTimeout(this.timer5);
        clearTimeout(this.timer55);
        this.dotClick(0);
        this.polling();
        this.getListDrug();
      }
    },
    //提示点点击
    dotClick(i) {
      clearTimeout(this.timer1);
      clearTimeout(this.timer3);
      clearTimeout(this.timer44);
      clearTimeout(this.timer55);
      clearTimeout(this.timer66);
      this.currentSwiperIndex = i - 1;
      this.n = -i + 1;
      this.showMarquee();
      this.scrollInfinite();
    },
    // 无限滚动
    scrollInfinite() {
      if (this.currentNavIndex == 1) {
        clearTimeout(this.timer1);
        this.timer1 = setTimeout(() => {
          this.showMarquee();
          this.scrollInfinite();
        }, 20000);
      } else if (this.currentNavIndex == 2) {
        clearTimeout(this.timer3);
        this.timer3 = setTimeout(() => {
          this.showMarquee();
          this.scrollInfinite();
        }, 20000);
      } else if (this.currentNavIndex == 3) {
        clearTimeout(this.timer44);
        this.timer44 = setTimeout(() => {
          this.showMarquee();
          this.scrollInfinite();
        }, 20000);
      } else if (this.currentNavIndex == 4) {
        clearTimeout(this.timer55);
        this.timer55 = setTimeout(() => {
          this.showMarquee();
          this.scrollInfinite();
        }, 20000);
      } else if (this.currentNavIndex == 5) {
        clearTimeout(this.timer66);
        this.timer66 = setTimeout(() => {
          this.showMarquee();
          this.scrollInfinite();
        }, 20000);
      }
    },
    // 处理数组方法
    showMarquee() {
      this.animate = true;
      this.n--;
      this.currentSwiperIndex++;
      if (this.n === -this.swiperList.length && this.currentNavIndex == 1) {
        this.animate = true;
        this.n = 0;
        this.currentSwiperIndex = 0;
      }
      if (this.n === -this.workerMessage.length && this.currentNavIndex == 2) {
        this.animate = true;
        this.n = 0;
        this.currentSwiperIndex = 0;
      }
      if (this.n === -this.onlines.length && this.currentNavIndex == 3) {
        this.animate = true;
        this.n = 0;
        this.currentSwiperIndex = 0;
      }
      if (this.n === -this.parentList.length && this.currentNavIndex == 4) {
        this.animate = true;
        this.n = 0;
        this.currentSwiperIndex = 0;
      }
      if (this.n === -this.drugList.length && this.currentNavIndex == 5) {
        this.animate = true;
        this.n = 0;
        this.currentSwiperIndex = 0;
      }
    },
    //切割数组，固定个数
    reSetData(dataList, num) {
      let arr = [];
      let len = dataList.length;
      for (let i = 0; i < len; i += num) {
        arr.push(dataList.slice(i, i + num));
      }
      return arr;
    },
    // 获取科室标本列表
    getListSpecimenWorkOrderMsg(flag = true) {
      if (this.userData.length === 0) {
        //非法访问
        return;
      }
      let postData = {
        hosIds: this.$route.params.hosIds,
      };
      this.loading1 = flag;
      console.log(this.loading1, this.loading5, this.currentNavIndex);
      post("/nurse/getListSpecimenWorkOrderMsg", postData).then((result) => {
        console.log(result);
        this.loading1 = false;
        if (result.status == 200) {
          this.totalNum = result.data.num;
          this.swiperList = this.reSetData(result.data.tempList, 16);
          console.log(this.swiperList);
          this.scrollInfinite();
          if (!this.loading1 && !this.loading5) {
            this.polling();
          }
        }
      });
    },
    // 获取药房药品请领单列表
    getListDrug(flag = true) {
      if (this.userData.length === 0) {
        //非法访问
        return;
      }
      let postData = {
        hosIds: this.$route.params.hosIds,
      };
      this.loading9 = flag;
      post("/nurse/getViewData/drugs", postData).then((result) => {
        console.log(result);
        this.loading9 = false;
        if (result.status == 200) {
          this.totalDrugNum = {
            sum: result.sum,
            dpssum: result.dpssum,
          };
          this.drugList = this.reSetData(result.data, 20);
          console.log(this.drugList);
          this.scrollInfinite();
          if (!this.loading5 && !this.loading9) {
            this.polling();
          }
        }
      });
    },
    // 获取病房患者列表
    getListParent(flag = true) {
      if (this.userData.length === 0) {
        //非法访问
        return;
      }
      let postData = {
        hosIds: this.$route.params.hosIds,
      };
      this.loading6 = flag;
      post("/nurse/getViewData/patient", postData).then((result) => {
        console.log(result);
        this.loading6 = false;
        if (result.status == 200) {
          this.totalParentNum = {
            parentNum: result.patientnum, //今日重点关注患者人数
            speNum: result.jczs, //今日待检查数
            zyNum: result.gdnum, //今日转科总数
            gdjczsNum: result.gdjczs, //今日检查总数
          };
          this.parentList = this.reSetData(result.data, 16);
          this.scrollInfinite();
          if (!this.loading5 && !this.loading6) {
            this.polling();
          }
        }
      });
    },
    // 轮询请求
    polling() {
      if (this.currentNavIndex == 1) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.getListSpecimenWorkOrderMsg(false);
        }, 30000);
      } else if (this.currentNavIndex == 2) {
        clearTimeout(this.timer2);
        this.timer2 = setTimeout(() => {
          this.getWorkerMessage(false);
        }, 30000);
      } else if (this.currentNavIndex == 3) {
        clearTimeout(this.timer4);
        this.timer4 = setTimeout(() => {
          this.getOnlines(false);
        }, 30000);
      } else if (this.currentNavIndex == 4) {
        clearTimeout(this.timer5);
        this.timer5 = setTimeout(() => {
          this.getListParent(false);
        }, 30000);
      } else if (this.currentNavIndex == 5) {
        clearTimeout(this.timer6);
        this.timer6 = setTimeout(() => {
          this.getListDrug(false);
        }, 30000);
      }
    },
    //获取人员信息
    getWorkerMessage(flag = true) {
      let groups = [];
      if (this.userData.length === 0) {
        //非法访问
        return;
      }
      let postData1 = {
        idx: 0,
        sum: 999,
        group2: { hospitals: this.$route.params.hosIds },
      };
      this.loading2 = flag;
      post("/data/fetchDataList/group2", postData1).then((result1) => {
        if (result1.status == 200) {
          this.groups2 = result1.list;
          if (this.groupId2 != 0) {
            groups = [this.groupId2];
          } else {
            this.groups2.forEach((e) => {
              groups.push(e.id);
            });
          }
          let postData = {
            groups,
            idx: 0,
            sum: 9999,
          };
          post("/ser/getWorkInfo", postData).then((result) => {
            this.loading2 = false;
            if (result.status == 200) {
              this.workerMessage = this.reSetData(result.data, 56);
              this.scrollInfinite();
              if (!this.loading2 && !this.loading5 && !this.loading10) {
                this.polling();
              }
            }
          });
        }
      });
    },
    //获取人员上班下班状态
    getOnlines(flag = true) {
      if (this.userData.length === 0) {
        //非法访问
        return;
      }
      this.getGroups();
      let postData = {
        hosIds: this.$route.params.hosIds,
        parameter: this.parameter,
      };
      if (this.groupId3 != 0) {
        postData.groupId = this.groupId3;
      }
      this.loading4 = flag;
      post("/nurse/getUserOnlineStatusMsg", postData).then((result) => {
        this.loading4 = false;
        if (result.status == 200) {
          result.data.forEach((item) => {
            if (item.dataList.length) {
              item.depts = item.dataList.map((v) => v[0]).join("，");
            }
          });
          this.onlines = this.reSetData(result.data, 24);
          this.scrollInfinite();
          if (!this.loading4 && !this.loading5 && !this.loading10) {
            this.polling();
          }
        }
      });
    },
    // 获取所有分组
    getGroups(flag = true) {
      let postData = {
        idx: 0,
        sum: 999,
        group2: { hospitals: this.$route.params.hosIds + "" },
      };
      this.loading10 = flag;
      post("/data/fetchDataList/group2", postData).then((result) => {
        if (result.status == 200) {
          this.loading10 = false;
          this.groups3 = result.list;
        }
      });
    },
    // 获取当前工作方案
    getWorkType() {
      let postData = {
        idx: 0,
        workScheme: {
          status: 1,
          hosId: this.$route.params.hosIds,
        },
        sum: 1,
      };
      post("/simple/data/fetchDataList/workScheme", postData).then((result) => {
        this.loading5 = false;
        if (result.status == 200) {
          this.workType = result.list[0].workType; //1是综合排班，2是自选排班
          if (this.workType == 2) {
            this.navInfo = [
              { id: 1, name: "科室标本" },
              { id: 4, name: "病房患者" },
              { id: 5, name: "药房药品请领单" },
              { id: 2, name: "人员信息" },
              { id: 3, name: "人员上班下班状态" },
            ];
          } else {
            this.navInfo = [
              { id: 1, name: "科室标本" },
              { id: 4, name: "病房患者" },
              { id: 5, name: "药房药品请领单" },
              { id: 2, name: "人员信息" },
            ];
          }
          this.loading1 = false;
          this.getListSpecimenWorkOrderMsg();
        }
      });
    },
    // 登录
    login() {
      this.loading1 = true;
      // this.loading2 = true;
      // this.loading4 = true;
      // this.loading5 = true;
      // this.loading6 = true;
      // this.loading9 = true;
      // this.loading10 = true;
      let postData = {
        username: this.encryptByDeAES(
          decodeURIComponent(this.$route.params.username)
        ),
        password: this.encryptByDeAES(
          decodeURIComponent(this.$route.params.password)
        ),
      };
      post("/auth/login", postData).then((result) => {
        if (result.status == 200) {
          this.userData = result.user;
          this.getWorkType();
        } else {
          this.userData = [];
        }
      });
    },
  },
  created() {
    this.login();
  },
  beforeDestroy() {
    clearTimeout(this.timer);
    clearTimeout(this.timer1);
    clearTimeout(this.timer2);
    clearTimeout(this.timer3);
    clearTimeout(this.timer4);
    clearTimeout(this.timer44);
    clearTimeout(this.timer5);
    clearTimeout(this.timer55);
    clearTimeout(this.timer6);
    clearTimeout(this.timer66);
  },
};
</script>

<style lang="less" scoped>
.cot_img {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #f9fafb;
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    color: #49b856;
    font-size: 24px;
    font-weight: bold;
  }
}
.noData {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.loading {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.detailModel {
  display: flex;
  justify-content: center;
  align-items: center;
  &.detailModelParent {
    table {
      td,
      th {
        width: 150px !important;
        &:first-of-type {
          width: 60px !important;
        }
      }
    }
  }
  .box {
    width: 1167px;
    height: 580px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .transport-guanbi {
      position: absolute;
      right: 16px;
      top: 16px;
      font-size: 20px;
      color: #8e9d9e;
      cursor: pointer;
    }
    .title {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      color: #333;
      font-weight: bold;
      .operateTitle {
        position: relative;
        .operate {
          font-weight: normal;
          font-size: 14px;
          width: 200px;
          position: absolute;
          top: 0;
          left: 100%;
          &.checkbox {
            label {
              cursor: pointer;
              margin-left: 8px;
              display: inline-flex;
              align-items: center;
              span {
                margin-left: 4px;
              }
              // 多选框
              input[type="checkbox"] {
                cursor: pointer;
                position: relative;
                width: 15px;
                height: 15px;
                font-size: 15px;
              }

              input[type="checkbox"]:checked::after {
                position: absolute;
                overflow: hidden;
                background-color: #49b856;
                border: 1px solid #767676;
                color: #fff;
                width: 15px;
                height: 15px;
                border-radius: 4px;
                line-height: 0.8;
                display: inline-block;
                content: "\e618;";
                font-size: 15px;
                font-family: "icon_transport" !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
              }
            }
          }
          &.radio {
            label {
              cursor: pointer;
              margin-left: 8px;
              display: inline-flex;
              align-items: center;
              position: relative;
              font-weight: 400;
              color: #767676;
              padding-left: 16px;
              span {
                margin-left: 4px;
              }
              input[type="radio"] {
                position: absolute;
                left: -9999px;
              }

              input[type="radio"] + i {
                display: block;
                position: absolute;
                left: 0;
                width: 14px;
                height: 14px;
                outline: 0;
                border: 1px solid #0c4757;
                background: transparent;
                border-radius: 50%;
                transition: border-color 0.3s;
                -webkit-transition: border-color 0.3s;
              }
              input[type="radio"]:checked + i {
                border-color: #49b856;
              }

              input[type="radio"] + i:after {
                position: absolute;
                content: "";
                top: 50%;
                left: 50%;
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: #49b856;
                transform: translate(-50%, -50%);
                opacity: 0;
                transition: opacity 0.1s;
                -webkit-transition: opacity 0.1s;
              }

              input[type="radio"]:checked + i:after {
                opacity: 1;
              }
            }
          }
        }
      }
    }
    .table {
      width: 1127px;
      height: 474px;
      background-color: #f9fafb;
      border: 1px solid #e5e9ed;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      .table-content {
        width: 1063px;
        height: 420px;
        background-color: #fff;
        border-radius: 8px;
        border: 1px solid #e5e9ed;
        table {
          width: 100%;
          font-size: 14px;
          color: #333;
          th,
          td {
            text-align: center !important;
            width: 167px;
            height: 100%;
            &:first-of-type {
              width: 59px;
            }
          }
          thead {
            display: block;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-image: linear-gradient(90deg, #39b199 0%, #74c271 100%);
            tr {
              height: 40px;
              color: #fff;
            }
          }
          tbody {
            display: block;
            width: 100%;
            height: 380px;
            overflow-x: hidden;
            overflow-y: auto;
            tr {
              height: 34px;
              line-height: 34px;
              td:last-child {
                position: relative;
              }
              td {
                .ji {
                  position: absolute;
                  right: 0;
                  top: -3px;
                  width: 41px;
                  height: 42px;
                  background: url(./../assets/images/icon_ji.png) no-repeat 3px
                    0;
                }
              }
            }
          }
        }
      }
    }
    .btns {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 120px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        background-color: #f9fafb;
        border: 1px solid #dde1e5;
        border-radius: 4px;
        font-size: 14px;
        color: #49b856;
        cursor: pointer;
      }
    }
  }
}
.detailModel {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.marquee_top {
  transition: all 0.3s;
}
.specimen-view {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .specimen-header {
    height: 88px;
    display: flex;
    .specimen-logo {
      width: 221px;
      background-color: #0f2e3b;
      display: flex;
      justify-content: center;
      align-items: center;
      .pharmacy-logo__img {
        width: 32px;
      }
      .pharmacy-logo__name {
        font-size: 14px;
        color: #fff;
        margin-bottom: 0;
      }
    }
    .specimen-menu {
      flex: 1;
      display: flex;
      align-items: center;
      .specimen-menu-box {
        padding: 0 8px;
        height: 40px;
        border-radius: 20px;
        line-height: 40px;
        text-align: center;
        color: #333333;
        font-size: 16px;
        margin-left: 16px;
        cursor: pointer;
        &.active {
          background-color: #49b856;
          font-size: 20px;
          color: #f0f6ed;
        }
      }
    }
    .totalNum {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 24px;
      &.parent {
        width: 340px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        div {
          margin: 4px 0;
          span {
            font-size: 18px;
          }
        }
      }
      &.currentNavIndex3 {
        select {
          box-sizing: border-box;
          margin: 0;
          padding: 4px 11px;
          font-variant: tabular-nums;
          list-style: none;
          font-feature-settings: "tnum";
          position: relative;
          display: inline-block;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          line-height: 1.5;
          background-color: #fff;
          background-image: none;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          transition: all 0.3s;
          width: 130px;
          height: 36px;
          outline: none;
          margin-right: 16px;
        }
        input {
          box-sizing: border-box;
          margin: 0;
          padding: 4px 11px;
          font-variant: tabular-nums;
          list-style: none;
          font-feature-settings: "tnum";
          position: relative;
          display: inline-block;
          color: rgba(0, 0, 0, 0.65);
          font-size: 14px;
          line-height: 1.5;
          background-color: #fff;
          background-image: none;
          border: 1px solid #d9d9d9;
          border-radius: 4px;
          transition: all 0.3s;
          width: 130px;
          height: 36px;
          outline: none;
        }
        button {
          margin-left: 16px;
          color: #3bb197;
          background: #fff;
          height: 34px;
          line-height: 34px;
          padding: 0 0 26px;
          min-width: 80px;
          font-size: 14px;
          border: 1px solid #49b856;
          border-radius: 4px;
          outline: none;
          cursor: pointer;
        }
      }
      span {
        font-weight: bold;
        color: red;
      }
    }
  }
  .main {
    height: calc(100vh - 160px);
    flex: 1;
    background-color: #f9fafb;
    overflow: hidden;
    .main-box {
      width: 100%;
      height: 100%;
      .main-box-item-wrap {
        float: left;
        width: 100vw;
        height: calc(100vh - 160px);
        display: flex;
        flex-wrap: wrap;
        padding: 8px;
        .main-box-item {
          width: calc((100vw - 96px) / 5);
          height: calc((100vh - 240px) / 4);
          margin: 8px;
          background-color: #fff;
          border: 1px solid #e5e9ed;
          border-radius: 4px;
          cursor: pointer;
          &.main-box-item-w4 {
            width: calc((100vw - 80px) / 4);
            .main-box-item-content {
              justify-content: space-evenly;
              .main-box-item-contentBox {
                width: auto;
              }
            }
          }
          &.main-box-item-w4--ks {
            width: calc((100vw - 80px) / 4);
            .main-box-item-content {
              justify-content: space-evenly;
            }
          }
          &:hover {
            background-color: #f0f6ed;
          }
          .main-box-item-header {
            height: calc(100% * 0.4);
            border-bottom: 1px solid #e5e9ed;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &.pp {
              h2 {
                flex: 2;
              }
              div {
                flex: 1;
                font-size: 16px;
                font-weight: bold;
                text-align: center;
              }
              strong {
                flex: 1;
                text-align: center;
              }
            }
            h2 {
              height: 18px;
              font-size: 16px;
              font-weight: bold;
              color: #000;
              margin-left: 8px;
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            strong {
              font-size: 18px;
              color: #666;
              margin-right: 8px;
            }
          }
          .main-box-item-content {
            height: calc(100% * 0.6);
            display: flex;
            .main-box-item-contentBox {
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              h3 {
                font-size: 22px;
                font-weight: bold;
              }
              p {
                font-size: 14px;
                color: #666;
                margin-top: 8px;
              }
              &.red {
                position: relative;
                h3 {
                  color: #ff3b53;
                }
                &:after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  right: -1px;
                  width: 2px;
                  height: calc(100% * 0.625);
                  background-color: #dde1e5;
                  transform: translateY(-50%);
                }
              }
              &.green {
                h3 {
                  color: #49b856;
                }
              }
            }
          }
        }
      }
    }
  }
  .footer {
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9fafb;
    .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #e5e9ed;
      margin-left: 24px;
      cursor: pointer;
      &.active {
        background-color: #49b856;
      }
      &:first-of-type {
        margin-left: 0;
      }
    }
  }
  // 人员信息
  .message_cot {
    margin: 16px;
    margin-bottom: 0;
    width: calc(100vw - 32px) !important;
    height: 100%;
    overflow: hidden;
    position: relative;
    &.message_on {
      .cot {
        &.sevenCol {
          width: 16.6666666%;
          height: 25%;
          font-size: 14px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .header_on {
            display: flex;
            height: 26px;
            justify-content: space-between;
            align-items: center;
            .goWork {
              outline: none;
              width: 50px;
              height: 26px;
              line-height: 26px;
              text-align: center;
              background-color: #f9fafb;
              border: 1px solid #dde1e5;
              border-radius: 4px;
              font-size: 14px;
              color: #49b856;
              cursor: pointer;
              margin-right: 8px;
            }
          }
          .headerItem_on {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            height: 22px;
            line-height: 22px;
            color: #333;
          }
          .headerItem_on_two {
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2; /** 显示的行数 **/
            overflow: hidden; /** 隐藏超出的内容 **/
            height: 44px;
            line-height: 22px;
            color: #333;
          }
        }
      }
    }
  }

  .message_cot .cot_all_wrap {
    overflow: hidden;
    height: 100%;
  }
  .message_cot .cot_all {
    width: calc(100vw - 32px);
    height: calc(100% - 16px);
    float: left;
    border-top: 1px rgb(225, 229, 232) solid;
  }

  .message_cot .cot {
    height: 70px;
    border-right: 1px rgb(225, 229, 232) solid;
    border-bottom: 1px rgb(225, 229, 232) solid;
    font-size: 12px;
    overflow: hidden;
    padding: 10px 30px;
    background-color: white;
    float: left;
    &:nth-of-type(7n + 1) {
      border-left: 1px rgb(225, 229, 232) solid;
    }

    &.col-6 {
      height: 35px;
      line-height: 35px;
      padding: 0 30px;
    }

    &.sevenCol {
      width: 14.285%;
      height: 12.5%;
      font-size: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .message_cot .cot .first {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .first_first {
      display: flex;
      flex-direction: column;
      align-items: center;
      .first_firstPhone {
        font-size: 12px;
      }
    }
  }
  .message_cot .cot .first span {
    display: inline-block;
    font-size: 14px;
  }

  .message_cot .cot .first .times {
    float: right;
    &.imptime-green {
      color: #49b856;
    }
  }

  .message_cot .cot .first .overtime {
    color: red;
  }

  .message_cot .cot .first .freetime {
    color: #49b856;
  }

  .message_cot .cot .second {
    margin-top: 8px;
    width: 100%;
    height: 20px;
  }

  .message_cot .cot .second span {
    font-size: 13px;
  }

  .message_cot .cot .second span:nth-child(1) {
    float: left;
    color: #666666;
  }

  .message_cot .cot .second span:nth-child(2) {
    float: right;
    color: #333333;

    &.colorRed {
      color: red;
    }
  }

  .message_cot .cot .second span:nth-child(3) {
    float: right;
  }

  .message_cot .cot .third {
    margin-top: 15px;
  }

  .message_cot .cot .third i {
    color: #49b856;
  }

  .message_cot .cot .third span {
    font-size: 13px;
  }
}
</style>