fix kanban

.env

@@ -1,8 +1,8 @@
 # 标题
-VITE_APP_TITLE=芋道管理系统
+VITE_APP_TITLE=生产运营管理系统
 
 # 项目本地运行端口号
-VITE_PORT=80
+VITE_PORT=8088
 
 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN=true

.env.prod

@@ -4,10 +4,12 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://47.106.185.127:48080'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
+# 上传路径
+VITE_UPLOAD_URL='http://47.106.185.127:48080/admin-api/infra/file/upload'
 
 # 接口地址
 VITE_API_URL=/admin-api

src/api/iot/mqttdatarecord/index.ts

@@ -6,6 +6,8 @@ export interface MqttDataRecordVO {
   deviceName: string // 设备
   attribute: string // 属性
   attrValue: string // 属性值
+  deviceTime: number
+  createTime: number
 }
 
 // 设备数据记录 API

src/views/iot/device/index.vue

@@ -178,13 +178,14 @@
 </template>
 
 <script setup lang="ts">
-import { getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
+import { getStrDictOptions, DICT_TYPE } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { DeviceApi, DeviceVO } from '@/api/iot/device'
 import DeviceForm from './DeviceForm.vue'
 import DeviceAttributeList from './components/DeviceAttributeList.vue'
 
+
 /** 物联设备 列表 */
 defineOptions({ name: 'Device' })
 
@@ -278,8 +279,20 @@ const handleCurrentChange = (row) => {
   currentRow.value = row
 }
 
+let timer: any = null;
 /** 初始化 **/
 onMounted(() => {
   getList()
+  timer = setInterval(async () => {
+    const data = await DeviceApi.getDevicePage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  }, 5000);
+})
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
 })
 </script>

src/views/iot/mqttdata/index.vue

@@ -68,14 +68,6 @@
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['iot:mqtt-data-record:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
         <el-button
           type="success"
           plain
@@ -89,14 +81,15 @@
     </el-form>
   </ContentWrap>
 
-  <!-- 列表 -->
+  <!-- 列表和看板 -->
   <ContentWrap>
     <el-tabs v-model="activeName" @tab-click="handleTabClick">
-      <el-tab-pane label="数据" name="" />
+      <el-tab-pane label="数据" name="data" />
-      <el-tab-pane label="看板" name="0" />
+      <el-tab-pane label="看板" name="dashboard" />
     </el-tabs>
 
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <!-- 数据列表 -->
+    <el-table v-if="activeName === 'data'" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
       <el-table-column label="ID" align="center" prop="id" />
       <el-table-column label="设备" align="center" prop="deviceName" />
       <el-table-column label="属性" align="center" prop="attribute" />
@@ -130,24 +123,32 @@
     </el-table>
     <!-- 分页 -->
     <Pagination
+      v-if="activeName === 'data'"
       :total="total"
       v-model:page="queryParams.pageNo"
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </ContentWrap>
 
+    <!-- 看板图表 -->
+    <div v-if="activeName === 'dashboard'" class="dashboard-container">
+      <p>dewewe</p>
+      <div ref="chartRef" class="chart-container"></div>
+    </div>
+
+
+  </ContentWrap>
 </template>
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { MqttDataRecordApi, MqttDataRecordVO } from '@/api/iot/mqttdatarecord'
-
+import { DeviceApi, DeviceVO } from "@/api/iot/device"
-import {DeviceApi, DeviceVO} from "@/api/iot/device";
+import { MqttRecordApi } from "@/api/iot/mqttrecord"
-import {MqttRecordApi} from "@/api/iot/mqttrecord";
+import { TabsPaneContext } from "element-plus"
-import {TabsPaneContext} from "element-plus";
+import * as echarts from 'echarts'
-
+import { onMounted, ref, reactive, watch } from 'vue'
 
 /** 设备数据记录 列表 */
 defineOptions({ name: 'MqttDataRecord' })
@@ -159,6 +160,8 @@ const loading = ref(true) // 列表的加载中
 const list = ref<MqttDataRecordVO[]>([]) // 列表的数据
 const deviceList = ref<DeviceVO[]>([])
 const deviceAttrList = ref<string[]>([])
+const chartRef = ref<HTMLElement>()
+let chart: echarts.ECharts | null = null
 
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
@@ -173,15 +176,19 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const activeName = ref('data') // 当前激活的tab
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    console.log(queryParams)
     const data = await MqttDataRecordApi.getMqttDataRecordPage2(queryParams)
     list.value = data.list
     total.value = data.total
+    // 如果当前在看板tab，更新图表
+    if (activeName.value === 'dashboard') {
+      updateChart()
+    }
   } finally {
     loading.value = false
   }
@@ -222,24 +229,64 @@ const handleExport = async () => {
     await message.exportConfirm()
     // 发起导出
     exportLoading.value = true
-    const data = await MqttDataRecordApi.exportMqttDataRecord(queryParams)
+    const data = await MqttDataRecordApi.getMqttDataRecordPage2(queryParams)
     download.excel(data, '设备数据记录.xls')
   } catch {
   } finally {
     exportLoading.value = false
   }
 }
+/** tab 切换 */
+const handleTabClick = (tab: TabsPaneContext) => {
+  if (tab.paneName === 'dashboard') {
+    // 切换到看板时初始化图表
+    if (!chart) {
+
+    }
+  }
+}
 
+/** 监听数据变化，更新图表 */
+watch(() => list.value, () => {
+  if (activeName.value === 'dashboard') {
+  }
+}, { deep: true })
+
+let timer: any = null;
 /** 初始化 **/
 onMounted(async () => {
   deviceList.value = await DeviceApi.getDeviceList()
-
   getList()
+
+  timer = setInterval(async () => {
+    const data = await MqttDataRecordApi.getMqttDataRecordPage2(queryParams)
+    list.value = data.list
+    total.value = data.total
+  }, 5000);
+})
+
+// 组件卸载时销毁图表
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+  if (chart) {
+    chart.dispose()
+    chart = null
+  }
 })
 
-/** tab 切换 */
-let activeName = ''
-const handleTabClick = (tab: TabsPaneContext) => {
-  console.log(tab.paneName)
-}
 </script>
+
+<style lang="scss" scoped>
+.dashboard-container {
+  width: 100%;
+  height: 500px;
+  margin-top: 20px;
+  
+  .chart-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>