Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/components/chart/BarAndLine.vue

@@ -10,12 +10,24 @@
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import EchartsUtil from '/@/utils/echartsUtil';
   import { merge } from 'lodash-es';
-
+  import { columns } from '/@/views/monitor/datalog/datalog.data';
+  type ChartColumn = {
+    legend: string;
+    seriesName: string;
+    ymax: number;
+    yname: string;
+    linetype: string;
+    yaxispos: string;
+    color: string;
+    sort: number;
+    xRotate: number;
+    dataIndex: string;
+  };
   export default defineComponent({
     name: 'BarAndLine',
     props: {
       chartsColumns: {
-        type: Array,
+        type: Array as PropType<ChartColumn[]>,
         default: () => [],
       },
       chartsColumnsType: {
@@ -52,8 +64,8 @@
       const chartRef = ref<HTMLDivElement | null>(null);
       const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
       const chartData = props.chartsColumnsType ? getTableHeaderColumns(props.chartsColumnsType) : [];
-      let chartsColumns = props.chartsColumns.length > 0 ? props.chartsColumns : chartData;
-
+      let chartsColumns = (props.chartsColumns.length > 0 ? props.chartsColumns : chartData) as ChartColumn[];
+      // let groupedByColumns = {};
       const option = reactive({
         name: '',
         color: ['#7B68EE', '#0000CD', '#6495ED', '#00BFFF', '#AFEEEE', '#008080', '#00FA9A', '#2E8B57', '#FAFAD2', '#DAA520'],
@@ -81,7 +93,6 @@
         yAxis: null,
         series: null,
       });
-
       let optionUtil;
 
       watchEffect(() => {
@@ -97,6 +108,17 @@
         emit('refresh');
       });
 
+      // watch(yMax, (newVal) => {
+      //   // y轴最大值变化，需要重新更新
+      //   chartsColumns = chartsColumns.map((column: ChartColumn) => {
+      //     column['ymax'] = newVal;
+      //   });
+      //   optionUtil.initChartOption(props.chartsType, chartsColumns);
+      //   spinning.value = false;
+      //   initCharts(true);
+      //   emit('refresh');
+      // });
+
       function initChartsOption() {
         // debugger;
         optionUtil = new EchartsUtil(merge(option, props.option));
@@ -105,19 +127,59 @@
       initChartsOption();
 
       function initCharts(isRefresh = false) {
-        // debugger;
+        debugger;
+        if (props.dataSource.length < 1) return;
         //轴数据
+        let isFresh = false;
         if (option.series && option.series.length === chartsColumns.length) {
           let xAxisData = props.dataSource.map((item) => item[props.xAxisPropType]);
-          [...chartsColumns].forEach((propType: any, index) => {
+          chartsColumns = [...chartsColumns].filter((propType: any, index) => {
+            if (!propType) return;
             if (props.chartsType == 'listMonitor') {
               option.series[index].type = 'bar';
             }
-            option.series[index].data = props.dataSource.map((item) => item[propType.dataIndex] || 0);
+            option.series[index].data = props.dataSource.map((item) => Number(item[propType.dataIndex]) || 0);
+            console.log('nnn', option.series[index].data);
+            // 这里动态计算echarts y轴最大值
+            const max = Math.max(...option.series[index].data);
+            const digitCount = max.toFixed(0).length;
+            let yMax = 0;
+            if (digitCount < 2) {
+              yMax = 10;
+            } else if (digitCount < 3) {
+              const n = Number((Number(max.toFixed(0)) / 10).toFixed(0));
+              yMax = (n + 1) * 10;
+            } else if (digitCount < 4) {
+              const n = Number((Number(max.toFixed(0)) / 100).toFixed(0));
+              yMax = (n + 1) * 100;
+            } else if (digitCount < 5) {
+              const n = Number((Number(max.toFixed(0)) / 1000).toFixed(0));
+              yMax = (n + 1) * 1000;
+            } else if (digitCount < 6) {
+              const n = Number((Number(max.toFixed(0)) / 10000).toFixed(0));
+              yMax = (n + 1) * 10000;
+            }
+
+            if (yMax != 0 && yMax !== propType?.ymax) {
+              propType.ymax = yMax;
+              isFresh = true;
+            }
+            return true;
           });
           option.xAxis[0].data = xAxisData;
-          // console.log('echarts监测列表数据', option.xAxis[0].data);
-          setOptions(option, isRefresh);
+          if (isFresh) {
+            spinning.value = true;
+            optionUtil.initChartOption(props.chartsType, chartsColumns);
+            spinning.value = false;
+            initCharts(true);
+            emit('refresh');
+            nextTick(() => {
+              setOptions(option, true);
+            });
+          } else {
+            // console.log('echarts监测列表数据', option.xAxis[0].data);
+            setOptions(option, isRefresh);
+          }
         }
       }
       setTimeout(() => {

src/utils/echartsUtil.ts

@@ -35,6 +35,9 @@ export default class echartsUtil {
       dataZoom: any = null; //进度条
     const columns = JSON.parse(JSON.stringify(chartColumns));
     columns.forEach((column: any) => {
+      if (!column) {
+        debugger;
+      }
       const ylist = [];
       if (type == 'detail' || type == 'history') {
         column.linetype = 'line';

src/views/vent/home/clique/components/dialog-modal.vue

@@ -23,8 +23,7 @@
     <div class="modal-card1">
       <div class="left-modal">
         <div class="value-m">{{ valueM }}Pa</div>
-        <!-- <div class="label-m">{{ labelM }}</div> -->
-        <div class="label-m">关键阻力关键阻力关键阻力关键阻力关键阻力</div>
+        <div class="label-m">{{ labelM }}</div>
       </div>
       <div class="right-modal">
         <div class="modal-zl" v-for="(item, index) in zlList" :key="index">
@@ -49,14 +48,14 @@
       <div class="modal-wind" v-for="(item, index) in windLfList" :key="index">
         <span class="text">{{ item.label }}</span>
         <span class="num">{{ item.value }}</span>
-        <span class="dw">%</span>
+        <span class="dw">{{ item.unit }}</span>
       </div>
     </div>
     <div class="modal-card3">
       <div class="modal-wind" v-for="(item, index) in windLfList1" :key="index">
         <span class="text">{{ item.label }}</span>
         <span class="num">{{ item.value }}</span>
-        <span class="dw">%</span>
+        <span class="dw">{{ item.unit }}</span>
       </div>
     </div>
     <!-- <div class="modal-card3">
@@ -110,9 +109,9 @@
   // let modalTitle = ref('布尔台矿');
   // let modalTitle = ref('yjl');
   let modalCard = reactive([
-    { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度', value: 0 },
-    { imgSrc: getAssetURL('company/home/people.png'), label: '人员总数', value: 0 },
-    { imgSrc: getAssetURL('company/home/car.png'), label: '车辆总数', value: 0 },
+    { imgSrc: getAssetURL('company/home/hang.png'), label: '巷道长度(万m)', value: 0 },
+    { imgSrc: getAssetURL('company/home/people.png'), label: '人员总数(个)', value: 0 },
+    { imgSrc: getAssetURL('company/home/car.png'), label: '车辆总数(辆)', value: 0 },
   ]);
 
   let valueM = ref(0);
@@ -125,12 +124,12 @@
   ]);
 
   let windLfList = reactive([
-    { label: '总回风量', value: '0' },
-    { label: '总进风量', value: '0' },
+    { label: '总回风量', value: '0', unit: 'm³/min' },
+    { label: '总进风量', value: '0', unit: 'm³/min' },
   ]);
   let windLfList1 = reactive([
-    { label: '总计划风量', value: '0' },
-    { label: '有效风量率', value: '0' },
+    { label: '总计划风量', value: '0', unit: 'm³/min' },
+    { label: '有效风量率', value: '0', unit: '%' },
   ]);
 
   // let vent = reactive({