fix : 细节优化

src/components/content/usedEle/UsedEle.vue

@@ -67,7 +67,7 @@
         <div style="width: 1px;"></div>
       </div>
       <div class="time-select">
-        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect" />
+        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
         <time-range-btn
             :buttonList="timeList"
             v-model="selectTimeButton"
@@ -85,6 +85,7 @@ import * as echarts from 'echarts';
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 import {getEleEchartsInfo} from "@/api/largeScreen";
+
 const props = defineProps({
   list: Array,
   eleData: Array
@@ -115,11 +116,11 @@ const bgImage = computed(() =>
 );
 watch(() => props.eleData, (now) => {
   if (now) {
-    let fanObj={}
-    now.frequencyChangerList.forEach(item=>{
-      fanObj={
+    let fanObj = {}
+    now.frequencyChangerList.forEach(item => {
+      fanObj = {
         value: item.equipmentId,
-        label:changeNum(item.equipmentId)
+        label: changeNum(item.equipmentId)
       }
       fanList.value.push(fanObj)
     })
@@ -154,7 +155,7 @@ const setValueA = () => {
   if (electricityConsumptionMonthly.value === 0 || length.value === null) {
     valueA.value.style.height = `0px`;
   }
-  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) /40000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) / 40000;
   valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
@@ -171,7 +172,7 @@ const getBasicData = (data) => {
 
 const monthSelect = (val) => {
   monthValue.value = val
-  getFanInfo(openEquipmentId.value, 'month',val)
+  getFanInfo(openEquipmentId.value, 'month', val)
 }
 const changeDate = (index) => {
   switch (index) {
@@ -182,12 +183,12 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  monthValue.value=''
+  monthValue.value = ''
   getFanInfo(openEquipmentId.value, changeDate(index))
 };
 const changeFanData = (val) => {
-  selectTimeButton.value=1
-  openEquipmentId.value=val
+  selectTimeButton.value = 1
+  openEquipmentId.value = val
   getFanInfo(val, 'month', monthValue.value)
 }
 const getFanInfo = (equipmentId, type = 'month', time = '') => {
@@ -196,10 +197,10 @@ const getFanInfo = (equipmentId, type = 'month', time = '') => {
   getEleEchartsInfo(equipmentId, time, type).then(res => {
     if (res?.code === 1000) {
       showLoading.value = false
-      totalElectricityConsumption.value=res.data.totalElectricityConsumption
-      saveElectricity.value=res.data.saveElectricity
+      totalElectricityConsumption.value = res.data.totalElectricityConsumption
+      saveElectricity.value = res.data.saveElectricity
       nextTick(() => {
-        initChart(res.data.dates,res.data.consumptionValues,res.data.saveElectricityValues)
+        initChart(res.data.dates, res.data.consumptionValues, res.data.saveElectricityValues)
       })
     }
   })
@@ -208,11 +209,11 @@ const getFanInfo = (equipmentId, type = 'month', time = '') => {
   })
 }
 const handleOpenChart = () => {
-  selectTimeButton.value=1
+  selectTimeButton.value = 1
   isVisited.value = true
-  openEquipmentId.value=fanList.value[0].value
-  chooseChartFan.value=fanList.value[0].value
-  nextTick(()=>{
+  openEquipmentId.value = fanList.value[0].value
+  chooseChartFan.value = fanList.value[0].value
+  nextTick(() => {
     chooseMonthRef.value.clearData()
   })
   getFanInfo(openEquipmentId.value, 'month')
@@ -289,7 +290,7 @@ const initChart = (type, valueA, valueB) => {
     xAxis: {
       type: 'category',
       // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
-      data:type,
+      data: type,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -333,13 +334,16 @@ const initChart = (type, valueA, valueB) => {
 <style lang="scss">
 .user-select {
   margin-bottom: 126px;
-  .el-input{
+
+  .el-input {
     width: 300px;
-    .el-input__wrapper{
+
+    .el-input__wrapper {
       background-color: transparent;
       box-shadow: none;
       border-radius: 10px;
       border: 2px solid #0F82AF;
+
       .el-input__inner {
         height: 80px;
         font-size: 40px;
@@ -348,13 +352,11 @@ const initChart = (type, valueA, valueB) => {
     }
   }
 
-  .el-select__wrapper {
-    min-height: 75px;
-    height: auto !important;
-    background-color: transparent;
-    border: 1px solid #08B7B8;
-    font-size: 35px;
-    width: 476px;
+
+  .el-select__placeholder {
+    height: 54px;
+    line-height: 54px;
+    color: #FFFFFF;
   }
 
   .el-select__placeholder.is-transparent {
@@ -399,11 +401,22 @@ const initChart = (type, valueA, valueB) => {
   .el-form-item.is-error .el-input__wrapper {
     box-shadow: none;
   }
-
+  .el-select__wrapper  {
+    min-height: 75px;
+    height: auto !important;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 213px!important;
+  }
   .el-select__popper {
     margin-top: -12px !important;
     background: #072247 !important;
     border: 1px solid #0F82AF !important;
+    //width: 476px!important;
+    .el-select-dropdown{
+      width: auto;
+    }
   }
 
   .el-popper {
@@ -523,6 +536,7 @@ const initChart = (type, valueA, valueB) => {
         position: relative;
         margin-bottom: 20px;
         padding: 1px;
+
         .value {
           position: absolute;
           bottom: 0;