1. 优化数据更新逻辑，通过时间戳判断数据是否过期

2. 完成座位图的功能

src/apis/ec_api.js

@@ -100,6 +100,17 @@ export const ec_api_get_suggest = (api_type, api) => {
     })
 }
 
+export const ec_api_get_suggest_timestamp = (api_type, api) => {
+    return request({
+        url: 'ec/get_suggest_params_timestamp',
+        method: 'get',
+        params: {
+            member_type: api_type,
+            api: api
+        }
+    })
+}
+
 export const ec_api_set_user_data = (req_data) => {
     return request({
         url: 'ec/set_user_data',

src/components/ec_api/SeatStatus.vue

@@ -0,0 +1,234 @@
+<script setup>
+import {defineProps, ref, reactive, computed, watch, onMounted, onBeforeMount} from 'vue'
+import {ec_api_set_user_data, ec_api_clear_user_data} from '@/apis/ec_api.js'
+import {ElMessage} from "element-plus";
+
+// 接收TabArea组件传递的参数
+const props = defineProps(['seat', 'data'])
+
+// 定义用户选择的场次变量
+const selectSeats = ref([])
+const seatList = reactive({})
+const row_x = ref(0)
+const col_y = ref(0)
+const req_timer = ref(null)
+
+// 处理用户选择的数据
+async function handle_set_user_data() {
+  console.log('selectSeats.value', selectSeats.value)
+  let selectSeatData = []
+  props.seat.forEach((item)=> {
+    if (selectSeats.value.indexOf(item['cineSeatId']) >= 0) {
+      selectSeatData.push(item)
+    }
+  })
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+    format: props.data.format,
+    user_data: JSON.stringify(selectSeatData)
+  }
+  console.log('handle_set_user_data', req_data)
+  await ec_api_set_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          ElMessage({message: '选择的座位已做为后续测试数据！', type: 'success'})
+        } else {
+          ElMessage({message: '设置用户选择座位数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '设置用户选择座位数据失败！', type: 'error'})
+      }
+  )
+  clearTimeout(req_timer.value)
+  req_timer.value = null
+}
+
+function delay_handle_user_data() {
+  if (req_timer.value === null) {
+    req_timer.value = setTimeout(()=>handle_set_user_data(), 1000)
+  }
+}
+
+// 清除Redis中用户选择数据
+async function handle_clear_user_data() {
+  const req_data = {
+    api: props.data.path,
+    member_type: props.data.type,
+  }
+  console.log('handle_clear_user_data', req_data)
+  await ec_api_clear_user_data(req_data).then(
+      (req) => {
+        if (req['result'] === 'success') {
+          ElMessage({message: '选择的座位已清除，推荐参数将使用随机值！', type: 'success'})
+        } else {
+          ElMessage({message: '清除用户选择座位数据失败！', type: 'error'})
+        }
+      }
+  ).catch(
+      (err) => {
+        console.log(err)
+        ElMessage({message: '清除用户选择座位数据失败！', type: 'error'})
+      }
+  )
+}
+
+onBeforeMount(() => {
+  console.log('onBeforeMount')
+  handleSeatData()
+})
+
+// 处理座位逻辑
+function handleSeatData() {
+  let q = 1
+  let m = 1
+  let pairValueShuangTemp = ''
+  let pairValueMultiTemp = ''
+  row_x.value = parseInt(props.seat.slice(-1)[0]['x'])
+  // 挂载时生成用于展示的数据源
+  props.seat.forEach((item) => {
+    item['key'] = item['cineSeatId']
+    item['disable'] = item['seatStatus'] !== 'ok' || item['type'] === 'road'  // 处理按键可选状态
+    // 处理显示文案
+    if (item['type'] === 'road') {
+      item['label'] = ''
+    } else {
+      item['label'] = item['rowValue'] + '-' + item['columnValue']
+    }
+    // 处理按键名称
+    switch (item['type']) {
+      case 'danren':
+        item['name'] = '单'
+        break;
+      case 'baoliu':
+        item['name'] = '保'
+        break;
+      case 'zhendong':
+        item['name'] = '震'
+        break;
+      case 'vip':
+        item['name'] = 'vip'
+        break;
+      case 'shuangren':
+        item['name'] = '情'
+        break;
+      case 'canji':
+        item['name'] = '残'
+        break;
+      case 'multi':
+        item['name'] = '多'
+        break;
+    }
+    // 处理情侣座和多人座椅
+    if (item['pairValue'] !== '') {
+      if (item['type'] === 'shuangren') {
+        if (pairValueShuangTemp === '') {
+          pairValueShuangTemp = item['pairValue']
+          item['name'] = item['name'] + '-' + q
+        }else{
+          if (item['pairValue'] === pairValueShuangTemp) {
+            item['name'] = item['name'] + '-' + q
+          }else{
+            q++
+            pairValueShuangTemp = item['pairValue']
+            item['name'] = item['name'] + '-' + q
+          }
+        }
+      }
+      if (item['type'] === 'multi') {
+        if (pairValueMultiTemp === '') {
+          pairValueMultiTemp = item['pairValue']
+          item['name'] = item['name'] + '-' + m
+        }else{
+          if (item['pairValue'] === pairValueMultiTemp) {
+            item['name'] = item['name'] + '-' + m
+          }else{
+            m++
+            pairValueMultiTemp = item['pairValue']
+            item['name'] = item['name'] + '-' + m
+          }
+        }
+      }
+    }
+
+    if (!seatList.hasOwnProperty(item['x'])) {
+      seatList[item['x']] = []
+    }
+    seatList[item['x']].push(item)
+  })
+  console.log('seatList', seatList)
+}
+
+
+watch(() => selectSeats.value, () => {
+  clearTimeout(req_timer.value)
+  req_timer.value = null
+  delay_handle_user_data()
+})
+
+</script>
+
+<template>
+  <hr id="break_line"/>
+  <div style="font-size: 16px; font-weight: bold; color: #909399; text-align: left; margin-bottom: 10px">选择座位：
+    <el-tooltip
+        class="box-item"
+        effect="dark"
+        content="点击清除选择后会将后台服务器中记录的选择内容清空，其他接口将通过随机获取的方式从此接口返回的数据中模拟参数"
+        placement="right"
+    >
+      <el-button size="small" style="font-weight: bold;color: #909399" @click="handle_clear_user_data">清除选择
+      </el-button>
+    </el-tooltip>
+  </div>
+  <div style="max-width: 1240px; overflow: auto">
+    <el-form style="max-width: 600px; margin-left: 20px">
+      <el-form-item>
+        <el-checkbox-group v-model="selectSeats">
+          <div class="seat-row" v-for="r in row_x">
+            <el-checkbox-button v-for="seat in seatList[r]" :label="seat['key']" :key="seat['key']"
+                                :disabled="seat['disable']">
+              <span>{{ seat['label'] }}</span><br>
+              <span>{{ seat['name'] }}</span>
+            </el-checkbox-button>
+          </div>
+        </el-checkbox-group>
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<style scoped>
+#break_line {
+  margin-top: 30px;
+  margin-bottom: 30px;
+  background-color: rgba(144, 147, 153, 0.5);
+  height: 1px;
+  border: none
+}
+
+:deep(.el-checkbox-button) {
+  margin-bottom: 10px;
+  margin-right: 15px;
+
+}
+
+:deep(.el-checkbox-button__inner) {
+  width: 60px;
+  height: 60px;
+  align-content: center;
+  background: #ebebeb;
+  color: #333;
+  border: 0 !important;
+  border-radius: 10px !important;
+}
+
+.seat-row {
+  display: flex;
+}
+
+</style>

src/components/ec_api/TabArea.vue

@@ -3,12 +3,18 @@ import {ref, reactive, onBeforeMount, onMounted, onUnmounted, watch, computed} f
 import Sortable from "sortablejs";
 import {useStore, mapState} from "vuex";
 import JsonEditorVue from "json-editor-vue3";
-import {ec_api_send_request, get_ec_api_request_url, ec_api_get_suggest} from "@/apis/ec_api.js";
+import {
+  ec_api_send_request,
+  get_ec_api_request_url,
+  ec_api_get_suggest,
+  ec_api_get_suggest_timestamp
+} from "@/apis/ec_api.js";
 import {Eleme, Refresh} from "@element-plus/icons-vue";
 import "@/VueAceEditor/aceConfig"
 import {VAceEditor} from "vue3-ace-editor";
 import {ElMessage} from "element-plus";
 import MovieShow from "@/components/ec_api/MovieShow.vue";
+import SeatStatus from "@/components/ec_api/SeatStatus.vue";
 
 
 // 注册store
@@ -89,6 +95,7 @@ function initApiData() {
           'sig': '',
           'format': 'json',
           'reload': true,
+          'timestamp': 0,
           'params': store.state.ecApiModule.ec_api_data.api_params[item.id]
         }
       }
@@ -264,6 +271,22 @@ async function get_suggest() {
   }
 }
 
+async function get_timestamp() {
+  const api_type = UserApiData.value.api[activeTab.value].type
+  const api = UserApiData.value.api[activeTab.value].path
+  await ec_api_get_suggest_timestamp(api_type, api).then(
+      res => {
+        console.log('get_timestamp', res['timestamp'])
+        if (res['timestamp'] > UserApiData.value.api[activeTab.value].timestamp) {
+          UserApiData.value.api[activeTab.value].reload = true
+          UserApiData.value.api[activeTab.value].timestamp = res['timestamp']
+        }
+      }
+  ).catch((err) => {
+    console.log(err)
+  })
+}
+
 // 用于测试，可以添加到需要的方法中
 function test() {
   console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
@@ -271,6 +294,7 @@ function test() {
   // console.log('activeTab.value', activeTab.value)
 }
 
+// 计算属性用来处理场次接口获取的数据，并同步给对应的选择模块
 const showList = computed(() => {
   const api = UserApiData.value.api[activeTab.value]
   if (api.path === 'cinema/plays') {
@@ -292,6 +316,30 @@ const showList = computed(() => {
   return []
 })
 
+// 计算属性用来处理座位接口获取的数据，并同步给对应的选择模块
+const seatList = computed(() => {
+  const api = UserApiData.value.api[activeTab.value]
+  if (api.path === 'play/seat-status') {
+    if (api.format === 'json') {
+      if (api.response === '{"root": "root"}') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']", api.handled['res']['data'])
+        return api.handled['res']['data']
+      }
+    }
+    if (api.format === 'xml' || api.format === 'html') {
+      if (api.response === '<root></root>') {
+        return []
+      } else {
+        console.log("api.handled['res']['data']", api.handled['res']['data'])
+        return api.handled['res']['data']
+      }
+    }
+  }
+  return []
+})
+
 // 监测ec_select_api的变化 生成新的本地数据，如果当前选中的标签被取消勾选，则选择剩下标签的第一个
 watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
   console.log('watch store.state.ecApiModule.ec_api_data.api')
@@ -308,6 +356,7 @@ watch(() => store.state.ecApiModule.ec_api_data.api, (oldValue, newValue) => {
 // 监测activeTab， 如果切换标签页，则执行自动勾选的函数
 watch(activeTab, () => {
   markIsChecked()
+  get_timestamp()
   get_suggest()
   handle_request_url()
 })
@@ -316,6 +365,7 @@ watch(activeTab, () => {
 watch(UserApiData.value, () => {
   console.log('watch UserApiData', UserApiData.value)
   console.log('store.state.ecApiModule.ec_api_data', store.state.ecApiModule.ec_api_data)
+  get_suggest()
   handle_request_url()
 }, {deep: true, flush: "post"})
 
@@ -375,6 +425,7 @@ const ace_options = {
         :key="api['id']"
         :label="api['description']"
         :name="api['id']"
+        :disabled="req_loading"
     >
       <el-table
           ref='ApiTableRef'
@@ -434,6 +485,7 @@ const ace_options = {
                     theme="chrome" :options="ace_options" class="vue-ace-editor" :wrap="true" style="width: 1200px"/>
 
       <MovieShow v-if="showList.length > 0" :show="showList" :data="UserApiData.api[activeTab]"/>
+      <SeatStatus v-if="seatList.length > 0" :seat="seatList" :data="UserApiData.api[activeTab]"/>
     </el-tab-pane>
   </el-tabs>
 </template>