添加mqtt链接展示

src/components/echarts/MyEchart.vue

@@ -13,8 +13,6 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
-import { saveAs } from 'file-saver'
-import { t } from 'vxe-table'
 // import { nextTick } from 'process'
 
 const config = useConfig()
@@ -119,7 +117,15 @@ const initChart = () => {
                 height: 13,
                 bottom: '20px',
                 end: 100
-            }
+            },
+            // {
+            //     show: true,
+            //     yAxisIndex: 0,
+            //     width: 12,
+            //     handleSize: 8,
+            //     showDataShadow: false,
+            //     right: 12
+            // }
         ],
         color: props.options?.color || color,
         series: props.options?.series,
@@ -177,7 +183,7 @@ const handlerYAxis = () => {
             color: '#000',
             fontSize: 14,
             formatter: function (value) {
-                return value.toFixed(0) // 格式化显示为一位小数
+                return parseFloat(value.toFixed(1)) // 格式化显示为一位小数
             }
         },
         splitLine: {
@@ -217,9 +223,9 @@ const handlerXAxis = () => {
             // textStyle: {
             fontFamily: 'dinproRegular',
             color: '#000',
-            fontSize: '12',
+            fontSize: '12'
             // }
-        },
+        }
         // boundaryGap: false,
     }
     // props.options?.xAxis 是数组还是对象

src/components/table/fieldRender/index.vue

@@ -3,14 +3,27 @@
     <Icon class="ba-icon-dark" v-if="field.render == 'icon'" :name="fieldValue ? fieldValue : field.default ?? ''" />
 
     <!-- switch -->
-    <el-switch v-if="field.render == 'switch'" @change="onChangeField(field, $event)"
+    <div v-if="field.render == 'switch' && fieldValue != undefined">
-        :model-value="fieldValue.toString()" :loading="row.loading" inline-prompt :active-value="field.activeValue"
+        <el-switch
-        :active-text="field.activeText" :inactive-value="field.inactiveValue" :inactive-text="field.inactiveText" />
+            @change="onChangeField(field, $event)"
+            :model-value="fieldValue.toString()"
+            :loading="row.loading"
+            inline-prompt
+            :active-value="field.activeValue"
+            :active-text="field.activeText"
+            :inactive-value="field.inactiveValue"
+            :inactive-text="field.inactiveText"
+        />
+    </div>
 
     <!-- image -->
     <div v-if="field.render == 'image' && fieldValue" class="ba-render-image">
-        <el-image :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[fullUrl(fieldValue)]"
+        <el-image
-            :src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"></el-image>
+            :hide-on-click-modal="true"
+            :preview-teleported="true"
+            :preview-src-list="[fullUrl(fieldValue)]"
+            :src="fieldValue.length > 100 ? fieldValue : fullUrl(fieldValue)"
+        ></el-image>
     </div>
 
     <!-- tag -->
@@ -31,29 +44,55 @@
     </div>
 
     <!-- customTemplate 自定义模板 -->
-    <div v-if="field.render == 'customTemplate'"
+    <div
-        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"></div>
+        v-if="field.render == 'customTemplate'"
+        v-html="field.customTemplate ? field.customTemplate(row, field, fieldValue, column, index) : ''"
+    ></div>
 
     <!-- 自定义组件/函数渲染 -->
-    <component v-if="field.render == 'customRender'" :is="field.customRender" :renderRow="row" :renderField="field"
+    <component
-        :renderValue="fieldValue" :renderColumn="column" :renderIndex="index" />
+        v-if="field.render == 'customRender'"
+        :is="field.customRender"
+        :renderRow="row"
+        :renderField="field"
+        :renderValue="fieldValue"
+        :renderColumn="column"
+        :renderIndex="index"
+    />
 
     <!-- 按钮组 -->
     <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
         <template v-for="(btn, idx) in buttons" :key="idx">
             <!-- 常规按钮 -->
 
-            <el-button link v-if="btn.render == 'basicButton'" @click="onButtonClick(btn)" :class="btn.class"
+            <el-button
-                class="table-operate" :type="btn.type" :loading="props.row[btn.loading] || props.row.loading || false"
+                link
-                v-bind="btn.attr">
+                v-if="btn.render == 'basicButton'"
+                @click="onButtonClick(btn)"
+                :class="btn.class"
+                class="table-operate"
+                :type="btn.type"
+                :loading="props.row[btn.loading] || props.row.loading || false"
+                v-bind="btn.attr"
+            >
                 <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
             </el-button>
 
             <!-- 带提示信息的按钮 -->
-            <el-tooltip v-if="btn.render == 'tipButton'" :disabled="btn.title && !btn.disabledTip ? false : true"
+            <el-tooltip
-                :content="btn.title" placement="top">
+                v-if="btn.render == 'tipButton'"
-                <el-button link @click="onButtonClick(btn)" :class="btn.class" class="table-operate" :type="btn.type"
+                :disabled="btn.title && !btn.disabledTip ? false : true"
-                    v-bind="btn.attr">
+                :content="btn.title"
+                placement="top"
+            >
+                <el-button
+                    link
+                    @click="onButtonClick(btn)"
+                    :class="btn.class"
+                    class="table-operate"
+                    :type="btn.type"
+                    v-bind="btn.attr"
+                >
                     <div v-if="btn.text || btn.title" class="table-operate-text">
                         {{ btn.text || btn.title }}
                     </div>
@@ -61,8 +100,12 @@
             </el-tooltip>
 
             <!-- 带确认框的按钮 -->
-            <el-popconfirm v-if="btn.render == 'confirmButton'" :disabled="btn.disabled && btn.disabled(row, field)"
+            <el-popconfirm
-                v-bind="btn.popconfirm" @confirm="onButtonClick(btn)">
+                v-if="btn.render == 'confirmButton'"
+                :disabled="btn.disabled && btn.disabled(row, field)"
+                v-bind="btn.popconfirm"
+                @confirm="onButtonClick(btn)"
+            >
                 <template #reference>
                     <div style="display: inline-block">
                         <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
@@ -80,9 +123,14 @@
                 </el-button>
                 <template #dropdown>
                     <el-dropdown-menu>
-                        <el-dropdown-item v-for="item in btn.buttons" :key="item.text" :command="item" :style="{
+                        <el-dropdown-item
-                            color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
+                            v-for="item in btn.buttons"
-                        }">
+                            :key="item.text"
+                            :command="item"
+                            :style="{
+                                color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
+                            }"
+                        >
                             {{ item.text }}
                         </el-dropdown-item>
                     </el-dropdown-menu>
@@ -230,7 +278,7 @@ const handlerCommand = (item: OptButton) => {
     margin-left: 6px;
 }
 
-.ml-6+.el-button {
+.ml-6 + .el-button {
     margin-left: 6px;
 }
 

src/utils/echartMethod.ts

@@ -4,8 +4,50 @@ const dataProcessing = (arr: any[]) => {
         .map(item => (typeof item === 'number' ? item : parseFloat(item)))
 }
 
+const calculateValue = (o:number,value: number, num: number, isMin: boolean) => {
+    if (value === 0) {
+        return 0
+    }else if(value>0&& Math.abs(value)<1 && isMin==true){
+        return 0 
+    }else if(value>-1&& value<0 && isMin==false){
+        return 0 
+    }
+    let base
+    if (Math.abs(o) >= 100) {
+        base = 100
+    } else if (Math.abs(o) >= 10) {
+        base = 10
+    } else if (Math.abs(o) >= 1) {
+        base = 1
+    } else {
+        base = 0.1
+    }
+    let calculatedValue
+    if (isMin) {
+        if (value < 0) {
+            calculatedValue = value + num * value
+        } else {
+            calculatedValue = value - num * value
+        }
+    } else {
+        if (value < 0) {
+            calculatedValue = value - num * value
+        } else {
+            calculatedValue = value + num * value
+        }
+    }
+    if (base === 0.1) {
+        return parseFloat(calculatedValue.toFixed(1))
+    } else if (isMin) {
+        return Math.floor(calculatedValue / base) * base
+    } else {
+        return Math.ceil(calculatedValue / base) * base
+    }
+}
+
 // 处理y轴最大最小值
 export const yMethod = (arr: any) => {
+    let num = 0.2
     let numList = dataProcessing(arr)
     let maxValue = 0
     let minValue = 0
@@ -13,35 +55,80 @@ export const yMethod = (arr: any) => {
     let min = 0
     maxValue = Math.max(...numList)
     minValue = Math.min(...numList)
-    if (maxValue > 1000 || minValue < -1000) {
+   const o=maxValue-minValue
-        max = Math.ceil(maxValue / 100) * 100
+    min = calculateValue( o,minValue, num, true)
-        if (minValue == 0) {
+    max = calculateValue(o,maxValue, num,  false)
-            min = 0
+    // if (-100 >= minValue) {
-        } else {
+    //     min = Math.floor((minValue + num * minValue) / 100) * 100
-            min = Math.floor(minValue / 100) * 100
+    // } else if (-10 >= minValue && minValue > -100) {
-        }
+    //     min = Math.floor((minValue + num * minValue) / 10) * 10
-    } else if (maxValue < 60 && minValue > 40) {
+    // } else if (-1 >= minValue && minValue > -10) {
-        max = 60
+    //     min = Math.floor(minValue + num * minValue)
-        min = 40
+    // } else if (0 > minValue && minValue > -1) {
-    } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
+    //     min = parseFloat((minValue + num * minValue).toFixed(1))
-        max = Math.ceil(maxValue / 10) * 10
+    // } else if (minValue == 0) {
-        min = Math.floor(minValue / 10) * 10
+    //     min = 0
-    } else if (maxValue == minValue && maxValue != 0 && minValue != 0) {
+    // } else if (0 < minValue && minValue < 1) {
-        max = Math.ceil(maxValue / 10 + 1) * 10
+    //     min = parseFloat((minValue - num * minValue).toFixed(1))
-        min = Math.floor(minValue / 10 - 1) * 10
+    // } else if (1 <= minValue && minValue < 10) {
-    } else {
+    //     min = Math.floor(minValue - num * minValue)
-        max = Math.ceil(maxValue / 10) * 10
+    // } else if (10 <= minValue && minValue < 100) {
-        min = Math.floor(minValue / 10) * 10
+    //     min = Math.floor((minValue - num * minValue) / 10) * 10
-    }
+    // } else if (100 <= minValue) {
+    //     min = Math.floor((minValue - num * minValue) / 100) * 100
+    // }
+
+    // if (-100 >= maxValue) {
+    //     max = Math.ceil((maxValue - num * maxValue) / 100) * 100
+    // } else if (-10 >= maxValue && maxValue > -100) {
+    //     max = Math.ceil((maxValue - num * maxValue) / 10) * 10
+    // } else if (-1 >= maxValue && maxValue > -10) {
+    //     max = Math.ceil(maxValue - num * maxValue)
+    // } else if (0 > maxValue && maxValue > -1) {
+    //     max = parseFloat((maxValue - num * maxValue).toFixed(1))
+    // } else if (maxValue == 0) {
+    //     max = 0
+    // } else if (0 < maxValue && maxValue < 1) {
+    //     max = parseFloat((maxValue + num * maxValue).toFixed(1))
+    // } else if (1 <= maxValue && maxValue < 10) {
+    //     max = Math.ceil(maxValue + num * maxValue)
+    // } else if (10 <= maxValue && maxValue < 100) {
+    //     max = Math.ceil((maxValue + num * maxValue) / 10) * 10
+    // } else if (100 <= maxValue) {
+    //     max = Math.ceil((maxValue + num * maxValue) / 100) * 100
+    // }
+
+    // if (maxValue > 1000 || minValue < -1000) {
+    //     max = Math.ceil(maxValue / 100) * 100
+    //     if (minValue == 0) {
+    //         min = 0
+    //     } else {
+    //         min = Math.floor(minValue / 100) * 100
+    //     }
+    // } else if (maxValue < 60 && minValue > 40) {
+    //     max = 60
+    //     min = 40
+    // } else if (maxValue == minValue && maxValue < 10 && minValue > 0) {
+    //     max = Math.ceil(maxValue / 10) * 10
+    //     min = Math.floor(minValue / 10) * 10
+    // } else if (maxValue == minValue && maxValue != 0 && minValue != 0) {
+    //     max = Math.ceil(maxValue / 10 + 1) * 10
+    //     min = Math.floor(minValue / 10 - 1) * 10
+    // } else {
+    //     max = Math.ceil(maxValue / 10) * 10
+    //     min = Math.floor(minValue / 10) * 10
+    // }
+
+    // if (maxValue > 0 && maxValue < 1) {
+    //     max = 1
+    // } else if (max == 0 && minValue > -1 && minValue < 0) {
+    //     min = -1
+    // }
 
-    if (maxValue > 0 && maxValue < 1) {
-        max = 1
-    } else if (max == 0 && minValue > -1 && minValue < 0) {
-        min = -1
-    }
     return [min, max]
 }
 
+
 /**
  * title['A相','B相',]
  * data[[1,2],[3,4]]

src/views/govern/manage/factory.vue

@@ -283,6 +283,7 @@ const tableStore = new TableStore({
         },
         { title: '设备名称', field: 'name' },
         { title: '网络设备ID', field: 'ndid' },
+
         {
             title: '设备类型',
             field: 'devType',
@@ -305,7 +306,7 @@ const tableStore = new TableStore({
                 return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'CLD' ? 'CLD' : row.cellValue
             }
         },
-        { title: '录入时间', field: 'createTime',sortable: true },
+        { title: '录入时间', field: 'createTime', sortable: true },
 
         {
             title: '使用状态',
@@ -352,6 +353,21 @@ const tableStore = new TableStore({
                 })
             }
         },
+        // { title: 'MQTT状态', field: 'connectStatus',   width: 100, },
+        {
+            title: 'MQTT状态',
+            field: 'connectStatus',
+            width: 100,
+            render: 'tag',
+            custom: {
+                未连接: 'danger',
+                已连接: 'success'
+            },
+            replaceValue: {
+                未连接: '未连接',
+                已连接: '已连接'
+            }
+        },
         {
             title: '通讯状态',
             field: 'runStatus',
@@ -360,20 +376,11 @@ const tableStore = new TableStore({
             custom: {
                 1: 'danger',
                 2: 'success'
-                // 3: 'primary',
-                // 4: 'primary',
-                // 5: 'warning'
             },
             replaceValue: {
                 1: '离线',
                 2: '在线'
-                // 3: '接入',
-                // 4: '已取消',
-                // 5: '未接入'
             }
-            // formatter: row => {
-            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
-            // },
         },
 
         {