zy-wechat/pages/scanning_all/scanning_all.vue

<template>
  <view class="Scanning_all">
    <view class="Scanning">
      <view class="Scanning_top" id="Scanning_tops" :animation="animationData">
        <view class="Scanning_top_icon">
          <text class="cubeic-ok icon_transport transport-duigou"></text>
        </view>
        <view class="Scanning_top_text">
          <view class="text1">签到成功</view>
        </view>
        <view class="Scanning_cont">
          当前科室关联多个工单,请查看工单信息,
          <view>可选择多个工单后,点击 一键送达 完成配送.</view>
        </view>
      </view>
      <view class="title" v-if="workData && workData.length > 0">
        <text class="span1">工单信息</text>
        <text class="span2" @click="all()" v-if="tabType != 'specimenPlan'">全选</text>
        <text class="span3" @click="Dall()">全不选</text>
      </view>
      <view class="tabs" v-if="workData && workData.length > 0">
        <view class="tab">
          <view @click="act('drugsBag')" v-if="infoDATA['drugsBag']">
            <view id="10" :class="{ acts: tabType == 'drugsBag' }">药品({{ infoDATA.drugsBag.length }})</view>
          </view>
          <view @click="act('specimen')" v-if="infoDATA['specimen']">
            <view id="40" :class="{ acts: tabType == 'specimen' }">标本({{ infoDATA.specimen.length }})</view>
          </view>
          <view @click="act('specimenPlan')" v-if="infoDATA['specimenPlan']">
            <view id="40" :class="{ acts: tabType == 'specimenPlan' }">标本轮巡({{ infoDATA.specimenPlan.length }})</view>
          </view>
          <view @click="act('patientTransport')" v-if="infoDATA['patientTransport']">
            <view id="20" :class="{ acts: tabType == 'patientTransport' }">患者转运({{ infoDATA.patientTransport.length }})
            </view>
          </view>
          <view @click="act('inspect')" v-if="infoDATA['inspect']">
            <view id="30" :class="{ acts: tabType == 'inspect' }">患者陪检({{ infoDATA.inspect.length }})</view>
          </view>
          <view @click="act('jPBag')" v-if="infoDATA['jPBag']">
            <view id="40" :class="{ acts: tabType == 'jPBag' }">静配({{ infoDATA.jPBag.length }})</view>
          </view>
          <view @click="act('other')" v-if="infoDATA['other']">
            <view id="40" :class="{ acts: tabType == 'other' }">其他({{ infoDATA.other.length }})</view>
          </view>
        </view>
      </view>
      <view class="page_items" v-if="!workData" style="font-size: 18px; margin-top: 15%">
        <view class="zwsj">
          <image class="zwsj_img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
          <view class="zwsj_txt">暂无工单</view>
        </view>
      </view>
      <view class="page_items footerOtherMargin" v-if="workData && workData.length > 0">
        <view class="page_item" v-for="(infoDATA, i) of workData" :key="i">
          <view class="page_item_top">
            <view class="page_item_top_L">
              <text v-show="hasSelect(infoDATA.id)" class="ac" @click="ac(infoDATA, i)" :id="infoDATA.id">
                <text class="ac-span"></text>
              </text>
              <text v-show="!hasSelect(infoDATA.id)" class="ac1" @click="ac1(infoDATA, i)"
                :id="infoDATA.id + '0'"></text>
              <text class="L_text">单号:{{ infoDATA.gdcode }}</text>
              <view class="page_item_cont_start emergency1" v-if="infoDATA.emergencyType.value == 1">
                <text class="page_item_cont_start_txt">
                  <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
                  {{ infoDATA.emergencyType.name }}
                </text>
              </view>
              <view class="page_item_cont_start emergency" v-if="infoDATA.emergencyType.value == 2">
                <text class="page_item_cont_start_txt">
                  <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
                  {{ infoDATA.emergencyType.name }}
                </text>
              </view>
              <view class="page_item_cont_start emergencys" v-if="infoDATA.emergencyType.value == 3">
                <text class="page_item_cont_start_txt">
                  <text class="cubeic-star icon_transport transport-shiwujiaoxing"></text>
                  {{ infoDATA.emergencyType.name }}
                </text>
              </view>
            </view>
            <view class="page_item_top_R">
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimen'">标本</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'specimenPlan'">标本</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'drugsBag'">药品</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'jPBag'">静配</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'inspect'">患者陪检</text>
              <text class="L_iocn" v-if="
                  infoDATA.taskType.associationType.value == 'patientTransport'
                ">患者转运</text>
              <text class="L_iocn" v-if="infoDATA.taskType.associationType.value == 'other'">其他</text>
            </view>
            <view class="L"></view>
            <view class="R"></view>
          </view>
          <view class="page_item_cont">
            <view class="page_item_cont_T">
              <view class="page_item_cont_title">
                <text> <text class="starting">起</text> 点科室 </text>
                <text class="text_big">{{ infoDATA.startDept.dept }}</text>
              </view>
            </view>
            <view class="line"></view>
            <view class="page_item_cont_B">
              <template v-if="infoDATA.taskType.associationType.value == 'inspect'">
                <view class="page_item_cont_title" v-for="(dept, i) of infoDATA.middleDept" :key="i">
                  <text> <text class="End">检</text> 查科室 </text>
                  <text class="text_big">{{ dept.dept }}</text>
                  <view></view>
                </view>
              </template>
              <template v-if="infoDATA.taskType.associationType.value != 'inspect'">
                <view class="page_item_cont_title" v-for="(dept, i) of infoDATA.endDepts" :key="i">
                  <text> <text class="End">终</text> 点科室 </text>
                  <text class="text_big">{{ dept.dept }}</text>
                </view>
              </template>
            </view>
          </view>
          <view class="page_item_foot">
            <view class="page_item_foot_text">
              <text class="text1">状态</text>
              <text class="text2" v-if="
                  !(
                    infoDATA.gdState.value == '5' &&
                    infoDATA.taskType.associationType.value == 'inspect'
                  )
                ">{{ infoDATA.gdState.name }}</text>
              <text class="text2" v-if="
                  infoDATA.gdState.value == '5' &&
                  infoDATA.taskType.associationType.value == 'inspect'
                ">待送回</text>
            </view>
            <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '2'">
              <text class="text1">预计响应时间</text>
              <text class="text2">{{ infoDATA.estimeResponseTime || 0 }}</text>
            </view>
            <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '5'">
              <text class="text1" v-if="!(infoDATA.taskType.associationType.value == 'inspect')">预计送达时间</text>
              <text class="text1" v-if="infoDATA.taskType.associationType.value == 'inspect'">预计送回时间</text>
              <text class="text2">{{ infoDATA.estimeCompleteTime || 0 }}</text>
            </view>
            <view class="page_item_foot_text" v-if="infoDATA.gdState.value == '4'">
              <text class="text1">预计到达时间</text>
              <text class="text2">{{ infoDATA.estimateArriveTime || 0 }}</text>
            </view>
            <view class="page_item_foot_text">
              <text class="text1">创建时间</text>
              <text class="text2">{{ infoDATA.startTime }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="foot_btn2 footerPadding" v-if="workData && workData.length > 0">
        <view class="btn1" @click="allStart()" v-if="flag">一键操作</view>
        <view class="btn1" v-if="!flag">一键操作</view>
        <view class="btn1" @click="showAlert">知道了</view>
      </view>
      <view class="foot_btn1 footerPadding" v-if="!workData">
        <view class="btn3" @click="showAlert">知道了</view>
      </view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @know="know" :operate="models.operate"></showModel>
    <!-- 填写交接人账号弹窗 -->
    <selectAccount v-if="hosModels.disjunctor" :title="hosModels.title" :disjunctor="hosModels.disjunctor" @ok="hosOk"
      @cancel="hosCancel">
    </selectAccount>
  </view>
</template>
<script>
  import showModel from "../../components/showModel/showModel.vue";
  import {
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        currentCode: '', //当前小扫描的科室二维码
        SMFlag: true,
        // 填写交接人账号弹窗model
        hosModels: {
          disjunctor: false,
        },
        // 弹窗model
        models: {
          disjunctor: false,
        },
        infoDATA: {},
        workData: [],
        tabType: "", //当前选中项
        userId: {
          ids: [],
        },
        typeData: [],
        types: false,
        code: "",
        flag: true, //一键操作，禁止多次
        flagTimer: null,
        selectArr: [], //选中项
        animationData: {}, //动画
      };
    },
    methods: {
      // 填写交接人账号-确认
      hosOk(data) {
        console.log(data);
        const {
          accountName,
          account,
          accountId
        } = data;
        if (!accountName && !account) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写交接人账号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        } else if ((!accountName && account) || (accountName && !account)) {
          //没有填写交接人
          uni.showModal({
            title: "提示",
            content: "请填写正确的交接人账号！",
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
          return;
        }
        this.hosModels.disjunctor = false;
        this.orderDeptHandler(false, data);
      },
      // 填写交接人账号-取消
      hosCancel() {
        this.hosModels.disjunctor = false;
        this.flag = true;
      },
      // 填写交接人账号弹窗
      showSelectAccount() {
        this.hosModels = {
          title: "填写交接人账号",
          disjunctor: true,
        };
      },
      // 知道了
      showAlert() {
        uni.navigateTo({
          url: "../receiptpage/receiptpage",
        });
      },
      //科室签到
      //bigScanner----判断是否需要交接人
      //accountObj----弹窗填写的交接人信息
      orderDeptHandler(bigScanner, accountObj) {
        let type = "orderSign/" + this.code;
        let list = {
          ids: this.userId.ids
        };
        bigScanner && (list.bigScanner = ['666']);
        if (accountObj) {
          list.handover = [accountObj.accountId];
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/" + type, list).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            if (this.tabType == "inspect" || this.tabType == "patientTransport") {
              if (res.ids) {
                for (var i = 0; i < this.userId.ids.length; i++) {
                  if (this.userId.ids[i] == res.ids[0]) {
                    this.userId.ids.splice(i, 1);
                  }
                }
              }
              uni.navigateTo({
                url: `../scanning_djInfo/scanning_djInfo?type=${
                this.tabType
              }&type1=${res.type}&infoData=${res.data}&status=${
                res.status
              }&msg=${res.msg}&deptCode=${this.code}&dept=${
                res.dept
              }&ids=${encodeURIComponent(
                JSON.stringify(this.userId.ids)
              )}&model=${encodeURIComponent(JSON.stringify(res))}`,
              });
            } else if (this.tabType == 'specimenPlan') {
              console.log(this.selectArr, '选中工单')
              let gd = this.infoDATA.specimenPlan.find(v => v.id == this.selectArr[0]);
              let startDeptId = gd.startDept.id; //起点科室id liaomingming
              let isDigitalHandover = gd.taskType.isDigitalHandover; //是否数字交接开关
              let signDeptId = res.deptId; //签到的科室id
              let gdId = gd.id;
              let gdState = gd.gdState.value;
              let endDepts = gd.endDepts.map(v => v.id).toString();
              uni.navigateTo({
                url: `../scanning_djEnd/scanning_djEnd?type=${
                this.tabType
              }&type1=${res.type}&code=${this.code}&dept=${
                res.dept
              }&ids=${encodeURIComponent(
                JSON.stringify(this.userId.ids)
              )}&model=${encodeURIComponent(JSON.stringify(res))}&accountObj=${encodeURIComponent(JSON.stringify(accountObj))}&deptId=${res.deptId}&startDeptId=${startDeptId}&isDigitalHandover=${isDigitalHandover}&signDeptId=${signDeptId}&gdId=${gdId}&gdState=${gdState}&endDepts=${endDepts}`,
              });
            } else {
              uni.navigateTo({
                url: `../scanning_djEnd/scanning_djEnd?type=${
                this.tabType
              }&type1=${res.type}&code=${this.code}&dept=${
                res.dept
              }&ids=${encodeURIComponent(
                JSON.stringify(this.userId.ids)
              )}&model=${encodeURIComponent(JSON.stringify(res))}&accountObj=${encodeURIComponent(JSON.stringify(accountObj))}&deptId=${res.deptId}`,
              });
            }
          } else if (res.status == "0000") {
            this.showSelectAccount(); //yeye
          } else {
            this.flag = true;
            uni.navigateTo({
              url: `../scanning_djEnd/scanning_djEnd?type=${this.tabType}&type1=${
              res.type
            }&code=${this.code}&dept=${res.dept}&ids=${encodeURIComponent(
              JSON.stringify(this.userId.ids)
            )}&model=${encodeURIComponent(JSON.stringify(res))}&deptId=${res.deptId}`,
            });
          }
        });
      },
      //一键操作
      allStart() {
        clearTimeout(this.flagTimer);
        this.flagTimer = setTimeout(() => {
          this.flag = false;
          let list = {};
          let type = "";

          if (this.userId.ids.length > 0) {
            if (
              this.tabType == "drugsBag" ||
              this.tabType == "jPBag" ||
              this.tabType == "other" ||
              this.tabType == "specimen" ||
              this.tabType == "specimenPlan"
            ) {
              this.orderDeptHandler(true);
            } else {
              if (!this.SMFlag) {
                return;
              }
              this.SMFlag = false;
              SM()
                .then((ress1) => {
                  uni.showLoading({
                    title: "加载中",
                    mask: true,
                  });
                  //检验二维码的有效性
                  post("/dept/scanning", {
                    content: ress1,
                  }).then((result) => {
                    this.SMFlag = true;
                    this.currentCode = result.code;
                    if (result.state == 200 || result.state == 201) {
                      let ress = result.code;
                      if (ress) {
                        if (this.tabType == "patientTransport") {
                          type = "handleTrans";
                          let data = {
                            ids: this.userId.ids,
                            deptCode: this.code,
                            code: ress,
                          };
                          list = data;
                        }
                        if (this.tabType == "inspect") {
                          type = "handleIns";
                          let data = {
                            ids: this.userId.ids,
                            deptCode: this.code,
                            code: ress,
                          };
                          list = data;
                        }
                        post("/workerOrder/" + type, list).then((res) => {
                          uni.hideLoading();
                          if (res.status == 200) {
                            if (
                              this.tabType == "inspect" ||
                              this.tabType == "patientTransport"
                            ) {
                              if (res.ids) {
                                for (var i = 0; i < this.userId.ids.length; i++) {
                                  if (this.userId.ids[i] == res.ids[0]) {
                                    this.userId.ids.splice(i, 1);
                                  }
                                }
                              }
                              uni.navigateTo({
                                url: `../scanning_djInfo/scanning_djInfo?type=${
                                this.tabType
                              }&type1=${res.type}&infoData=${res.data}&status=${
                                res.status
                              }&msg=${res.msg}&deptCode=${this.code}&dept=${
                                res.dept
                              }&ids=${encodeURIComponent(
                                JSON.stringify(this.userId.ids)
                              )}&model=${encodeURIComponent(
                                JSON.stringify(res)
                              )}`,
                              });
                            } else {
                              uni.navigateTo({
                                url: `../scanning_djEnd/scanning_djEnd?type=${
                                this.tabType
                              }&type1=${res.type}&dept=${
                                res.dept
                              }&ids=${encodeURIComponent(
                                JSON.stringify(this.userId.ids)
                              )}&model=${encodeURIComponent(
                                JSON.stringify(res)
                              )}&code=${this.code}`,
                              });
                            }
                          } else {
                            uni.navigateTo({
                              url: `../scanning_djEnd/scanning_djEnd?type=${
                              this.tabType
                            }&type1=${res.type}&dept=${
                              res.dept
                            }&ids=${encodeURIComponent(
                              JSON.stringify(this.userId.ids)
                            )}&model=${encodeURIComponent(
                              JSON.stringify(res)
                            )}&code=${this.code}&qrcode=${this.currentCode}`,
                            });
                          }
                        });
                      }
                    } else {
                      this.flag = true;
                      uni.hideLoading();
                      uni.showToast({
                        icon: "none",
                        title: "请求失败！",
                      });
                    }
                  });
                })
                .catch((err) => {
                  this.SMFlag = true;
                });
            }
          } else {
            this.flag = true;
            this.models = {
              disjunctor: true,
              title: "提示",
              content: "请选择工单!",
              icon: "warn",
              operate: {
                know: "知道了",
              },
            };
          }
        }, 500);
      },
      typePD(data, list) {
        if (list) {
          if (data.length >= 2) {
            for (var i = 0; i < data.length; i++) {
              if (data[i].gdState.value != list.gdState.value) {
                this.typeData.splice(i, 1);
                this.types = true;
              }
            }
          } else {
            this.types = false;
          }
        } else if (data.length == 1) {
          this.types = false;
        } else {
          this.types = false;
          for (var i = 0; i < data.length; i++) {
            if (data[0].gdState.value != data[i].gdState.value) {
              this.typeData.splice(i, 1);
              this.types = true;
            }
          }
        }
      },
      act(type) {
        this.Dall();
        this.tabType = type;
        this.workData = this.infoDATA[type];
      },
      // 已选择的项中是否包含该id
      hasSelect(id) {
        return this.selectArr.includes(id);
      },
      //取消
      ac(data, i) {
        console.log(data, i, this.selectArr, this.userId.ids, this.typeData);
        // id放入数组
        this.selectArr = this.selectArr.filter((item) => item != data.id);
        for (var i = 0; i < this.userId.ids.length; i++) {
          if (this.userId.ids[i] == data.id) {
            this.typeData.splice(i, 1);
            this.userId.ids.splice(i, 1);
          }
        }
      },
      //选中
      ac1(data, i) {
        console.log(data, i, this.userId.ids, '选中');
        if (this.tabType == 'specimenPlan' && this.typeData.length > 0) {
          this.typeData = [data];
        } else {
          this.typeData.push(data);
        }
        this.types = false;
        for (var i = 0; i < this.typeData.length; i++) {
          if (this.typeData[0].gdState.value != this.typeData[i].gdState.value) {
            this.models = {
              disjunctor: true,
              title: "提示",
              content: "请选择不同状态的工单!",
              icon: "warn",
              operate: {
                know: "知道了",
              },
            };
            this.typeData.splice(i, 1);
            this.types = true;
          }
        }
        if (!this.types) {
          if (this.tabType == 'specimenPlan' && this.typeData.length > 0) {
            this.userId.ids = [data.id];
            this.selectArr = [data.id];
          } else {
            this.userId.ids.push(data.id);
            this.selectArr.push(data.id);
          }
        }
      },
      //全选
      all() {
        let id = [];
        this.typeData = JSON.parse(JSON.stringify(this.workData));
        this.typePD(this.workData);
        if (this.types) {
          this.models = {
            disjunctor: true,
            title: "提示",
            content: "请选择不同状态的工单!",
            icon: "warn",
            operate: {
              know: "知道了",
            },
          };
          this.typeData = [];
        } else {
          for (var i = 0; i < this.workData.length; i++) {
            id.push(this.workData[i].id);
            this.selectArr.push(this.workData[i].id);
          }
          this.userId.ids = id;
        }
      },
      //全不选
      Dall() {
        this.selectArr = [];
        this.typeData = [];
        this.userId.ids = [];
      },
      texiao() {
        setTimeout(() => {
          this.animation.height(0).opacity(0).step();
          this.animationData = this.animation.export();
        }, 15000);
      },
      // 知道了
      know() {
        this.models.disjunctor = false;
      },
    },
    onLoad(options) {
      this.infoDATA = JSON.parse(options.infoDATA); //扫描科室码返回的信息
      this.code = options.code; //扫描科室码返回的二维码信息
      let arr = [];
      for (var key in this.infoDATA) {
        arr.push(key);
      }
      this.workData = this.infoDATA[arr[0]];
      this.tabType = arr[0];
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      this.SMFlag = true;
      this.flag = true;
      // 创建动画
      this.animation = uni.createAnimation({
        duration: 500,
        timingFunction: "ease",
        delay: 2000,
      });
      setTimeout(() => {
        this.texiao();
      }, 500);
    },
    onHide() {
      this.animationData = {};
    },
    onUnload() {
      // 页面关闭后清空数据
      this.animationData = {};
    },
  };
</script>
<style lang="less">
  ::-webkit-scrollbar {
    width: 0;
  }

  ::-webkit-scrollbar-track {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: none;
  }

  ::-webkit-scrollbar-thumb:active {
    background-color: none;
  }

  .Scanning_all {
    .title {
      font-size: 36rpx;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      font-weight: 700;
      position: relative;
      height: 40rpx;

      .span1 {
        position: absolute;
        left: 0;
        font-weight: 700;
      }

      .span2 {
        position: absolute;
        right: 20%;
        color: rgb(73, 184, 86);
      }

      .span3 {
        position: absolute;
        right: 0;
        color: rgb(73, 184, 86);
      }
    }

    .tabs {
      height: 90rpx;
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      position: relative;
      background: #fff;

      .acts {
        background: #ccc;
        height: 50rpx !important;
        width: 80% !important;
        border-radius: 20rpx;
      }

      .tab {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        height: 90rpx;
        position: absolute;
        width: auto;
        padding-top: 6rpx;

        view {
          display: inline-block;
          width: 260rpx;
          line-height: 48rpx;
          font-size: 32rpx;
          height: 100%;
          text-align: center;
        }
      }
    }

    .Scanning {
      padding: 0 20rpx;
      height: calc(100% - 100rpx);

      // seimin
      .Scanning_top {
        height: 400rpx;
        opacity: 1;

        .Scanning_top_icon {
          width: 140rpx;
          height: 140rpx;
          margin: 0 auto;
          margin-top: 36rpx;
          border-radius: 50%;
          line-height: 140rpx;

          .cubeic-ok {
            font-size: 140rpx;
            color: #35b34a;
          }
        }

        .Scanning_top_text {
          .text1 {
            margin-top: 40rpx;
            font-size: 48rpx;
            text-align: center;
          }
        }

        .Scanning_cont {
          font-size: 32rpx;
          margin-top: 30rpx;
          text-align: center;

          .text1 {
            margin-top: 24rpx;
            color: #ff3b53;
          }
        }
      }

      .page_items {
        margin-bottom: 110rpx;

        .zwsj {
          margin-top: 180rpx;
          text-align: center;

          .zwsj-img {
            width: 560rpx;
          }

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

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

          .L {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #f9fafb;
            position: relative;
            left: -50rpx;
            top: 66rpx;
          }

          .R {
            width: 40rpx;
            height: 40rpx;
            border-radius: 50%;
            background: #f9fafb;
            position: relative;
            float: right;
            right: -50rpx;
            top: 26rpx;
          }

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

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

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

            .page_item_top_L {
              height: 100%;
              float: left;
              line-height: 88rpx;
              display: flex;
              align-items: center;

              .ac {
                width: 32rpx;
                height: 32rpx;
                border: 2rpx solid #ccc;
                display: inline-block;
                position: relative;

                .ac-span {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  width: 24rpx;
                  height: 24rpx;
                  background: #39b199;
                  transform: translate(-50%, -50%);
                }
              }

              .ac1 {
                width: 32rpx;
                height: 32rpx;
                border: 2rpx solid #ccc;
                display: inline-block;
                position: relative;
              }

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

              .emergency {
                background: #ff3b53 !important;
              }

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

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

                .page_item_cont_start_txt {
                  font-size: 28rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  .cubeic-star {
                    font-size: 28rpx;
                  }
                }
              }

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

              .L_text {
                font-size: 32rpx;
                display: inline-block;
                font-weight: 700;
                margin-right: 8rpx;
              }
            }

            .page_item_top_R {
              height: 60rpx;
              float: right;
              padding-top: 20rpx;
              font-size: 32rpx;
              position: absolute;
              right: 50rpx;

              .L_iocn {
                display: inline-block;
                height: 52rpx;
                line-height: 48rpx;
                color: rgb(7, 134, 60);
                font-size: 36rpx;
                font-weight: 700;
              }
            }
          }

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

            .text_big {
              font-size: 32rpx;
              position: absolute;
              right: 16rpx;
              font-weight: 700;
              margin-top: 10rpx;
            }

            .text_big2 {
              font-size: 32rpx;
              position: absolute;
              right: 16rpx;
              font-weight: 700;
            }

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

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

            .page_item_cont_T {
              padding-top: 28rpx;
              font-size: 28rpx;

              .page_item_cont_title {
                height: 100%;
                font-size: 32rpx;
              }
            }

            .page_item_cont_B {
              padding-top: 28rpx;
              margin-bottom: 28rpx;

              .page_item_cont_title {
                height: 60rpx;
                font-size: 32rpx;
              }

              .page_item_cont_title1 {
                height: 60rpx;
                line-height: 60rpx;
                font-size: 32rpx;
                padding-left: 64rpx;
              }
            }
          }

          .page_item_foot {
            border-top: 2rpx dashed #e5e9ed;
            border-bottom: 2rpx dashed #e5e9ed;
            padding: 28rpx 16rpx;
            text-align: left;

            .page_item_foot_text {
              height: 48rpx;
              font-size: 32rpx;
              line-height: 48rpx;
              margin-bottom: 20rpx;

              .text1 {
                color: rgb(102, 102, 102);
              }

              .text2 {
                float: right;
                font-weight: 700;
              }
            }
          }

          #infos {
            display: none;
          }

          .page_item_infos {
            padding-bottom: 20rpx;
            border-bottom: 2rpx dashed #e5e9ed;

            .page_item_info2 {
              text-align: left;
              line-height: 60rpx;
              font-size: 32rpx;
              padding-left: 16rpx;

              .page_item_foot_text {
                height: 48rpx;
                font-size: 32rpx;
                line-height: 48rpx;
                margin-bottom: 20rpx;

                .text1 {
                  color: rgb(102, 102, 102);
                }

                .text2 {
                  float: right;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }

      .foot_btn2 {
        position: fixed;
        bottom: 0;
        right: 20rpx;
        left: 20rpx;
        line-height: 66rpx;
        height: 100rpx;
        border-top: 2rpx solid #e5e9ed;
        background: #f9fafb;
        display: flex;

        .btn1,
        .btn2 {
          height: 66rpx;
          flex: 1;
          margin: 0 2%;
          background-image: linear-gradient(to right, #72c172, #3bb197);
          color: #fff;
          border-radius: 8rpx;
          font-size: 32rpx;
          margin-top: 16rpx;
          text-align: center;
        }
      }

      .foot_btn1 {
        position: fixed;
        bottom: 0;
        right: 20rpx;
        left: 20rpx;
        line-height: 66rpx;
        height: 100rpx;
        border-top: 2rpx solid #e5e9ed;
        background: #f9fafb;
        text-align: center;

        .btn3 {
          height: 66rpx;
          width: 100%;
          background-image: linear-gradient(to right, #72c172, #3bb197);
          color: #fff;
          border-radius: 8rpx;
          font-size: 32rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
</style>