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()">全选</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="btn2" @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 {
            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) {
      // 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) {
      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) {
      } 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;

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

      .btn1 {
        float: left;
      }

      .btn2 {
        float: right;
      }
    }

    .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>