feat : 对接用电量/省电量数据及新增用电量echarts图表模块

src/api/largeScreen.js

@@ -57,6 +57,18 @@ export const getFanEchartsInfo = (id,time,type) => {
     }
   })
 }
+//用电量echarts
+export const getEleEchartsInfo = (id,time,type) => {
+  return request({
+    url: '/tunnel/large/screen/echarts/electricity/consumption',
+    method: 'get',
+    params: {
+      id: id,
+      time: time,
+      type: type
+    }
+  })
+}
 //风机频率修改
 export const editFrequency = (data) => {
   return request({

src/assets/styles/index.scss

@@ -336,7 +336,7 @@ body,
 
     #containerEle {
       flex: 1;
-      height: 1060px;
+      height: 1010px;
       //width: 2180px;
     }
 
@@ -462,8 +462,11 @@ body,
 
   //用电量
   .top-tag {
+    position: absolute;
+    top: 46px;
+    left: 516px;
     display: flex;
-    justify-content: center;
+    //justify-content: center;
 
     .allUsedEle {
       width: 300px;

src/components/chooseMonth/index.vue

@@ -14,13 +14,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+const selectButton = ref('');
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
 const emit = defineEmits(["update:modelValue", "select"]);
 const disabledDate = (time) => {
   // return time.getTime() > Date.now()//不能选择之后的数据
@@ -34,6 +28,12 @@ const dataSelect = (val) => {
   emit("update:modelValue", val);
   emit("select", val);
 };
+const clearData = () => {
+  selectButton.value=''
+}
+defineExpose({
+  clearData
+})
 </script>
 
 <style scoped>

src/components/chooseTime/index.vue

@@ -14,13 +14,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+const selectButton = ref();
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
 const emit = defineEmits(["update:modelValue", "select"]);
 const disabledDate = (time) => {
   // return time.getTime() > Date.now()//不能选择之后的数据
@@ -34,6 +28,12 @@ const dataSelect = (val) => {
   emit("update:modelValue", val);
   emit("select", val);
 };
+const clearData = () => {
+  selectButton.value=''
+}
+defineExpose({
+  clearData
+})
 </script>
 
 <style lang="scss">

src/components/content/airInfo/AirInfo.vue

@@ -33,8 +33,8 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
               v-model="selectTimeButton"
@@ -56,13 +56,13 @@ import {getEchartsInfo} from "@/api/largeScreen";
 import ChooseTime from "@/components/chooseTime/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
 
-const dayValue = ref('');
-const monthValue = ref('');
 let myEcharts = reactive({});
 const props = defineProps({
   list: Array,
   airData: Array
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const windSpeed = ref(0)
 const windDirection = ref(0)
 const loadingText = ref('加载中...')
@@ -97,11 +97,9 @@ watch(() => props.airData, (now) => {
   }
 }, {deep: true});
 const daySelect = (val) => {
-  dayValue.value = val
   getChartInfo(openDialogId.value, 'day',val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
   getChartInfo(openDialogId.value, 'month',val)
 }
 const getChartInfo = (equipmentId, type = 'day',time='') => {
@@ -123,6 +121,14 @@ const getChartInfo = (equipmentId, type = 'day',time='') => {
 }
 const handleOpenChart = (id, type) => {
   selectTimeButton.value = 2
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
   if (type === 'air') {
     dialogTitle.value = id.name
     openDialogId.value = id.equipmentId
@@ -136,6 +142,7 @@ const handleOpenChart = (id, type) => {
     openDialogId.value = id
     getChartInfo(id, 'day')
   }
+
 }
 const changeDate = (index) => {
   switch (index) {
@@ -148,8 +155,6 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
   getChartInfo(openDialogId.value, changeDate(index))
 };
 

src/components/content/badGasInfo/BadGasInfo.vue

@@ -34,8 +34,8 @@
           <div style="width: 1px"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
               v-model="selectTimeButton"
@@ -56,14 +56,15 @@ import TimeRangeBtn from "@/components/timeRangeBtn/index.vue";
 import {getBadGasEchartsInfo} from "@/api/largeScreen";
 import ChooseTime from "@/components/chooseTime/index.vue"
 import ChooseMonth from "@/components/chooseMonth/index.vue"
-const dayValue = ref('');
+
-const monthValue = ref('');
 const props = defineProps({
   list: Array,
   badGasData: Array,
   tunnelId: Number,
   loading: Number,
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isBadGasVisited = ref(false);
@@ -105,11 +106,9 @@ watch(
     {deep: true}
 );
 const daySelect = (val) => {
-  dayValue.value = val
   getBadGasChartInfo('day', val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
   getBadGasChartInfo('month', val)
 }
 const changeDate = (index) => {
@@ -123,8 +122,6 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
   getBadGasChartInfo(changeDate(index))
 };
 const getBadGasInfo = (now) => {
@@ -171,6 +168,14 @@ const getBadGasChartInfo = (type, time = '') => {
   })
 }
 const handleOpenChart = () => {
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
   getBadGasChartInfo('day')
 };
 const getImageUrl = (name) => {

src/components/content/fanInfo/FanInfo.vue

@@ -97,8 +97,8 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
               v-model="selectTimeButton"
@@ -128,8 +128,6 @@ import {ElMessage, ElMessageBox} from "element-plus";
 
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
-const dayValue = ref('');
-const monthValue = ref('');
 const props = defineProps({
   list: Array,
   tunnelId: Number,
@@ -137,6 +135,8 @@ const props = defineProps({
   transducerData: Array,
   loading: Number,
 });
+const chooseDayRef = ref();
+const chooseMonthRef = ref();
 const socketData = ref()
 let Echarts_info1 = null;
 let fan01_option = reactive();
@@ -203,13 +203,10 @@ watch(() => props.list, (now) => {
   handleOnMounted()
 }, {deep: true});
 const daySelect = (val) => {
-  console.log('daySelect')
+  getFanInfo(openEquipmentId.value, 'day', val)
-  dayValue.value = val
-  getFanInfo(openEquipmentId.value, 'day',val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
+  getFanInfo(openEquipmentId.value, 'month', val)
-  getFanInfo(openEquipmentId.value, 'month',val)
 }
 const changeDate = (index) => {
   switch (index) {
@@ -222,8 +219,6 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
   getFanInfo(openEquipmentId.value, changeDate(index))
 };
 const packageData = (item, type, flag) => {
@@ -319,6 +314,14 @@ const getFanInfo = (equipmentId, type = 'day', time = '') => {
   })
 }
 const handleOpenChart = (item) => {
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
   selectTimeButton.value = 2
   openEquipmentId.value = item.equipmentId
   getFanInfo(item.equipmentId, 'day')

src/components/content/usedEle/UsedEle.vue

@@ -22,55 +22,91 @@
       <div class="ele-left-bottom-icon"></div>
       <div class="ele-right-bottom-icon"></div>
     </div>
-    <div class="digital-tunnel">
+  </div>
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
+  <div class="digital-tunnel">
-        <div class="left-top-icon"></div>
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
-        <div class="right-top-icon"></div>
+      <div class="left-top-icon"></div>
-        <div class="top-tag">
+      <div class="right-top-icon"></div>
-          <div class="allUsedEle">
+      <div class="user-select">
-            <div class="use-title">
+        <el-select
-              {{ month }}总用电量
+            v-model="chooseChartFan"
-            </div>
+            filterable
-            <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
+            placeholder="请选择风机"
+            :fit-input-width="true"
+            :teleported="false"
+            @change="changeFanData"
+        >
+          <el-option
+              v-for="item in fanList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+          />
+        </el-select>
+      </div>
+      <div class="top-tag">
+        <div class="allUsedEle">
+          <div class="use-title">
+            月总用电量
           </div>
-          <div class="allUsedEle">
+          <div class="value">{{ totalElectricityConsumption }}kwh</div>
-            <div class="use-title">
+        </div>
-              当月节省量
+        <div class="allUsedEle">
-            </div>
+          <div class="use-title">
-            <div class="value">{{ monthlySavings }}kwh</div>
+            月节省量
           </div>
+          <div class="value">{{ saveElectricity }}kwh</div>
         </div>
-        <div class="loading-block" v-if="showLoading">
+      </div>
-          <div class="loading"></div>
+      <div class="loading-block" v-if="showLoading">
-          <span>加载中...</span>
+        <div class="loading" v-if="loadingText==='加载中...'"></div>
-        </div>
+        <span>{{ loadingText }}</span>
-        <div class="chat-dialog" v-else>
+      </div>
-          <div id="containerEle"></div>
+      <div class="chat-dialog" v-else>
-          <div style="width: 1px;"></div>
+        <div id="containerEle"></div>
-        </div>
+        <div style="width: 1px;"></div>
-        <div class="left-bottom-icon"></div>
+      </div>
-        <div class="right-bottom-icon"></div>
+      <div class="time-select">
-      </el-dialog>
+        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect" />
-    </div>
+        <time-range-btn
+            :buttonList="timeList"
+            v-model="selectTimeButton"
+            @select="timeSelect"
+        />
+      </div>
+      <div class="left-bottom-icon"></div>
+      <div class="right-bottom-icon"></div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts';
-import {dateFormat} from "@/utils/date.js";
+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
 });
+
+const loadingText = ref('加载中...')
+const timeList = ref(["年", "月"]);
+const selectTimeButton = ref(1);
+const chooseMonthRef = ref();
+const monthValue = ref('');
+const chooseChartFan = ref('');
 let myEcharts = reactive({});
 const isVisited = ref(false);
 const showLoading = ref(false)
 const electricityConsumptionMonthly = ref(0)
-const monthlySavings = ref(40000)
+const monthlySavings = ref(0)
+const totalElectricityConsumption = ref(0)
+const saveElectricity = ref(0)
+const openEquipmentId = ref(0)
 const length = ref(null);
 const valueA = ref();
-const month = ref(dateFormat('', true));
+const fanList = ref([]);
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
@@ -78,57 +114,113 @@ const bgImage = computed(() =>
         : "rgba(6,34,71,0.78)"
 );
 watch(() => props.eleData, (now) => {
-  if (now.frequencyChangerList.length === 0) {
+  if (now) {
-    electricityConsumptionMonthly.value = 0
+    let fanObj={}
-  } else {
+    now.frequencyChangerList.forEach(item=>{
-    getBasicData(now.frequencyChangerList)
+      fanObj={
+        value: item.equipmentId,
+        label:changeNum(item.equipmentId)
+      }
+      fanList.value.push(fanObj)
+    })
+    getBasicData(now.largeScreenElectricity)
   }
   setValueA()
-}, {deep: true});
-watch(() => props.list, (now) => {
-  // props.eleData.forEach(item => {
-  //   now.forEach(newItem => {
-  //     if (item.equipmentId === newItem.equipmentId) {
-  //       if (newItem.electricityConsumptionDay) {
-  //         electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
-  //       }
-  //     }
-  //   })
-  // })
-  setValueA()
-}, {deep: true});
-onMounted(() => {
-  setValueA()
   setValueB()
-})
+}, {deep: true});
+// watch(() => props.list, (now) => {
+//   console.log(now,props.eleData,'大V大V')
+//   props.eleData.frequencyChangerList.forEach(item => {
+//     now.forEach(newItem => {
+//       if (item.equipmentId === newItem.equipmentId) {
+//         if (newItem.electricityConsumptionDay) {
+//           electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
+//         }
+//       }
+//     })
+// })
+//   setValueA()
+//   setValueB()
+// }, {deep: true});
+const changeNum = (item) => {
+  switch (item) {
+    case 22:
+      return '一号风机';
+    case 23:
+      return '二号风机';
+  }
+}
 const setValueA = () => {
   if (electricityConsumptionMonthly.value === 0 || length.value === null) {
     valueA.value.style.height = `0px`;
   }
-  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 100000;
+  let width = (electricityConsumptionMonthly.value * length.value?.offsetHeight) /40000;
   valueA.value.style.height = `${width}px`;
 }
 const setValueB = () => {
   if (monthlySavings.value === 0 || length.value === null) {
     valueB.value.style.height = `0px`;
   }
-  let width = (monthlySavings.value * length.value.offsetHeight) / 100000;
+  let width = (monthlySavings.value * length.value?.offsetHeight) / 40000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
-  electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
+  electricityConsumptionMonthly.value = data.electricityConsumptionCount
+  monthlySavings.value = data.conserveElectricityCount
+}
+
+const monthSelect = (val) => {
+  monthValue.value = val
+  getFanInfo(openEquipmentId.value, 'month',val)
+}
+const changeDate = (index) => {
+  switch (index) {
+    case 0:
+      return 'years'
+    case 1:
+      return 'month'
+  }
+}
+const timeSelect = (index) => {
+  monthValue.value=''
+  getFanInfo(openEquipmentId.value, changeDate(index))
+};
+const changeFanData = (val) => {
+  selectTimeButton.value=1
+  openEquipmentId.value=val
+  getFanInfo(val, 'month', monthValue.value)
+}
+const getFanInfo = (equipmentId, type = 'month', time = '') => {
+  isVisited.value = true
+  showLoading.value = true
+  getEleEchartsInfo(equipmentId, time, type).then(res => {
+    if (res?.code === 1000) {
+      showLoading.value = false
+      totalElectricityConsumption.value=res.data.totalElectricityConsumption
+      saveElectricity.value=res.data.saveElectricity
+      nextTick(() => {
+        initChart(res.data.dates,res.data.consumptionValues,res.data.saveElectricityValues)
+      })
+    }
+  })
+  nextTick(() => {
+    loadingText.value = '加载中...'
+  })
 }
 const handleOpenChart = () => {
-  console.log('用电量弹窗')
+  selectTimeButton.value=1
   isVisited.value = true
-  nextTick(() => {
+  openEquipmentId.value=fanList.value[0].value
-    initChart()
+  chooseChartFan.value=fanList.value[0].value
+  nextTick(()=>{
+    chooseMonthRef.value.clearData()
   })
+  getFanInfo(openEquipmentId.value, 'month')
 }
 /**
  * 初始化echarts实例方法
  */
-const initChart = () => {
+const initChart = (type, valueA, valueB) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerEle'));
   //5.传入数据
@@ -149,7 +241,7 @@ const initChart = () => {
       left: 0, // 左边距
       right: 20, // 右边距
       top: 80, // 顶边距
-      bottom: 20, // 底边距
+      bottom: 110, // 底边距
       containLabel: true,
     },
     //提示框组件
@@ -183,11 +275,21 @@ const initChart = () => {
     },
     dataZoom: [{
       type: 'inside'
-    }],
+    },
+      {
+        type: 'slider',
+        top: 900,
+        height: 100,
+        textStyle: {
+          fontSize: 45,
+          color: '#fffff'
+        }
+      }],
     //X轴
     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: ['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,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -209,12 +311,14 @@ const initChart = () => {
     series: [
       {
         name: '日用电量',
-        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
+        // data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
+        data: valueA,
         type: 'bar'
       },
       {
         name: '日节省量',
-        data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
+        // data: [140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50, 120, 200, 150, 80, 70, 110, 130, 100,],
+        data: valueB,
         type: 'bar'
       },
     ]
@@ -225,11 +329,130 @@ const initChart = () => {
     myEcharts.resize();
   }
 }
-const getImageUrl = (name) => {
-  return new URL(`../../../assets/images/usedEle/${name}`, import.meta.url).href
-}
 </script>
+<style lang="scss">
+.user-select {
+  margin-bottom: 126px;
+  .el-input{
+    width: 300px;
+    .el-input__wrapper{
+      background-color: transparent;
+      box-shadow: none;
+      border-radius: 10px;
+      border: 2px solid #0F82AF;
+      .el-input__inner {
+        height: 80px;
+        font-size: 40px;
+        color: #FFFFFF;
+      }
+    }
+  }
 
+  .el-select__wrapper {
+    min-height: 75px;
+    height: auto !important;
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+    font-size: 35px;
+    width: 476px;
+  }
+
+  .el-select__placeholder.is-transparent {
+    height: 54px;
+    line-height: 54px;
+  }
+
+  .el-select__selected-item {
+    //height: 54px;
+    //line-height: 54px;
+    .el-tag {
+      max-width: none !important;
+      height: 55px;
+      font-size: 43px;
+
+      .el-icon {
+        font-size: 51px;
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+
+  .el-select__caret {
+    font-size: 35px !important;
+  }
+
+  .el-select-dropdown__item.is-hovering {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
+    width: 42px;
+    height: 42px;
+  }
+
+  .el-input {
+    min-height: 75px;
+    height: auto !important;
+  }
+
+  .el-form-item.is-error .el-input__wrapper {
+    box-shadow: none;
+  }
+
+  .el-select__popper {
+    margin-top: -12px !important;
+    background: #072247 !important;
+    border: 1px solid #0F82AF !important;
+  }
+
+  .el-popper {
+    width: auto;
+    min-width: auto;
+    margin-left: 0;
+    box-sizing: border-box;
+  }
+
+  .el-popper__arrow::before {
+    display: none;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 38px !important;
+    height: 60px !important;
+    line-height: 60px !important;
+
+    > span {
+      color: #FFFFFF;
+    }
+  }
+
+  .el-select .el-input .el-select__caret {
+    font-size: 35px !important;
+  }
+
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-tags-wrapper {
+    .el-tag {
+      padding: 28px 20px !important;
+      font-size: 35px;
+
+      .el-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 40px !important;
+      }
+    }
+  }
+}
+</style>
 <style lang="scss" scoped>
 :deep(.el-dialog__header) {
   padding: 0 !important;
@@ -295,19 +518,20 @@ const getImageUrl = (name) => {
       .container {
         width: 60px;
         height: 210px;
-        border-radius: 31px;
+        -webkit-border-radius: 31px;
         border: 1px solid rgba(105, 231, 253, 1);
         position: relative;
         margin-bottom: 20px;
-
+        padding: 1px;
         .value {
           position: absolute;
           bottom: 0;
-          width: 60px;
+          width: 100%;
           height: inherit;
           background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
-          border-radius: 31px;
+          -webkit-border-radius: 31px;
-          transition: width 0.5s linear 0s;
+          //transition: width 0.5s linear 0s;
+          -webkit-transition: width 1s ease-in-out;
         }
       }
 

src/components/content/windPressure/WindPressureList.vue

@@ -23,8 +23,8 @@
           <div style="width: 1px;"></div>
         </div>
         <div class="time-select">
-          <choose-time v-if="selectTimeButton===2" :time="dayValue" @select="daySelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
-          <choose-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect"/>
           <time-range-btn
               :buttonList="timeList"
               v-model="selectTimeButton"
@@ -51,8 +51,8 @@ const props = defineProps({
   winData: Array,
   loading: Number,
 });
-const dayValue = ref('');
+const chooseDayRef = ref();
-const monthValue = ref('');
+const chooseMonthRef = ref();
 const windSort = ref(1)
 const windSortId = ref(1)
 const timeList = ref(["年", "月", "日"]);
@@ -75,11 +75,9 @@ watch(() => props.winData, (now) => {
   getScreenInfo(now.windPressureSensorList)
 }, {deep: true});
 const daySelect = (val) => {
-  dayValue.value = val
   getWindInfo(windSortId.value, 'day', val)
 }
 const monthSelect = (val) => {
-  monthValue.value = val
   getWindInfo(windSortId.value, 'month', val)
 }
 const getWindInfo = (equipmentId, type = 'day', time = '') => {
@@ -97,6 +95,14 @@ const getWindInfo = (equipmentId, type = 'day', time = '') => {
 
 const handleOpenChart = (item) => {
   selectTimeButton.value = 2
+  nextTick(()=>{
+    if(chooseMonthRef.value){
+      chooseMonthRef.value.clearData()
+    }
+    if(chooseDayRef.value){
+      chooseDayRef.value.clearData()
+    }
+  })
   getWindInfo(item.equipmentId)
   windSort.value = item.equipmentName
   windSortId.value = item.equipmentId
@@ -112,8 +118,6 @@ const changeDate = (index) => {
   }
 }
 const timeSelect = (index) => {
-  dayValue.value = ''
-  monthValue.value = ''
   getWindInfo(windSortId.value, changeDate(index))
 };
 const getScreenInfo = (now) => {