zhoushihao
2024-12-23 eae89f75a208938dba8787a73f68a8ae2e44e165
UI-Project/src/views/Caching/cachingyiwu.vue
@@ -5,13 +5,9 @@
import request from "@/utils/request"
import {closeWebSocket, initializeWebSocket} from '@/utils/WebSocketService';
// import { ref } from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
//  import LanguageMixin from './lang/LanguageMixin'
import {useI18n} from 'vue-i18n'
const router = useRouter()
const adda = ref(false)
const {t} = useI18n()
let language = ref(localStorage.getItem('lang') || 'zh')
const tableData = ref([])
@@ -19,13 +15,13 @@
const adjustedRects = ref([]);
onMounted(async () => {
  try {
    const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage'); // 替换为你的API端点
    const response = await request.post('/cacheGlass/edgStorageCage/selectEdgStorageCage');
    if (response.code === 200) {
      const rawRects = response.data; // 设置矩形数据
      const rawRects = response.data;
      tableData.value = response.data
      console.log(response.data);
      adjustedRects.value = rawRects.map(rect => ({
        ...rect, // 复制原始对象的其他属性
        ...rect,
        width: rect.width * 0.5,
        id: rect.id * 10,
      }));
@@ -39,7 +35,6 @@
});
const toggleEnableState = async (row) => {
  const newState = row.enable_state === 1 ? 0 : 1;
  // 发送请求到后端更新状态(这里省略了实际的请求逻辑)
  const response = await request.post('/cacheGlass/edgStorageCage/updateEdgStorageCage', {
    id: row.id,
    enableState: newState
@@ -80,19 +75,14 @@
};
let socket = null;
const socketUrl = `ws://${WebSocketHost}:${host}/api/cacheGlass/api/talk/cacheGlass`;
// 定义消息处理函数,更新 receivedData 变量
const handleMessage = (data) => {
  // 更新 tableData 的数据
  tableData.value = data.EdgStorageCageinfos[0]
  // adjustedRects.value = data.EdgStorageCageinfos[0]
  adjustedRects.value = data.EdgStorageCageinfos[0].map(rect => ({
    ...rect, // 复制原始对象的其他属性
    ...rect,
    width: rect.width * 0.5,
    id: rect.id * 10,
  }));
};
// 初始化 WebSocket,并传递消息处理函数
onMounted(() => {
  socket = initializeWebSocket(socketUrl, handleMessage);
});
@@ -111,8 +101,8 @@
    <el-card style="flex: 1;margin-left: 10px;margin-top: 20px;" v-loading="loading">
      <div style="width: 98%; height: calc(100% - 35px); overflow-y: auto;">
        <el-table height="340" ref="table"
                  @selection-change="handleSelectionChange"
                  :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
           @selection-change="handleSelectionChange"
           :data="tableData" :header-cell-style="{background:'#F2F3F5 ',color:'#1D2129'}">
          <el-table-column prop="slot" align="center" :label="$t('sorter.gridnumber')" min-width="80"/>
          <el-table-column prop="glass_id" align="center" :label="$t('sorter.glassnumber')" min-width="80"/>
          <el-table-column prop="width" align="center" :label="$t('sorter.width')" min-width="120"/>
@@ -131,13 +121,9 @@
                {{ scope.row.enable_state === 1 ? $t('sorter.start') : $t('sorter.disable') }}
              </el-tag>
            </template>
            <!-- <template #default="scope">
              <el-tag type="success" >{{ scope.row.enable_state==1?"启用":"未启用"  }}</el-tag>
            </template> -->
          </el-table-column>
          <el-table-column fixed="right" :label="$t('sorter.operate')" align="center" width="200">
            <template #default="scope">
              <!-- <el-button size="mini" type="text" plain @click="handleBindRacka(scope.row)">报缺</el-button> -->
              <el-button size="mini" type="text" plain @click="open(scope.row)">{{
                  $t('sorter.deficiencieste')
                }}
@@ -164,28 +150,23 @@
    </div>
  </div>
</template>
<style scoped>
#dt {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 100px;
}
#dta {
  display: block;
  float: left;
  line-height: 20px;
  margin-left: 80%;
}
#dialog-footer {
  text-align: center;
  margin-top: -15px;
}
#message {
  text-align: center;
  align-items: center;
@@ -195,11 +176,9 @@
  background-color: #337ecc;
  margin-left: 28%;
}
.awatch {
  height: 460px;
  width: 1500px;
  max-width: 100%;
}
</style>