方案数据-历史趋势添加值类型

src/views/govern/device/planData/index.vue

@@ -20,8 +20,12 @@
                     <p>测试项信息</p>
                 </div>
                 <el-tabs v-model="activeName" type="border-card" @click="handleClickTabs">
-                    <el-tab-pane v-for="(item, index) in deviceData.records" :label="item.itemName" :name="item.id"
+                    <el-tab-pane
-                        :key="index">
+                        v-for="(item, index) in deviceData.records"
+                        :label="item.itemName"
+                        :name="item.id"
+                        :key="index"
+                    >
                         <template #label>
                             <span class="custom-tabs-label">
                                 <el-icon>
@@ -99,10 +103,25 @@
                     <el-form-item label="统计指标" label-width="80px">
                         <!-- multiple
                             :multiple-limit="3" -->
-                        <el-select collapse-tags collapse-tags-tooltip v-model="searchForm.index" placeholder="请选择统计指标"
+                        <el-select
-                            @change="init()">
+                            collapse-tags
-                            <el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
+                            collapse-tags-tooltip
-                                :value="item.id"></el-option>
+                            v-model="searchForm.index"
+                            placeholder="请选择统计指标"
+                            @change="init()"
+                        >
+                            <el-option
+                                v-for="item in indexOptions"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="值类型">
+                        <el-select style="width: 160px !important" v-model="searchForm.dataLevel">
+                            <el-option value="Primary" label="一次值"></el-option>
+                            <el-option value="Secondary" label="二次值"></el-option>
                         </el-select>
                     </el-form-item>
                     <!-- {{ countData }} -->
@@ -110,17 +129,30 @@
                         <!-- :label="item.name + '谐波次数'"  label-width="180px"-->
                         <el-form-item label="谐波次数" v-if="item.countOptions.length != 0">
                             <!-- multiple -->
-                            <el-select v-model="item.count" collapse-tags collapse-tags-tooltip placeholder="请选择谐波次数"
+                            <el-select
-                                style="width: 100px">
+                                v-model="item.count"
-                                <el-option v-for="vv in item.countOptions" :key="vv" :label="vv"
+                                collapse-tags
-                                    :value="vv"></el-option>
+                                collapse-tags-tooltip
+                                placeholder="请选择谐波次数"
+                                style="width: 100px"
+                            >
+                                <el-option
+                                    v-for="vv in item.countOptions"
+                                    :key="vv"
+                                    :label="vv"
+                                    :value="vv"
+                                ></el-option>
                             </el-select>
                         </el-form-item>
                     </div>
-                    <el-form-item label="值类型" label-width="80px">
+                    <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"
+                            <el-option
-                                :value="item.id"></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>
@@ -184,6 +216,7 @@ const typeOptions = [
 ]
 searchForm.value = {
     index: '',
+    dataLevel: 'Primary',
     type: typeOptions[0].id,
     count: []
 }
@@ -261,10 +294,10 @@ const handleOpen = (val: any) => {
         ids = deviceData.value.records.find((item: any) => {
             return item.id == activeName.value
         })?.id
-        dialogRef.value.detailsType("table")
+        dialogRef.value.detailsType('table')
     } else {
         ids = ''
-        dialogRef.value.detailsType("")
+        dialogRef.value.detailsType('')
     }
     dialogRef.value.open(val, ids)
 }
@@ -343,6 +376,7 @@ const init = () => {
         let obj = {
             devId: historyDevId.value,
             list: lists,
+            dataLevel:searchForm.value.dataLevel,
             valueType: searchForm.value.type
         }
 
@@ -366,6 +400,9 @@ const init = () => {
                     xAxis = timeList.sort((a: any, b: any) => {
                         return new Date(a).getTime() - new Date(b).getTime()
                     })
+                    // xAxis.map((item:any)=>{
+
+                    // })
                     echartsData.value = {
                         options: {
                             title: [
@@ -379,20 +416,11 @@ const init = () => {
                                 feature: {
                                     saveAsImage: {
                                         title: '保存'
-                                    },
+                                    }
                                     // dataView: { readOnly: false },
                                     // }
                                 }
                             },
-                            tooltip: {
-                                trigger: 'axis',
-                                axisPointer: {
-                                    type: 'cross',
-                                    crossStyle: {
-                                        color: '#999'
-                                    }
-                                }
-                            },
                             // tooltip: {
                             //     trigger: 'axis',
                             //     axisPointer: {
@@ -428,6 +456,23 @@ const init = () => {
                                 width: 400,
                                 height: 50
                             },
+                            tooltip: {
+                                trigger: 'axis',
+                                textStyle: {
+                                    color: '#fff',
+                                    fontStyle: 'normal',
+                                    opacity: 0.35,
+                                    fontSize: 14
+                                },
+                                backgroundColor: 'rgba(0,0,0,0.35)',
+                                borderWidth: 0,
+                                axisPointer: {
+                                    type: 'cross',
+                                    crossStyle: {
+                                        color: '#999'
+                                    }
+                                }
+                            },
                             // grid: {
                             //     left: historyDataList.value.length != 0 ? '5%' : '1%',
                             //     right: '5%',
@@ -437,7 +482,7 @@ const init = () => {
                             // },
                             xAxis: [
                                 {
-                                    type: 'category',
+                                    type: 'time',//category
                                     name: '\n\n\n\n\n时间',
                                     axisLabel: {
                                         color: '#A9AEB2',