itsm-pc-handle/assets/views/bigScreen/realtimeBroadcast.html

<div class="pharmacy" ng-controller="realtimeBroadcastCtrl">
  <!-- 头部 start -->
  <div class="pharmacy-header">
    <div class="pharmacy-logo">
      <img ng-if="app.layout.logo"
        ng-src="{{app.layout.logo}}"
        class="pharmacy-logo__img"
        alt=""
      />
      <h1 class="pharmacy-logo__name">{{app.name}}</h1>
    </div>
    <div class="pharmacy-name">
      <h2 class="pharmacy-name__title">{{ dutyOrBranch }}</h2>
    </div>
    <div class="userInfo">
      <div class="wel">欢迎您：</div>
      <div class="user">
        <img src="assets/images/icon_keshi.png" alt="" />
        <span>{{ dutyOrBranch}}</span>
      </div>
      <div class="userInfo-wrap">
        <div class="logOut" ng-click="changeHospitalDept(true)">切换院区科室</div>
        <div class="logOut" ng-click="logout()">退出</div>
      </div>
    </div>
  </div>
  <!-- 头部 end -->
  <!-- 主体部分 start -->
  <div class="pharmacy-main">
    <!-- 待接单 start -->
    <div class="pharmacy-main__list pharmacy-main__print">
      <!-- 标题 start -->
      <div class="pharmacy-main__title">
        <strong>待接单</strong>
        <span>{{mySwiper1.activeIndex + 1}}</span>
        <span class="autoUpdate">{{ logTime }}秒后自动刷新</span>
      </div>
      <!-- 标题 end -->
      <!-- 列表 start -->
      <div class="pharmacy-main__selectionWrap swiper1">
        <div ng-show="!loading1" class="swiper-wrapper">
          <div ng-repeat="waitingOrders in waitingOrderList" class="swiper-slide">
            <div ng-repeat="item in waitingOrders" class="pharmacy-main__selection">
              <div class="pharmacy-main__selectionInfo">
                <div class="pharmacy-main__selectionItem">
                  <strong>
                    <span ng-if="item.priority">
                        <strong style="color: red;" ng-if="item.priority.value == 'L1' || item.priority.value == 'L2'">{{ item.priority.name }}</strong>
                        <strong style="color: orange;" ng-if="item.priority.value == 'L3'">{{ item.priority.name }}</strong>
                        <strong ng-if="item.priority.value == 'L4' || item.priority.value == 'L5'">{{ item.priority.name }}</strong>
                    </span>
                    {{item.incidentsign}}
                  </strong>
                  <span style="font-size: 18px;">{{item.branchName}} - {{item.department ?
                    item.department.dept : ''}}</span
                  >
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span style="font-size: 16px">{{item.description}}</span>
                  <span></span>
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span>{{ (item.place ? (item.place.area ? item.place.area.area : '') : '') + (item.place ? (item.place.place ? item.place.place : '') : '') + (item.houseNumber ? item.houseNumber : '') }}</span>
                  <ng-container ng-if="item.handlerLogs.length">
                    <span ng-repeat="log in item.handlerLogs">{{ log.expectedDate | date:'MM' }}月{{ log.expectedDate | date:'dd' }}日前完成 {{ log.repairType ? log.repairType.name : '无' }}</span>
                  </ng-container>
                  <ng-container ng-if="item.handlerLogs.length === 0">
                    <span>暂无维修记录</span>
                  </ng-container>
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span>{{ item.groupORHandlerUser }}</span>
                  <span>{{ item.acceptDate }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pharmacy-main__selection pharmacy-main__selection--noData" ng-if="waitingOrderList.length === 0">
            <img src="assets/images/image_kongbaiye.png" alt="" />
          </div>
        </div>
        <div ng-if="loading1" style="height: calc(100vh - 212px); min-height: 556px">
          <div class="loadingFull display_flex justify-content_flex-center align-items_center">
            <div class="loadingFullInner">
              <img src="assets/images/loading1.gif" alt="" />
              <div>加载中...</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 end -->
    </div>
    <!-- 待接单 end -->
    <!-- 处理中 start -->
    <div class="pharmacy-main__list pharmacy-main__waitDelivery">
      <!-- 标题 start -->
      <div class="pharmacy-main__title">
        <strong>处理中</strong>
        <span>{{mySwiper2.activeIndex + 1}}</span>
        <span class="autoUpdate">{{ logTime }}秒后自动刷新</span>
      </div>
      <!-- 标题 end -->
      <!-- 列表 start -->
      <div class="pharmacy-main__selectionWrap swiper2">
        <div ng-show="!loading2" class="swiper-wrapper">
          <div ng-repeat="inProcesses in inProcessList" class="swiper-slide">
            <div ng-repeat="item in inProcesses" class="pharmacy-main__selection">
              <div class="pharmacy-main__selectionInfo">
                <div class="pharmacy-main__selectionItem">
                  <strong>
                      <span ng-if="item.priority">
                          <strong style="color: red;" ng-if="item.priority.value == 'L1' || item.priority.value == 'L2'">{{ item.priority.name }}</strong>
                          <strong style="color: orange;" ng-if="item.priority.value == 'L3'">{{ item.priority.name }}</strong>
                          <strong ng-if="item.priority.value == 'L4' || item.priority.value == 'L5'">{{ item.priority.name }}</strong>
                      </span>
                      {{item.incidentsign}}
                  </strong>
                  <span style="font-size: 18px;">{{item.branchName}} - {{item.department ?
                    item.department.dept : ''}}</span
                  >
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span style="font-size: 16px">{{item.description}}</span>
                  <span></span>
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span>{{ (item.place ? (item.place.area ? item.place.area.area : '') : '') + (item.place ? (item.place.place ? item.place.place : '') : '') + (item.houseNumber ? item.houseNumber : '') }}</span>
                  <ng-container ng-if="item.handlerLogs.length">
                    <span ng-repeat="log in item.handlerLogs">{{ log.expectedDate | date:'MM' }}月{{ log.expectedDate | date:'dd' }}日前完成 {{ log.repairType ? log.repairType.name : '无' }}</span>
                  </ng-container>
                  <ng-container ng-if="item.handlerLogs.length === 0">
                    <span>暂无维修记录</span>
                  </ng-container>
                </div>
                <div class="pharmacy-main__selectionItem">
                  <span>{{ item.groupORHandlerUser }}</span>
                  <span>{{ item.acceptDate }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="pharmacy-main__selection pharmacy-main__selection--noData" ng-if="inProcessList.length === 0">
            <img src="assets/images/image_kongbaiye.png" alt="" />
          </div>
        </div>
        <div
          ng-if="loading2"
          style="height: calc(100vh - 212px); min-height: 556px"
        >
          <div
            class="loadingFull display_flex justify-content_flex-center align-items_center"
          >
            <div class="loadingFullInner">
              <img src="assets/images/loading1.gif" alt="" />
              <div>加载中...</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 列表 end -->
    </div>
    <!-- 处理中 end -->
  </div>
  <!-- 主体部分 end -->
</div>

<!-- 样式 -->
<style>
  .loadingFull {
    height: 100%;
    text-align: center;
  }
  .display_flex {
    display: flex;
  }
  .justify-content_flex-center {
    justify-content: center;
  }
  .align-items_center {
    align-items: center;
  }
  .pharmacy {
    width: 100%;
    background-color: #f9fafb;
  }
  .pharmacy .ant-btn[disabled] {
    color: rgba(0, 0, 0, 0.25) !important;
    background-color: #f5f5f5 !important;
  }
  .pharmacy .red {
    color: red !important;
    font-weight: bold !important;
  }
  .pharmacy .green {
    color: #006bc0 !important;
    font-weight: bold !important;
  }
  .pharmacy h1,
  .pharmacy h2,
  .pharmacy h3,
  .pharmacy p {
    margin: 0;
  }
  .pharmacy em {
    font-style: normal;
  }
  .pharmacy .pharmacy {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .pharmacy .pharmacy-header {
    height: 88px;
    background-color: #fff;
    border-bottom: 1px solid #e5e9ed;
    box-sizing: border-box;
    display: flex;
  }
  .pharmacy .pharmacy-header .pharmacy-logo {
    width: 221px;
    background-color: #0f2e3b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .pharmacy .pharmacy-header .pharmacy-logo .pharmacy-logo__img {
    max-width: 100%;
    max-height: 50%;
  }
  .pharmacy .pharmacy-header .pharmacy-logo .pharmacy-logo__name {
    font-size: 14px;
    color: #fff;
    margin-top: 8px;
  }
  .pharmacy .pharmacy-header .pharmacy-name {
    flex: 1;
    border-right: 1px solid #e5e9ed;
  }
  .pharmacy .pharmacy-header .pharmacy-name .pharmacy-name__title {
    font-size: 22px;
    color: #333;
    margin-left: 43px;
    line-height: 87px;
  }
  .pharmacy .pharmacy-header .pharmacy-operate {
    width: 211px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .pharmacy .pharmacy-header .pharmacy-operate .pharmacy-operatePop {
    cursor: pointer;
    border: 1px solid #e5e9ed;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    color: #006bc0;
  }
  .pharmacy .pharmacy-header .pharmacy-operate:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #666;
  }
  .pharmacy .pharmacy-header .pharmacy-operate .pharmacy-operate__img {
    max-height: 40px;
    margin-right: 8px;
  }
  .pharmacy .pharmacy-header .pharmacy-operate .pharmacy-operate__title {
    font-size: 20px;
    color: #666;
    padding-right: 24px;
    cursor: pointer;
  }
  .pharmacy .userInfo {
    width: 336px;
    height: 100%;
    float: right;
    padding: 8px;
    box-sizing: border-box;
    font-size: 14px;
    border-left: 1px solid #e5e9ed;
  }
  .pharmacy .userInfo .wel {
    line-height: 15px;
  }
  .pharmacy .userInfo .user {
    font-size: 20px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
  }
  .pharmacy .userInfo .user img {
    height: 100%;
    margin-right: 8px;
  }
  .pharmacy .userInfo .userInfo-wrap {
    display: flex;
    justify-content: flex-end;
  }
  .pharmacy .userInfo .userInfo-wrap .logOut {
    display: inline-block;
    text-align: right;
    color: #006bc0;
    line-height: 20px;
    cursor: pointer;
    margin-right: 8px;
  }
  .pharmacy .pharmacy-main {
    height: calc(100vh - 88px);
    min-height: 680px;
    flex: 1;
    padding: 16px;
    display: flex;
    justify-content: space-between;
  }
  .pharmacy .pharmacy-main .pharmacy-main__list {
    display: flex;
    flex-direction: column;
    background-color: #f9fafb;
    width: 49%;
    box-sizing: border-box;
    border: 1px solid #e5e9ed;
  }
  .pharmacy .pharmacy-main .pharmacy-main__list .pharmacy-main__title {
    height: 40px;
    background-color: #fff;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e9ed;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__title
    .autoUpdate {
    font-size: 14px;
    color: #006bc0;
    margin-right: 8px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__title
    .pharmacy-main__printAll {
    height: 28px;
    line-height: 28px;
    margin-right: 16px;
    background-color: #006bc0;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
  }
  .pharmacy .pharmacy-main .pharmacy-main__list .pharmacy-main__search {
    padding: 8px;
    position: relative;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__search
    .pharmacy-main__searchInput {
    border-radius: 100px;
    padding-right: 82px;
    border: 1px solid #e5e9ed;
    background-color: #fff;
    overflow: hidden;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__search
    .pharmacy-main__searchInput
    input {
    border: none;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__search
    .pharmacy-main__searchInput
    .ant-input:focus {
    border-color: #fff;
    outline: 0;
    box-shadow: 0 0 0 2px #fff;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__search
    .pharmacy-main__searchInput
    .pharmacy-main__searchText {
    cursor: pointer;
    position: absolute;
    top: 13px;
    right: 8px;
    width: 74px;
    height: 22px;
    border-left: 1px solid #e5e9ed;
    color: #999;
    padding-left: 8px;
    box-sizing: border-box;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__search
    .pharmacy-main__searchInput
    .pharmacy-main__searchText
    span {
    color: #006bc0;
    margin-left: 8px;
  }
  .pharmacy .pharmacy-main .pharmacy-main__list .pharmacy-main__selectionWrap {
    flex: 1;
    overflow: hidden;
    width: 100%;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap:first-child {
    border-top: 1px solid #e5e9ed;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection {
    box-sizing: border-box;
    border-bottom: 1px solid #e5e9ed;
    display: flex;
    height: 100px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection.pharmacy-main__selection--more {
    color: #006bc0;
    height: 34px;
    cursor: pointer;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection.pharmacy-main__selection--more
    .pharmacy-main__selectionInfo {
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection.pharmacy-main__selection--more
    .pharmacy-main__selectionInfo
    .pharmacy-main__selection--icon {
    margin-right: 8px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection.pharmacy-main__selection--noData {
    height: calc(100vh - 212px);
    min-height: 556px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection.pharmacy-main__selection--noData
    img {
    width: 100px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionInfo {
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionInfo
    .pharmacy-main__selectionItem {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionInfo
    .pharmacy-main__selectionItem
    span {
    color: #666;
    font-size: 12px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionInfo
    .pharmacy-main__selectionItem
    strong {
    color: #333;
    font-weight: 700;
    font-size: 14px;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionPrint {
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: 1px solid #e5e9ed;
  }
  .pharmacy
    .pharmacy-main
    .pharmacy-main__list
    .pharmacy-main__selectionWrap
    .pharmacy-main__selection
    .pharmacy-main__selectionPrint
    .pharmacy-main__selectionPrintBtn {
    width: 60px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    border: 1px solid #006bc0;
    color: #006bc0;
    text-align: center;
    cursor: pointer;
  }
  .pharmacy .fixed {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 99;
    border-radius: 5px 0 0 5px;
  }
  .pharmacy .fixed .fixedMark {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 88;
  }
  .pharmacy .fixed > .left {
    width: 480px;
    float: left;
    background: #fff;
    padding: 16px;
    border-radius: 5px;
    border: 1px solid #e5e9ed;
    position: relative;
    z-index: 98;
  }
  .pharmacy .fixed > .left .con {
    background: #f9fafb;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 1px solid #e5e9ed;
    padding: 16px 20px;
  }
  .pharmacy .fixed > .left .con.tableCon {
    padding: 0;
  }
  .pharmacy .fixed > .left .con.tableCon .table {
    font-size: 14px;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td {
    padding: 15px 6px;
    text-align: center;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td > .tdiv {
    overflow: hidden;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td > .tdiv .name {
    float: left;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td > .tdiv .num {
    float: right;
    font-size: 12px;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td > .tdiv .num span {
    color: #006bc0;
    font-size: 14px;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td .notOpen {
    color: #666;
    font-size: 12px;
  }
  .pharmacy .fixed > .left .con.tableCon .table tr td .notOpen img {
    margin-bottom: 8px;
  }
  .pharmacy .fixed > .left .con .title {
    color: #333;
    text-align: center;
  }
  .pharmacy .fixed > .left .con .conditions > .ant-row {
    margin: 8px 0;
  }
  .pharmacy .fixed > .left .con .conditions > .ant-row .ant-row .ant-col-6 {
    margin: 2px 0;
  }
  .pharmacy .fixed > .left .con .conditions > .ant-row .checkAll {
    width: 100%;
    border-bottom: 1px solid #e9e9e9;
    color: #006bc0;
  }
  .pharmacy .fixed > .left .con .btns {
    padding: 5px 20px 0 20px;
  }
  .pharmacy .fixed .right {
    width: 80px;
    float: left;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px 0 0 5px;
    position: relative;
    z-index: 98;
  }
  .pharmacy .fixed .right .fixedMenu {
    border: 1px solid #e5e9ed;
    color: rgba(0, 128, 0, 0.5);
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    border-radius: 5px 0 0 5px;
  }
  .pharmacy .fixed .right .fixedMenu.hujiaozhongxin {
    margin-bottom: 5px;
  }
  .pharmacy .fixed .right .fixedMenu .menuItems .item {
    height: 35px;
    line-height: 35px;
    padding: 0 6px;
    cursor: default;
    border-bottom: 1px solid #e5e9ed;
    user-select: none;
  }
  .pharmacy .fixed .right .fixedMenu .menuItems .item.checked {
    background: #fff;
    color: #52ab77;
    opacity: 1;
    box-shadow: -3px 4px 7px #eae9e9;
  }
  .pharmacy .fixed .right .fixedMenu .menuItems .others {
    transition: height 0.4s linear;
    overflow: hidden;
  }
  .pharmacy .fixed .right .fixedMenu .arrow {
    cursor: pointer;
  }
</style>