feat : 新增echarts全屏模式及设备新增最大/小范围框

2024-03-11 23:47:49 +08:00
parent 8b073bc98f
commit ab678cb27f
8 changed files with 314 additions and 68 deletions
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
    "axios": "^1.4.0",
    "echarts": "^5.4.2",
    "element-plus": "^2.3.5",
+    "element-resize-detector": "^1.2.4",
    "js-cookie": "^3.0.5",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.35",
--- a/src/assets/images/fanInfo/shrink.png
+++ b/src/assets/images/fanInfo/shrink.png
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -18,13 +18,15 @@
 body {
  background-color: #f5f5f5;
 }
-.allLoading.el-loading-mask.is-fullscreen{
-  .el-loading-spinner{
-    .circular{
+
+.allLoading.el-loading-mask.is-fullscreen {
+  .el-loading-spinner {
+    .circular {
      width: 75px;
      height: 75px;
    }
-    .el-loading-text{
+
+    .el-loading-text {
      font-size: 26px;
      letter-spacing: 2px;
    }
@@ -312,6 +314,145 @@ body,
  }
 }

+.full-screen-dialog {
+  width: 2175px !important;
+  //width: 100% !important;
+  //height: 100% !important;
+  height: 1300px !important;
+  margin: 520px auto 0 auto !important;
+  background: rgba(6, 34, 71, 0.8) !important;
+}
+.alarm-tunnel{
+
+  .el-tag {
+    font-size: 36px;
+    height: 60px;
+    padding: 0 20px;
+    border-radius: 10px;
+  }
+  .detail {
+    font-size: 50px;
+    color: #FFFFFF;
+
+    > div {
+      color: #f5f5f5;
+      margin-bottom: 10px;
+    }
+  }
+  .el-dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 1400px;
+    border: 2px solid #0f82af;
+    background: rgba(6, 34, 71, 0.8);
+    border-radius: 20px;
+    padding: 47px 30px;
+    box-sizing: border-box;
+    margin: 520px auto 0 auto;
+
+    .el-dialog__header {
+      padding: 0 0 28px 0;
+      //display: none;
+      .el-dialog__title {
+        font-size: 50px;
+        font-weight: bold;
+        color: #d6f1fa;
+      }
+
+      .el-dialog__headerbtn {
+        right: 22px;
+
+        .el-dialog__close {
+          color: #05feff;
+          font-size: 73px;
+        }
+      }
+
+    }
+
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+
+  .left-top-icon {
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+  }
+
+  .right-top-icon {
+    position: absolute;
+    top: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(90deg);
+  }
+
+  .time-select {
+    position: absolute;
+    top: 47px;
+    right: 119px;
+    display: flex;
+
+    .choose-day {
+      margin-right: 40px;
+
+      .el-date-editor {
+        width: 370px;
+        height: 92px;
+      }
+
+      .el-input__wrapper {
+        height: 92px;
+        background-color: transparent;
+        border-radius: 10px;
+        border: 2px solid #0F82AF;
+        box-shadow: none;
+        //padding: 18px 24px;
+        .el-input__prefix, .el-input__suffix {
+          .el-icon {
+            font-size: 40px;
+            color: #FFFFFF;
+          }
+        }
+
+        .el-input__inner {
+          height: 80px;
+          font-size: 40px;
+          color: #FFFFFF;
+        }
+      }
+    }
+  }
+
+  .left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
+
+}
 //弹窗样式
 .digital-tunnel {
  .chat-dialog {
@@ -324,7 +465,11 @@ body,
    }

    #containerFan {
+      //width: 100%;
+      //height: 100%;
      flex: 1;
+      //height: calc(100vh - 100px);
+      //height: 100vh;
      height: 1200px;
      //width: 1300px;
    }
@@ -364,13 +509,17 @@ body,
    position: relative;
    display: flex;
    flex-direction: column;
-    height: 1300px;
+    width: 100%;
+    height: 100%;
+    //height: 1300px;
    border: 2px solid #0f82af;
-    background: rgba(6, 34, 71, 0.78);
+    //background: rgba(6, 34, 71, 0.78);
+    background: rgba(6, 34, 71, 0.95);
    border-radius: 20px;
    padding: 47px 30px;
    box-sizing: border-box;
-    margin: 520px auto 0 auto;
+    //margin: 520px auto 0 auto;
+    margin: 0;

    .el-dialog__header {
      padding: 0 0 28px 0;
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -5,11 +5,11 @@
      <div>
        <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
        <div class="fan-info" @click="handleOpenChart(windSpeedType,windSpeedId)">
-          <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
+          <div class="input-fan"><span>风速</span>{{ windSpeed }} {{ windSpeedUnit }}</div>
        </div>
      </div>
      <div class="wind-direction-info" @click="handleOpenChart(windDirectionSpeedType,windDirectionSpeedId)">
-        <div class="input-fan"><span>风向</span>{{ windDirection }} °</div>
+        <div class="input-fan"><span>风向</span>{{ windDirection }} {{ windDirectionUnit }}</div>
      </div>
    </div>
    <item-info
@@ -64,7 +64,9 @@ const props = defineProps({
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const windSpeed = ref(0)
+const windSpeedUnit = ref('m/s')
 const windDirection = ref(null)
+const windDirectionUnit = ref('°')
 const loadingText = ref('加载中...')
 const windSpeedId = ref(0)
 const windSpeedType = ref(null)
@@ -200,10 +202,12 @@ const getAirInfo = (now) => {
      windSpeedType.value = item.equipmentType
      windSpeedId.value = item.equipmentId
      windSpeed.value = item.value
+      windSpeedUnit.value = item.unit
    } else if (item.equipmentType === "windDirection") {
      windDirectionSpeedType.value = item.equipmentType
      windDirectionSpeedId.value = item.equipmentId
      windDirection.value = item.value
+      windDirectionUnit.value = item.unit
    }
  })
  if (airArr.length !== 0) {
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
@@ -79,7 +79,7 @@ const option = {
        color: `${
          params.gasInfo.value >= params.gasInfo.point ? "#F94236" : "#FFCE23"
        }`,
-        formatter: "Vo{value}%",
+        formatter: `{value}${params.gasInfo.unit}`,
      },
    },
  ],
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -13,8 +13,8 @@
          <div class="fan-name">{{ changeNum(item) }}号风机</div>
          <div class="option-nav">
            <div class="state">
-<!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
-              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}" >
+              <!--              :class="{ stopColor:changeStopColor(item.breakdown,item.running)}"-->
+              <div class="blue-state" :style="{backgroundColor:changeStopColor(item.breakdown,item.running)}">
                <div class="state-icon"></div>
                状态：<span class="fan-state">{{ changeStateText(item.breakdown, item.running) }}</span>
              </div>
@@ -86,7 +86,7 @@
    <div class="digital-tunnel">
      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="fanIndex+'号风机电流监控数据'"
                 width="2175px"
-                 :modal="false">
+                 :modal="false" id="fanDialog">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
@@ -105,6 +105,10 @@
              v-model="selectTimeButton"
              @select="timeSelect"
          />
+          <el-icon size="55" color="#05feff" class="full-icon" title="放大" @click="fullScreen" v-if="isFullScreen">
+            <FullScreen/>
+          </el-icon>
+          <div v-else class="shrink-icon" @click="shrinkScreen"></div>
        </div>
        <div class="left-bottom-icon"></div>
        <div class="right-bottom-icon"></div>
@@ -126,6 +130,7 @@ import {
  getFanEchartsInfo
 } from "@/api/largeScreen";
 import {ElMessage, ElMessageBox} from "element-plus";
+import elementResizeDetectorMaker from "element-resize-detector";

 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
@@ -136,6 +141,7 @@ const props = defineProps({
  transducerData: Array,
  loading: Number,
 });
+const isFullScreen = ref(false);
 const chooseDayRef = ref();
 const chooseMonthRef = ref();
 const socketData = ref()
@@ -161,8 +167,11 @@ const stateB = ref(false)
 const stateC = ref(false)
 const isVisited = ref(false)
 const showLoading = ref(false)
+let chartData = reactive([])
 const fanIndex = ref('')
 const openEquipmentId = ref(0)
+let dataZoomTop = reactive('87%')
+const screenHeight = ref(0)
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
  props.loading = now
@@ -220,8 +229,51 @@ const changeDate = (index) => {
  }
 }
 const timeSelect = (index) => {
-  getFanInfo(openEquipmentId.value, changeDate(index))
+  // console.log('document.getElementById', document.getElementById('containerFan'))
+  // console.log('screenHeight', screenHeight.value)
+  // console.log('myEcharts',myEcharts)
+  //
+  // const fanChart = document.getElementById('containerFan')
+  // nextTick(() => {
+  //   if (screenHeight.value !== 0) {
+  //     fanChart.style.height = screenHeight.value + 'px'
+  //     myEcharts.resize();
+  //   }
+  // fullScreen()
+  getFanInfo(openEquipmentId.value, changeDate(index), '',true)
+  // })
 };
+//放大弹窗
+const fullScreen = () => {
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  const fan = document.getElementById('fanDialog')
+  const fanChart = document.getElementById('containerFan')
+  const erd = elementResizeDetectorMaker();
+  fan.classList.remove('full-screen-dialog')
+  titleName.style.fontSize = '70px'
+  erd.listenTo(document.getElementById('fanDialog'), (element) => {
+    screenHeight.value = element.offsetHeight - 100
+    fanChart.style.height = (element.offsetHeight - 100) + 'px'
+    myEcharts.resize();
+  });
+  nextTick(() => {
+    isFullScreen.value = false
+    initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
+  })
+}
+const shrinkScreen = () => {
+  const fan = document.getElementById('fanDialog')
+  const fanChart = document.getElementById('containerFan')
+  const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  titleName.style.fontSize = '50px'
+  fan.classList.add('full-screen-dialog')
+  fanChart.style.height = '1200px'
+  myEcharts.resize();
+  nextTick(() => {
+    isFullScreen.value = true
+    initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, dataZoomTop)
+  })
+}
 const packageData = (item, type, flag) => {
  let number = 0
  if (item.equipmentType === "frequency1") {
@@ -302,19 +354,46 @@ const changeModel = (item) => {
    item.autoMode = !item.autoMode
  });
 }
-const getFanInfo = (equipmentId, type = 'day', time = '') => {
+const getFanInfo = (equipmentId, type = 'day', time = '', flag) => {
  isVisited.value = true
  showLoading.value = true
+  // const fanChart = document.getElementById('containerFan')
  getFanEchartsInfo(equipmentId, time, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
+      chartData = res.data
+      // if (flag) {
+      //   console.log('document.getElementById', fanChart)
+      //   console.log('myEcharts', myEcharts)
+      //   if (screenHeight.value !== 0) {
+      //     console.log('screenHeight', screenHeight.value)
+      //     fanChart.style.height = screenHeight.value + 'px'
+      //     myEcharts.resize();
+      //   }
+      // }
      nextTick(() => {
-        initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC)
+        initChart(res.data.dates, res.data.currentsA, res.data.currentsB, res.data.currentsC, dataZoomTop)
      })
    }
  })
 }
 const handleOpenChart = (item) => {
+  // const titleName = document.getElementsByClassName('el-dialog__title')[0]
+  // console.log('titleName',titleName)
+  // const fan = document.getElementById('fanDialog')
+  const fanChart = document.getElementById('containerFan')
+  const erd = elementResizeDetectorMaker();
+  // titleName.style.fontSize = '70px'
+  // erd.listenTo(document.getElementById('fanDialog'), (element) => {
+  //   console.log('element.offsetHeight ',element.offsetHeight )
+  //   // screenHeight.value = element.offsetHeight - 100
+  //   // fanChart.style.height = (element.offsetHeight - 100) + 'px'
+  //   // myEcharts.resize();
+  // });
+  // nextTick(() => {
+  //   isFullScreen.value = false
+  //   initChart(chartData.dates, chartData.currentsA, chartData.currentsB, chartData.currentsC, '93%')
+  // })
  nextTick(() => {
    if (chooseMonthRef.value) {
      chooseMonthRef.value.clearData()
@@ -322,6 +401,7 @@ const handleOpenChart = (item) => {
    if (chooseDayRef.value) {
      chooseDayRef.value.clearData()
    }
+    // fullScreen()
  })
  selectTimeButton.value = 2
  openEquipmentId.value = item.equipmentId
@@ -388,7 +468,6 @@ const getBasicData = (data) => {
 }

 const handleOnMounted = () => {
-  // console.log('socketData.value[i]',socketData.value)
  const chart = document.getElementsByClassName('echart');
  for (let i = 0; i < chart.length; i++) {
    Echarts_info1 = echarts.init(chart[i]);
@@ -530,7 +609,8 @@ const changeStateText = (breakdown, running) => {
 /**
 * 初始化echarts实例方法
 */
-const initChart = (type, valueA, valueB, valueC) => {
+const initChart = (type, valueA, valueB, valueC, top) => {
+  console.log('initChart---',top)
  //3.初始化container容器
  myEcharts = echarts.init(document.getElementById('containerFan'));
  //5.传入数据
@@ -568,6 +648,7 @@ const initChart = (type, valueA, valueB, valueC) => {
      formatter: (params) => {
        let res = ` <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: -30px;margin-left: 20px">${params[0].name}</div>` + '<br/>'
        for (let i = 0; i < params.length; i++) {
+          // console.log('params[i]', params[i])
          res += `
              <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin:0 20px 30px 20px;"><span style="color: #FFFFFF">${params[i].seriesName}: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[i].value}</span></div>
             `;
@@ -589,7 +670,7 @@ const initChart = (type, valueA, valueB, valueC) => {
    },
      {
        type: 'slider',
-        top: 1050,
+        top: top,
        height: 100,
        textStyle: {
          fontSize: 45,
@@ -664,6 +745,18 @@ const initChart = (type, valueA, valueB, valueC) => {
 </script>

 <style lang="scss" scoped>
+.full-icon {
+  cursor: pointer;
+  margin: -36px -20px 0 30px;
+}
+
+.shrink-icon {
+  margin: -36px -20px 0 30px;
+  cursor: pointer;
+  width: 65px;
+  height: 65px;
+  background-image: url("@/assets/images/fanInfo/shrink.png");
+}

 :deep( .el-radio__input.is-checked + .el-radio__label) {
  color: #38CAFB;
--- a/src/views/device-manage/index.vue
+++ b/src/views/device-manage/index.vue
@@ -135,6 +135,18 @@
                            @change="changeWindData(scope.row)"></el-input>
                </template>
              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeWindData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -194,6 +206,18 @@
                            @change="changeOtherData(scope.row)"></el-input>
                </template>
              </el-table-column>
+              <el-table-column prop="miniRange" label="最小范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最小范围" v-model="scope.row.miniRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxRange" label="最大范围" align="center">
+                <template #default="scope">
+                  <el-input placeholder="最大范围" v-model="scope.row.maxRange"
+                            @change="changeOtherData(scope.row)"></el-input>
+                </template>
+              </el-table-column>
              <el-table-column prop="state" label="状态" align="center">
                <template #default="scope">
                  <div class="switch wind-switch">
@@ -577,7 +601,7 @@ getList()
        }

        .wind-switch {
-          margin-left: 65px;
+          margin-left: 26px;
        }

        .switch {
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -4,8 +4,8 @@
      <manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" v-if="showMenu"/>
      <tunnel-title v-if="showTunnelTitle"/>
      <div class="top-length">
-        <!--        <span>隧道总长度: {{ tunnelLength }}米</span>-->
-        <span>当前施工长度: {{ constructionLength }}米</span>
+        <span>隧道总长度: {{ tunnelLength }}米</span>
+        <!--        <span>当前施工长度: {{ constructionLength }}米</span>-->
      </div>
      <div class="top-right">
        <div class="current-site">
@@ -52,7 +52,7 @@
                 :close-on-click-modal="false" :close-on-press-escape="false">
        <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"
                            :loading="showWindLoading"/>
-        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" />
+        <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
        <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"
                      :loading="showBadLoading"/>
      </el-drawer>
@@ -72,7 +72,7 @@
      <div class="arrow right" @click="nextBtn"></div>
    </div>
  </div>
-  <div class="alarm-dialog digital-tunnel">
+  <div class="alarm-dialog alarm-tunnel">
    <el-dialog :close-on-click-modal="false" v-model="isDetailVisited" title="报警信息详情"
               width="1500px">
      <div class="detail">
@@ -85,7 +85,7 @@
      </div>
    </el-dialog>
  </div>
-  <div class="digital-tunnel">
+  <div class="alarm-tunnel">
    <el-dialog :close-on-click-modal="false" v-model="isVisited" title="报警信息"
               width="2175px"
               :modal="false">
@@ -105,16 +105,12 @@
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
-      <div class="device-table">
+      <div class="device-table" :style="{marginTop: roleKey==='administrator'?'40px':'0'}">
        <el-table stripe v-loading="loading" :empty-text="tableEmptyText"
                  style="background-color: #011c29;--el-table-border-color: none;"
                  :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                  :data="alarmList">
-          <!--          <el-table-column prop="equipmentId" label="设备名称" align="center" width="400px">-->
-          <!--            <template #default="scope">-->
-          <!--              {{ changeName(scope.row.equipmentId) }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
+          <el-table-column prop="tunnelName" label="隧道名称" align="center" width="400px"/>
          <el-table-column prop="alarmContent" label="告警信息" align="center"/>
          <el-table-column prop="alarmTime" label="告警时间" align="center" width="480px"/>
          <el-table-column prop="lookupStatus" label="查阅状态" align="center" width="200px"
@@ -134,7 +130,7 @@
            </template>
          </el-table-column>
        </el-table>
-        <div class="pagination" :style="{bottom: roleKey==='administrator'?'50px':''}">
+        <div class="pagination" :style="{bottom: roleKey==='administrator'?'40px':'0'}">
          <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
                         :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
                         @current-change="handleCurrentChange" :hide-on-single-page="true"/>
@@ -336,10 +332,10 @@ const getAlarmList = () => {
  }).then(res => {
    if (res.code === 1000) {
      loading.value = false
-      if(res.data.rows.length===0){
-        tableEmptyText.value='暂无数据~'
-      }else {
-        tableEmptyText.value=''
+      if (res.data.rows.length === 0) {
+        tableEmptyText.value = '暂无数据~'
+      } else {
+        tableEmptyText.value = ''
      }
      alarmList.value = res.data.rows
      total.value = res.data.total
@@ -370,7 +366,7 @@ const getOtherInfo = () => {
      routeList.value = routeArr
      showMenu.value = true
      siteList.value = res.data.siteOption
-        tunnelList.value = res.data.tunnelOption
+      tunnelList.value = res.data.tunnelOption

      if (siteId) {
        currentSiteId.value = siteId
@@ -682,14 +678,17 @@ const initWebSocket = () => {
  height: 90px;

 }
+
 :deep(.el-table--fit) {
  width: auto;
  //height: 600px;
-  background-color: transparent!important;
-  .el-loading-mask{
+  background-color: transparent !important;
+
+  .el-loading-mask {
    background: rgba(6, 34, 71, 0.78);
-    .el-loading-spinner{
-      .circular{
+
+    .el-loading-spinner {
+      .circular {
        width: 150px;
        height: 150px;
      }
@@ -698,38 +697,14 @@ const initWebSocket = () => {
 }

 :deep(.el-table__empty-block) {
-  height: 200px!important;
+  height: 200px !important;
  //display: none;
-  .el-table__empty-text{
+  .el-table__empty-text {
    font-size: 60px;
    color: #08B7B8;
  }
 }

-.digital-tunnel {
-  .detail {
-    font-size: 50px;
-    color: #FFFFFF;
-
-    > div {
-      color: #f5f5f5;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.digital-tunnel {
-  :deep(.el-dialog ) {
-    height: 1410px;
-
-    .el-tag {
-      font-size: 36px;
-      height: 60px;
-      padding: 0 20px;
-      border-radius: 10px;
-    }
-  }
-}

 .query-form {
  :deep(.el-form-item__label) {
@@ -933,7 +908,7 @@ const initWebSocket = () => {
  font-weight: bold;

  :deep(.el-pagination.is-background ) {
-    .btn-next,.btn-prev {
+    .btn-next, .btn-prev {
      background-color: transparent;
    }