map/ui/dasadmin/src/views/backend/equipment/airBlower/index.vue

<template>
    <div class="airBlower">
        <el-container class="containerPart">
            <el-header class="headerPart">
                <div class="headerLeft">
                    <div class="selectPart">
                        <span>{{ t('airBlower.status') }}</span>
                        <el-select
                            v-model="airBlowerSelect.iturbineoperationmode"
                            @change="selectAirBlower('iturbineoperationmode')"
                            :placeholder="'请选择' + t('airBlower.status')"
                            class="airBlowerSelect"
                        >
                            <el-option
                                v-for="v in airBlowerSelectOptions.iturbineoperationmode"
                                :key="v.value"
                                :label="v.label"
                                :value="v.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="selectPart">
                        <span>{{ t('airBlower.feeder') }}</span>
                        <el-select
                            v-model="airBlowerSelect.belongLine"
                            @change="selectAirBlower('belongLine')"
                            :placeholder="'请选择' + t('airBlower.feeder')"
                            class="airBlowerSelect"
                        >
                            <el-option v-for="v in airBlowerSelectOptions.belongLine" :key="v.value" :label="v.value" :value="v.value"></el-option>
                        </el-select>
                    </div>
                    <div class="selectPart">
                        <span>自动更新：</span>
                        <el-switch
                            v-model="autoUpdate"
                            class="ml-2"
                            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        ></el-switch>
                    </div>
                </div>
                <div class="headerCenter">
                    <el-button type="primary" :icon="Crop" class="defaultBtn" @click="openMeasure">测点选择</el-button>
                    <el-button style="color: rgb(0, 100, 170)" :icon="Download" class="defaultBtn" @click="downFun">数据导出</el-button>
                </div>
                <div class="headerRight">
                    <el-popconfirm title="确认启动么？" @confirm="airBlowerOperate('setTurbineFastStart')">
                        <template #reference>
                            <el-button type="primary">{{ t('airBlower.start') }}</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm title="确认停机么？" @confirm="airBlowerOperate('setTurbineStop')">
                        <template #reference>
                            <el-button style="color: #0064aa">{{ t('airBlower.stop') }}</el-button>
                        </template>
                    </el-popconfirm>
                    <el-popconfirm title="确认复位么？" @confirm="airBlowerOperate('setTurbineResetStatusCode')">
                        <template #reference>
                            <el-button style="color: #0064aa">{{ t('airBlower.reset') }}</el-button>
                        </template>
                    </el-popconfirm>
                    <!-- <el-popconfirm title="确认风机对时么？">
                        <template #reference>
                            <el-button style="color: #0064aa">{{ t('airBlower.verify') }}</el-button>
                        </template>
                    </el-popconfirm> -->
                </div>
            </el-header>
            <el-main class="mainPart">
                <el-table
                    ref="tableRef"
                    :column="tableColumn"
                    :data="tableData"
                    :header-row-style="tableHaderStyle"
                    @selectionChange="selectTable"
                    class="tableClass"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <template v-for="item in tableColumn" :key="item.prop">
                        <el-table-column
                            v-if="!item.custom"
                            :prop="item.prop"
                            :label="item.label"
                            :align="item.align"
                            :width="item.width"
                            :type="item.type"
                        />
                        <el-table-column v-else :label="item.label" :align="item.align" :width="item.width">
                            <template v-if="item.custom === 'default'" #default="scope">
                                <div v-if="item.prop === 'iturbineoperationmode'">
                                    <el-tag v-if="scope.row.locked === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731">已锁定</el-tag>
                                    <el-tag v-if="scope.row.iturbineoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa"
                                        >并网</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 10" color="rgba(0,160,150,0.20)" style="color: #00a096"
                                        >维护</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 8" color="rgba(255,126,0,0.20)" style="color: #ff7e00"
                                        >限功率运行</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 0" color="rgba(153,153,153,0.20)" style="color: #666666"
                                        >离线</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 16" color="rgba(6,180,41,0.20)" style="color: #06b429"
                                        >启动</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 6" color="rgba(254,55,49,0.20)" style="color: #fe3731"
                                        >正常停机</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
                                        >外部因素导致停机</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 2" color="rgba(254,55,49,0.20)" style="color: #fe3731"
                                        >停机</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 11" color="rgba(255,182,0,0.20)" style="color: #ffb600"
                                        >待机</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 1110" color="rgba(153,153,153,0.20)" style="color: #666666"
                                        >解缆状态</el-tag
                                    >
                                    <el-tag v-if="scope.row.iturbineoperationmode === 1111" color="rgba(254,55,49,0.20)" style="color: #fe3731"
                                        >电网故障停机</el-tag
                                    >
                                </div>
                                <div v-if="item.prop === 'chart'" @click="openLineChart(scope.row)" class="operate">
                                    <div class="chartIcon">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            class="icon"
                                            width="100%"
                                            height="100%"
                                            viewBox="0 0 1024 1024"
                                            version="1.1"
                                        >
                                            {{ scope.row }}
                                            <path
                                                d="M896 896H96a32 32 0 0 1-32-32V224a32 32 0 0 1 64 0v608h768a32 32 0 1 1 0 64zM247.008 640a32 32 0 0 1-20.992-56.192l200.992-174.24a32 32 0 0 1 42.272 0.288l172.128 153.44 229.088-246.304a32 32 0 0 1 46.88 43.616l-250.432 269.216a31.936 31.936 0 0 1-44.704 2.08l-174.56-155.52-179.744 155.84a31.872 31.872 0 0 1-20.928 7.776z"
                                                fill="#00a4ff"
                                            />
                                        </svg>
                                    </div>
                                </div>
                            </template>
                            <template v-if="item.custom === 'header'" #header="scope">
                                <div>{{ scope.column.label.split(' ')[0] }}</div>
                                <div>{{ scope.column.label.split(' ')[1] }}</div>
                            </template>
                            <template v-if="item.custom === 'header'" #default="scope">
                                <div>{{ scope.row[item.prop] }}</div>
                            </template>
                            <template v-if="item.prop === 'name'" #default="scope">
                                <div class="tableColumnClick" @click="openWindTurbine(scope.row)">{{ scope.row[item.prop] }}</div>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
            </el-main>
        </el-container>
    </div>
    <el-dialog v-model="multiTaskVisible" :title="mutiTaskTitle" width="400" :close-on-click-modal="false">
        <el-row v-for="item in mutiTaskList" :key="item.sendData.deviceId">
            <el-col :span="18">
                <div class="mutiTaskName">
                    {{ item.deviceName }}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="mutiTaskStatus">
                    <el-icon style="color: #f56c6c" size="30" v-if="item.loading === 3">
                        <CircleClose />
                    </el-icon>
                    <el-icon style="color: #06b429" size="30" v-if="item.loading === 2">
                        <CircleCheck />
                    </el-icon>
                    <el-icon style="color: #4fa5ff" size="30" class="mutiTaskLoading" v-if="item.loading === 1">
                        <Loading />
                    </el-icon>
                    <div v-if="item.loading === 0">等待发送</div>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
    <el-dialog v-model="selectPointVisible" title="选择测点" width="1000">
        <SelectPoint ref="selectPointDialogRef" :defaultAttr="defaultAttr" :visible="selectPointVisible"></SelectPoint>
        <template #footer>
            <div class="selectPointDialogFooter">
                <el-button type="primary" @click="saveSelectPoint">保存</el-button>
                <el-button @click="selectPointVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="realDataLineChartVisible" title="实时曲线" @close="closeLineChart">
        <RealDataChart :visible="realDataLineChartVisible" :id="clickRowId"></RealDataChart>
    </el-dialog>
</template>

<script setup lang="ts">
import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
import { onUnmounted, reactive, ref, watch, computed, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { getAirBlowerListReq, getBelongLineListReq } from '/@/api/backend/airBlower/request'
import { CircleCheck, CircleClose, Loading, Crop, Download } from '@element-plus/icons-vue'
import { ElMessage, TableInstance, ElPopconfirm } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { getRealTimeState, getCutDecimalsValue } from './utils'
import { sendCommandReq } from '/@/api/backend/control/request'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import { getRealValueListReq } from '/@/api/backend/deviceModel/request'
import SelectPoint from '/@/views/backend/equipment/airBlower/selectPoint.vue'
import RealDataChart from '/@/views/backend/equipment/airBlower/realDataChart.vue'
const router = useRouter()

const { t } = useI18n()

const airBlowerSelect = reactive<SelectTypeObjType>({
    iturbineoperationmode: 987654321,
    belongLine: '全部',
})

const airBlowerSelectOptions = reactive<{ [K in SelectTypeKeyUnionType]: { label: string; value: string | number }[] }>({
    iturbineoperationmode: [
        {
            label: '全部',
            value: 987654321,
        },
        {
            label: '并网',
            value: 20,
        },
        {
            label: '待机',
            value: 11,
        },
        {
            label: '启动',
            value: 16,
        },
        {
            label: '维护',
            value: 10,
        },
        {
            label: '离线',
            value: 0,
        },
        {
            label: '限功率运行',
            value: 8,
        },
        {
            label: '正常停机',
            value: 6,
        },
        {
            label: '外部因素导致停机',
            value: 1,
        },
        {
            label: '停机',
            value: 2,
        },
        {
            label: '解缆状态',
            value: 1110,
        },
        {
            label: '电网故障停机',
            value: 1111,
        },
        {
            label: '安全链停机',
            value: 1112,
        },
    ],
    belongLine: [],
})

const selectAirBlower = (type: SelectTypeKeyUnionType) => {
    if (airBlowerSelect.belongLine === '全部' && airBlowerSelect.iturbineoperationmode === 987654321) {
        tableData.value = originTableData.value
        return
    } else if (airBlowerSelect.belongLine !== '全部' && airBlowerSelect.iturbineoperationmode !== 987654321) {
        if (type === 'iturbineoperationmode' && airBlowerSelect.iturbineoperationmode === 2) {
            const type1 = originTableData.value.filter((item) => item.iturbineoperationmode === 1)
            const type6 = originTableData.value.filter((item) => item.iturbineoperationmode === 6)
            const type2 = originTableData.value.filter((item) => item.iturbineoperationmode === 2)
            const typeAll = [...type1, ...type6, ...type2]
            tableData.value = typeAll.filter((item) => item.belongLine === airBlowerSelect.belongLine)
            return
        }
        const resData = originTableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
        tableData.value = resData.filter((item) => item.belongLine === airBlowerSelect.belongLine)
        return
    } else {
        if (type === 'belongLine' && airBlowerSelect.belongLine === '全部') {
            tableData.value = originTableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
            return
        } else if (type === 'iturbineoperationmode' && airBlowerSelect.iturbineoperationmode === 987654321) {
            tableData.value = originTableData.value.filter((item) => item.belongLine === airBlowerSelect.belongLine)
            return
        }
        if (type === 'iturbineoperationmode' && airBlowerSelect.iturbineoperationmode === 2) {
            const type1 = originTableData.value.filter((item) => item.iturbineoperationmode === 1)
            const type6 = originTableData.value.filter((item) => item.iturbineoperationmode === 6)
            const type2 = originTableData.value.filter((item) => item.iturbineoperationmode === 2)
            tableData.value = [...type1, ...type6, ...type2]
            return
        }

        tableData.value = originTableData.value.filter((item) => item[type] === airBlowerSelect[type])
        return
    }
}

const airBlowerOperate = async (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => {
    const sendTypeEnum = {
        setTurbineFastStart: '风机快速启动指令',
        setTurbineStop: '风机停机指令',
        setTurbineResetStatusCode: '风机复位故障代码指令',
    }
    if (!selectList.value.length) {
        ElMessage.warning('请先选择风机')
        return
    }
    const data = selectList.value.map((item) => {
        return {
            sendData: {
                deviceId: item,
                serviceName: sendTypeEnum[type],
                serviceCode: type,
                optDesc: sendTypeEnum[type] + '，设定值为：' + 1,
                opValue: 1 as const,
            },
            deviceName: tableData.value.find((listItem) => listItem.irn === item)!.name,
            loading: 0 as const,
        }
    })
    mutiTaskList.value = data
    mutiTaskTitle.value = sendTypeEnum[type]
    multiTaskVisible.value = true

    for (let i = 0; i < mutiTaskList.value.length; i++) {
        mutiTaskList.value[i].loading = 1
        runTask(mutiTaskList.value[i].sendData, i)
    }
}

const runTask = async (data: any, index: number) => {
    try {
        let resp = await sendCommandReq(data)
        if (resp.success) {
            mutiTaskList.value[index].loading = 2
        }
    } catch (error) {
        mutiTaskList.value[index].loading = 3
    }

    // .then((res: any) => {
    //     console.log(res)
    //     if (res.success) {
    //         console.log(data, 'success')
    //         mutiTaskList.value[index].loading = 2
    //     } else {
    //         mutiTaskList.value[index].loading = 3
    //     }
    // })
    // .catch(() => {
    //     mutiTaskList.value[index].loading = 3
    // })
}

const tableHaderStyle = {
    color: '#333',
}

const defaultColumn: TableColumnType[] = [
    {
        label: '风机列表',
        prop: 'name',
        align: 'center',
        custom: 'default',
    },
    {
        label: '实时曲线',
        prop: 'chart',
        align: 'center',
        custom: 'default',
        width: 55,
    },
    {
        label: '风机型号',
        prop: 'model',
        align: 'center',
        width: 120,
    },
    {
        label: '风机状态',
        prop: 'iturbineoperationmode',
        align: 'center',
        custom: 'default',
    },
]
const dynamicColumn: TableColumnType[] = [
    {
        label: '风速 (m/s)',
        prop: 'iwindspeed',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '风向 (°)',
        prop: 'iwinddirection',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '发电机转速 (rmp)',
        prop: 'igenspeed',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '有功功率 (KW)',
        prop: 'igenpower',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '有功给定 (KW)',
        prop: 'iactivepowersetpointvalue',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '无功功率 (KVar)',
        prop: 'ireactivepower',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '无功给定 (KVar)',
        prop: 'ireactivepowersetpointvalue',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '桨叶1角度 (°)',
        prop: 'ipitchangle1',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '桨叶2角度 (°)',
        prop: 'ipitchangle2',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '桨叶3角度 (°)',
        prop: 'ipitchangle3',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '限电原因',
        prop: 'powerlimitsource',
        align: 'center',
        width: 100,
    },
    {
        label: '机舱位置 (°)',
        prop: 'ivanedirection',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '日发电量 (kWh)',
        prop: 'ikwhthisday',
        align: 'center',
        custom: 'header',
        width: 100,
    },
    {
        label: '总发电量 (万kWh)',
        prop: 'ikwhoverall',
        align: 'center',
        custom: 'header',
        width: 100,
    },
]
const tableColumn = ref<TableColumnType[]>([...defaultColumn, ...dynamicColumn])

const tableRef = ref<TableInstance>()
const tableData = ref<TableDataObjType[]>([])
const originTableData = ref<TableDataObjType[]>([])

const createTableReqParams = (airblowerList: { irn: string; name: string }[]) => {
    const curTableKey = tableColumn.value.map((item) => item.prop)
    const airBlowerIds: any = []
    const airBlowerInfo: any = {}
    const params = airblowerList.map((item: any) => {
        airBlowerInfo[item.irn] = {
            name: item.name,
            model: item.model,
            belongLine: item.belongLine,
            modelId: item.modelId,
            deviceCode: item.deviceCode,
        }
        airBlowerIds.push(item.irn)
        return {
            deviceId: item.irn,
            attributes: [...curTableKey, 'iturbineoperationmode', 'iyplevel', 'gridlostdetected', 'ibplevel'],
        }
    })
    return { params, airBlowerInfo, airBlowerIds }
}
const getTableData = () => {
    let airBlowerInfoObj: any = {}
    let airBlowerIdList: any[] = []
    getAirBlowerListReq()
        .then((res) => {
            if (res.success) {
                return createTableReqParams(res.data)
            } else {
                throw '获取风机列表失败'
            }
        })
        .then((data) => {
            airBlowerInfoObj = data.airBlowerInfo
            airBlowerIdList = data.airBlowerIds
            return getRealValueListReq(data!.params)
        })
        .then((res) => {
            if (res.success) {
                const data = airBlowerIdList.map((id) => {
                    const realData: any = {}
                    Object.keys(res.data[id]).forEach((key) => {
                        realData[key] = getCutDecimalsValue(res.data[id][key])
                    })
                    const state = getRealTimeState(res.data[id])
                    return {
                        irn: id,
                        name: airBlowerInfoObj[id].name,
                        model: airBlowerInfoObj[id].model,
                        iotModelId: airBlowerInfoObj[id].modelId,
                        belongLine: airBlowerInfoObj[id].belongLine,
                        deviceCode: airBlowerInfoObj[id].deviceCode,
                        ...realData,
                        iturbineoperationmode: state,
                    }
                })
                originTableData.value = data

                if (airBlowerSelect.belongLine === '全部' && airBlowerSelect.iturbineoperationmode === 987654321) {
                    tableData.value = data
                    console.log(tableData.value)
                } else {
                    const irn = tableData.value.map((item) => item.irn)
                    const result: TableDataObjType[] = []
                    data.forEach((item: TableDataObjType) => {
                        if (irn.includes(item.irn)) {
                            result.push(item)
                        }
                    })
                    tableData.value = result
                }
                if (selectList.value.length) {
                    const selected = tableData.value.filter((item) => selectList.value.includes(item.irn))
                    selected.forEach((item) => {
                        nextTick(() => {
                            tableRef.value?.toggleRowSelection(item, true)
                        })
                    })
                }
            } else {
                throw '获取风机列表失败'
            }
        })
        .catch((err) => {
            ElMessage.error(err)
        })
}

const getBlongLineList = () => {
    getBelongLineListReq()
        .then((res) => {
            const data = res.data.map((item: any) => {
                return {
                    value: item,
                }
            })
            airBlowerSelectOptions.belongLine = [{ value: '全部', label: '全部' }, ...data]
        })
        .catch((err) => {
            console.log(err)
        })
}

const selectList = ref<string[]>([])

const selectTable = (selected: TableDataObjType[]) => {
    selectList.value = selected.map((item) => item.irn)
}

const autoUpdate = ref(true)
const autoUpdateInterval = ref<any>(null)
watch(autoUpdate, (newVal: boolean) => {
    if (newVal) {
        if (autoUpdateInterval.value) return
        ElMessage.success('开启自动刷新')
        autoUpdateInterval.value = setInterval(() => {
            getTableData()
        }, 2000)
    } else {
        if (realDataLineChartVisible.value) {
            ElMessage.warning('关闭自动刷新')
        }
        clearInterval(autoUpdateInterval.value)
        autoUpdateInterval.value = null
    }
})

const openWindTurbine = (row: TableDataObjType) => {
    if (!router.hasRoute('windTurbine')) {
        router.addRoute('admin', {
            path: adminBaseRoutePath + '/windTurbine',
            name: 'windTurbine',
            component: () => import('/@/views/backend/WindBlower/index.vue'),
            meta: {
                title: 'WindBlower',
                menuDesc: '单风机详情',
                addtab: true,
            },
        })
    }
    console.log(row)

    router.push({
        name: 'windTurbine',
        query: {
            irn: row.irn,
            iotModelId: row.iotModelId,
            deviceCode: row.deviceCode,
        },
    })
}

const multiTaskVisible = ref(false)
const mutiTaskTitle = ref('')
const mutiTaskList = ref<
    {
        loading: 0 | 1 | 2 | 3
        deviceName: string
        sendData: {
            deviceId: string
            serviceName: string
            serviceCode: string
            optDesc: string
            opValue: 1
        }
    }[]
>([])

const selectPointDialogRef = ref()
const selectPointVisible = ref(false)
const defaultAttr = computed(() => {
    return dynamicColumn.map((item) => {
        return {
            attributeName: item.label.split(' ')[0],
            unit: item.label.split(' ')[1] ?? '',
            attributeCode: item.prop as string,
        }
    })
})
const openMeasure = () => {
    selectPointVisible.value = true
}
const saveSelectPoint = () => {
    const list = selectPointDialogRef.value?.getSelectList()
    if (list) {
        console.log(list)

        const addCoulmn = list.map((item: any) => {
            return {
                label: item.unit ? item.attributeName + item.unit : item.attributeName,
                prop: item.attributeCode.toLowerCase(),
                align: 'center',
                custom: item.unit ? 'header' : undefined,
                width: 100,
            }
        })
        tableColumn.value = [...defaultColumn, ...addCoulmn]

        getTableData()
        selectPointVisible.value = false
        ElMessage.success('选择成功')
    }
}
const downFun = () => {
    const itemsWithoutAge = tableData.value.map((item) => {
        const { irn, ...rest } = item
        return rest
    })
    if (!tableColumn.value.length || !itemsWithoutAge.length) {
        return []
    }
    const columnSet = new Set(tableColumn.value.map((item) => item.prop))
    const result: any = []
    itemsWithoutAge.forEach((item) => {
        const newItem: any = {}
        for (const itemKey in item) {
            if (columnSet.has(itemKey)) {
                newItem[itemKey] = item[itemKey]
            }
        }
        if (Object.keys(newItem).length > 0) {
            result.push(newItem)
        }
    })
    let addobj: any = {}
    tableColumn.value.map((v, i) => {
        addobj['rowData' + i] = v.label
    })
    let tableDatadown = JSON.parse(JSON.stringify(result))
    tableDatadown.unshift(addobj)
    console.log(tableDatadown)

    let str = ``
    for (let i = 0; i < tableDatadown.length; i++) {
        for (let item in tableDatadown[i]) {
            if (typeof tableDatadown[i][item] === 'string') {
                tableDatadown[i][item] = tableDatadown[i][item].replace(/[\n,]/g, (match: any) => (match === '\n' ? ' ' : '，'))
            } else {
                console.warn(`tableDatadown[${i}][${item}] is not a string`)
            }
            str += `${tableDatadown[i][item] + '\t'},`
        }
        str += '\n'
    }
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
    let link = document.createElement('a')
    link.href = uri
    link.download = '实时数据' + Date.now() + '.csv'
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

const clickRowId = ref('')
const realDataLineChartVisible = ref(false)
const openLineChart = (row: TableDataObjType) => {
    clickRowId.value = row.irn
    realDataLineChartVisible.value = true
    autoUpdate.value = false
}
const closeLineChart = () => {
    autoUpdate.value = true
}
onUnmounted(() => {
    autoUpdateInterval.value && clearInterval(autoUpdateInterval.value)
    autoUpdateInterval.value = null
})
getTableData()
getBlongLineList()
</script>

<style scoped lang="scss">
.airBlower {
    width: 100%;
    height: 100%;
    .containerPart {
        width: 100%;
        height: 100%;
        .headerPart {
            padding: 20px;
            width: 100%;
            height: 60px;
            display: flex;
            // justify-content: space-between;
            align-items: center;
            .headerLeft {
                display: flex;
                flex-shrink: 0;
                .selectPart {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 40px;
                    margin-right: 20px;
                    span {
                        margin-right: 10px;
                    }
                    .airBlowerSelect {
                        width: 200px;
                        :deep(.el-select__wrapper) {
                            height: 40px;
                        }
                    }
                }
            }
            .headerCenter {
                width: 212px;
                margin-left: 30px;
                flex-shrink: 0;
                .el-button {
                    width: 100px;
                    height: 40px;
                }
            }
            .headerRight {
                margin-left: auto;
                width: 336px;
                display: flex;
                justify-content: space-between;
                .el-button {
                    width: 100px;
                    height: 40px;
                }
            }
        }
        .mainPart {
            width: 100%;
            height: calc(100% - 60px);
            .tableClass {
                width: 100%;
                height: 100%;
            }
            .tableColumnClick {
                text-decoration: underline;
                color: #00a4ff;
                cursor: pointer;
            }
            .operate {
                display: flex;
                justify-content: center;
                align-items: center;
                .chartIcon {
                    width: 16px;
                    height: 16px;
                }
                &:hover {
                    cursor: pointer;
                }
            }
        }
    }
}

.mutiTaskName {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
.mutiTaskStatus {
    display: flex;
    align-items: center;
    justify-content: right;
    width: 100%;
    height: 40px;
}
.mutiTaskLoading {
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.selectPointDialogFooter {
    text-align: center;
    .el-button {
        width: 120px;
        height: 40px;
    }
}
</style>