|
|
@@ -1,130 +1,119 @@
|
|
|
-// 链表监控
|
|
|
+// 链表监控 // 排队开始
|
|
|
<template>
|
|
|
<div class="sale">
|
|
|
<div class="top">
|
|
|
- <span>门岗名称：</span>
|
|
|
- <el-input placeholder="请输入内容" class="input" v-model="inputText" clearable>
|
|
|
- </el-input>
|
|
|
- <el-button type="primary" class="btn" @click="onclick(0)">
|
|
|
- <i class="el-icon-search"></i>查询
|
|
|
- </el-button>
|
|
|
+ <el-form :inline="true" style="margin-top: 1rem;">
|
|
|
+ <el-form-item>
|
|
|
+ <label class="el-form-item__label" style="width: auto;">车牌号</label>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="capacityNo"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ class="btn"
|
|
|
+ @click="onclick"
|
|
|
+ style="margin-left: 4px;"
|
|
|
+ clearable
|
|
|
+ ><i class="el-icon-search"></i>查询</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
- <div class="tab">
|
|
|
- <dilTable v-bind.sync="option" ref="table">
|
|
|
- <el-table-column fixed="right" label="操作" width="120">
|
|
|
- <template slot-scope="scope" type="expand">
|
|
|
- <el-button
|
|
|
- @click="onclick(1, scope.row)"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- v-if="scope.row.count > 0"
|
|
|
- >
|
|
|
- 查看详情
|
|
|
- </el-button>
|
|
|
- <el-button type="text" size="small" disabled v-else>
|
|
|
- 查看详情
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <!-- 排队详情下拉框 -->
|
|
|
- <el-table-column type="expand" width="1">
|
|
|
- <template slot-scope="props">
|
|
|
- <el-form label-position="left" inline class="demo-table-expand">
|
|
|
- <el-form-item v-model="gridId">
|
|
|
- <div v-if="false">{{ props }}</div>
|
|
|
- <div class="xq">
|
|
|
- <div v-for="(item, i) in queueDetail" :key="i" class="box">
|
|
|
- <!-- 头部 -->
|
|
|
- <div class="index">
|
|
|
- <span>{{ item.listNodeOrder }}</span>
|
|
|
- </div>
|
|
|
- <div class="img">
|
|
|
- <!-- 车辆图片 -->
|
|
|
- <div class="image">
|
|
|
- <img :src="imgurl" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="time">
|
|
|
- <!-- 车牌号 -->
|
|
|
- <div class="carNumber">
|
|
|
- {{ item.capacityNumber }}
|
|
|
- </div>
|
|
|
- <!-- 等待时间 -->
|
|
|
- <div class="loadTime">
|
|
|
- {{ item.minute }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </dilTable>
|
|
|
+ <div class="tabs">
|
|
|
+ <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="单拼车辆排队链表" name="first">
|
|
|
+ <el-table
|
|
|
+ :data="tableData1"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-top: 20px"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ max-height="500px"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" width="50"> </el-table-column>
|
|
|
+ <el-table-column prop="count" label="排队数" fit> </el-table-column>
|
|
|
+ <el-table-column prop="materialName" label="物资名称">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="materialSpecification" label="物资规格">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="materialModel" label="物资型号">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="多拼车辆排队链表" name="second">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :span-method="objectSpanMethod"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin-top: 20px"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ max-height="500px"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
+ <el-table-column prop="count" label="排队数"> </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { getCookie } from "@/utils/util.js";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- //车图
|
|
|
- imgurl: require("@/assets/img/car.png"),
|
|
|
+ capacityNo: "",
|
|
|
inputText: "",
|
|
|
- option: {
|
|
|
- // 表格请求数据的地址
|
|
|
- requestUrl: "/api/v1/qms/listMonitor?apiId=134",
|
|
|
- },
|
|
|
- //记录旧的row对象
|
|
|
- oldRow: "",
|
|
|
- //记录上一个展开的点击次数，单数为展开状态，复数为闭合状态
|
|
|
- oldRowCount: 1,
|
|
|
- //排队网格id
|
|
|
- gridId: "",
|
|
|
- queueDetail: [],
|
|
|
+ activeName: "first",
|
|
|
+ tableData: [],
|
|
|
+ tableData1: [],
|
|
|
+ maplist: [],
|
|
|
+ filterArr1: [],
|
|
|
+ table1: false,
|
|
|
+ //物资选中表格
|
|
|
+ materialList: [],
|
|
|
+ //物资选中暂存
|
|
|
+ materialList1: [],
|
|
|
+ //物资信息查询内容
|
|
|
+ materialNameText: null,
|
|
|
+ materialSpecificationText: null,
|
|
|
+ materialModelText: null
|
|
|
};
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ activeName() {}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getSpellingArray();
|
|
|
+ this.getNoSpellingArray();
|
|
|
+ },
|
|
|
methods: {
|
|
|
- onclick(num, row) {
|
|
|
- if (num == 0) {
|
|
|
- this.option.requestUrl =
|
|
|
- "/api/v1/qms/listMonitor?apiId=134&con=" + this.inputText+"&i="+new Date();
|
|
|
- } else if (num == 1) {
|
|
|
- console.log(row);
|
|
|
- // 记录重复点击次数
|
|
|
- if (this.oldRow === row) {
|
|
|
- this.oldRowCount += 1;
|
|
|
- }
|
|
|
- // 切换当前详情表
|
|
|
- this.$refs.table.toggleRowExpansion(row);
|
|
|
- // 打开前关闭上一个详情表
|
|
|
- if (this.oldRow != "") {
|
|
|
- if (this.oldRow != row) {
|
|
|
- if (this.oldRowCount % 2 === 1) {
|
|
|
- this.$refs.table.toggleRowExpansion(this.oldRow);
|
|
|
- } else {
|
|
|
- this.oldRowCount = 1;
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.oldRow = null;
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
- // 重置上一个点击对象
|
|
|
- this.oldRow = row;
|
|
|
- this.queueList(row.gatepostId);
|
|
|
+ handleClick() {
|
|
|
+ if (this.activeName == "first") {
|
|
|
+ this.getNoSpellingArray();
|
|
|
+ } else {
|
|
|
+ this.getSpellingArray();
|
|
|
}
|
|
|
},
|
|
|
- queueList(gatepostId) {
|
|
|
- var mapValue = {
|
|
|
- gatepostId: gatepostId,
|
|
|
- };
|
|
|
- console.log(mapValue);
|
|
|
- this.axios.post("/api/v1/qms/getListQueueMes", mapValue).then((res) => {
|
|
|
- this.queueDetail = res.data.data;
|
|
|
- });
|
|
|
+ getNoSpellingArray() {
|
|
|
+ this.axios
|
|
|
+ .post("/api/v1/qms/listMonitor?isSpelling=0&i=" + new Date())
|
|
|
+ .then(res => {
|
|
|
+ this.tableData1 = res.data.data;
|
|
|
+ });
|
|
|
},
|
|
|
- },
|
|
|
+ getSpellingArray() {
|
|
|
+ this.axios
|
|
|
+ .post("/api/v1/qms/listMonitor?apiId=473&isSpelling=1&i=" + new Date())
|
|
|
+ .then(res => {
|
|
|
+ this.tableData = res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onclick() {
|
|
|
+ this.$message.info("未开通");
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -135,56 +124,26 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 40px;
|
|
|
- .input{
|
|
|
- width: 250px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .tab {
|
|
|
- .xq {
|
|
|
+ .el-form {
|
|
|
display: flex;
|
|
|
- .box {
|
|
|
- padding-right: 20px;
|
|
|
- .index {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- span {
|
|
|
- background-color: #87ceeb;
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- border-radius: 50%;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- }
|
|
|
- .img {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .time {
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- .carNumber {
|
|
|
- background-color: #7eb9ff;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .loadTime {
|
|
|
- background-color: #3e62d8;
|
|
|
- height: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .el-form-item__label {
|
|
|
+ align-items: center;
|
|
|
+ line-height: 80px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .input {
|
|
|
+ width: 250px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .tabs {
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-top: 10px;
|
|
|
+ .tabs /deep/ .el-tabs__nav {
|
|
|
+ font-size: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
luobang