设备监控问题修改

src/views/govern/device/control/tabs/trend.vue

@@ -2,6 +2,9 @@
     <div>
         <div class="history_header">
             <el-form :model="searchForm" class="history_select" id="history_select">
+                <el-form-item>
+                    <DatePicker ref="datePickerRef"></DatePicker>
+                </el-form-item>
                 <el-form-item label="统计指标" label-width="80px">
                     <el-select
                         multiple
@@ -36,19 +39,9 @@
                         </el-select>
                     </el-form-item>
                 </div>
-                <el-form-item label="值类型" label-width="80px">
-                    <el-select v-model="searchForm.type" placeholder="请选择值类型">
-                        <el-option
-                            v-for="item in typeOptions"
-                            :key="item.id"
-                            :label="item.name"
-                            :value="item.id"
-                        ></el-option>
-                    </el-select>
-                </el-form-item>
             </el-form>
             <div class="history_searchBtn">
-                <el-button type="primary" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
+                <el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
             </div>
         </div>
         <div class="history_chart" v-loading="loading">
@@ -71,15 +64,20 @@ import * as echarts from 'echarts'
 import { isNonNullChain } from 'typescript'
 import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
 import { read, writeFile, utils } from 'xlsx'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
 import { getTabsDataByType } from '@/api/cs-device-boot/EquipmentDelivery'
+import DatePicker from '@/components/form/datePicker/index.vue'
 const dictData = useDictData()
 defineOptions({
-    name: 'govern/device/manage'
+    name: 'govern/device/control'
 })
 //电压等级
 const voltageLevelList = dictData.getBasicData('Dev_Voltage')
 //接线方式
 const volConTypeList = dictData.getBasicData('Dev_Connect')
+
 //值类型
 const pageHeight = mainHeight(20)
 const loading = ref(true)
@@ -105,7 +103,9 @@ const typeOptions = [
 searchForm.value = {
     index: [],
     type: typeOptions[0].id,
-    count: []
+    count: [],
+    searchBeginTime: '',
+    searchEndTime: ''
 }
 //统计指标
 const indexOptions: any = ref([])
@@ -137,12 +137,13 @@ const range = (start: any, end: any, step: any) => {
 }
 //获取请求趋势数据参数
 const trendRequestData = ref()
-const getTrendRequest = async (val: any) => {
-    console.log(val, '拿到的请求参数')
+const getTrendRequest = (val: any) => {
     trendRequestData.value = val
     init()
 }
 //初始化趋势图
+const headerRef = ref()
+const datePickerRef = ref()
 const init = async () => {
     loading.value = true
     // 选择指标的时候切换legend内容和data数据
@@ -193,14 +194,15 @@ const init = async () => {
     let obj = {
         ...trendRequestData.value,
         list: lists,
-        valueType: searchForm.value.type
+        valueType: searchForm.value.type,
+        searchBeginTime: datePickerRef.value && datePickerRef.value.timeValue[0],
+        searchEndTime: datePickerRef.value && datePickerRef.value.timeValue[0]
     }
 
     if (obj.devId && obj.list.length != 0) {
         try {
             await getTabsDataByType(obj)
-                .then(res => {
-                    console.log(res, '打印趋势图')
+                .then((res: any) => {
                     if (res.code == 'A0000') {
                         historyDataList.value = res.data
                         echartsData.value = null
@@ -220,17 +222,7 @@ const init = async () => {
                             }
                         })
                         xAxis = timeList.sort((a: any, b: any) => {
-                            return (
-                                a.replace('-', '').replace('-', '').replace(' ', '').replace(':', '').replace(':', '') -
-                                0 -
-                                (b
-                                    .replace('-', '')
-                                    .replace('-', '')
-                                    .replace(' ', '')
-                                    .replace(':', '')
-                                    .replace(':', '') -
-                                    0)
-                            )
+                            return new Date(a).getTime() - new Date(b).getTime()
                         })
                         echartsData.value = {
                             options: {
@@ -279,7 +271,7 @@ const init = async () => {
                                     itemGap: 15,
                                     type: 'scroll', // 开启滚动分页
                                     // orient: 'vertical', // 垂直排列
-                                    right: '13%', // 位置调整
+                                    right: '3%', // 位置调整
                                     top: 0,
                                     bottom: 20,
                                     width: 400,
@@ -287,9 +279,9 @@ const init = async () => {
                                 },
                                 grid: {
                                     left: '3%',
-                                    right: '4%',
+                                    right: '5%',
                                     bottom: '5%',
-                                    top: '5%',
+                                    top: '8%',
                                     containLabel: true
                                 },
                                 xAxis: [
@@ -384,7 +376,6 @@ const init = async () => {
                                                 type: 'solid'
                                             }
                                         }
-                                        // yAxisIndex: index + 1
                                     })
                                 }
                             })
@@ -663,15 +654,15 @@ defineExpose({ getTrendRequest })
     display: flex;
     // flex-wrap: wrap;
     #history_select {
-        width: 95%;
+        width: 100%;
         display: flex;
-        justify-content: flex-start;
-        overflow-x: auto;
-        height: 45px;
-        // flex-wrap: wrap;
+        // justify-content: flex-start;
+        // overflow-x: auto;
+        height: auto;
+        flex-wrap: wrap;
         .el-form-item {
-            flex: none;
-            max-width: 380px !important;
+            flex: none !important;
+            // max-width: 380px;
         }
         .el-select {
             margin-right: 10px;
@@ -693,7 +684,7 @@ defineExpose({ getTrendRequest })
 
 .history_chart {
     width: 100%;
-    height: calc(100vh - 400px) !important;
+    height: calc(100vh - 450px) !important;
     // flex: 1;
     margin-top: 10px;
 }