Merge pull request 'feat : 对接用电量/省电量数据及新增用电量echarts图表模块' (#281) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/281
2024-02-28 14:19:18 +00:00
parent 0fb3c3b827 9afde77c00
commit 5b8b6cbf27
9 changed files with 378 additions and 122 deletions
--- a/src/api/largeScreen.js
+++ b/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({
--- a/src/assets/styles/index.scss
+++ b/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;
--- a/src/components/chooseMonth/index.vue
+++ b/src/components/chooseMonth/index.vue
@@ -14,13 +14,7 @@
 </template>

 <script setup>
-const props = defineProps({
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
+const selectButton = ref('');
 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>
--- a/src/components/chooseTime/index.vue
+++ b/src/components/chooseTime/index.vue
@@ -14,13 +14,7 @@
 </template>

 <script setup>
-const props = defineProps({
-  time: {
-    type: Date,
-    default: '',
-  },
-});
-const selectButton = ref(props.time);
+const selectButton = ref();
 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">
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <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))
 };

--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/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-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef"  @select="daySelect"/>
+          <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) => {
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/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-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <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')
-  dayValue.value = val
-  getFanInfo(openEquipmentId.value, 'day',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')
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/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">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
-        <div class="left-top-icon"></div>
-        <div class="right-top-icon"></div>
-        <div class="top-tag">
-          <div class="allUsedEle">
-            <div class="use-title">
-              {{ month }}总用电量
-            </div>
-            <div class="value">{{ electricityConsumptionMonthly }}kwh</div>
+  </div>
+  <div class="digital-tunnel">
+    <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
+      <div class="left-top-icon"></div>
+      <div class="right-top-icon"></div>
+      <div class="user-select">
+        <el-select
+            v-model="chooseChartFan"
+            filterable
+            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="use-title">
-              当月节省量
-            </div>
-            <div class="value">{{ monthlySavings }}kwh</div>
+          <div class="value">{{ totalElectricityConsumption }}kwh</div>
+        </div>
+        <div class="allUsedEle">
+          <div class="use-title">
+            月节省量
          </div>
+          <div class="value">{{ saveElectricity }}kwh</div>
        </div>
-        <div class="loading-block" v-if="showLoading">
-          <div class="loading"></div>
-          <span>加载中...</span>
-        </div>
-        <div class="chat-dialog" v-else>
-          <div id="containerEle"></div>
-          <div style="width: 1px;"></div>
-        </div>
-        <div class="left-bottom-icon"></div>
-        <div class="right-bottom-icon"></div>
-      </el-dialog>
-    </div>
+      </div>
+      <div class="loading-block" v-if="showLoading">
+        <div class="loading" v-if="loadingText==='加载中...'"></div>
+        <span>{{ loadingText }}</span>
+      </div>
+      <div class="chat-dialog" v-else>
+        <div id="containerEle"></div>
+        <div style="width: 1px;"></div>
+      </div>
+      <div class="time-select">
+        <choose-month v-if="selectTimeButton===1" ref="chooseMonthRef" @select="monthSelect" />
+        <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) {
-    electricityConsumptionMonthly.value = 0
-  } else {
-    getBasicData(now.frequencyChangerList)
+  if (now) {
+    let fanObj={}
+    now.frequencyChangerList.forEach(item=>{
+      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(() => {
-    initChart()
+  openEquipmentId.value=fanList.value[0].value
+  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;
-          transition: width 0.5s linear 0s;
+          -webkit-border-radius: 31px;
+          //transition: width 0.5s linear 0s;
+          -webkit-transition: width 1s ease-in-out;
        }
      }

--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/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-month v-if="selectTimeButton===1" :time="monthValue" @select="monthSelect"/>
+          <choose-time v-if="selectTimeButton===2" ref="chooseDayRef" @select="daySelect"/>
+          <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 monthValue = ref('');
+const chooseDayRef = 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) => {