图表

src/api/pms/stat/index.ts

@@ -56,8 +56,8 @@ export const IotStatApi = {
   getMaintenanceType: async (params: any) => {
     return await request.get({ url: `/rq/stat/maintenance/type` })
   },
-  getDeviceInfoChart: async (deviceCode: any, identifier: any) => {
-    return await request.get({ url: `/rq/stat/td/chart/`+deviceCode+'/'+identifier })
+  getDeviceInfoChart: async (deviceCode: any, identifier: any, begin: string, end:string) => {
+    return await request.get({ url: `/rq/stat/td/chart/`+deviceCode+'/'+identifier+'?beginTime='+begin+'&endTime='+end })
   },
 
 

src/views/pms/device/monitor/TdDeviceInfo.vue

@@ -80,6 +80,19 @@
 <!--        </div>-->
 
         <!-- 图表容器 -->
+        <el-date-picker
+          v-model="dateRange"
+          type="datetimerange"
+          :default-time="[
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 1, 1, 23, 59, 59)
+      ]"
+          start-placeholder="起始日期时间"
+          end-placeholder="结束日期时间"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          @change="handleDateChange"
+        />
         <div v-loading="loading" style="height: 100%" ref="chartContainer"></div>
       </div>
     </ContentWrap>
@@ -114,10 +127,23 @@ const topicName = ref([])
 const loading = ref(false)
 const topic = ref('')
 
+const handleDateChange = (val) => {
+  if (val && val.length === 2) {
+
+    renderChart(getChart(val))
+
+  }
+}
+const defaultEnd = dayjs()
+const defaultStart = defaultEnd.subtract(1, 'day')
+const dateRange = ref([
+  defaultStart.format('YYYY-MM-DD HH:mm:ss'),
+  defaultEnd.format('YYYY-MM-DD HH:mm:ss')
+])
 const labelSelect = (row) =>{
   topic.value = row.identifier
   topicName.value = row.modelName
-  initChart()
+  renderChart(getChart(dateRange.value))
 }
 
 const chartContainer = ref(null)
@@ -129,16 +155,19 @@ const formatTime = timestamp => {
     .toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit',second:'2-digit' })
     .slice(0, 5)
 }
+const getChart = async (range) =>{
 
+  const result = await IotStatApi.getDeviceInfoChart(params.code, topic.value, range[0], range[1])
+  return result
+}
 // 初始化图表
-const initChart = async () => {
+const renderChart = async (result) => {
   if (!chartContainer.value) return
 
   // 销毁旧实例
   if (chartInstance) chartInstance.dispose()
 
   chartInstance = markRaw(echarts.init(chartContainer.value))
-  const result = await IotStatApi.getDeviceInfoChart(params.code, topic.value)
   const option = {
     title:{
       text: topicName.value+'数据趋势',
@@ -147,7 +176,8 @@ const initChart = async () => {
     tooltip: { trigger: 'axis', },
     xAxis: {
       type: 'category',
-      data: result.map(d => formatTime(d.timestamp)),
+      // data: result.map(d => formatTime(d.timestamp)),
+      data: result.map(item => Object.keys(item)[0]),
       axisLabel: { rotate: 45 } // X轴标签旋转防止重叠
     },
     yAxis: { type: 'value' },
@@ -158,7 +188,11 @@ const initChart = async () => {
       end: 100   // 初始显示范围结束位置:ml-citation{ref="7" data="citationList"}
     }],
     series: [{
-      data: result.map(d => d.value),
+      // data: result.map(d => d.value),
+      data: result.map(item => {
+        const key = Object.keys(item)[0]; // 获取当前元素的key
+        return item[key][0][topic.value]; // 提取value数组中第一个对象的属性
+      }),
       type: 'line',
       smooth: true,
       areaStyle: {} // 显示区域填充
@@ -186,7 +220,9 @@ onMounted(async () => {
     topic.value = specs.value[0].identifier
     topicName.value = specs.value[0].modelName
   })
-  await initChart()
+  debugger
+  await renderChart(getChart(dateRange.value))
+
 
 })
 </script>