zy-wechat/pages/receiptpage/receiptpage.vue

<template>
  <view class="Receiptpage">
    <view class="page_tab">
      <view class="page_tab_bar" :class="{ active: item.label === selectedLabelSlots }" v-for="item in tabs"
        :key="item.value" @click="clickHandler(item.label)">
        {{ item.label }}
        <text class="tab_num">( {{ item.num }} )</text>
        <view class="more" v-if="item.label === '执行中'"></view>
        <picker class="more_picker" v-if="item.label === '执行中'" @click.stop @change="execFilter($event)" :value="index"
          :range="array" range-key="name">
          <view class="uni-input">{{ array[index].name }}</view>
        </picker>
      </view>
    </view>
    <view v-if="zxzData.length == 0" class="zwsj">
      <image class="zwsj-img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
      <view class="zwsj-txt">暂无数据</view>
    </view>
    <view class="page_items">
      <scroll-view class="page_items_scroll" scroll-y :refresher-enabled="scroll_refresher_enabled"
        :refresher-triggered="triggered" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
        @scroll="scroll" @scrolltolower="scrolltolower" :scroll-top="scroll_top" @refresherabort="refresherabort">
        <view class="page_item_wrap" v-for="(item, index) of zxzData" :key="index">
          <view class="page_item">
            <view class="L"></view>
            <view class="R"></view>
            <view class="page_item_top">
              <view class="page_item_top_L">
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'specimen'">标</text>
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'drugsBag'">药</text>
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'specimenPlan'">巡</text>
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'jPBag'">静</text>
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'inspect'">病</text>
                <text class="L_iocn" v-if="
                    item.taskType.associationType.value == 'patientTransport'
                  ">病</text>
                <text class="L_iocn" v-if="item.taskType.associationType.value == 'other'">其</text>
                <text class="L_time" v-if="item.overdueTime">{{ item.overdueTime }}前送达</text>
              </view>
              <view class="page_item_top_R" v-if="
                  !(
                    item.taskType.associationType.value == 'inspect' &&
                    item.gdState.value == 5
                  )
                ">
                {{ item.gdState.name }}
                <!-- 待取货 -->
              </view>
              <view class="page_item_top_R" v-if="
                  item.taskType.associationType.value == 'inspect' &&
                  item.gdState.value == 5
                ">
                待送回
                <!-- 待取货 -->
              </view>
              <view class="page_item_top_R type">
                {{
                  item.isHalfInspect === 1 ? "半程陪检" : item.taskType.taskName
                }}
              </view>
            </view>
            <view class="page_item_cont" @click="itemInfo(item.id)">
              <view class="page_item_cont_T">
                <view class="page_item_cont_title">
                  <text> <text class="starting">起</text> 点科室 </text>
                  <text class="text_big">{{ item.startDept.dept }}</text>
                </view>
                <view class="page_item_cont_start emergency1" v-if="item.emergencyType.value == 1">
                  <image mode="widthFix" class="page_item_cont_start-img" src="../../static/img/icon_shandian.png">
                  </image>
                  {{ item.emergencyType.name }}
                </view>
                <view class="page_item_cont_start emergency" v-if="item.emergencyType.value == 2">
                  <image mode="widthFix" class="page_item_cont_start-img" src="../../static/img/icon_shandian.png">
                  </image>
                  {{ item.emergencyType.name }}
                </view>
                <view class="page_item_cont_start emergencys" v-if="item.emergencyType.value == 3">
                  <image mode="widthFix" class="page_item_cont_start-img" src="../../static/img/icon_shandian.png">
                  </image>
                  {{ item.emergencyType.name }}
                </view>
              </view>
              <view class="page_item_conts" v-if="item.taskType.associationType.value == 'inspect'">
                <view>
                  预约时间 : {{ item.yyTime | yyTimeFilter
                  }}<text v-if="item.reservationNumber">({{ item.reservationNumber }})</text>
                </view>
                <view>
                  床号 : {{ item.patient ? item.patient.patientName : "-" }}({{
                    item.patient ? item.patient.bedNum : "-"
                  }})
                </view>
                <view>
                  携带设备 :
                  <text>{{ item.goods || "暂无" }}</text>
                </view>
                <view v-if="item.patient.careLevel">
                  护理等级 :
                  <text :class="[
                      item.patient.careLevel.value == 0 ||
                      item.patient.careLevel.value == 1
                        ? 'red'
                        : 'green',
                    ]">{{ item.patient.careLevel.name }}</text>
                </view>
                <view v-if="item.patient.illnessState">
                  病情级别 :
                  <text :class="{
                      red:
                        item.patient.illnessState.value == 2 ||
                        item.patient.illnessState.value == 3,
                    }">{{ item.patient.illnessState.name }}</text>
                </view>
                <view v-if="item.isAccompany === 1 || item.isAccompany === 0">
                  陪同情况 :
                  <text :class="{ red: item.isAccompany === 1 }">{{
                    item.isAccompany === 1 ? "需要医护陪同" : "无需医护陪同"
                  }}</text>
                </view>
              </view>
              <view class="page_item_conts" v-if="item.taskType.associationType.value == 'patientTransport'">
                <view>
                  床号 : {{ item.patient ? item.patient.patientName : "-" }}({{
                    item.patient ? item.patient.bedNum : "-"
                  }})
                </view>
                <view>
                  携带设备 :
                  <text>{{ item.goods || "暂无" }}</text>
                </view>
                <view v-if="item.patient.careLevel">
                  护理等级 :
                  <text :class="[
                      item.patient.careLevel.value == 0 ||
                      item.patient.careLevel.value == 1
                        ? 'red'
                        : 'green',
                    ]">{{ item.patient.careLevel.name }}</text>
                </view>
                <view v-if="item.patient.illnessState">
                  病情级别 :
                  <text :class="{
                      red:
                        item.patient.illnessState.value == 2 ||
                        item.patient.illnessState.value == 3,
                    }">{{ item.patient.illnessState.name }}</text>
                </view>
                <view v-if="item.isAccompany === 1 || item.isAccompany === 0">
                  陪同情况 :
                  <text :class="{ red: item.isAccompany === 1 }">{{
                    item.isAccompany === 1 ? "需要医护陪同" : "无需医护陪同"
                  }}</text>
                </view>
              </view>
              <view class="page_item_conts" v-if="item.taskType.associationType.value == 'drugsBag'">
                <view>
                  药包编码 : {{ item.drugs ? item.drugs.packid : "无" }}
                </view>
              </view>
              <view class="page_item_conts" v-if="item.taskType.associationType.value == 'jPBag'">
                <view>
                  药包编码 :
                  {{ item.staticDistri ? item.staticDistri.packid : "无" }}
                </view>
              </view>
              <view class="line"></view>
              <view class="page_item_cont_B">
                <view class="page_item_cont_title" v-if="item.taskType.associationType.value != 'inspect'">
                  <text> <text class="End">终</text> 点科室 </text>
                  <text class="text_big" v-for="(dept, i) of item.endDepts" :key="i">{{ dept.dept }}</text>
                </view>
                <view class="page_item_cont_title" v-if="item.taskType.associationType.value == 'inspect'">
                  <text> <text class="End">检</text> 查科室 </text>
                  <text class="text_big" v-for="(dept, i) of item.middleDept" :key="i">{{ dept.dept }}</text>
                </view>
              </view>
              <view v-if="
                  item.taskType.associationType.value == 'inspect' ||
                  item.taskType.associationType.value == 'patientTransport'
                ">
                <!-- 待抢单 -->
                <text class="red" v-if="item.gdState.value == 2">请扫描患者腕带，或者请扫描科室码</text>
                <!-- 待到达 -->
                <text class="red" v-if="item.gdState.value == 4">请扫描患者腕带</text>
                <!-- 执行中 -->
                <text class="red" v-if="item.gdState.value == 8">请扫描检查科室码，并扫描患者腕带</text>
                <!-- 待送达 -->
                <text class="red" v-if="item.gdState.value == 5">请扫描终点科室码，并扫描患者腕带</text>
              </view>
            </view>

            <!-- 如果不是患者陪检或患者转运或其他 -->
            <view class="page_item_btn" v-if="
                selectedLabelSlots == '执行中' &&
                item.taskType.associationType.value != 'patientTransport' &&
                item.taskType.associationType.value != 'inspect' &&
                item.taskType.associationType.value != 'other'
              " hover-class="seimin-btn-hover">
              <smallScreen :sData="item" :sType="2">扫码</smallScreen>
            </view>
            <!-- 如果不是静配，药配，标本配送,标本轮巡 -->
            <view class="page_item_btn_wrap" v-if="
                selectedLabelSlots == '执行中' &&
                item.taskType.associationType.value != 'jPBag' &&
                item.taskType.associationType.value != 'drugsBag' &&
                item.taskType.associationType.value != 'specimen' &&
                item.taskType.associationType.value != 'specimenPlan'
              ">
              <view class="page_item_btn" :style="{
                  width:
                    item.taskType.associationType.value != 'other' &&
                    item.gdState.value == 4
                      ? '50%'
                      : '100%',
                }" hover-class="seimin-btn-hover">
                <smallScreen :sData="item" :sType="1">扫码</smallScreen>
              </view>
              <view v-if="
                  item.taskType.associationType.value != 'other' &&
                  item.gdState.value == 4
                " class="page_item_btn" @click="photograph(item)" hover-class="seimin-btn-hover">拍照</view>
            </view>
            <view class="page_item_btn" v-if="selectedLabelSlots == '待接单'" @click="showAlerts(item)"
              hover-class="seimin-btn-hover">接单</view>
          </view>
          <view class="L-l"></view>
          <view class="R-l"></view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部扫一扫 -->
    <bigScreen></bigScreen>
    <!-- 悬浮按钮 -->
    <uni-fab :pattern="pattern" :content="content" :direction="direction" @trigger="trigger"></uni-fab>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @ok="ok" @cancel="cancel" @know="know" :operate="models.operate"></showModel>
  </view>
</template>
<script>
  import smallScreen from "../../components/smallScreen/smallScreen.vue";
  import showModel from "../../components/showModel/showModel.vue";
  import bigScreen from "../../components/bigScreen/bigScreen.vue";
  // https://ext.dcloud.net.cn/plugin?id=144
  import uniFab from "@/components/uni-fab/uni-fab.vue";
  import {
    get,
    post,
    SM,
    deleteIt,
    webHandle
  } from "../../http/http.js";
  import {
    photographTool
  } from "../../tools/photograph.js";
  export default {
    data() {
      return {
        // 筛选条件
        array: [{
            id: 0,
            name: "全部",
          },
          {
            id: 71,
            name: "待到达",
          },
          {
            id: 72,
            name: "待送达",
          },
          {
            id: 75,
            name: "执行中",
          },
        ],
        index: 0,
        arrayKey: 0,
        // 当前登录人是否是药房角色
        pharmacistFlag: false,
        // 抢单的id
        qdId: "",
        // 弹窗model
        models: {
          disjunctor: false,
        },
        // 悬浮按钮样式
        pattern: {
          buttonColor: "#6cc076",
        },
        // 悬浮按钮展开菜单显示方式
        direction: "vertical",
        // 悬浮按钮展开菜单内容配置项
        content: [{
          text: "我的任务",
        }, ],
        // 当前选中tab页名称
        selectedLabelSlots: "待接单",
        // tab页信息
        tabs: [{
            label: "待接单", //tab页名称
            value: "1", //值
            num: 0, //数量
          },
          {
            label: "执行中",
            value: "2",
            num: 0,
          },
        ],
        //列表数据
        zxzData: [],
        //分页页码
        idx: 0,
        // 列表项总数
        totalNum: -1,
        triggered: false, //下拉刷新状态
        freshing: false, //上拉加载开关
        scroll_top: 0, //距离顶部的距离
        scroll_refresher_enabled: true, //是否开启自定义下拉刷新
      };
    },
    filters: {
      // 自定义管道 yyTime
      yyTimeFilter: function(data) {
        if (data) {
          let arr = data.split(/[-:\s]/);
          const nDate = new Date(
            arr[0] - 0,
            arr[1] - 1,
            arr[2] - 0,
            arr[3] - 0,
            arr[4] - 0,
            0
          );
          const month = (nDate.getMonth() + 1).toString().padStart(2, 0);
          const date = nDate.getDate().toString().padStart(2, 0);
          const hour = nDate.getHours().toString().padStart(2, 0);
          const minute = nDate.getMinutes().toString().padStart(2, 0);
          return `${month}-${date} ${hour}:${minute}`;
        } else {
          return "-";
        }
      },
    },
    components: {
      uniFab,
      showModel,
      bigScreen,
    },
    methods: {
      // 执行中筛选
      execFilter({
        detail: {
          value
        }
      }) {
        this.index = value;
        this.arrayKey = this.array[value].id;
        this.zxzData = [];
        this.totalNum = -1;
        this.idx = 0;
        this.selectedLabelSlots = "执行中";
        this.executingOrders(0);
      },
      // 获取科室二维码设置开关
      getMenu() {
        let menu = uni.getStorageSync("userData").menu;
        //判断当前登陆人具体角色 start
        let roles = uni.getStorageSync("userData").user.role;
        this.pharmacistFlag = roles.some(
          (item) => item.rolecode === "pharmacist"
        );
        //判断当前登陆人具体角色 end
        console.log(menu);
        menu.forEach((item) => {
          if (item.link === "wxInspect") {
            this.content.push({
              text: "检查信息",
            });
          } else if (item.link === "wxPatient") {
            this.content.push({
              text: "患者信息",
            });
          } else if (item.link === "wxPharmacy") {
            // 如果是配药师人员,则增加药房
            if (this.pharmacistFlag) {
              this.content.push({
                text: "药房",
              });
            }
          } else if (item.link === "wxCode") {
            this.content.push({
              text: "二维码设置",
            });
          }
        });
      },
      // 拍照
      photograph(data) {
        photographTool(data);
      },
      // 悬浮按钮点击事件
      trigger(e) {
        if (e.item.text === "我的任务") {
          uni.navigateTo({
            url: "../mypage/mypage",
          });
        } else if (e.item.text === "退出登录") {
          // 假登录
          uni.showToast({
            title: "退出成功！",
          });
          let ip = uni.getStorageSync("ip"); //记住域名或ip
          let username = uni.getStorageSync("username"); //记住用户名
          let password = uni.getStorageSync("password"); //记住密码
          let savePasswordTime = uni.getStorageSync("savePasswordTime"); //记住密码的时间戳
          let clientid = uni.getStorageSync("clientid");
          uni.clearStorageSync();
          if (username) {
            uni.setStorageSync("ip", ip); //记住域名或ip
            uni.setStorageSync("username", username); //记住用户名
            uni.setStorageSync("password", password); //记住密码
            uni.setStorageSync("savePasswordTime", savePasswordTime); //记住密码的时间戳
          }
          uni.setStorageSync("clientid", clientid);
          uni.navigateTo({
            url: "../homePage/homePage",
          });
          // 假登录
          deleteIt("/auth/logout2").then((result) => {
            if (result.status == 200) {
              uni.showToast({
                title: "退出成功！",
              });
              let ip = uni.getStorageSync("ip"); //记住域名或ip
              let username = uni.getStorageSync("username"); //记住用户名
              let password = uni.getStorageSync("password"); //记住密码
              let clientid = uni.getStorageSync("clientid");
              uni.clearStorageSync();
              uni.setStorageSync("ip", ip); //记住域名或ip
              uni.setStorageSync("username", username); //记住用户名
              uni.setStorageSync("password", password); //记住密码
              uni.setStorageSync("clientid", clientid);
              uni.navigateTo({
                url: "../homePage/homePage",
              });
            } else {
              uni.showToast({
                icon: "none",
                title: "请求失败！",
              });
            }
          });
        } else if (e.item.text === "药房") {
          uni.navigateTo({
            url: "../pharmacy/pharmacy",
          });
        } else if (e.item.text === "患者信息") {
          uni.navigateTo({
            url: "../patientInformationList/patientInformationList",
          });
        } else if (e.item.text === "负责科室") {
          if (uni.getStorageSync("setDepts")) {
            uni.removeStorageSync("setDepts"); //清空选择的科室,初始化
          }
          let obj = uni.getStorageSync("setDeptConfg");
          uni.navigateTo({
            url: `../setDept/setDept?configName=${obj.configName}&id=${obj.id}&changedept=1`,
          });
        } else if (e.item.text === "检查信息") {
          uni.navigateTo({
            url: "../inspectList/inspectList",
          });
        } else if (e.item.text === "二维码设置") {
          uni.navigateTo({
            url: "../settingCode/settingCode",
          });
        }
      },
      // 点击tab页切换
      clickHandler(key) {
        this.selectedLabelSlots = key;
        this.idx = 0;
        this.totalNum = -1;
        // this.zxzData = [];
        this.scroll_top = Math.random(); //回到顶部
        if (key === "待接单") {
          this.waitingOrders(0);
        } else if (key === "执行中") {
          this.executingOrders(0);
        }
      },
      // 进入详情页
      itemInfo(id) {
        uni.navigateTo({
          url: `../receipt_infopage/receipt_infopage?id=${id}`,
        });
      },
      //抢单后知道了
      know() {
        this.models.disjunctor = false;
        this.idx = 0;
        this.totalNum = -1;
        // this.zxzData = [];
        this.executingOrdersGetNum();
        this.waitingOrders(0); //seimin
        this.scroll_top = Math.random(); //回到顶部
      },
      //抢单确定
      ok() {
        this.models.disjunctor = false;
        get("/workerOrder/takeOrder/" + this.qdId.id).then((res) => {
          let msg = "接单失败";
          let icon = "error";
          if (res.status == 200) {
            msg = "接单成功";
            icon = "success";
          }
          this.models = {
            disjunctor: true,
            content: msg,
            icon: icon,
            operate: {
              know: "知道了",
            },
          };
        });
      },
      //抢单取消
      cancel() {
        this.models.disjunctor = false;
      },
      // 抢单
      showAlerts(data) {
        this.qdId = data;
        this.models = {
          disjunctor: true,
          title: "提示",
          content: "是否确定接单?",
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      //执行中列表数据获取
      executingOrders(idx) {
        console.log(this.zxzData.length, this.totalNum);
        if (this.zxzData.length == this.totalNum) {
          uni.showToast({
            icon: "none",
            title: "没有更多数据了！",
          });
          this.freshing = true;
          return;
        }
        let data = {
          idx,
          sum: 20,
        };
        if (this.arrayKey) {
          data.keyWord = this.arrayKey;
        } else {
          delete data.keyWord;
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/executingOrders", data).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.triggered = false;
            this.freshing = true;
            this.totalNum = res.data.resultCount;
            if (idx === 0) {
              this.zxzData = res.data.data;
            } else {
              this.zxzData.push(...res.data.data);
            }
            this.tabs[1].num = res.data.resultCount;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      //待抢单列表数据获取
      waitingOrders(idx) {
        if (this.zxzData.length == this.totalNum) {
          uni.showToast({
            icon: "none",
            title: "没有更多数据了！",
          });
          this.freshing = true;
          return;
        }
        let data = {
          idx,
          sum: 20,
        };
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        // 请求列表数据
        post("/workerOrder/waitingOrders", data).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            this.triggered = false;
            this.freshing = true;
            this.totalNum = res.data.resultCount;
            if (idx === 0) {
              this.zxzData = res.data.data;
            } else {
              this.zxzData.push(...res.data.data);
            }
            this.tabs[0].num = res.data.resultCount;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      //刷新
      refresherrefresh() {
        if (this.triggered) {
          return;
        }
        this.triggered = true;
        this.idx = 0;
        this.totalNum = -1;
        if (this.selectedLabelSlots == "待接单") {
          this.waitingOrders(0);
        } else if (this.selectedLabelSlots == "执行中") {
          this.executingOrders(0);
        }
      },
      // 滚动
      scroll(e) {
        if (e.detail.scrollTop < 20) {
          this.scroll_refresher_enabled = true;
        } else {
          this.scroll_refresher_enabled = false;
        }
      },
      // 下拉刷新复位
      refresherrestore() {
        this.triggered = false;
        console.log("下拉刷新复位");
      },
      //下拉刷新中止
      refresherabort() {
        this.triggered = false;
        console.log("下拉刷新中止");
      },
      //分页,上拉加载
      scrolltolower() {
        if (this.freshing) {
          this.freshing = false;
          if (this.selectedLabelSlots == "待接单") {
            this.waitingOrders(++this.idx);
          } else if (this.selectedLabelSlots == "执行中") {
            this.executingOrders(++this.idx);
          }
        }
      },
      // 执行中获取数字
      executingOrdersGetNum() {
        let data = {
          idx: 0,
          sum: 20,
        };
        if (this.arrayKey) {
          data.keyWord = this.arrayKey;
        } else {
          delete data.keyWord;
        }
        post("/workerOrder/executingOrders", data).then((res) => {
          if (res.status == 200) {
            this.tabs[1].num = res.data.resultCount;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      // 待接单获取数字
      waitingOrdersGetNum() {
        let data = {
          idx: 0,
          sum: 20,
        };
        post("/workerOrder/waitingOrders", data).then((res) => {
          if (res.status == 200) {
            this.tabs[0].num = res.data.resultCount;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      // 阻止浏览器滑动
      stop(e) {
        e.preventDefault();
      },
    },
    onLoad() {
      // 获取菜单权限
      this.getMenu();
      post("/auth/getUserWorkDept", {}).then((ress) => {
        if (ress.status == 200) {
          let userId = uni.getStorageSync("userData").user.id;
          let groupManager = ress.settings && ress.settings.groupManager; //当前工作组合选择的组
          let workType = ress.settings ? ress.settings.workType : -1; //1是综合，2是自主
          let ruleType = ress.settings ? ress.settings.ruleType : -1; //3是科室绑定人员,4是科室绑定分组，2是绑定分组
          if (workType == 2 && (ruleType == 3 || (ruleType == 4 && userId == groupManager.manager))) {
            //自选排班，科室绑定分组,当前登陆人是组长
            this.content.unshift({
              text: "负责科室",
            });
          }
        }
      });
      // let setDeptConfg = uni.getStorageSync("setDeptConfg");
      // let manager = uni.getStorageSync("manager");
      // let userId = uni.getStorageSync("userData").user.id;
      // console.log(setDeptConfg, manager, userId);
      // if (
      //   setDeptConfg.workSchemeType == 2 &&
      //   (setDeptConfg.ruleType == 3 ||
      //     (setDeptConfg.ruleType == 4 && userId == manager))
      // ) {
      //   //自选排班，科室绑定人员 || 科室绑定分组 && 组长是当前登陆人
      //   this.content.unshift({
      //     text: "负责科室",
      //   });
      // }
      // #ifdef APP-PLUS
      // this.content.push({
      //   text: "退出登录",
      // });
      // #endif
      this.selectedLabelSlots = "执行中";
      this.waitingOrdersGetNum();
      this.executingOrders(0);
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      // #ifdef H5
      document.body.addEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
    onHide() {
      // #ifdef H5
      document.body.removeEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
  };
</script>
<style lang="less">
  .Receiptpage {
    width: 100%;
    height: 100%;
    position: relative;

    .red {
      color: red !important;
      font-weight: bold !important;
    }

    .page_tab {
      width: 100%;
      height: 96rpx;
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;

      .page_tab_bar {
        flex: 1;
        font-size: 36rpx;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2rpx;
          width: 100%;
          background-color: transparent;
        }

        .tab_num {
          color: #ff3b53;
          margin-left: 8rpx;
        }

        .more {
          position: absolute;
          right: 20rpx;
          width: 40rpx;
          height: 4rpx;
          border-top: 2px solid #49b856;
          border-bottom: 2px solid #49b856;
          background-color: #49b856;
          padding: 5px 0;
          background-clip: content-box;
        }

        .more_picker {
          position: absolute;
          right: 0;
          height: 100%;
          opacity: 0;
        }

        &.active {
          color: #49b856;

          &:after {
            background-color: #49b856;
          }
        }
      }
    }

    .zwsj {
      position: absolute;
      left: 50%;
      top: 180rpx;
      transform: translateX(-50%);

      .zwsj-img {
        width: 560rpx;
      }

      .zwsj-txt {
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .page_items {
      height: calc(100vh - 184rpx);
      padding: 0 20rpx;
      // padding-bottom: 88rpx;
      padding-top: 96rpx;

      .page_items_scroll {
        height: 100%;

        .page_item_wrap {
          position: relative;
          margin-bottom: 32rpx;

          .page_item {
            margin-bottom: 16rpx;
            min-height: 356rpx;
            background: #fff;
            border-radius: 8rpx;
            overflow: hidden;
            border: 2rpx solid #e5e9ed;

            .L {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              left: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .R {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              background: #f9fafb;
              position: absolute;
              float: right;
              right: -24rpx;
              top: 68rpx;
              border: 2rpx solid #e5e9ed;
            }

            .starting {
              width: 40rpx;
              height: 40rpx;
              color: #fff;
              background: #49b856;
              display: inline-block;
              border-radius: 50%;
              text-align: center;
              line-height: 40rpx;
              font-size: 28rpx;
            }

            .End {
              width: 40rpx;
              height: 40rpx;
              color: #fff;
              background: #39b199;
              display: inline-block;
              border-radius: 50%;
              text-align: center;
              line-height: 40rpx;
              font-size: 28rpx;
            }

            .page_item_top {
              height: 86rpx;
              border-bottom: 2rpx dashed #e5e9ed;
              padding: 0 16rpx;

              .page_item_top_L {
                height: 100%;
                float: left;
                line-height: 88rpx;

                .L_iocn {
                  display: inline-block;
                  width: 44rpx;
                  height: 44rpx;
                  line-height: 42rpx;
                  border-radius: 100rpx;
                  color: #6cc076;
                  font-size: 32rpx;
                  border: 4rpx solid #6cc076;
                  background: #f0f6ed;
                  text-align: center;
                  margin-right: 8rpx;
                }

                .L_time {
                  color: #6cc076;
                  font-size: 32rpx;
                }

                .L_text {
                  font-size: 32rpx;
                }
              }

              .page_item_top_R {
                height: 100%;
                float: right;
                line-height: 88rpx;
                font-size: 32rpx;

                &.type {
                  margin-right: 32rpx;
                  color: red;
                  max-width: 260rpx;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
              }
            }

            .page_item_cont {
              min-height: 180rpx;
              padding: 0 16rpx;
              text-align: left;
              position: relative;

              .text_big {
                font-size: 32rpx;
                margin-left: 10rpx;
                font-weight: 700;
              }

              .line {
                height: 40rpx;
                width: 2rpx;
                border-left: 2rpx solid #e5e9ed;
                position: absolute;
                top: 70rpx;
                left: 36rpx;
              }

              .lines {
                height: 40%;
                width: 2rpx;
                border-left: 2rpx solid #e5e9ed;
                position: absolute;
                top: 23%;
                left: 36rpx;
              }

              .emergencys {
                background: #ff3b53 !important;
                width: 124rpx !important;
              }

              .emergency {
                background: #ff3b53 !important;
              }

              .emergency1 {
                background: #49b856 !important;
              }

              .page_item_cont_T {
                min-height: 80rpx;
                max-height: 324rpx;
                font-size: 28rpx;
                padding-top: 16rpx;

                .page_item_cont_title {
                  height: 100%;
                  float: left;
                }

                .page_item_cont_start {
                  text-align: center;
                  float: right;
                  height: 44rpx;
                  width: 104rpx;
                  line-height: 44rpx;
                  border-radius: 8rpx;
                  background: #49b856;
                  color: #fff;

                  .page_item_cont_start-img {
                    width: 22rpx;
                    position: relative;
                    top: 6rpx;
                    margin-right: 8rpx;
                  }
                }
              }

              .page_item_conts {
                color: rgb(102, 102, 102);
                padding-left: 18%;
                font-size: 28rpx;

                view {
                  margin-bottom: 10rpx;
                }

                text {
                  color: #49b856;
                }

                .num {
                  float: right;
                }
              }

              .page_item_cont_B {
                padding-top: 20rpx;
                font-size: 28rpx;
                overflow: hidden;

                .page_item_cont_title {
                  height: 100%;
                  float: left;
                }
              }
            }

            .page_item_btn_wrap {
              display: flex;
              justify-content: space-between;

              .page_item_btn {
                height: 88rpx;
                width: 49%;
                background-image: linear-gradient(to right, #72c172, #3bb197);
                border-radius: 8rpx;
                line-height: 88rpx;
                color: #fff;
                font-size: 36rpx;
                font-weight: 700;
                text-align: center;
              }
            }

            .page_item_btn {
              height: 88rpx;
              background-image: linear-gradient(to right, #72c172, #3bb197);
              border-radius: 8rpx;
              line-height: 88rpx;
              color: #fff;
              font-size: 36rpx;
              font-weight: 700;
              text-align: center;
            }
          }

          .L-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            left: 20rpx;
            top: 72rpx;
            display: none;
          }

          .R-l {
            width: 2rpx;
            height: 40rpx;
            background: #f9fafb;
            position: absolute;
            right: 20rpx;
            top: 72rpx;
            display: none;
          }
        }
      }
    }

    .text {
      font-size: 36rpx;
    }

    .wt_icon {
      font-size: 40rpx;
    }
  }
</style>