|
|
@@ -99,8 +99,16 @@
|
|
|
:header-cell-style="{ fontWeight: 'bold', color: 'black', backgroundColor: '#f9f9f9', height: '50px', }"
|
|
|
class="custom-table" style="margin-bottom: 15px;">
|
|
|
<el-table-column prop="CDStartTime" label="开始时间"></el-table-column>
|
|
|
- <el-table-column prop="CDCurrentState" label="当前竞标状态"></el-table-column>
|
|
|
- <el-table-column prop="CDCurrentRound" label="当前轮次"></el-table-column>
|
|
|
+ <el-table-column label="当前竞标状态" align="center">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-tag :type="getTagType(scope.row.CDCurrentState)">{{ scope.row.CDCurrentState }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="当前轮次" align="center">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-tag type="info">{{ scope.row.CDCurrentRound }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</el-row>
|
|
|
<el-row class="FloatShadow">
|
|
|
@@ -118,7 +126,9 @@
|
|
|
</el-col>
|
|
|
<el-col :span="9">
|
|
|
<el-row class="CountDown">
|
|
|
- <el-col>{{ CountdownMessage }}</el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-text class="mx-1" size="large">{{ CountdownMessage }}</el-text>
|
|
|
+ </el-col>
|
|
|
</el-row>
|
|
|
<el-row class="ChatMes">
|
|
|
<el-col>预留聊天信息</el-col>
|
|
|
@@ -160,17 +170,6 @@ export default {
|
|
|
const dataStr = this.$route.query.data;
|
|
|
const data = JSON.parse(dataStr);
|
|
|
|
|
|
- //处理时间
|
|
|
- const dateTime = data[0].clickStartTime;
|
|
|
- const date = new Date(dateTime);
|
|
|
- // 转换为本地时间
|
|
|
- const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
|
|
|
- // 提取本地时间的日期部分
|
|
|
- const datePart = localDate.toISOString().split('T')[0];
|
|
|
- // 提取本地时间的时间部分
|
|
|
- const timePart = localDate.toISOString().split('T')[1].split('.')[0];
|
|
|
- const formattedTime = datePart + " " + timePart;
|
|
|
-
|
|
|
let foodRule = {
|
|
|
FoodRuleID: data[0].foodRuleID,
|
|
|
}
|
|
|
@@ -231,24 +230,19 @@ export default {
|
|
|
createPerson: 'WX'
|
|
|
}
|
|
|
];
|
|
|
- this.CompetitiveData = [
|
|
|
- {
|
|
|
- CDStartTime: formattedTime,
|
|
|
- }
|
|
|
- ];
|
|
|
- console.log(data)
|
|
|
+ // console.log(data)
|
|
|
},
|
|
|
setup() {
|
|
|
const message = ref('')
|
|
|
const QuotePrice = ref('')
|
|
|
+
|
|
|
return {
|
|
|
message,
|
|
|
- QuotePrice
|
|
|
+ QuotePrice,
|
|
|
};
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
BasicDataComp_T: [
|
|
|
// { name: 'test', buyTotal: 5000, unit: '吨', BuyStartTime: '2024-8-28' }
|
|
|
],
|
|
|
@@ -267,9 +261,9 @@ export default {
|
|
|
// {ResultUnit:'',ResultPrice:'',EntrustPerson:'',PriceMax:'',PriceMin:''}
|
|
|
],
|
|
|
|
|
|
- CompetitiveData: [
|
|
|
- // {CDStartTime:'',CDCurrentState:'',CDCurrentRound:''}
|
|
|
- ],
|
|
|
+ // CompetitiveData: [
|
|
|
+ // // {CDStartTime:'',CDCurrentState:'',CDCurrentRound:''}
|
|
|
+ // ],
|
|
|
|
|
|
RuleData: [
|
|
|
// {RuleName:'',Round:'',RoundTime:'',GapTime:''}
|
|
|
@@ -285,14 +279,43 @@ export default {
|
|
|
|
|
|
<script setup>
|
|
|
import http from '@/utils/http';
|
|
|
-import { onBeforeUnmount, onMounted } from 'vue'
|
|
|
+import { onBeforeUnmount, onMounted, watch } from 'vue'
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+
|
|
|
+let CompetitiveData = ref([]);
|
|
|
+const route = useRoute();
|
|
|
+const dataStr = route.query.data;
|
|
|
+const data = JSON.parse(dataStr);
|
|
|
+
|
|
|
let CountdownMessage = ref('')
|
|
|
|
|
|
const websocket = ref(null)
|
|
|
|
|
|
+//处理时间
|
|
|
+const dateTime = data[0].clickStartTime;
|
|
|
+const date = new Date(dateTime);
|
|
|
+// 转换为本地时间
|
|
|
+const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
|
|
|
+// 提取本地时间的日期部分
|
|
|
+const datePart = localDate.toISOString().split('T')[0];
|
|
|
+// 提取本地时间的时间部分
|
|
|
+const timePart = localDate.toISOString().split('T')[1].split('.')[0];
|
|
|
+const formattedTime = datePart + " " + timePart;
|
|
|
+
|
|
|
+function getTagType(value) {
|
|
|
+ const types = {
|
|
|
+ '准备中': 'primary',
|
|
|
+ '休息': 'info',
|
|
|
+ '进行中': 'success',
|
|
|
+ '已结束': 'danger',
|
|
|
+ };
|
|
|
+ return types[value] || 'default';
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
if ('WebSocket' in window) {
|
|
|
- websocket.value = new WebSocket('ws://localhost:9999/client/BiddingDetail/B005')
|
|
|
+ websocket.value = new WebSocket('ws://localhost:9999/client/BiddingDetail/' + data[0].biddingMesID)
|
|
|
|
|
|
websocket.value.onerror = () => {
|
|
|
setMessageInnerHTML('error')
|
|
|
@@ -303,7 +326,8 @@ onMounted(() => {
|
|
|
}
|
|
|
|
|
|
websocket.value.onmessage = (event) => {
|
|
|
- setMessageInnerHTML(event.data)
|
|
|
+ let param = JSON.parse(event.data)
|
|
|
+ setMessageInnerHTML(param)
|
|
|
}
|
|
|
|
|
|
websocket.value.onclose = () => {
|
|
|
@@ -321,20 +345,35 @@ onBeforeUnmount(() => {
|
|
|
})
|
|
|
|
|
|
function setMessageInnerHTML(param) {
|
|
|
- CountdownMessage.value = param
|
|
|
+ CompetitiveData.value = [
|
|
|
+ {
|
|
|
+ CDStartTime: formattedTime,
|
|
|
+ CDCurrentState: param.status,
|
|
|
+ CDCurrentRound: param.currentRound
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ CountdownMessage.value = param.timeLeft
|
|
|
}
|
|
|
|
|
|
-// function closeWebSocket() {
|
|
|
-// if (websocket.value) {
|
|
|
-// console.log('关闭连接')
|
|
|
-// websocket.value.close()
|
|
|
-// }
|
|
|
-// }
|
|
|
-// function send() {
|
|
|
-// if (websocket.value && messageInput.value) {
|
|
|
-// websocket.value.send(messageInput.value)
|
|
|
-// }
|
|
|
-// }
|
|
|
+// 监听 CompetitiveData 的变化
|
|
|
+watch(CompetitiveData, (newData, oldData) => {
|
|
|
+ if (newData.length && oldData.length) {
|
|
|
+ if (newData[0].CDCurrentState !== oldData[0].CDCurrentState) {
|
|
|
+ ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: '当前竞标状态已更改: ' + newData[0].CDCurrentState,
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (newData[0].CDCurrentRound !== oldData[0].CDCurrentRound) {
|
|
|
+ ElMessage({
|
|
|
+ showClose: true,
|
|
|
+ message: '当前轮次已更改: ' + newData[0].CDCurrentRound,
|
|
|
+ type: 'info',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}, { deep: true });
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -384,15 +423,38 @@ span {
|
|
|
padding: 10px;
|
|
|
height: 30%;
|
|
|
text-align: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.mx-1 {
|
|
|
+ display: flex;
|
|
|
+ /* 使用 flexbox 来填满容器 */
|
|
|
+ align-items: center;
|
|
|
+ /* 垂直居中 */
|
|
|
+ justify-content: center;
|
|
|
+ /* 水平居中 */
|
|
|
+ width: 100%;
|
|
|
+ /* 使 el-text 填满 el-col */
|
|
|
+ height: 100%;
|
|
|
+ /* 可选：确保 el-text 高度填满 el-col */
|
|
|
+ text-align: center;
|
|
|
+ /* 可选：确保文本居中对齐 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* 确保 padding 和 border 不影响宽度计算 */
|
|
|
+ font-size: 70px;
|
|
|
+ /* 可以根据需要调整 */
|
|
|
color: red;
|
|
|
- font-size: 90px;
|
|
|
- max-width: 100px;
|
|
|
- /* 设置最大宽度 */
|
|
|
}
|
|
|
|
|
|
.ChatMes {
|
|
|
+ border-top: 1px solid black;
|
|
|
margin-top: 15px;
|
|
|
padding: 10px;
|
|
|
height: 40%;
|
|
|
}
|
|
|
+
|
|
|
+.el-tag {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
</style>
|
