ll

liukangdong

2024-09-24 e1c24d5ac92e89b214efe5a313b31459ddab537f

 admin/src/views/platform/index.vue

@@ -2,13 +2,8 @@
  <div class="main_app">
    <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"
        >
        <div class="tab" :class="{ active: activeGroup.id === item.id }" @click="platgroupClick(item)"
          v-for="(item, i) in PlatGroupList" :key="i">
          {{ item.name }}
        </div>
        <!-- <el-tabs v-model="activeGroup.id" @tab-click="platgroupClick">
@@ -20,9 +15,7 @@
          />
        </el-tabs> -->
      </div>
      <el-button type="primary" class="ml20" @click="handleSet"
        >配置月台</el-button
      >
      <el-button type="primary" class="ml20" @click="handleSet">配置月台</el-button>
    </div>
    <!--  -->
    <div v-if="activeGroup.platformList" class="platform_list">
@@ -34,38 +27,23 @@
            </div>
            <div class="name">{{ item.name }}</div>
            <div class="ite">
              <span class="placeholder9">作业：</span
              ><span>{{ item.platformWorkVO.workNum }}</span>
              <span class="placeholder9">作业：</span><span>{{ item.platformWorkVO.workNum }}</span>
            </div>
            <div class="ite">
              <span class="placeholder9">已叫：</span
              ><span>{{ item.platformWorkVO.callNum }}</span>
              <span class="placeholder9">已叫：</span><span>{{ item.platformWorkVO.callNum }}</span>
            </div>
            <div class="ite">
              <span class="placeholder9">等待：</span
              ><span>{{ item.platformWorkVO.waitNum }}</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>
              <span class="placeholder9">异常：</span><span class="red">{{ item.platformWorkVO.exceptionNum }}</span>
            </div>
          </div>
          <el-button type="primary" @click="handleQueuing(item)">
            <div class="df_ac">
              <img class="shengyin" src="@/assets/icons/shengyin.png" alt="">
              <span>叫号</span>
          <el-button @click="handleQueuing(item, 1)">叫号入园</el-button>
          <el-button type="primary" @click="handleQueuing(item, 2)">月台叫号</el-button>
            </div>
          </el-button>
        </div>
        <div
          class="list"
          v-if="item.platformWorkVO && item.platformWorkVO.platformJobList"
        >
          <div
            class="info"
            v-for="task in item.platformWorkVO.platformJobList"
            :key="task.id"
          >
        <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">
                <div v-if="task.carCodeFront" class="code">
@@ -76,18 +54,14 @@
                </div>
              </div>
              <div class="right">
                <div
                  class="status"
                  v-if="task.status != 4 && task.status != 5"
                  :class="{ red: task.status == 8 }"
                >
                <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" v-if="task.status == 4">
                <div class="status_item" v-if="task.status == 4">
                  <span class="lab">叫号中</span> {{ task.callDateTemp }}
                </div>
                <div class="status scs" v-if="task.status == 5">
                  <span class="lab">已作业</span> {{ task.startDateTemp }}
                <div class="status_item scs" v-if="task.status == 5">
                  <span class="lab">作业中</span> {{ task.startDateTemp }}
                </div>
              </div>
            </div>
@@ -98,13 +72,13 @@
              </div>
              <div v-else class="ite">
                <span>运输单号：</span>
                <span>{{ task.code }}</span>
                <span>{{ task.billCode }}</span>
              </div>
              <div class="ite">
              <div class="ite siji">
                <span>驾驶员：</span>
                <span>{{ task.driverName }}</span>
              </div>
              <div class="ite">
              <div class="ite phone">
                <span>手机号：</span>
                <span>{{ task.drivierPhone }}</span>
              </div>
@@ -120,65 +94,37 @@
            </div>
            <div class="line">
              <div v-if="task.type != 4" class="left">
                <span class="primaryColor pointer" @click="handleDetail"
                  >运单详情</span
                >
                <span class="primaryColor pointer" @click="handleDetail">运单详情</span>
              </div>
              <div v-else></div>
              <div class="right">
                <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
                >
                <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">
        <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>
    <!-- 配置显示月台 -->
    <GlobalWindow
      title="配置显示月台"
      :visible.sync="isShowSet"
      :confirm-working="setLoading"
      @confirm="handleSetSub"
      width="560px"
    >
    <GlobalWindow title="配置显示月台" :visible.sync="isShowSet" :confirm-working="setLoading" @confirm="handleSetSub"
      width="560px">
      <div class="set_modal">
        <div class="mb10" v-for="group in PlatGroupList" :key="group.id">
          <div class="title">{{group.name}}</div>
          <div class="list">
            <div class="item" @click="platformSetClick(item.id)" :class="{ active: item.showConfig }" v-for="item in group.platformList" :key="item.id">
            <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>
@@ -190,33 +136,14 @@
    <!-- 运单详情 -->
    <!--  -->
    <!-- 叫号 -->
    <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"
    >
    <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 v-for="item in activeGroup.platformList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
@@ -306,7 +233,7 @@
      })
    },
    handlePass (item) {
      this.$confirm('您确认要对该任务进行过号吗', '温馨提示', {
      this.$confirm(`确认 ${item.carCodeFront}置为过号吗？过号后，需要重新签到才能进入园区`, '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
@@ -383,10 +310,11 @@
        this.$forceUpdate()
      }
    },
    handleQueuing (item) {
    handleQueuing(item, callType) {
      this.isShowQueuing = true
      this.$nextTick(() => {
        this.$refs.PlatformQueuingRef.isShowModal = true
        this.$refs.PlatformQueuingRef.callType = callType
        this.$refs.PlatformQueuingRef.activePlat = { ...item }
        this.$refs.PlatformQueuingRef.getList()
        this.$refs.PlatformQueuingRef.title = item.name
@@ -443,8 +371,10 @@

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

.platform_list {
  width: 100%;

  .item {
    /* padding: 16px 24px; */
    background: #ffffff;
@@ -452,6 +382,7 @@
    border: 1px solid #dfe2e8;
    margin-bottom: 12px;
    width: 100%;

    .head {
      display: flex;
      justify-content: space-between;
@@ -460,19 +391,23 @@
      background: linear-gradient( 270deg, #FFFFFF 0%, #EBF6F7 100%);
      border-radius: 2px 2px 0px 0px;
      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;
@@ -481,18 +416,19 @@
          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% - 48px );
      width: calc(100% - 0);
      .info {
        background: #f4fafb;
        border-radius: 2px;
@@ -500,23 +436,41 @@
        padding: 16px;
        border-radius: 2px;
        margin-bottom: 10px;
        width: calc( 31.6% - 16px );
        .status {
        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;

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

          .siji {
            width: 29%;
          }

          .phone {
            width: 37.6%;
          }

          .left {
            .code {
              display: flex;
@@ -529,18 +483,21 @@
              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;
@@ -549,17 +506,21 @@
      }
      .jobing {
        background: #effbf5;

        .status {
          color: #00ba67;
        }
      }

      .err {
        background: #fef6f6;

        .status {
          color: #ed4545;
        }
      }
    }

    .empty_plat{
      width: 100%;
      height: 170px;
@@ -569,27 +530,33 @@
      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_header {
  display: flex;
  position: relative;

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

    .tab {
      color: #666666;
      margin-right: 40px;
@@ -597,6 +564,7 @@
      padding-bottom: 18px;
      border-bottom: 2px solid #fff;
    }

    .active {
      font-weight: 500;
      font-size: 15px;
@@ -604,6 +572,7 @@
      border-bottom: 2px solid $primary-color;
    }
  }

  .ml20 {
    position: absolute;
    width: 120px;
@@ -612,6 +581,7 @@
    top: -4px;
  }
}

/*  */
.set_modal {
  .title {
@@ -619,9 +589,11 @@
    font-weight: 600;
    margin-bottom: 16px;
  }

  .list {
    display: flex;
    flex-wrap: wrap;

    .item {
      cursor: pointer;
      padding: 0 36px;
@@ -635,6 +607,7 @@
      margin-right: 13px;
      position: relative;
      overflow: hidden;

      .bg{
        position: absolute;
        right: -12px;
@@ -644,6 +617,7 @@
        background: $primaryColor;
        transform: rotate(45deg);
      }

      .scs{
        position: absolute;
        right: -1px;
@@ -653,6 +627,7 @@
        transform:scale(.8)
      }
    }

    .active {
      background: rgba(39,155,170,0.06);
      border: 1px solid $primaryColor;
@@ -660,6 +635,7 @@
    }
  }
}

/*  */
/*  */
</style>