统计分析

ui/dasadmin/src/views/backend/statAnalysis/trendAnalysis.vue

@@ -111,6 +111,7 @@ const statAnalysisSelect = reactive({
     attributeCode: '',
     interval: '',
     time: '',
+    unit: '',
 })
 const getFormattedDate = (offset: number) => {
     const date = new Date()
@@ -123,7 +124,7 @@ const getFormattedDate = (offset: number) => {
 const times: any = reactive([[getFormattedDate(0) + ' 00:00:00', getFormattedDate(0) + ' 23:59:59']])
 const addTime = () => {
     if (times.length < 4) {
-        times.push([getFormattedDate(times.length) + ' 00:00:00', getFormattedDate(times.length) + ' 23:59:59'])
+        times.push([getFormattedDate(-times.length) + ' 00:00:00', getFormattedDate(-times.length) + ' 23:59:59'])
         customName.push(statAnalysisSelect.attributes + String(times.length))
     } else {
         ElMessage.info('最多可添加四条查询曲线！')
@@ -161,21 +162,27 @@ const attributesChange = () => {
 const deviceIdChange = () => {
     statAnalysisSelect.attributes = ''
     statAnalysisSelect.attributeCode = ''
+    statAnalysisSelect.unit = ''
 }
 
 const showMeasure = ref(false)
 const selectedAttrRow: any = ref({
     attributeCode: '',
     attributeName: '',
+    unit: '',
 })
 const handleRadioChange = (value: any) => {
-    const { attributeCode, attributeName } = { ...value }
+    console.log('🚀 ~ handleRadioChange ~ value:', value)
+    const { attributeCode, attributeName, unit } = { ...value }
     selectedAttrRow.attributeCode = attributeCode
     selectedAttrRow.attributeName = attributeName
+    selectedAttrRow.unit = unit
 }
 const selectstatAnalysisAttributes = () => {
     statAnalysisSelect.attributes = selectedAttrRow.attributeName
+    console.log('🚀 ~ selectstatAnalysisAttributes ~ selectedAttrRow:', selectedAttrRow)
     statAnalysisSelect.attributeCode = selectedAttrRow.attributeCode
+    statAnalysisSelect.unit = selectedAttrRow.unit
     showMeasure.value = false
     customName.forEach((item: any, index: number, arr: any) => {
         arr[index] = statAnalysisSelect.attributes + String(index + 1)
@@ -343,6 +350,8 @@ const calculate: any = ref([{ max: '', min: '', average: '' }])
 var xDatas: any = []
 const isLoading = ref(false)
 const statAnalysisOperate = () => {
+    console.log('🚀 ~ findTime ~ times:', times)
+
     const findTime = times.filter((item: any) => {
         return Array.isArray(item)
     })
@@ -355,6 +364,9 @@ const statAnalysisOperate = () => {
     } else if (!findTime.length) {
         ElMessage.info('请选择查询时间！')
         return
+    } else if (hasDuplicateArrays(times)) {
+        ElMessage.info('存在相同的查询时间！')
+        return
     }
     isLoading.value = true
     option.series = []
@@ -363,8 +375,10 @@ const statAnalysisOperate = () => {
     calculate.value = []
     chart.value.setOption(option, { notMerge: true })
     const promises: any = []
+
     times.forEach((time: any, index: number) => {
-        if (time[0] && time[1]) {
+        console.log('🚀 ~ times.forEach ~ time:', time)
+        if (time && time[0] && time[1]) {
             const requestData = {
                 devices: [
                     {
@@ -415,7 +429,6 @@ const historyDataReq = (promises: any) => {
                 const fillData = fillMissingData(alltimes, resData)
                 const xData = fillData['times']
                 const yData = fillData['values']
-                // calculate.value[index] = calculateStats(resData['values'])
                 xDatas.push({
                     series: String(customName[index]),
                     data: xData,
@@ -428,7 +441,7 @@ const historyDataReq = (promises: any) => {
                             .map((item: any) => {
                                 const matchData = xDatas.filter((x: any) => x.series == item.seriesName)
                                 const x = timestampToTime(matchData[0]['data'][item.dataIndex])
-                                return `${item.marker}${item.seriesName} (${x}): ${item.data}`
+                                return `${item.marker}${item.seriesName} (${x}): ${item.data}${statAnalysisSelect.unit}`
                             })
                             .join('<br/>')
                     },
@@ -484,17 +497,16 @@ const statAnalysisExport = () => {
     })
 }
 
-function calculateStats(numbers: any) {
+const hasDuplicateArrays = (arr: any) => {
-    const max = Math.max(...numbers)
+    const seen = new Set()
-    const min = Math.min(...numbers)
+    for (let subArray of arr) {
-    const sum = numbers.reduce((acc: number, current: number) => acc + current, 0)
+        const subArrayStr = JSON.stringify(subArray)
-    const average = sum / numbers.length
+        if (seen.has(subArrayStr)) {
-
+            return true
-    return {
+        }
-        max: max.toFixed(2),
+        seen.add(subArrayStr)
-        min: min.toFixed(2),
-        average: average.toFixed(2),
     }
+    return false
 }
 
 const getTimestamps = (start: any, end: any, interval: any) => {

ui/dasadmin/src/views/backend/statAnalysis/trendComparison.vue

@@ -20,7 +20,7 @@
                         <el-option v-for="v in statAnalysisSelectOptions.interval" :key="v.value" :label="v.label" :value="v.value"></el-option>
                     </el-select>
                 </div>
-                <el-button class="addline" type="primary" :icon="Plus" @click="addDevice()"> 增加</el-button>
+                <el-button type="primary" :icon="Crop" class="addline" @click="openMeasure">测点选择</el-button>
             </div>
             <div class="topRight">
                 <el-button type="primary" :loading="isLoading" @click="statAnalysisOperate()">{{ t('statAnalysis.search') }}</el-button>
@@ -28,69 +28,82 @@
             </div>
         </el-header>
         <div class="main">
-            <div class="left">
+            <div
-                <div class="timeColumns">
+                ref="chartContainer"
-                    <div class="deviceColums">
+                style="height: calc(100% - 140px); width: calc(100% - 60px); border: 1px solid rgb(217, 217, 217); margin: 40px"
-                        <div class="moduleRow" v-for="(deviceId, index) in statAnalysisDeviceId" :key="index">
+            ></div>
-                            <div class="item">
-                                <el-icon v-show="index !== 0" class="removeModule" @click="switchDevice(index)">
-                                    <Close />
-                                </el-icon>
-                                <div class="selectPart">
-                                    <span>名称</span>
-                                    <el-input v-model="customName[index]" class="customName"></el-input>
-                                    <span>{{ t('statAnalysis.deviceId') }}</span>
-                                    <el-select
-                                        v-model="statAnalysisDeviceId[index]"
-                                        @change="deviceIdChange(index)"
-                                        :placeholder="'请选择' + t('statAnalysis.deviceId')"
-                                        class="statAnalysisSelect"
-                                    >
-                                        <el-option
-                                            v-for="v in statAnalysisSelectOptions.deviceId"
-                                            :key="v.value"
-                                            :label="v.label"
-                                            :value="v.value"
-                                        ></el-option>
-                                    </el-select>
-                                </div>
-                                <div class="selectPart">
-                                    <span>{{ t('statAnalysis.attributes') }}</span>
-                                    <el-input
-                                        class="statAnalysisSelectattributes"
-                                        v-model="statAnalysisAttributes[index]"
-                                        @click="selectAtteibutes(index)"
-                                        :placeholder="'请选择' + t('statAnalysis.attributes')"
-                                    ></el-input>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="right">
-                <div
-                    ref="chartContainer"
-                    style="
-                        position: absolute;
-                        top: 127px;
-                        width: calc(100% - 430px);
-                        height: calc(100% - 187px);
-                        border: 1px solid rgb(217, 217, 217);
-                        margin: 30px 0;
-                    "
-                ></div>
-            </div>
         </div>
 
-        <el-dialog v-model="showMeasure" title="测点名称" :width="800">
+        <el-dialog v-model="showMeasure" title="选择测点" width="1200" top="0">
-            <template #header>
-                <div class="measureSlotHeader">
-                    <span style="font-size: 20px">测点名称</span>
-                </div>
-            </template>
             <div class="measureSlot">
-                <MeasurementPage :show="showMeasure" :iotModelId="iotModelId" :irn="irn" @handleRadioChange="handleRadioChange"></MeasurementPage>
+                <el-row :gutter="20">
+                    <el-col :span="8">
+                        <div class="col">
+                            <div class="transferHeader">
+                                <span class="transferTitle">风机列表</span>
+                            </div>
+                            <div class="mainPart">
+                                <el-table
+                                    :data="tableDataLeft"
+                                    v-model:selection="selectedLeft"
+                                    @selection-change="handleSelectionChange"
+                                    row-key="id"
+                                >
+                                    <el-table-column type="selection" width="55" />
+                                    <el-table-column prop="name" label="测点名称" width="120" />
+                                </el-table>
+                                <el-table
+                                    :data="tableDataRight"
+                                    v-model:selection="selectedRight"
+                                    @selection-change="handleSelectionChange1"
+                                    row-key="id"
+                                >
+                                    <el-table-column type="selection" width="55" />
+                                    <el-table-column prop="name" label="测点名称" width="120" />
+                                </el-table>
+                            </div>
+                        </div>
+                    </el-col>
+                    <el-col :span="16">
+                        <div class="col">
+                            <div class="transferHeader">
+                                <span class="transferTitle">可添加的测点</span>
+                                <el-radio-group v-model="radioActiveName" @change="typeChange">
+                                    <el-radio :value="138">模拟量</el-radio>
+                                    <el-radio :value="199">计算量</el-radio>
+                                    <el-radio :value="140">状态量</el-radio>
+                                </el-radio-group>
+                            </div>
+                            <div class="mainPart">
+                                <el-table
+                                    :data="attrTableData"
+                                    ref="attributeTableRef"
+                                    @select="selectTable"
+                                    @selectAll="selectAllTable"
+                                    row-key="id"
+                                    class="attrtable"
+                                >
+                                    <el-table-column type="selection" width="55" />
+                                    <el-table-column prop="attributeName" label="属性名称" />
+                                    <el-table-column prop="attributeCode" label="属性编码" />
+                                    <el-table-column prop="subSystem" label="子系统" />
+                                </el-table>
+                            </div>
+                            <div style="display: flex; justify-content: right">
+                                <el-pagination
+                                    v-model:current-page="pageSetting.current"
+                                    v-model:page-size="pageSetting.pageSize"
+                                    :total="pageSetting.total"
+                                    :page-sizes="pageSetting.pageSizes"
+                                    background
+                                    :pager-count="5"
+                                    layout="prev, pager, next,sizes"
+                                    @change="getcurrentPage"
+                                ></el-pagination>
+                            </div>
+                        </div>
+                    </el-col>
+                </el-row>
             </div>
             <template #footer>
                 <span class="dialog-footer">
@@ -106,15 +119,13 @@ import { markRaw, reactive, ref, watch, nextTick, onMounted, computed } from 'vu
 import { useI18n } from 'vue-i18n'
 import { queryWindTurbinesPages, historyReq, trendContrastExport } from '/@/api/backend/statAnalysis/request'
 import { ElMessage, ElMenu } from 'element-plus'
-import { DArrowRight, Plus, Delete, Close } from '@element-plus/icons-vue'
+import { DArrowRight, Plus, Crop, Close } from '@element-plus/icons-vue'
-import MeasurementPage from './analysisAttributes.vue'
 import * as echarts from 'echarts'
+import { getModelAttributeListReq } from '/@/api/backend/deviceModel/request'
+
 const { t } = useI18n()
 
 const statAnalysisInterval = ref('')
-const statAnalysisDeviceId = reactive([''])
-const statAnalysisAttributes = reactive([''])
-const statAnalysisAttributeCode: any = reactive([])
 const statAnalysisSelectOptions: any = reactive({
     interval: [
         { label: '五分钟', value: '5m' },
@@ -123,7 +134,6 @@ const statAnalysisSelectOptions: any = reactive({
         { label: '一天', value: '1d' },
         { label: '原始', value: 'NONE' },
     ],
-    deviceId: [],
 })
 const getFormattedDate = (offset: number) => {
     const date = new Date()
@@ -136,61 +146,12 @@ const getFormattedDate = (offset: number) => {
 }
 
 const statAnalysisTime = ref([getFormattedDate(0) + ' 00:00:00', getFormattedDate(0) + ' 23:59:59'])
-const openModelIndex = ref(0)
-const addDevice = () => {
-    statAnalysisDeviceId.push('')
-    statAnalysisAttributes.push('')
-    customName.push(String(statAnalysisDeviceId.length))
-}
-const switchDevice = (index: number) => {
-    statAnalysisDeviceId.splice(index, 1)
-    statAnalysisAttributes.splice(index, 1)
-    statAnalysisAttributeCode.splice(index, 1)
-    customName.splice(index, 1)
-    calculate.value.splice(index, 1)
-}
-
-const iotModelId = ref('')
-const irn = ref('')
-const selectAtteibutes = (index: number) => {
-    const row = statAnalysisSelectOptions.deviceId.filter((item: any) => {
-        return item.value == statAnalysisDeviceId[index]
-    })
-    if (row.length) {
-        iotModelId.value = row[0].iotModelId
-        irn.value = statAnalysisAttributeCode[index] || ''
-        showMeasure.value = true
-        openModelIndex.value = index
-    } else {
-        ElMessage.warning('请选择风机！！')
-    }
-}
-
-const deviceIdChange = (index: number) => {
-    statAnalysisAttributeCode[index] = statAnalysisAttributeCode[index - 1] || ''
-    statAnalysisAttributes[index] = statAnalysisAttributes[index - 1] || ''
-    customName[index] = statAnalysisAttributes[index] + String(index + 1)
-}
 
 const showMeasure = ref(false)
-const selectedAttrRow = reactive({
-    attributeCode: '',
-    attributeName: '',
-})
-const handleRadioChange = (value: any) => {
-    const { attributeCode, attributeName } = { ...value }
-    selectedAttrRow.attributeCode = attributeCode
-    selectedAttrRow.attributeName = attributeName
-}
-const selectstatAnalysisAttributes = () => {
-    statAnalysisAttributes[openModelIndex.value] = selectedAttrRow.attributeName
-    statAnalysisAttributeCode[openModelIndex.value] = selectedAttrRow.attributeCode
-    showMeasure.value = false
-    customName.forEach((item: any, index: number, arr: any) => {
-        arr[openModelIndex.value] = statAnalysisAttributes[openModelIndex.value] + String(index + 1)
-    })
-}
 
+const selectstatAnalysisAttributes = () => {
+    showMeasure.value = false
+}
 const chartContainer = ref<HTMLElement | null>(null)
 
 const option: any = {
@@ -215,7 +176,6 @@ const option: any = {
     grid: {},
 }
 
-const customName = reactive(['1'])
 const chart: any = ref(null)
 onMounted(() => {
     if (chartContainer.value) {
@@ -236,21 +196,108 @@ onMounted(() => {
         })
     }
     queryWindTurbines()
+    getCompleteData()
 })
+const tableDataLeft = ref([])
+const tableDataRight = ref([])
+
+const selectedLeft = ref([])
+const selectedRight = ref([])
+
+const radioActiveName = ref(138)
+const attributeTableRef = ref()
+const typeChange = () => {
+    getCompleteData()
+}
 const queryWindTurbines = () => {
     queryWindTurbinesPages().then((res) => {
         if (res.code == 200) {
-            statAnalysisSelectOptions.deviceId = res.data.map((item: any) => {
+            const resData = res.data
-                return {
+            const middleIndex = Math.ceil(resData.length / 2)
-                    value: item.irn,
+            tableDataLeft.value = resData.slice(0, middleIndex)
-                    label: item.name ?? '-',
+            tableDataRight.value = resData.slice(middleIndex)
-                    iotModelId: item.modelId,
-                }
-            })
         }
     })
 }
 
+const pageSetting = reactive({
+    current: 1,
+    pageSize: 20,
+    total: 0,
+    pageSizes: [20, 50, 100],
+})
+
+const getcurrentPage = () => {
+    getCompleteData()
+}
+
+const getCompleteData = () => {
+    const requestData: any = {
+        iotModelId: '',
+        pageNum: pageSetting.current,
+        pageSize: pageSetting.pageSize,
+        attributeType: radioActiveName.value,
+    }
+    getModelAttributeListReq(requestData)
+        .then((res: any) => {
+            if (res.rows && res.rows.length > 0) {
+                attrTableData.value = res.rows
+                pageSetting.total = res.total
+                nextTick(() => {
+                    initSelect()
+                })
+            } else {
+                if (res.rows && res.rows.length === 0) {
+                    attrTableData.value = []
+                } else {
+                    ElMessage.error(res.msg)
+                }
+            }
+        })
+        .catch((err) => {
+            ElMessage.error(err?.response?.data?.msg ?? '查询失败')
+        })
+}
+
+const initSelect = () => {
+    const defaultCode = multipleSelection.value.map((item: any) => item.attributeCode)
+    const row = attrTableData.value.filter((item: any) => defaultCode.includes(item.attributeCode))
+    if (row.length === 0) return
+    row.forEach((item) => {
+        attributeTableRef.value?.toggleRowSelection(item, true)
+    })
+}
+
+const multipleSelection: any = ref([])
+
+const selectTable = (section: any) => {
+    const defaultCode = multipleSelection.value.map((item: any) => item.attributeCode)
+    const addSection = section
+        .filter((item: any) => !defaultCode.includes(item.attributeCode))
+        .map((item: any) => {
+            return {
+                attributeName: item.attributeName,
+                attributeCode: item.attributeCode,
+                unit: item.unit,
+            }
+        })
+    multipleSelection.value = [...multipleSelection.value, ...addSection]
+}
+const selectAllTable = (section: any) => {
+    const defaultCode = multipleSelection.value.map((item: any) => item.attributeCode)
+    const addSection = section
+        .filter((item: any) => !defaultCode.includes(item.attributeCode))
+        .map((item: any) => {
+            return {
+                attributeName: item.attributeName,
+                attributeCode: item.attributeCode,
+                unit: item.unit,
+            }
+        })
+    multipleSelection.value = [...multipleSelection.value, ...addSection]
+}
+const attrTableData = ref([])
+
 window.onresize = () => {
     chart.value.resize()
 }
@@ -315,22 +362,41 @@ const getDateRange = (type: 'week' | 'month') => {
     }
 }
 
+const openMeasure = () => {
+    showMeasure.value = true
+}
+
+const handleSelectionChange1 = (val: any) => {
+    selectedRight.value = val
+}
+const handleSelectionChange = (val: any) => {
+    selectedLeft.value = val
+}
 const isLoading = ref(false)
 
-const statAnalysisOperate = () => {
+function generateDeviceAttributes(devices: any, attributes: any) {
-    const findCode = statAnalysisAttributeCode.filter((item: any) => {
+    const attributeCodes = attributes.map((attr: any) => attr.attributeCode)
-        return item.length
+    return devices.map((device: any) => {
+        return {
+            deviceId: device.irn,
+            attributes: attributeCodes,
+        }
     })
+}
+
+const statAnalysisOperate = () => {
+    const allDevices = [...selectedLeft.value, ...selectedRight.value]
     if (!statAnalysisTime.value) {
         ElMessage.info('请选择查询时间！')
         return
-    } else if (!statAnalysisDeviceId.length) {
+    } else if (!allDevices.length) {
         ElMessage.info('请选择风机！')
         return
-    } else if (!findCode.length) {
+    } else if (!multipleSelection.value.length) {
         ElMessage.info('请选择测点名称！')
         return
     }
+
     isLoading.value = true
     option.series = []
     option.legend.data = []
@@ -346,39 +412,42 @@ const historyDataReq = (data: any) => {
             if (res.code == 200) {
                 const resData = res.data
                 const deviceIdKeys = Object.keys(resData)
-                const attributeKeys = []
                 if (deviceIdKeys.length) {
                     deviceIdKeys.forEach((item) => {
-                        const indexList1 = findAllOccurrences(statAnalysisDeviceId, item)
+                        const deviceRow = [...selectedLeft.value, ...selectedRight.value].filter((value: any) => value.irn === item)
-                        Object.keys(resData[item]).forEach((value) => {
+                        const deviceName = deviceRow[0]['name']
-                            const indexList2 = findAllOccurrences(statAnalysisAttributeCode, value)
+                        Object.keys(resData[item]).forEach((val) => {
-                            const dataIndex = getCommonElements(indexList1, indexList2)[0]
+                            const attRow = multipleSelection.value.filter((value: any) => value.attributeCode === val)
-                            const historyData = resData[item][value]
+                            const attName = attRow[0]['attributeName']
+                            const unit = attRow[0]['unit']
+                            const historyData = resData[item][val]
                             const xData = historyData['times']
                             const yData = historyData['values']
                             if (!yData.length) {
-                                ElMessage.info(`${customName[dataIndex]}数据为空`)
+                                ElMessage.info(`${deviceName + attName}数据为空`)
                                 return
                             }
                             const seriesData = {
-                                name: customName[dataIndex],
+                                name: deviceName + attName,
                                 type: 'line',
-                                data: yData,
+                                data: yData.map((value: any) => ({
+                                    value: value,
+                                    unit: unit, // 将单位添加到每个数据点
+                                })),
                                 animation: false,
                             }
-                            // calculate.value[dataIndex] = calculateStats(yData)
                             option.tooltip = {
                                 show: true,
                                 trigger: 'axis',
                                 formatter: function (params: any) {
                                     return params
                                         .map((item: any) => {
-                                            return `${item.marker} ${item.seriesName} (${timestampToTime(xData[item.dataIndex])}): ${item.data}`
+                                            return `${item.marker} ${item.seriesName} (${timestampToTime(xData[item.dataIndex])}):  ${item.value} ${item.data.unit}`
                                         })
                                         .join('<br/>')
                                 },
                             }
-                            option.legend.data.push(customName[dataIndex])
+                            option.legend.data.push(deviceName + attName)
                             option.xAxis.data = xData.map((item: any) => timestampToTime(item))
                             option.series.push(seriesData)
                             chart.value.setOption(option)
@@ -397,15 +466,7 @@ const historyDataReq = (data: any) => {
         })
 }
 
-const findAllOccurrences = (arr: any, target: any) => {
-    return arr.map((value: any, index: number) => (value === target ? index : -1)).filter((index: number) => index !== -1)
-}
-
-const getCommonElements = (arr1: any, arr2: any) => {
-    return arr1.filter((item: any) => arr2.some((x: any) => x === item))
-}
 const statAnalysisExport = () => {
-    console.log('🚀 ~ trendContrastExport ~ getRequestData():', getRequestData())
     trendContrastExport(getRequestData()).then((res: any) => {
         const downloadUrl = window.URL.createObjectURL(res)
         const a = document.createElement('a')
@@ -419,36 +480,18 @@ const statAnalysisExport = () => {
 }
 
 const getRequestData = () => {
-    const devices = statAnalysisDeviceId.reduce((deviceId: any, curr, index) => {
+    const devices = generateDeviceAttributes([...selectedLeft.value, ...selectedRight.value], multipleSelection.value)
-        const existing: any = deviceId.find((item: any) => item.deviceId === curr)
-        if (existing) {
-            existing.attributes.push(statAnalysisAttributeCode[index])
-        } else {
-            deviceId.push({ deviceId: curr, attributes: [statAnalysisAttributeCode[index]] })
-        }
-        return deviceId
-    }, [])
-    console.log(devices)
     const requestData = {
         devices: devices,
         interval: statAnalysisInterval.value || '5m',
         startTime: new Date(statAnalysisTime.value[0]).getTime(),
         endTime: new Date(statAnalysisTime.value[1]).getTime(),
     }
+    console.log('🚀 ~ getRequestData ~ requestData:', requestData)
+
     return requestData
 }
-function calculateStats(numbers: any) {
-    const max = Math.max(...numbers)
-    const min = Math.min(...numbers)
-    const sum = numbers.reduce((acc: number, current: number) => acc + current, 0)
-    const average = sum / numbers.length
 
-    return {
-        max: max.toFixed(2),
-        min: min.toFixed(2),
-        average: average.toFixed(2),
-    }
-}
 const timestampToTime = (timestamp: any) => {
     timestamp = timestamp ? timestamp : null
     let date = new Date(timestamp)
@@ -588,5 +631,31 @@ const timestampToTime = (timestamp: any) => {
         width: 100%;
         height: 300px;
     }
+    .measureSlot {
+        display: flex;
+        .col {
+            border: 1px solid #e1edf6;
+            border-radius: 6px;
+            .transferHeader {
+                height: 40px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                padding: 0 10px;
+                color: #333333;
+                background: #f7f9fc;
+                border-bottom: 1px solid #e1edf6;
+                border-radius: 6px 6px 0 0;
+            }
+
+            .mainPart {
+                display: flex;
+                padding: 10px;
+                .attrtable {
+                    height: 690px;
+                }
+            }
+        }
+    }
 }
 </style>