''

liukangdong

2024-06-21 b621a252c58ad2a0fe751076fe20859906f67810

 admin/src/views/platform/index.vue

@@ -63,7 +63,7 @@
            </div>
            <div class="line">
              <div class="left">
                <span class="primaryColor pointer" @click="isShowDetail = true"
                <span class="primaryColor pointer" @click="handleDetail"
                  >运单详情</span
                >
              </div>
@@ -112,108 +112,22 @@
      </span>
    </el-dialog>
    <!-- 运单详情 -->
    <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>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDetail = false">关闭</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>
    <!-- 叫号 -->
    <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getList" @close="isShowQueuing = false" />
    <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
  </div>
</template>

<script>
import { getPlatform, getPlatformJob } from '@/api'
import PlatformQueuing from './components/PlatformQueuing.vue'
import WaybillDetail from './components/WaybillDetail.vue'
export default {
  components: {
    PlatformQueuing,
    WaybillDetail
  },
  data () {
    return {
      platformId: '',
@@ -224,8 +138,7 @@
      setParam: {},
      isShowDetail: false, // 运单详情
      detail: {},
      isShowQueuing: false,
      queuingForm: {}
      isShowQueuing: false
    }
  },
  created () {
@@ -235,6 +148,15 @@
  methods: {
    handleQueuing (row) {
      this.isShowQueuing = true
      this.$nextTick(() => {
        this.$refs.PlatformQueuingRef.isShowModal = true
      })
    },
    handleDetail () {
      this.isShowDetail = true
      this.$nextTick(() => {
        this.$refs.WaybillDetailRef.isShowModal = true
      })
    },
    getList () {
      const { platformId } = this
@@ -392,130 +314,5 @@
  }
}
/*  */
.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>