邓洁: 修复bug

2023-12-28 23:00:52 +08:00
parent 50270cddd3
commit 6dde5ccbc8
11 changed files with 274 additions and 111 deletions
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -64,17 +64,38 @@
            </div>
          </div>
        </div>
-        <div class="current">
-          <fan-info-item :wp="transducerData[index]"/>
+        <div class="current" @click="handleOpenChart(item)">
+          <fan-info-item :wp="transducerData[index]" />
        </div>
      </div>
    </div>
+    <div class="digital-tunnel">
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="'电流监控数据'" width="2175px"
+                 :modal="false">
+        <div class="left-top-icon"></div>
+        <div class="right-top-icon"></div>
+        <div class="chat-dialog">
+          <div id="containerFan"></div>
+          <div style="width: 1px;"></div>
+        </div>
+<!--        <div class="time-select">-->
+<!--          <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>
  </div>
 </template>

 <script setup>
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
+import {getFanEchartsInfo} from "../../../api/largeScreen";

 const props = defineProps({
  list: Array,
@@ -89,6 +110,8 @@ const transducerData = ref([])
 const stateA = ref(false)
 const stateB = ref(false)
 const stateC = ref(false)
+const isVisited = ref(false)
+let myEcharts = reactive({});
 watch(() => props.transducerData, (now) => {
  getTransData(now.frequencyChangerList)
 }, {deep: true});
@@ -122,7 +145,19 @@ watch(() => props.list, (now) => {
  })
  handleOnMounted()
 }, {deep: true});
-
+const getFanInfo = (equipmentId) => {
+  getFanEchartsInfo(equipmentId).then(res => {
+    if (res?.code === 1000) {
+      isVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data.currentsA,res.data.currentsB,res.data.currentsC)
+      })
+    }
+  })
+}
+const handleOpenChart = (item) => {
+  getFanInfo(item.equipmentId)
+}
 const getTransData = (data) => {
  let tranObj = {}
  let tranArr = []
@@ -306,6 +341,128 @@ const getImageUrl = (name) => {
  let icon = getImage(name)
  return new URL(`../../../assets/images/fanInfo/${icon}`, import.meta.url).href
 }
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = (type, valueA,valueB,valueC) => {
+  //3.初始化container容器
+  myEcharts = echarts.init(document.getElementById('containerFan'));
+  //5.传入数据
+  let option = {
+    //图例
+    legend: {
+      left: 0,
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 45
+      },
+      itemWidth: 30,
+      itemHeight: 30,
+      icon: "circle",
+    },
+    //离容器四侧的距离
+    grid: {
+      left: 0, // 左边距
+      right: 20, // 右边距
+      top: 80, // 顶边距
+      bottom: 0, // 底边距
+      containLabel: true,
+    },
+    //提示框组件
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      backgroundColor: "transparent", // 设置背景颜色为透明
+      borderColor: "transparent", // 设置边框颜色为透明
+      padding: 0, // 设置内边距为0
+      textStyle: {
+        fontSize: 40
+      },
+      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>`;
+        return content;
+      },
+    },
+    toolbox: {
+      show: false,
+      right: 10,
+      feature: {
+        dataZoom: {
+          yAxisIndex: 'none'
+        }
+      }
+    },
+    dataZoom: [{
+      type: 'inside'
+    }],
+    //X轴
+    xAxis: {
+      type: 'category',
+      // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00','24:00'],
+      data: type,
+      axisLabel: {
+        textStyle: {
+          fontSize: 45,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //Y轴
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        textStyle: {
+          fontSize: 45,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //配置项
+    series: [
+      {
+        // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+       name:'A相电流',
+        data: valueA,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      },
+      {
+        name:'B相电流',
+        data: valueB,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      },
+      {
+        name:'C相电流',
+        data: valueC,
+        type: 'line',
+        smooth: true,
+        symbolSize: 24,
+        lineStyle: {
+          width: 5
+        },
+      }
+    ]
+  }
+  myEcharts.setOption(option);
+  //图表大小自适应窗口大小变化
+  window.onresize = () => {
+    myEcharts.resize();
+  }
+}
+
 </script>

 <style lang="scss" scoped>
@@ -608,6 +765,7 @@ input[type="number"] {
        height: 37px;
        font-size: 28px;
        color: #FFFFFF;
+        cursor: pointer;
      }

    }
--- a/src/components/content/windPressure/WindPressureList.vue
+++ b/src/components/content/windPressure/WindPressureList.vue
@@ -6,7 +6,8 @@
                          @click="handleOpenChart(item)"/>
    </div>
    <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px" :modal="false">
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="windSort+'监控数据'" width="2175px"
+                 :modal="false">
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="chat-dialog">