zy-wechat/pages/scanning_ins/scanning_ins.vue

<template>
  <view class="Scanning_ins">
    <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 class="success_tips">
            (请您评估患者的意识状况、生命体征、配合程度，如有异常请及时联系护士！)
          </view>
        </view>
        <view class="Scanning_cont">
          <view>
            <text>患者姓名 : {{ infoDATA.patientName || "-" }}({{
                infoDATA.bedNum || "-"
              }})</text>
            <button @click="getInspectList()">查看检查</button>
          </view>
          <view>患者编号 : {{ infoDATA.patientCode || "-" }}</view>
          <view>住院科室 :
            {{ infoDATA.department ? infoDATA.department.dept : "-" }}
          </view>
        </view>
      </view>
      <!-- ------------------未完成工单 start----------------- -->
      <view class="page_items" v-if="
          workData.length === 0 && patientOrders && patientOrders.length > 0
        ">
        <view class="page_item" v-for="(infoDATA, i) of patientOrders" :key="i">
          <view class="page_item_top">
            <view class="page_item_top_L">
              <text class="L_text">单号:{{ infoDATA.gdcode }}</text>
            </view>
            <view class="page_item_top_R">
              <button class="L_iocn" @click="notice(infoDATA)">通知</button>
            </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.taskType.associationType.value == 'inspect'">
              <text class="text1">预约时间</text>
              <text class="text2">{{
                infoDATA.checkList &&
                infoDATA.checkList[0] &&
                infoDATA.checkList[0].yyTime
                  ? infoDATA.checkList[0].yyTime
                  : "-"
              }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- ------------------未完成工单 end----------------- -->
      <view class="title" v-if="workData && workData.length > 0">
        <text class="span1">工单信息</text>
      </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" 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" @click="ac1(infoDATA, i, acType)">
              <text class="ac">
                <text :class="{ acSpan: idTYPE == infoDATA.id }"></text>
              </text>
              <text class="L_text">单号:{{ infoDATA.gdcode }}</text>
              <!-- emergencyType.value 1是正常,2是急,3是加急 -->
              <view class="page_item_cont_start emergency1" v-if="infoDATA.emergencyType.value == 1">
                <text>
                  <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>
                  <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>
                  <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 == 'inspect'">患者陪检</text>
              <text class="L_iocn" v-if="
                  infoDATA.taskType.associationType.value == 'patientTransport'
                ">患者转运</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" v-if="workData && workData.length > 0 && isShow">
        <view class="btn1" @click="allStart(typeData)">一键操作</view>
        <view class="btn1" @click="scanDept()">送回病房</view>
        <view class="btn2" @click="showAlert">知道了</view>
      </view>
      <view class="foot_btn2" v-if="
          workData && workData.length === 0 && isShow && wechatFocusSwitch == 1
        ">
        <view class="btn1" @click="help">{{
          infoDATA.focusPatient == 1 ? "无需帮助" : "需要帮助"
        }}</view>
        <view class="btn1" @click="scanDept()">送回病房</view>
        <view class="btn2" @click="showAlert">知道了</view>
      </view>
      <view class="foot_btn2" v-if="!isShow">
        <view class="btn1" @click="scanDept()">送回病房</view>
        <view class="btn2" @click="showAlert">知道了</view>
      </view>
    </view>
    <!-- 弹窗 -->
    <showModel :title="models.title" :icon="models.icon" :disjunctor="models.disjunctor" :content="models.content"
      @know="know" :operate="models.operate" @ok="ok" @cancel="cancel"></showModel>
    <!-- 送回病房弹窗 -->
    <showModel :title="models1.title" :icon="models1.icon" :disjunctor="models1.disjunctor" :content="models1.content"
      :operate="models1.operate" @ok="ok1" @cancel="cancel1"></showModel>
    <!-- 送回病房建单弹窗 -->
    <showModel :title="models2.title" :icon="models2.icon" :disjunctor="models2.disjunctor" :content="models2.content"
      :operate="models2.operate" @ok="ok2" @cancel="cancel2"></showModel>
    <!-- 送回病房建单弹窗-扫描科室 -->
    <showModel :title="models3.title" :icon="models3.icon" :disjunctor="models3.disjunctor" :content="models3.content"
      :operate="models3.operate" @ok="ok3" @cancel="cancel3"></showModel>
  </view>
</template>
<script>
  import showModel from "../../components/showModel/showModel.vue";
  import {
    get,
    post,
    SM,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        options: {},
        wechatFocusSwitch: 0,
        hosId: "",
        // 弹窗model
        models: {
          disjunctor: false,
        },
        // 送回病房弹窗model
        models1: {
          disjunctor: false,
        },
        // 送回病房建单弹窗model
        models2: {
          disjunctor: false,
        },
        // 送回病房建单弹窗model-扫描科室
        models3: {
          disjunctor: false,
        },
        infoDATA: {},
        workData: [],
        patientOrders: [],
        acType: Number,
        tabType: 1,
        idTYPE: "",
        userId: {
          ids: [],
        },
        typeData: null,
        types: false,
        code: "",
        animationData: {}, //动画
        isShow: true, //是否显示“一键操作”
        currentStartDept: {}, //扫描的起点科室
      };
    },
    methods: {
      ok2() {
        this.models2.disjunctor = false;
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        let userId = uni.getStorageSync("userData").user.id;
        let postData = {
          "workOrder": {
            sourceId: 4,
            "hosId": this.hosId,
            "startDept": {
              "id": this.options.id
            },
            "createDept": this.options.id,
            "patient": {
              "patientCode": this.options.code
            },
            "worker": {
              "id": userId
            }
          }
        };
        post("/workerOrder/returnSickRoom", postData).then((res) => {
          console.log(res)
          uni.hideLoading();
          if (res.status == 200) {
            uni.showToast({
              icon: 'success',
              title: '建单成功',
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
      cancel2() {
        this.models2.disjunctor = false;
      },
      ok3() {
        this.models3.disjunctor = false;
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        let userId = uni.getStorageSync("userData").user.id;
        let postData = {
          "workOrder": {
            sourceId: 4,
            "hosId": this.hosId,
            "startDept": {
              "id": this.currentStartDept.id
            },
            "createDept": this.currentStartDept.id,
            "patient": {
              "patientCode": this.options.code
            },
            "worker": {
              "id": userId
            }
          }
        };
        post("/workerOrder/returnSickRoom", postData).then((res) => {
          console.log(res)
          uni.hideLoading();
          if (res.status == 200) {
            uni.showToast({
              icon: 'success',
              title: '建单成功',
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        })
      },
      cancel3() {
        this.models3.disjunctor = false;
      },
      // 送回病房-建单
      sendBuild() {
        let infoDATA = JSON.parse(this.options.infoDATA);
        this.models2 = {
          disjunctor: true,
          title: "提示",
          content: `您选择的起点科室为【${this.options.dept}】，您将从【${this.options.dept}】把【${infoDATA.patientName}】送回【${infoDATA.department.dept}】，如您确认请点击“确认建单”。`,
          icon: "warn",
          operate: {
            ok: "确认建单",
            cancel: "取消",
          },
        };
      },
      // 送回病房-扫描科室
      scanDept() {
        let infoDATA = JSON.parse(this.options.infoDATA);
        let code = "";
        SM().then((ress1) => {
          uni.showLoading({
            title: "加载中",
            mask: true,
          });
          //检验二维码的有效性
          post("/dept/scanning", {
            content: ress1,
          }).then((result) => {
            if (result.state == 200 || result.state == 201) {
              let ress = result.code;
              if (ress) {
                code = ress;
                // 科室扫描
                let postData = {
                  "idx": 0,
                  "sum": 1,
                  "department": {
                    "hospital": {
                      "id": this.hosId
                    },
                    "qrcode": code
                  }
                };
                post("/data/fetchDataList/department", postData).then((res) => {
                  uni.hideLoading();
                  if (res.status == 200) {
                    if(res.totalNum > 0){
                      this.currentStartDept = res.list[0]; //baba
                      this.models3 = {
                        disjunctor: true,
                        title: "提示",
                        content: `您选择的起点科室为【${this.currentStartDept.dept}】，您将从【${this.currentStartDept.dept}】把【${infoDATA.patientName}】送回【${infoDATA.department.dept}】，如您确认请点击“确认建单”。`,
                        icon: "warn",
                        operate: {
                          ok: "确认建单",
                          cancel: "取消",
                        },
                      };
                    }else{
                      uni.hideLoading();
                      uni.showToast({
                        icon: "none",
                        title: "请扫描正确的科室码！",
                      });
                    }
                  } else {
                    uni.hideLoading();
                    uni.showToast({
                      icon: "none",
                      title: "请求失败！",
                    });
                  }
                });
              }
            } else {
              uni.hideLoading();
              uni.showToast({
                icon: "none",
                title: "请求失败！",
              });
            }
          });
        });
      },
      // 送回病房-选择起点科室
      sendBack() {
        let infoDATA = JSON.parse(this.options.infoDATA);
        this.models1 = {
          disjunctor: true,
          title: "提示",
          content: `您好，您是要将【${infoDATA.patientName}】送回病房吗？如确认请您点击“选择起点科室”建立工单。`,
          icon: "warn",
          operate: {
            ok: "选择起点科室",
            cancel: "取消",
          },
        };
      },
      ok1() {
        this.models1.disjunctor = false;
        uni.navigateTo({
          url: `../search/search?type=sendBack&code=${this.options.code}&infoDATA=${this.options.infoDATA}&patientOrders=${this.options.patientOrders}&workData=${this.options.workData}`,
        });
      },
      cancel1() {
        this.models1.disjunctor = false;
      },
      // 查看检查
      getInspectList() {
        uni.navigateTo({
          url: `../inspectList/inspectList?id=${this.infoDATA.department.id}&dept=${this.infoDATA.department.dept}&residenceNo=${this.infoDATA.residenceNo}`,
        });
      },
      // 通知
      notice(info) {
        let postData = {
          userIds: info.worker.id + "",
          content: `您负责护送的患者${info.patient.patientName}(${info.patient.bedNum})已经检查完毕，请尽快执行工单的下一步。`,
        };
        post("/wechat/sendCustomMessage", postData).then((res) => {
          if (res.status == 200) {
            uni.showToast({
              title: "通知成功",
              duration: 2000,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
      //需要帮助、无需帮助
      help() {
        this.models = {
          disjunctor: true,
          title: "提示",
          content: this.infoDATA.focusPatient == 1 ?
            "如设置为“无需帮助”则后期此患者检查将不会自动进行建单，可通过“需要帮助”设置自动建单" : "如设置为“需要帮助”则后期此患者检查会自动进行建单，可通过“无需帮助”取消设置",
          icon: "warn",
          operate: {
            ok: "确定",
            cancel: "取消",
          },
        };
      },
      //需要帮助，无需帮助确定
      ok() {
        this.models.disjunctor = false;
        post("/nurse/updData/patient", {
          patient: {
            id: this.infoDATA.id,
            focusPatient: this.infoDATA.focusPatient == 1 ? 0 : 1,
          },
        }).then((res) => {
          let msg = "设置失败";
          let icon = "error";
          if (res.status == 200) {
            msg = "设置成功";
            icon = "success";
            this.infoDATA.focusPatient = res.data.focusPatient;
          }
          this.models = {
            disjunctor: true,
            content: msg,
            icon: icon,
            operate: {
              know: "知道了",
            },
          };
        });
      },
      //需要帮助，无需帮助取消
      cancel() {
        this.models.disjunctor = false;
      },
      //知道了
      know() {
        this.models.disjunctor = false;
      },
      // 知道了
      showAlert() {
        uni.navigateTo({
          url: "../receiptpage/receiptpage",
        });
      },
      //一键操作
      allStart(data) {
        let list = {};
        if (data) {
          let type = "";
          if (data.gdState.value == "8") {
            SM().then((ress1) => {
              // ----------------
              uni.showLoading({
                title: "加载中",
                mask: true,
              });
              //检验二维码的有效性
              post("/dept/scanning", {
                content: ress1,
              }).then((result) => {
                if (result.state == 200 || result.state == 201) {
                  let ress = result.code;
                  if (ress) {
                    var ids = [];
                    ids.push(data.id);
                    type = "orderSign/" + ress;
                    list = ids;
                    // 科室签到
                    post("/workerOrder/" + type, list).then((res) => {
                      uni.hideLoading();
                      if (res.status == 200) {
                        // model: JSON.stringify(res), //签到返回的信息
                        // type: data.taskType.associationType.value, //关联类型
                        // code: ress, //二维码code
                        // ids //科室ID数组
                        uni.navigateTo({
                          url: `../scanning_djEnd/scanning_djEnd?type=${
                          data.taskType.associationType.value
                        }&code=${ress}&ids=${ids}&model=${encodeURIComponent(
                          JSON.stringify(res)
                        )}`,
                        });
                      } else {
                        uni.navigateTo({
                          url: `../scanning_djEnd/scanning_djEnd?model=${encodeURIComponent(
                          JSON.stringify(res)
                        )}`,
                        });
                      }
                    });
                  }
                } else {
                  uni.hideLoading();
                  uni.showToast({
                    icon: "none",
                    title: "请求失败！",
                  });
                }
              });
              // ------------------------------
            });
          } else {
            if (data.taskType.associationType.value == "patientTransport") {
              type = "handleTrans";
              let data = {
                ids: this.userId.ids,
                // "11789558|51131895|7|黄石城乡|陈琛|女|19981003|20180803081051|Z消化内科Ⅰ"
                code: this.code,
              };
              list = data;
            }
            if (data.taskType.associationType.value == "inspect") {
              type = "handleIns";
              let data = {
                ids: this.userId.ids,
                // "11789558|51131895|7|黄石城乡|陈琛|女|19981003|20180803081051|Z消化内科Ⅰ"
                code: this.code,
              };
              list = data;
            }
            uni.showLoading({
              title: "加载中",
              mask: true,
            });
            post("/workerOrder/" + type, list).then((res) => {
              uni.hideLoading();
              if (res.status == 200) {
                uni.navigateTo({
                  url: `../scanning_insEnd/scanning_insEnd?type=${
                  data.taskType.associationType.value
                }&model=${encodeURIComponent(JSON.stringify(res))}`,
                });
              } else {
                uni.navigateTo({
                  url: `../scanning_insEnd/scanning_insEnd?model=${encodeURIComponent(
                  JSON.stringify(res)
                )}`,
                });
              }
            });
          }
        } else {
          this.models = {
            disjunctor: true,
            content: "请选择工单",
            icon: "warn",
            operate: {
              know: "知道了",
            },
          };
        }
      },
      //选中
      ac(data, i, type) {
        this.idTYPE = "";
      },
      //未选中
      ac1(data, i, type) {
        if (this.idTYPE == data.id) {
          //显示
          this.isShow = true;
          this.idTYPE = "";
          this.userId.ids = [];
          this.typeData = null;
        } else {
          if (data.gdState.value >= 5) {
            //隐藏
            this.isShow = false;
          } else {
            //显示
            this.isShow = true;
          }
          this.idTYPE = data.id;
          this.typeData = data;
          this.userId.ids[0] = this.idTYPE;
        }
      },
      texiao() {
        if (this.workData && this.workData.length > 0) {
          setTimeout(() => {
            this.animation.height(0).opacity(0).step();
            this.animationData = this.animation.export();
          }, 15000);
        }
      },
      // 获取需要帮助权限
      getWechatFocusSwitch() {
        let postData = {
          idx: 0,
          sum: 1,
          taskType: {
            hosIds: this.hosId,
            associationType: {
              id: 260,
            },
          },
        };
        post("/configuration/fetchDataList/taskType", postData).then((res) => {
          if (res.status == 200) {
            this.wechatFocusSwitch = res.list[0].wechatFocusSwitch || 0;
          } else {
            uni.showToast({
              icon: "none",
              title: "请求失败！",
            });
          }
        });
      },
    },
    onLoad(options) {
      console.log(options);
      this.options = options;
      // 送回病房建单 start
      if (options.id && options.dept) {
        this.sendBuild();
      }
      // 送回病房建单 end
      this.hosId = uni.getStorageSync("userData").infoPermission.hospitals[0].id;
      this.getWechatFocusSwitch();
      this.infoDATA = JSON.parse(options.infoDATA);
      console.log(this.infoDATA);
      this.workData = JSON.parse(options.workData);
      if (options.patientOrders != 'undefined') {
        this.patientOrders = JSON.parse(options.patientOrders);
      }
      this.code = options.code;
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      // 创建动画
      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: 0px;
  }

  ::-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_ins {
    .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);
      }
    }

    .Scanning {
      padding: 0 20rpx;

      .Scanning_top {
        height: 400rpx;

        .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: 30rpx;
            font-size: 48rpx;
            text-align: center;
          }

          .success_tips {
            color: red;
            font-size: 30rpx;
          }
        }

        .Scanning_cont {
          font-size: 32rpx;
          margin-top: 16rpx;

          view {
            margin-bottom: 8rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            button {
              font-size: 32rpx;
              height: 52rpx;
              line-height: 52rpx;
              margin: 0;
              color: rgb(7, 134, 60);
              font-weight: 700;
            }
          }

          .text {
            margin-top: 24rpx;
            color: #35b34a;
          }

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

      .page_items {
        margin-bottom: 110rpx;

        .zwsj {
          margin-top: 180rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

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

          .zwsj_img {
            width: 582rpx;
          }
        }

        .page_item {
          margin-top: 16rpx;
          min-height: 310rpx;
          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: flex;
                justify-content: center;
                align-items: center;
                position: relative;

                .acSpan {
                  width: 24rpx;
                  height: 24rpx;
                  background: #39b199;
                  display: block;
                }
              }

              .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;
                font-size: 28rpx;
              }

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

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

            .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;
            max-height: 424rpx;
            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;
        justify-content: space-between;

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

        .btn3 {
          width: 100%;
        }
      }
    }
  }
</style>