feat : 新增echarts(折线图)下方滚动条型缩放组件

src/assets/styles/index.scss

@@ -295,25 +295,25 @@ body,
 
     #container {
       flex: 1;
-      height: 1160px;
+      height: 1200px;
       //width: 1300px;
     }
 
     #containerFan {
       flex: 1;
-      height: 1160px;
+      height: 1200px;
       //width: 1300px;
     }
 
     #containerBad {
       flex: 1;
-      height: 1160px;
+      height: 1200px;
       //width: 1300px;
     }
 
     #containerWind {
       flex: 1;
-      height: 1160px;
+      height: 1200px;
       //width: 1300px;
     }
     #containerWindDirection {

src/components/content/airInfo/AirInfo.vue

@@ -200,7 +200,7 @@ const initChart = (type, values) => {
       left: 0, // 左边距
       right: 20, // 右边距
       top: 80, // 顶边距
-      bottom: 0, // 底边距
+      bottom: 170, // 底边距
       containLabel: true,
     },
     //提示框组件
@@ -233,7 +233,17 @@ const initChart = (type, values) => {
     },
     dataZoom: [{
       type: 'inside'
-    }],
+    },
+      {
+        type: 'slider',
+        top: 1050,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }
+    ],
     //X轴
     xAxis: {
       type: 'category',

src/components/content/badGasInfo/BadGasInfo.vue

@@ -181,7 +181,7 @@ const initChart = (type, values) => {
       left: 0, // 左边距
       right: 20, // 右边距
       top: 80, // 顶边距
-      bottom: 0, // 底边距
+      bottom: 170, // 底边距
       containLabel: true,
     },
     //提示框组件
@@ -218,7 +218,17 @@ const initChart = (type, values) => {
     },
     dataZoom: [{
       type: 'inside'
-    }],
+    },
+      {
+        type: 'slider',
+        top: 1050,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }
+    ],
     //X轴
     xAxis: {
       type: "category",

src/components/content/fanInfo/FanInfo.vue

@@ -55,16 +55,18 @@
                     <!--                      onchange="changeFrequency(item)"-->
                     <!--                      :disabled="item.autoMode"-->
                     <!--                  /></span>-->
-                    <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode" title="输入完成后, 请回车进行修改"
+                    <el-input type="number" min="0" v-model="item.frequencySetting" :disabled="item.autoMode"
-                              @change="changeFrequency(item)" @focus="item.showTooltip=true" @blur="item.showTooltip=false"   :class="{changeMargin: item.showTooltip}">
+                              title="输入完成后, 请回车进行修改"
+                              @change="changeFrequency(item)" @focus="item.showTooltip=true"
+                              @blur="item.showTooltip=false" :class="{changeMargin: item.showTooltip}">
                       <template #suffix>
                         <span>Hz</span>
                       </template>
                     </el-input>
                   </div>
-<!--                  <span v-if="item.showTooltip">-->
+                  <!--                  <span v-if="item.showTooltip">-->
-<!--                     正在输入中...-->
+                  <!--                     正在输入中...-->
-<!--                  </span>-->
+                  <!--                  </span>-->
                 </div>
 
               </div>
@@ -347,7 +349,7 @@ const getBasicData = (data) => {
       autoMode: item.autoMode,//自动模式
       breakdown: item.breakdown,//故障
       running: item.running,//启动,
-      showTooltip:false,
+      showTooltip: false,
       frequencyFeedback: item.frequencyFeedback,
       frequencySetting: item.frequencySetting
     }
@@ -506,7 +508,7 @@ const initChart = (type, valueA, valueB, valueC) => {
       left: 0, // 左边距
       right: 20, // 右边距
       top: 80, // 顶边距
-      bottom: 0, // 底边距
+      bottom: 170, // 底边距
       containLabel: true,
     },
     //提示框组件
@@ -528,22 +530,7 @@ const initChart = (type, valueA, valueB, valueC) => {
              `;
         }
         return res
-
-        // return content;
       },
-      // formatter: function (params) {
-      //   let content = `
-      //     <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
-      //       <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
-      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
-      //      <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[1].name}</div>
-      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
-      //      <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[2].name}</div>
-      //       <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 20px"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[2].value}</span></div>
-      //
-      //     </div>`;
-      //   return content;
-      // },
     },
     toolbox: {
       show: false,
@@ -555,8 +542,18 @@ const initChart = (type, valueA, valueB, valueC) => {
       }
     },
     dataZoom: [{
-      type: 'inside'
+      type: 'inside',
-    }],
+      },
+      {
+        type: 'slider',
+        top: 1050,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }
+    ],
     //X轴
     xAxis: {
       type: 'category',
@@ -900,9 +897,11 @@ input[type="number"] {
                 margin-top: 10px;
                 display: flex;
                 flex-direction: column;
-                .changeMargin{
+
+                .changeMargin {
 
                 }
+
                 > div:first-child {
                   display: flex;
 
@@ -910,12 +909,14 @@ input[type="number"] {
                     white-space: pre;
                     margin-right: 14px;
                   }
+
                   :deep(.is-focus) {
                     .el-input__inner {
-                      font-weight: normal!important;
+                      font-weight: normal !important;
-                      color: #fff!important;
+                      color: #fff !important;
                     }
                   }
+
                   :deep(.el-input__wrapper) {
                     width: 160px;
                     height: 44px;

src/components/content/windPressure/WindPressureList.vue

@@ -3,7 +3,7 @@
     <div class="name">风压</div>
     <div v-if="wpList==null||wpList.length===0" class="showNull">
       <div class="loading" v-if="loading===0"></div>
-      {{loading===0?'加载中...':'暂无数据~'}}
+      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
     </div>
     <div v-else class="list">
       <wind-pressure-item v-for="(item,index) in wpList" :key="item.equipmentId" :wp="item"
@@ -15,7 +15,7 @@
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
+          <div class="loading"></div>
           <span>加载中...</span>
         </div>
         <div class="chat-dialog" v-else>
@@ -69,12 +69,12 @@ watch(() => props.winData, (now) => {
   getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
 
-const getWindInfo = (equipmentId,type='day') => {
+const getWindInfo = (equipmentId, type = 'day') => {
   isVisited.value = true
-  showLoading.value=true
+  showLoading.value = true
-  getEchartsInfo(equipmentId,type).then(res => {
+  getEchartsInfo(equipmentId, type).then(res => {
     if (res?.code === 1000) {
-      showLoading.value=false
+      showLoading.value = false
       nextTick(() => {
         initChart(res.data.dates, res.data.values)
       })
@@ -83,18 +83,18 @@ const getWindInfo = (equipmentId,type='day') => {
 }
 
 const handleOpenChart = (item) => {
-  selectTimeButton.value=2
+  selectTimeButton.value = 2
   getWindInfo(item.equipmentId)
   windSort.value = item.equipmentName
   windSortId.value = item.equipmentId
 }
 const timeSelect = (index) => {
   if (index === 0) {
-    getWindInfo(windSortId.value,'years')
+    getWindInfo(windSortId.value, 'years')
   } else if (index === 1) {
-    getWindInfo(windSortId.value,'month')
+    getWindInfo(windSortId.value, 'month')
   } else if (index === 2) {
-    getWindInfo(windSortId.value,'day')
+    getWindInfo(windSortId.value, 'day')
   }
 };
 const getScreenInfo = (now) => {
@@ -136,7 +136,7 @@ const initChart = (type, values) => {
       left: 0, // 左边距
       right: 20, // 右边距
       top: 80, // 顶边距
-      bottom: 0, // 底边距
+      bottom: 170, // 底边距
       containLabel: true,
     },
     //提示框组件
@@ -169,7 +169,17 @@ const initChart = (type, values) => {
     },
     dataZoom: [{
       type: 'inside'
-    }],
+    },
+      {
+        type: 'slider',
+        top: 1050,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }
+    ],
     //X轴
     xAxis: {
       type: 'category',