fix kanban

10 months ago · 01fa3536d2
parent 2b2bd55b65
commit 01fa3536d2
5 changed files with 94 additions and 30 deletions
--- a/.env
+++ b/.env
@ -1,8 +1,8 @@
 # 标题
-VITE_APP_TITLE=芋道管理系统
+VITE_APP_TITLE=生产运营管理系统

 # 项目本地运行端口号
-VITE_PORT=80
+VITE_PORT=8088

 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN=true
--- a/.env.prod
+++ b/.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
--- a/src/api/iot/mqttdatarecord/index.ts
+++ b/src/api/iot/mqttdatarecord/index.ts
@ -6,6 +6,8 @@ export interface MqttDataRecordVO {
  deviceName: string // 设备
  attribute: string // 属性
  attrValue: string // 属性值
+  deviceTime: number
+  createTime: number
 }

 // 设备数据记录 API
--- a/src/views/iot/device/index.vue
+++ b/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>
--- a/src/views/iot/mqttdata/index.vue
+++ b/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="0" />
+      <el-tab-pane label="数据" name="data" />
+      <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 {MqttRecordApi} from "@/api/iot/mqttrecord";
-import {TabsPaneContext} from "element-plus";
-
+import { DeviceApi, DeviceVO } from "@/api/iot/device"
+import { MqttRecordApi } from "@/api/iot/mqttrecord"
+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>