前端页面的修改

yanjinhui

2025-08-28 554ea194fa4332e97c3def7e010acecde26b48d5

 ÏîÄ¿´úÂë/Ç°¶Ë/ºǫ́/src/views/tts/PickAndDrop/PickAndDrop.vue

@@ -115,7 +115,7 @@
    <div v-if="isMobile" class="content">
      <div class="content_l">
        <div class="model">左侧伸缩杆</div>
        <div class="operate" style="opacity: 0">
        <div class="operate" style="opacity: 100">
          <div class="item">伸到位</div>
          <div class="item">缩到位</div>
          <div class="item">伸出速度</div>
@@ -138,7 +138,7 @@
      </div>
      <div class="content_r">
        <div class="model">右侧伸缩杆</div>
        <div class="operate" style="opacity: 0">
        <div class="operate" style="opacity: 100">
          <div class="item">伸到位</div>
          <div class="item">缩到位</div>
          <div class="item">伸出速度</div>
@@ -164,9 +164,9 @@
    <div v-else class="content_mobile">
      <div class="content_l">
        <div style="display: flex; align-items: center">
          <div class="model">左侧伸缩杆</div>
          <div class="model">左侧竖屏伸缩杆</div>
          <div class="mode"></div>
          <div class="operate" style="opacity: 0">
          <div class="operate" style="opacity:100">
            <div class="item">伸到位</div>
            <div class="item">缩到位</div>
            <div class="item">伸出速度</div>
@@ -190,9 +190,9 @@
      </div>
      <div class="content_r">
        <div style="display: flex; align-items: center">
          <div class="model">右侧伸缩杆</div>
          <div class="model">右侧竖屏伸缩杆</div>
          <div class="mode"></div>
          <div class="operate" style="opacity: 0">
          <div class="operate" style="opacity: 100">
            <div class="item">伸到位</div>
            <div class="item">缩到位</div>
            <div class="item">伸出速度</div>
@@ -221,6 +221,7 @@
    <!-- é€šè¿‡æ ‡ç­¾é¡µåˆ‡æ¢éƒ¨é—¨ï¼Œå¹¶åŠ¨æ€åŠ è½½è¯¥éƒ¨é—¨çš„位置数据。 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> 
      <el-tab-pane v-for="item in list" :key="item.id" :label="item.name" :name="item.id">
       <!-- Manualcontrol：控制横屏 -->
        <div class="Manualcontrol">
          <div class="button">
            <el-button
@@ -304,10 +305,10 @@
                </div>
              </div>
              <div class="operate">
                <div class="item">伸到位</div>
                <div class="item">缩到位</div>
                <div class="item">伸出速度</div>
                <div class="item">缩回速度</div>
                <div class="item">伸到位{{ruleForm.leftPosition}}</div>
                <div class="item">缩到位{{0}}</div>
                <div class="item">伸出速度{{ruleForm.extendSpeed}}</div>
                <div class="item">缩回速度{{ruleForm.extendSpeed}}</div>
                <!-- <div class="open">
                  <div class="city">
                    <div class="dotted"></div>
@@ -406,10 +407,10 @@
                </div>
              </div>
              <div class="operate">
                <div class="item">伸到位</div>
                <div class="item">缩到位</div>
                <div class="item">伸出速度</div>
                <div class="item">缩回速度</div>
                <div class="item">伸到位{{ruleForm.leftPosition}}</div>
                <div class="item">缩到位{{0}}</div>
                <div class="item">伸出速度{{ruleForm.extendSpeed}}</div>
                <div class="item">缩回速度{{ruleForm.extendSpeed}}</div>
                <!-- <div class="open">
                  <div class="city">
                    <div class="dotted"></div>
@@ -499,17 +500,17 @@
                    <span style="font-size: 1.25rem; text-align: center">点动缩</span>
                  </el-button>
                </div>
                <div style="color: #fff; font-size: 1.5rem"> å·¦ä¾§ä¼¸ç¼©æ† </div>
                <div style="color: #fff; font-size: 1.5rem"> å·¦ä¾§ç«–屏手动伸缩杆 </div>
                <div style="color: #fff; font-size: 1.5rem">
                  <!-- å½“前伸缩杆位置:{{ Position.left }} -->
                  </div>
              </div>
              <!-- æŠŠ style去掉就显示了-->
              <div class="operate" style="opacity: 0"> 
                <div class="item">伸到位</div>
                <div class="item">缩到位</div>
                <div class="item">伸出速度</div>
                <div class="item">缩回速度</div>
              <div class="operate" style="opacity: 100"> 
               <div class="item">伸到位{{ruleForm.leftPosition}}</div>
                <div class="item">缩到位{{0}}</div>
                <div class="item">伸出速度{{ruleForm.extendSpeed}}</div>
                <div class="item">缩回速度{{ruleForm.extendSpeed}}</div>
                <!-- <div class="open">
                  <div class="city">
                    <div class="dotted"></div>
@@ -521,11 +522,21 @@
              </div>
              <div style="display: flex; flex-direction: column; align-items: center">
                <div class="video_l">
                  <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
                  <!-- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
                    >竖屏手动视频监控左侧</span
                  >
                  <img src="@/assets/imgs/right.png" alt="" />
                  <img src="@/assets/imgs/right.png" alt="" /> -->
                  <video
                id="video_left"
                autoplay
                muted
                controls
                playsinline
                width="100%"
                height="100%"
              ></video>
                </div>
                
              </div>
            </div>
            <div class="content_r">
@@ -596,16 +607,16 @@
                    <span style="font-size: 1.25rem; text-align: center">点动缩</span>
                  </el-button>
                </div>
                <div style="color: #fff; font-size: 1.5rem"> å³ä¾§ä¼¸ç¼©æ† </div>
                <div style="color: #fff; font-size: 1.5rem"> å³ä¾§ç«–屏手动伸缩杆 </div>
                <div style="color: #fff; font-size: 1.5rem">
                  <!-- å½“前伸缩杆位置:{{ Position.right }} -->
                  </div>
              </div>
              <div class="operate" style="opacity: 0">
                <div class="item">伸到位</div>
                <div class="item">缩到位</div>
                <div class="item">伸出速度</div>
                <div class="item">缩回速度</div>
              <div class="operate" style="opacity:100">
            <div class="item">伸到位{{ruleForm.leftPosition}}</div>
                <div class="item">缩到位{{0}}</div>
                <div class="item">伸出速度{{ruleForm.extendSpeed}}</div>
                <div class="item">缩回速度{{ruleForm.extendSpeed}}</div>
                <!-- <div class="open">
                  <div class="city">
                    <div class="dotted"></div>
@@ -617,11 +628,20 @@
              </div>
              <div style="display: flex; flex-direction: column; align-items: center">
                <div class="video_r">
                  <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
                  <!-- <span style="color: #fff; font-size: 1.25rem; font-weight: bold"
                    >视频监控右侧58</span
                  >
                
                  <img src="@/assets/imgs/left.png" alt="" />
                  <img src="@/assets/imgs/left.png" alt="" /> -->
                  <video
                id="video_left"
                autoplay
                muted
                controls
                playsinline
                width="100%"
                height="100%"
              ></video>
                </div>
              </div>
            </div>
@@ -639,6 +659,7 @@
        <el-radio :value="3">检修道三</el-radio>
        <el-radio :value="4">检修道四</el-radio>
        <el-radio :value="5">检修道五</el-radio>
        <el-radio :value="6">检修道六</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
@@ -653,7 +674,7 @@
import { ref, onMounted, nextTick ,onUnmounted,onActivated,onDeactivated ,onBeforeUnmount} from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { AutoPickAndDrop, ManualOperation, Pause, GetPosition } from '@/api/newapi/Parameters.js'
import { AutoPickAndDrop, ManualOperation, Pause, GetPosition,BackfillSpeed } from '@/api/newapi/Parameters.js'
const activeName = ref('first')
const router = useRouter()
const isShow = ref(false)
@@ -749,6 +770,49 @@
  console.log(res)
}, 2000)

//定义伸缩杆返回速度参数
const ruleForm = ref({
  id: 0,
  extendSpeed: 0,
  retractionSpeed: 0,
  manualExtend: 0,
  manualRetraction: 0,
  leftPosition: 0,
  rightPosition: 0,
});

//调用返回伸缩杆设置参数
const GetfillSpeed= async(DeptId)=>{
  try{
    const res = await BackfillSpeed(DeptId)
    // console.log('DeptId',DeptId)
    console.log("返回速度信息",res)
    if(res.status === true){
      if(res.code === 0){
         ruleForm.value.extendSpeed = res.data == null ? 0 : res.data.extendSpeed;
      ruleForm.value.retractionSpeed =
        res.data == null ? 0 : res.data.retractionSpeed;
      ruleForm.value.manualExtend =
        res.data == null ? 0 : res.data.manualExtend;
      ruleForm.value.manualRetraction =
        res.data == null ? 0 : res.data.manualRetraction;
      ruleForm.value.leftPosition =
        res.data == null ? 0 : res.data.leftPosition;
      ruleForm.value.rightPosition =
        res.data == null ? 0 : res.data.rightPosition;
      }else{
        ElMessage.error(res.message)
      }
    }else{
      ElMessage.error('获取伸缩杆速度失败')
    } 
  }
  catch(error){
    console.error(error)
    ElMessage.error('获取伸缩杆速度失败')
  }
}



// é€šè¿‡æ ‡ç­¾é¡µåˆ‡æ¢éƒ¨é—¨ï¼Œå¹¶åŠ¨æ€åŠ è½½è¯¥éƒ¨é—¨çš„位置数据。
@@ -781,17 +845,17 @@
const webRtcServer_left = ref(null)
const webRtcServer_right = ref(null)


//切换标签
const handleClick = (tab, event) => {
  destroyVideo()//切换的时候消除上次的视频监控流
  console.log(tab.index);
  console.log("当前标签下表",tab.index);

  DeptId.value = Number(tab.index) + 1
  // GetPosition(DeptId.value).then((res) => {
  //   Position.value.left = res.data.lift
  //   Position.value.right = res.data.right
  // })
  console.log('当前部门ID:', DeptId.value)
  
  GetfillSpeed(DeptId.value)

  rstp.value=srtpaddres[tab.index].left
  rstp1.value=srtpaddres[tab.index].right
}
@@ -895,12 +959,13 @@
}

onMounted(() => {
   GetfillSpeed(1) //获取伸缩杆速度
  initVideo()//开始的时候导入视频监控流
  // ç›‘听窗口大小变化
  window.addEventListener('resize', () => {
    nextTick(() => {
      if (window.innerWidth > 1200) {
        isMobile.value = true
        isMobile.value = true //默认是横屏
      } else {
        isMobile.value = false
      }
@@ -980,20 +1045,6 @@
          top: -0.25rem;
          border-radius: 50%;
        }

        // .Aspan::after {
        //   content: '';
        //   position: absolute;
        //   height: 0.66rem;
        //   /* è®¾ç½®è¾¹æ¡†çš„长度 */
        //   width: 0.66rem;
        //   /* è®¾ç½®è¾¹æ¡†çš„宽度 */
        //   background-color: rgba(102, 255, 255, 1);
        //   /* è®¾ç½®è¾¹æ¡†çš„颜色 */
        //   right: -9.5rem;
        //   top: -0.25rem;
        //   border-radius: 50%;
        // }
      }

      .btn::after {
@@ -1033,9 +1084,9 @@
  .content {
    display: flex;
    .content_l {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      width: 50%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
@@ -1050,11 +1101,19 @@
        font-size: 2rem;
      }

      //横屏自动页面左边
      .operate {
        // display: flex;
        // margin-left: auto;
        // flex-direction: column;
        // align-items: flex-end;
        // padding: 0.58rem 0.58rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        margin-bottom: 10px;

        .item {
          display: flex;
@@ -1074,6 +1133,7 @@
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-left: 1rem;
        }

        .open {
@@ -1176,10 +1236,11 @@
      }
    }

    //横屏自动页面右边
    .content_r {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      width: 50%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
@@ -1195,11 +1256,18 @@
        font-size: 2rem;
      }

      //横屏自动页面右边
      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        // display: flex;
        // flex-direction: column;
        // align-items: flex-end;
        // padding: 0.58rem 0.58rem;
             display: flex;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        margin-bottom: 10px;
        .item {
          display: flex;
          flex-direction: column;
@@ -1218,6 +1286,7 @@
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-left: 10px;
        }

        .open {
@@ -1321,6 +1390,7 @@
    }
  }

// æŽ§åˆ¶ç«–屏样式
  .content_mobile {
    display: flex;
    flex-direction: column;
@@ -1343,10 +1413,15 @@
      }

      .operate {
        // display: flex;
        // flex-direction: column;
        // align-items: flex-end;
        // padding: 0 0.88rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 0.88rem;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        .item {
          display: flex;
          flex-direction: column;
@@ -1365,6 +1440,7 @@
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-right: 1rem;
        }

        .open {
@@ -1483,10 +1559,15 @@
      }

      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0 0.88rem;
        // display: flex;
        // flex-direction: column;
        // align-items: flex-end;
        // padding: 0 0.88rem;
             display: flex;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        .item {
          display: flex;
          flex-direction: column;
@@ -1505,6 +1586,7 @@
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-right: 1rem;
        }

        .open {
@@ -1639,20 +1721,6 @@
        top: -0.25rem;
        border-radius: 50%;
      }

      // .Aspan::after {
      //   content: '';
      //   position: absolute;
      //   height: 0.66rem;
      //   /* è®¾ç½®è¾¹æ¡†çš„长度 */
      //   width: 0.66rem;
      //   /* è®¾ç½®è¾¹æ¡†çš„宽度 */
      //   background-color: rgba(102, 255, 255, 1);
      //   /* è®¾ç½®è¾¹æ¡†çš„颜色 */
      //   right: -11.8rem;
      //   top: -0.25rem;
      //   border-radius: 50%;
      // }
    }

    .btn::after {
@@ -1691,9 +1759,9 @@
  .content {
    display: flex;
    .content_l {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // display: flex;
      // flex-direction: column;
      // // justify-content: space-between;
      width: 50%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
@@ -1723,8 +1791,11 @@

      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        
        .item {
          display: flex;
          flex-direction: column;
@@ -1732,6 +1803,7 @@
          width: 8.75rem;
          height: 3.19rem;
          border-radius: 0.31rem;
          margin-left:0.5rem ;
          background: linear-gradient(
            90deg,
            rgba(0, 224, 255, 0.74) 0%,
@@ -1742,7 +1814,8 @@
          color: rgb(255, 255, 255);
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }

        .open {
@@ -1846,9 +1919,9 @@
    }

    .content_r {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      // display: flex;
      // justify-content: space-between;
      // flex-direction: column;
      width: 50%;
      height: 45rem;
      background-color: rgba(9, 48, 104, 1);
@@ -1880,9 +1953,14 @@
      }

      .operate {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        // display: flex;
        // align-items: flex-end;
        // flex-direction: column;
        // padding: 0.58rem 0.58rem;
             display: flex;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;

        .item {
@@ -1891,6 +1969,7 @@
          justify-content: center;
          width: 8.75rem;
          height: 3.19rem;
          margin-left:0.5rem ;
          border-radius: 0.31rem;
          background: linear-gradient(
            90deg,
@@ -1902,7 +1981,8 @@
          color: rgb(255, 255, 255);
          font-size: 1.13rem;
          padding-left: 0.69rem;
          margin-top: 0.88rem;
          margin-top: 1rem;
          margin-bottom: 1rem;
        }

        .open {
@@ -2043,10 +2123,15 @@
      }

      .operate {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding: 0.88rem 0.58rem;
        // display: flex;
        // flex-direction: column;
        // align-items: flex-end;
        // padding: 0.88rem 0.58rem;
             display: flex;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        .item {
          display: flex;
          flex-direction: column;
@@ -2054,6 +2139,7 @@
          width: 8.75rem;
          height: 4.19rem;
          border-radius: 0.31rem;
          margin-right: 1rem;
          background: linear-gradient(
            90deg,
            rgba(0, 224, 255, 0.74) 0%,
@@ -2199,10 +2285,15 @@
      }

      .operate {
        display: flex;
        flex-direction: column;
        padding: 0 0.88rem;
        align-items: flex-end;
        // display: flex;
        // flex-direction: column;
        // padding: 0 0.88rem;
        // align-items: flex-end;
             display: flex;
        flex-direction: row; // æ¨ªå‘排列
        align-items: center; // åž‚直居中
        justify-content: flex-start; // é å·¦
        padding: 0.58rem 0.58rem;
        .item {
          display: flex;
          flex-direction: column;
@@ -2210,6 +2301,7 @@
          width: 8.75rem;
          height: 4.19rem;
          border-radius: 0.31rem;
          margin-right: 1rem;
          background: linear-gradient(
            90deg,
            rgba(0, 224, 255, 0.74) 0%,