''

liukangdong

2024-10-08 0adb696e7fade5eeb02396e5d4bacf9355ca5e2e

 admin/src/views/platform/index.vue

@@ -1,347 +1,604 @@
<template>
  <div class="main_app">
    <div class="main_head mb20">
      <el-tabs v-model="currentPlatform" class="tabs">
        <!-- <el-tab-pane label="用户管理" name="first" v-for="item in platformList" :key="item.id"></el-tab-pane> -->
        <el-tab-pane label="用户管理" name="first"></el-tab-pane>
      </el-tabs>
      <el-button type="primary" class="ml20" @click="handleSet"
        >配置月台</el-button
      >
    <div class="mb20 main_header">
      <div class="platgroup_tabs">
        <div class="tab" :class="{ active: activeGroup.id === item.id }" @click="platgroupClick(item)"
          v-for="(item, i) in PlatGroupList" :key="i">
          {{ item.name }}
        </div>
      </div>
      <div class="btns">
        <!-- <el-button type="primary" @click="handleSet">刷新</el-button> -->
        <el-button type="primary" class="ml20" @click="handleSet">配置月台</el-button>
      </div>
    </div>
    <!--  -->
    <div class="platform_list">
      <div class="item" v-for="i in 2">
    <div v-if="activeGroup.platformList" class="platform_list">
      <div class="item" :class="{ emyty: item.workStatus == 0 }" v-for="(item, i) in activeGroup.platformList" :key="i">
        <div class="head">
          <div class="left">
            <div class="status mr10">作业中</div>
            <div class="name">6号月台</div>
            <div class="status mr10">
              {{ item.workStatus == "0" ? "空闲" : "作业中" }}
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span>1</span>
              <span class="placeholder9">作业：</span><span>{{ item.platformWorkVO.workNum }}</span>
            </div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span>1</span>
              <span class="placeholder9">已叫：</span><span>{{ item.platformWorkVO.callNum }}</span>
            </div>
            <div class="ite">
              <span class="placeholder9">作业：</span><span class="red">1</span>
              <span class="placeholder9">等待：</span><span>{{ item.platformWorkVO.waitNum }}</span>
            </div>
            <div class="ite">
              <span class="placeholder9">异常：</span><span class="red">{{ item.platformWorkVO.exceptionNum }}</span>
            </div>
          </div>
          <el-button type="primary" @click="handleQueuing()">叫号</el-button>
          <el-button @click="handleQueuing(item, 1)">叫号入园</el-button>
          <el-button type="primary" @click="handleQueuing(item, 2)">月台叫号</el-button>
        </div>
        <div class="list">
          <div class="info" v-for="j in 3">
        <div class="list" v-if="item.platformWorkVO && item.platformWorkVO.platformJobList">
          <div class="info" :class="{ err: task.status == 8 }" v-for="task in item.platformWorkVO.platformJobList"
            :key="task.id">
            <div class="line">
              <div class="left">
                <span class="plate">皖A12122</span>
                <div v-if="task.carCodeFront" class="code">
                  <span>{{ task.carCodeFront.slice(0, 1) }}</span>
                  <span>{{ task.carCodeFront.slice(1, 2) }}</span>
                  <span>·</span>
                  <span>{{ task.carCodeFront.slice(2) }}</span>
                </div>
              </div>
              <div class="right">
                <span class="green">作业中</span>
                <span class="green ml20">23分钟26秒</span>
                <div class="status_item" v-if="task.status != 4 && task.status != 5" :class="{ red: task.status == 8 }">
                  <span class="lab">{{ statusMap[task.status] }}</span>
                </div>
                <div class="status_item" v-if="task.status == 4">
                  <span class="lab">叫号中</span> {{ task.callDateTemp }}
                </div>
                <div class="status_item scs" v-if="task.status == 5">
                  <span class="lab">作业中</span> {{ task.startDateTemp }}
                </div>
              </div>
            </div>
            <div class="line">
              <div class="ite">
              <div v-if="task.type == 4" class="ite">
                <span>合同单号：</span>
                <span>{{ task.contractNum }}</span>
              </div>
              <div v-else class="ite">
                <span>运输单号：</span>
                <span>202020</span>
                <span>{{ task.billCode }}</span>
              </div>
              <div class="ite">
              <div class="ite siji">
                <span>驾驶员：</span>
                <span>202020</span>
                <span>{{ task.driverName }}</span>
              </div>
              <div class="ite">
              <div class="ite phone">
                <span>手机号：</span>
                <span>202020</span>
                <span>{{ task.drivierPhone }}</span>
              </div>
              <div class="ite">
                <span>总运输量：</span>
                <span>202020</span>
                <span>{{ task.totalNum }}万支</span>
              </div>
              <div class="ite" style="width: 66.6%">
              <div v-if="task.type != 4" class="ite" style="width: 66.6%">
                <span>运输公司：</span>
                <span>20202dasd玩儿玩儿玩儿额外 额外0</span>
                <span>{{ task.carrierName }}</span>
              </div>
              <div class="ite"></div>
            </div>
            <div class="line">
              <div class="left">
                <span class="primaryColor pointer" @click="isShowDetail = true"
                  >运单详情</span
                >
              <div v-if="task.type != 4" class="left">
                <span class="primaryColor pointer" @click="handleDetail(task)">运单详情</span>
              </div>
              <div v-else></div>
              <div class="right">
                <el-button type="primary" @click="handleFinish()"
                  >作业完成</el-button
                >
                <el-button plain>转移月台</el-button>
                <el-button plain>异常挂起</el-button>
                <el-button v-if="task.status == 5" plain @click="handleErr(task)">异常挂起</el-button>
                <el-button v-if="task.status == 5 || task.status == 8" plain
                  @click="handleTransform(item, task)">转移月台</el-button>
                <el-button v-if="task.status == 4" plain @click="handlePass(task)">过号</el-button>
                <el-button v-if="task.status == 5 || task.status == 8" type="primary"
                  @click="handleFinish(task)">作业完成</el-button>
                <el-button v-if="task.status == 4" type="primary" @click="handleWork(task)">开始作业</el-button>
              </div>
            </div>
          </div>
        </div>
        <div v-if="!item.platformWorkVO.platformJobList || item.platformWorkVO.platformJobList.length == 0"
          class="empty_plat">
          <img src="@/assets/images/default_nodata.png" alt="">
          <div>暂无车辆</div>
        </div>
      </div>
    </div>
    <!-- 配置显示月台 -->
    <el-dialog
      title="配置显示月台"
      :visible.sync="isShowSet"
      center
      width="420px"
    >
    <GlobalWindow title="配置显示月台" :visible.sync="isShowSet" :confirm-working="setLoading" @confirm="handleSetSub"
      width="560px">
      <div class="set_modal">
        <div class="mb20">
          <div class="title">入库月台组</div>
        <div class="mb10" v-for="group in PlatGroupListSet" :key="group.id">
          <div class="title">{{ group.name }}</div>
          <div class="list">
            <div class="item active">1号月台</div>
            <div class="item">2号月台</div>
            <div class="item">1号月台</div>
            <div class="item">2号月台</div>
          </div>
        </div>
        <div>
          <div class="title">入库月台组</div>
          <div class="list">
            <div class="item">1号月台</div>
            <div class="item">2号月台</div>
            <div class="item">1号月台</div>
            <div class="item">2号月台</div>
            <div class="item" @click="platformSetClick(item.id)" :class="{ active: item.showConfig }"
              v-for="item in group.platformList" :key="item.id">
              <div>{{ item.name }}</div>
              <div v-if="item.showConfig" class="bg"></div>
              <i v-if="item.showConfig" class="el-icon-check scs"></i>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setReset">重置</el-button>
        <el-button type="primary" @click="setSub">确定</el-button>
      </span>
    </el-dialog>
    </GlobalWindow>
    <!-- 运单详情 -->
    <el-dialog
      title="运单详情"
      center
      :visible.sync="isShowDetail"
      width="420px"
    >
      <div class="detail_modal">
        <div class="head">
          <div class="plate">皖A12122</div>
          <div class="list">
            <div class="item">
              <span>运输单号：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>总运输量：</span>
              <span>22222</span>
            </div>
            <div class="item">
              <span>驾驶员：</span>
              <span>22222</span>
            </div>
          </div>
        </div>
        <div class="title">合同列表</div>
        <div class="content">
          <div class="item">
            <div class="contract">合同号：1292992</div>
            <div class="placeholder6">收货地：address</div>
            <div class="list">
              <div class="line">
                <div class="left"><span>物料名称：</span><span>黄山</span></div>
                <div class="right"><span>数量：</span><span>100</span></div>
              </div>
            </div>
          </div>
        </div>
    <!--  -->
    <!-- 叫号 -->
    <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getPlatGroupList"
      @close="isShowQueuing = false" />
    <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
    <el-dialog title="转移月台" :visible.sync="isShowTransform" width="500px" style="margin-top: 12vh">
      <div class="df_ac">
        <span>选择转移到的月台：</span>
        <el-select v-model="activePlatId">
          <el-option v-for="item in activeGroup.platformList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDetail = false">关闭</el-button>
        <el-button @click="isShowTransform = false">取消</el-button>
        <el-button type="primary" @click="transformSub">确定</el-button>
      </span>
    </el-dialog>
    <!--  -->
    <el-drawer
      title="月台叫号-xx号月台"
      :visible.sync="isShowQueuing"
      size="720px"
    >
      <div class="queuing_modal">
        <div class="df_ac mb20">
          <span>搜索车辆：</span>
          <el-input
            class="flex1 mr20"
            v-model="queuingForm.aa"
            placeholder="请输入车牌号"
          ></el-input>
          <el-button type="primary">查找</el-button>
          <el-button>重置</el-button>
        </div>
        <div class="list">
          <div class="item">
            <div class="head df_sb">
              <div class="plate">皖A12122</div>
              <div class="status">已签到</div>
            </div>
            <div class="info">
              <div class="ite">
                <span>运输单号：</span>
                <span>12312</span>
              </div>
              <div class="ite">
                <span>驾驶员：</span>
                <span>12312</span>
              </div>
              <div class="ite">
                <span>手机号：</span>
                <span>12312</span>
              </div>
              <div class="ite">
                <span>总运输量：</span>
                <span>12312</span>
              </div>
              <div class="ite" style="width: 66%">
                <span>运输公司：</span>
                <span>12312</span>
              </div>
            </div>
            <div class="footer df_sb">
              <div class="detail">运单详情</div>
              <el-button type="primary">叫号</el-button>
            </div>
          </div>
        </div>
        <el-button class="mt30" @click="isShowQueuing = false">关闭</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getPlatformGroupList,
  platformBeginWork,
  platformFinishWork,
  platformOverNumber,
  platformErr,
  platformMove,
  updUserPlatformConfig,

  listByGroupId
} from '@/api'
import PlatformQueuing from './components/PlatformQueuing.vue'
import WaybillDetail from './components/WaybillDetail.vue'
import GlobalWindow from '@/components/common/GlobalWindow'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import { Message } from 'element-ui'
import { statusMap } from './config'
dayjs.extend(duration)
export default {
  components: {
    PlatformQueuing,
    WaybillDetail,
    GlobalWindow
  },
  data() {
    return {
      currentPlatform: '',
      platformList: [],
      statusMap,
      activeGroup: {},
      PlatGroupList: [],
      PlatGroupListSet: [],
      platList: [],
      platCallList: [],
      isShowTransform: false,
      activePlatId: '', // 转移月台
      activetaskId: '',

      isShowSet: false, // 月台配置
      setLoading: false,

      setParam: {},
      isShowDetail: false, // 运单详情
      detail: {},
      isShowQueuing: false,
      queuingForm: {}
      timer: null
    }
  },
  created() {
    setInterval(() => {
      this.getPlatGroupList()
    }, 1000 * 20)
    this.getPlatGroupList()
  },
  methods: {
    handleQueuing(row) {
      this.isShowQueuing = true
    handleWork(item) {
      platformBeginWork({ jobId: item.id }).then(res => {
        Message.success('已开始作业')
        this.getPlatGroupList()
      })
    },
    handleFinish(item) {
      this.$confirm('高架库6号月台 皖A12345 作业结束', '温馨提示', {
      platformFinishWork({ jobId: item.id }).then(res => {
        Message.success('完成作业')
        this.getPlatGroupList()
      })
    },
    handleTransform(item, task) {
      this.activePlatId = item.id
      this.activetaskId = task.id
      this.isShowTransform = true
    },
    transformSub() {
      const { activePlatId, activetaskId } = this
      platformMove({ platformId: activePlatId, jobId: activetaskId }).then(res => {
        Message.success('转移月台成功')
        this.isShowTransform = false
        this.getPlatGroupList()
      })
    },
    handlePass(item) {
      this.$confirm(`确认 ${item.carCodeFront}置为过号吗？过号后，需要重新签到才能进入园区`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        platformOverNumber({ jobId: item.id }).then(ress => {
          Message.success('过号成功')
          this.getPlatGroupList()
        })
      })
    },
    handleErr(item) {
      this.$confirm('您确认要对该任务进行异常挂起吗', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        platformErr({ jobId: item.id }).then(ress => {
          Message.success('异常挂起成功')
          this.getPlatGroupList()
        })
      })
    },
    platgroupClick(item) {
      this.activeGroup = { ...item }
      this.circulInitTaskList()
      this.timer = setInterval(() => {
        this.circulInitTaskList()
      }, 1000)
    },
    getPlatGroupList() {
      getPlatformGroupList({
        queryData: 1,
        queryType: 1
      }).then(res => {
        this.PlatGroupList = res || []
        if (res.length > 0) {
          if (this.activeGroup && this.activeGroup.id) {
            this.activeGroup = res.find(item => item.id === this.activeGroup.id)
          } else {
            this.activeGroup = res[0]
          }
          this.circulInitTaskList()
          this.timer = setInterval(() => {
            this.circulInitTaskList()
          }, 1000)
        }
      })
    },
    circulInitTaskList() {
      if (this.activeGroup && this.activeGroup.platformList && this.activeGroup.platformList.length > 0) {
        const time = new Date()
        this.activeGroup.platformList.forEach(plat => {
          if (plat.platformWorkVO.platformJobList && plat.platformWorkVO.platformJobList.length > 0) {
            plat.platformWorkVO.platformJobList.forEach(item => {
              if (item.newCallDate) {
                const timeNum = time.getTime() - new Date(item.newCallDate).getTime()
                if (timeNum > 3600000) {
                  item.callDateTemp = dayjs.duration(timeNum).format('H小时m分s秒')
                } else {
                  item.callDateTemp = dayjs.duration(timeNum).format('m分s秒')
                }
              }
              if (item.newStartDate) {
                const timeNum = time.getTime() - new Date(item.newStartDate).getTime()
                if (timeNum > 3600000) {
                  item.startDateTemp = dayjs.duration(timeNum).format('H小时m分ss秒')
                } else {
                  item.startDateTemp = dayjs.duration(timeNum).format('m分s秒')
                }
              }
            })
          }
        })
        this.$forceUpdate()
      }
    },
    handleQueuing(item, callType) {
      this.isShowQueuing = true
      this.$nextTick(() => {
        this.$refs.PlatformQueuingRef.isShowModal = true
        this.$refs.PlatformQueuingRef.callType = callType
        this.$refs.PlatformQueuingRef.carCodeFront = ''
        this.$refs.PlatformQueuingRef.pagination = {
          total: 0,
          pageSize: 10,
          page: 1
        }
        this.$refs.PlatformQueuingRef.activePlat = { ...item }
        this.$refs.PlatformQueuingRef.getList()
        this.$refs.PlatformQueuingRef.title = item.name
      })
    },
    handleDetail(row) {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.WaybillDetailRef.isShowModal = true
        this.$refs.WaybillDetailRef.id = row.id
        this.$refs.WaybillDetailRef.getDetail()
      })
    },
    getList() {
      const { groupId } = this
      listByGroupId(groupId).then(res => {
        this.platList = res
      })
    },
    handleSet() {
      this.isShowSet = true
      getPlatformGroupList({
        queryData: 0,
        queryType: 1
      }).then(res => {
        this.PlatGroupListSet = res || []
      })
    },
    setReset() { },
    setSub() { }
    handleSetSub() {
      const { PlatGroupListSet } = this
      const ids = []
      PlatGroupListSet.forEach(item => {
        item.platformList.forEach(platform => {
          if (platform.showConfig) {
            ids.push(platform.id)
          }
        })
      })
      this.setLoading = true
      updUserPlatformConfig(ids).then(res => {
        this.setLoading = false
        Message.success('更新成功')
        this.isShowSet = false
        this.getPlatGroupList()
      }, () => {
        this.setLoading = false
      })
    },
    platformSetClick(id) {
      const { PlatGroupListSet } = this
      PlatGroupListSet.forEach(item => {
        item.platformList.forEach(platform => {
          if (platform.id === id) {
            platform.showConfig = !platform.showConfig
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables.scss";

.platform_list {
  width: 100%;

  .item {
    /* padding: 16px 24px; */
    background: #ffffff;
    border-radius: 2px;
    border: 1px solid #dfe2e8;
    margin-bottom: 12px;
    width: 100%;

    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
      background: linear-gradient(270deg, #FFFFFF 0%, #EBF6F7 100%);
      border-radius: 2px 2px 0px 0px;
      padding: 0 28px;
      padding: 0 20px;

      .shengyin {
        width: 12px;
        height: 12px;
        margin-right: 3px;
      }

      .left {
        flex: 1;
        display: flex;
        align-items: center;

        .name {
          font-size: 16px;
          margin-right: 50px;
        }

        .status {
          line-height: 25px;
          height: 25px;
          padding: 0 4px;
          background: #00ba67;
          border-radius: 2px;
          color: #ffffff;
          padding: 0 6px;
        }

        .ite {
          margin-right: 30px;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 10px;
      padding: 16px;
      width: calc(100% - 0);

      .info {
        background: #effbf5;
        background: #f4fafb;
        border-radius: 2px;
        border: 1px solid #dfe2e8;
        padding: 16px;
        border-radius: 2px;
        margin-bottom: 10px;
        width: 30%;
        width: calc(31.6% - 22px);
        margin-right: 10px;

        &:nth-of-type(3n) {
          margin-right: 0;
        }

        .status_item {
          .lab {
            font-weight: 500;
          }

          color: #00ba67;
        }

        .line {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-bottom: 6px;
          span {
            &:nth-child(1) {
              color: #999999;
            }
          }

          .ite {
            width: 33.3%;
            margin-top: 8px;
          }

          .siji {
            width: 29%;
          }

          .phone {
            width: 37.6%;
          }

          .left {
            .plate {
            .code {
              display: flex;
              font-weight: 600;
              height: 30px;
              line-height: 30px;
              font-size: 15px;
              color: #111111;
              padding: 4px 5px;
              font-weight: 700;
              border: 1px solid #279baa;
              background-color: #fff;
              border-radius: 4px;
              border: 1px solid $primaryColor;
              padding-right: 4px;

              span {
                &:nth-of-type(1) {
                  background: $primaryColor;
                  padding: 0 8px;
                  color: #fff;
                }

                &:nth-of-type(2) {
                  padding-left: 4px;
                }
              }
            }
          }

          .right {
            display: flex;
            align-items: center;
          }
        }
      }

      .jobing {
        background: #effbf5;

        .status {
          color: #00ba67;
        }
      }

      .err {
        background: #fef6f6;

        .status {
          color: #ed4545;
        }
      }
    }

    .empty_plat {
      width: 100%;
      height: 170px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #B2B2B2;

      img {
        width: 110px;
      }
    }
  }

  .emyty {
    .head {
      background: linear-gradient(270deg, #FFFFFF 0%, #F7F7F7 100%) !important;
    }

    .status {
      background: #CCCCCC !important;
    }
  }
}

.main_head {
.main_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .tabs {
  position: relative;

  .platgroup_tabs {
    flex: 1;
    display: flex;
    border-bottom: 1px solid #dfe2e8;

    .tab {
      color: #666666;
      margin-right: 40px;
      cursor: pointer;
      padding-bottom: 18px;
      border-bottom: 2px solid #fff;
    }

    .active {
      font-weight: 500;
      font-size: 15px;
      color: #222222;
      border-bottom: 2px solid $primary-color;
    }
  }

  .btns {
    position: absolute;
    width: 180px;
    height: 36px;
    right: 0;
    top: -4px;
    display: flex;
    justify-content: flex-end;
  }
}

/*  */
.set_modal {
  .title {
@@ -349,153 +606,53 @@
    font-weight: 600;
    margin-bottom: 16px;
  }

  .list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      width: 30%;
      height: 32px;
      padding: 0 36px;
      height: 36px;
      border: 1px solid #dfe2e8;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 2px;
      margin-bottom: 12px;
      margin-bottom: 10px;
      margin-right: 13px;
      position: relative;
      overflow: hidden;

      .bg {
        position: absolute;
        right: -12px;
        bottom: -12px;
        width: 24px;
        height: 24px;
        background: $primaryColor;
        transform: rotate(45deg);
      }

      .scs {
        position: absolute;
        right: -1px;
        bottom: -1px;
        color: #fff;
        z-index: 99999;
        transform: scale(.8)
      }
    }

    .active {
      background: rgba(39, 155, 170, 0.06);
      border: 1px solid #279baa;
      color: #279baa;
      border: 1px solid $primaryColor;
      color: $primaryColor;
    }
  }
}

/*  */
.detail_modal {
  font-size: 12px;
  color: #282828;
  .head {
    background: rgba(39, 155, 170, 0.05);
    border-radius: 4px;
    border: 1px solid #dfe2e8;
    padding: 16px;
    .plate {
      width: 90px;
      text-align: center;
      font-size: 15px;
      color: #111111;
      padding: 4px 5px;
      font-weight: 700;
      border: 1px solid #279baa;
      background-color: #fff;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;
      .item {
        width: 50%;
        margin-bottom: 8px;
        span {
          &:nth-child(1) {
            color: #666666;
          }
        }
      }
    }
  }
  .title {
    margin: 16px 0;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
  }
  .content {
    .item {
      border-radius: 4px;
      border: 1px solid #dfe2e8;
      padding: 16px;
      .list {
        background: #f7f7f7;
        border-radius: 4px;
        padding: 12px 16px;
        margin-top: 10px;
      }
      .contract {
        font-weight: 500;
        font-size: 15px;
        color: #279baa;
        margin-bottom: 4px;
      }
      .line {
        display: flex;
        margin-bottom: 8px;
        &:nth-last-child(1) {
          margin: 0;
        }
        div {
          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }
        .left {
          flex: 6;
        }
        .right {
          flex: 4;
        }
      }
    }
  }
}
/*  */
.queuing_modal {
  padding: 10px 30px;
  .list {
    .item {
      background: #f4fafb;
      border-radius: 2px;
      border: 1px solid #dfe2e8;
      margin-bottom: 10px;
      padding: 16px;
      .head {
        margin-bottom: 15px;
        .plate {
          width: 90px;
          text-align: center;
          font-size: 15px;
          color: #111111;
          padding: 4px 5px;
          font-weight: 700;
          border: 1px solid #279baa;
          background-color: #fff;
        }
        .status {
          color: $primaryColor;
        }
      }
      .info {
        display: flex;
        flex-wrap: wrap;
        .ite {
          width: 33.3%;
          margin-bottom: 8px;
          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }
      }
      .footer {
        .detail {
          color: $primaryColor;
        }
      }
    }
  }
}
</style>