单风机：添加温度图表实时更新

ui/dasadmin/src/views/backend/WindBlower/index.vue

@@ -153,7 +153,7 @@
                             </div>
                             <div class="Parameters-item">
                                 <img src="~assets/WindBlower/direction.png" />
-                                <p class="Parameters-font">98</p>
+                                <p class="Parameters-font">{{ realTimeDataForSingle.iwinddirection }}</p>
                                 <p>风向</p>
                             </div>
                         </div>
@@ -248,10 +248,8 @@
                         <el-row :gutter="10">
                             <el-col :span="24">
                                 <el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
-                                    <el-tab-pane label="日" name="day">
+                                    <el-tab-pane label="日" name="day"> </el-tab-pane>
-                                    </el-tab-pane>
+                                    <el-tab-pane label="月" name="month"> </el-tab-pane>
-                                    <el-tab-pane label="月" name="month">
-                                    </el-tab-pane>
                                 </el-tabs>
                                 <div class="trend-chart" ref="trendChartRef"></div>
                             </el-col>
@@ -315,7 +313,7 @@ import { useRoute } from 'vue-router'
 import Overview from './overview.vue'
 import { TableInstance } from 'element-plus'
 import { dayjs } from 'element-plus'
-import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils'
+import { getRealTimeState, getCutDecimalsValue } from '/@/views/backend/equipment/airBlower/utils'
 const route = useRoute()
 
 const d = new Date()
@@ -349,6 +347,7 @@ const realTimeDataForSingle = ref<any>({
     igenspeed: '',
     ipitchangle: '',
     iwindspeed: '',
+    iwinddirection: '',
 })
 
 const state: {
@@ -568,7 +567,7 @@ const TrendDataForMonth = [
 ]
 const trendChartRef = ref<VNodeRef>()
 
-const inittrendChart = (type: 'day' | 'month' = 'day') => {
+const inittrendChart = (type: 'day' | 'month') => {
     const currentPeriod: any =
         type === 'day' ? TrendDataForDay.map((item) => item.currentPeriod) : TrendDataForMonth.map((item) => item.currentPeriod)
     const samePeriod: any = type === 'day' ? TrendDataForDay.map((item) => item.samePeriod) : TrendDataForMonth.map((item) => item.samePeriod)
@@ -677,7 +676,7 @@ const inittrendChart = (type: 'day' | 'month' = 'day') => {
     trendChart.setOption(option)
     state.charts.trendChart = trendChart
 }
-const chartsData = [
+const temperatureChartsData: { name: string; value: string | number }[] = [
     {
         name: '环境温度(°C)',
         value: 56,
@@ -699,7 +698,7 @@ const initTemperatureChart = () => {
     const temperatureChart2 = state.charts.temperatureChart2 ?? echarts.init(temperatureChartRef2.value as unknown as HTMLElement)
     const temperatureChart3 = state.charts.temperatureChart3 ?? echarts.init(temperatureChartRef3.value as unknown as HTMLElement)
     const options = []
-    for (let i = 0; i < chartsData.length; i++) {
+    for (let i = 0; i < temperatureChartsData.length; i++) {
         const option = {
             grid: {
                 top: 30,
@@ -718,13 +717,13 @@ const initTemperatureChart = () => {
             },
             series: [
                 {
-                    name: chartsData[i].name,
+                    name: temperatureChartsData[i].name,
-                    data: [chartsData[i].value],
+                    data: [temperatureChartsData[i].value],
                     type: 'bar',
                     label: {
                         show: true,
                         align: 'center',
-                        formatter: ['{a|{c}}', '{b|{a}}'].join('\n'),
+                        formatter: `{a|{c}}\n{b|{a}}`,
                         rich: {
                             a: {
                                 color: '#333333',
@@ -735,7 +734,8 @@ const initTemperatureChart = () => {
                                 fontSize: 14,
                             },
                         },
-                        position: ['350%', '50%'],
+                        position: 'insideBottom',
+                        offset: [62, 0],
                     },
                     itemStyle: {
                         color: '#048bd2',
@@ -1043,6 +1043,10 @@ const createRealTimeData = async () => {
         const realData: any = await getRealTimeData()
         realTimeData.value.iturbineoperationmode = getRealTimeState(realData)
 
+        temperatureChartsData[0].value = getCutDecimalsValue(realData.itempoutdoor_1sec)
+        temperatureChartsData[1].value = getCutDecimalsValue(realData.itempnacelle_1sec)
+        temperatureChartsData[2].value = getCutDecimalsValue(realData.itempoutdoor_1sec)
+
         const overviewDatakeys: any = Object.keys(overviewData)
         const sigleDataKeys: any = Object.keys(realTimeDataForSingle.value)
 
@@ -1058,7 +1062,7 @@ const createRealTimeData = async () => {
         ]
         modelList.forEach((item: any) => {
             const realVal = realData[item.attributeCode.toLowerCase()]
-            const val = realVal === 0 ? 0 : realVal ? (realVal % 1 === 0 ? realVal : Math.floor(realVal * 1000) / 1000) : '-'
+            const val = getCutDecimalsValue(realVal)
             if (sigleDataKeys.includes(item.attributeCode.toLowerCase())) {
                 realTimeDataForSingle.value[item.attributeCode.toLowerCase()] = val === '-' ? val : val
             }
@@ -1211,6 +1215,7 @@ const autoUpdate = () => {
     if (!autoUpdateTimer) {
         autoUpdateTimer = setInterval(() => {
             createRealTimeData()
+            initTemperatureChart()
         }, 2000)
     }
 }
@@ -1254,12 +1259,12 @@ const getChartData = () => {
 }
 
 onMounted(() => {
-    inittrendChart()
+    inittrendChart(trendChartType.value)
     getChartData().then(() => {
         initpowerChart()
+        initTemperatureChart()
     })
     createScroll()
-    initTemperatureChart()
     initFrequencyChart()
     useEventListener(window, 'resize', echartsResize)
     autoUpdate()

ui/dasadmin/src/views/backend/equipment/airBlower/index.vue

@@ -53,7 +53,7 @@
                     :data="tableData"
                     :header-row-style="tableHaderStyle"
                     @selectionChange="selectTable"
-                    height="100%"
+                    max-height="100%"
                 >
                     <el-table-column type="selection" width="55"></el-table-column>
                     <template v-for="item in tableColumn" :key="item.prop">

ui/dasadmin/src/views/backend/equipment/airBlower/utils.ts

@@ -15,3 +15,8 @@ export const getRealTimeState = (data: any) => {
         return 1112
     }
 }
+
+export const getCutDecimalsValue = (data: number, num = 3) => {
+    const n = Math.pow(10, num)
+    return data === 0 ? 0 : data ? (data % 1 === 0 ? data : Math.floor(data * n) / n) : '-'
+}