| <!-- |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| --> |
| |
| <template> |
| <div class="query-main"> |
| <div class="query-main-container"> |
| <div class="container-left"> |
| <el-tabs v-model="activeType" tab-position="left" style="height: 200px" class="demo-tabs"> |
| <el-tab-pane v-for="(item, index) in tabPanelOptions" :key="index" :label="item.name" :name="item.id + ''"> |
| <template #label> |
| <div class="tab-label" :key="index">{{ item.name }}</div> |
| </template> |
| </el-tab-pane> |
| </el-tabs> |
| </div> |
| <div v-if="tabPanelOptions?.length" class="container-right"> |
| <div class="container-right-tip"> |
| <div> |
| {{ $t('controlPage.lastTime') }} <span>{{ formatInfo(latestTime) }}</span> |
| </div> |
| <div> |
| {{ $t('controlPage.runCount') }}<span>{{ formatInfo(runTotal) }}</span> |
| </div> |
| </div> |
| <div class="container-right-operate"> |
| <div class="operate-item"> |
| <span class="input-label">{{ $t('controlPage.querySentence') }}：</span> |
| <div class="input-box"> |
| <el-input v-model="searchValue" class="w-50 m-2" :placeholder="$t('common.placeHolder')" /> |
| </div> |
| </div> |
| <div class="operate-item"> |
| <span class="input-label">{{ $t('controlPage.runTime') }}：</span> |
| <div class="date-box"> |
| <el-config-provider :locale="langLocale"> |
| <!-- <el-color-picker :model-value="''" style="vertical-align: middle" /> --> |
| <el-date-picker v-model="runTime" size="mini" type="datetimerange" :start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')" /> |
| </el-config-provider> |
| </div> |
| </div> |
| <div class="operate-item"> |
| <span class="input-label">{{ $t('controlPage.exeResult') }}：</span> |
| <div class="select-box"> |
| <el-select v-model="runResult" class="m-2" :placeholder="$t('common.selectPlaceholder')"> |
| <el-option v-for="item in resultOptions" :key="item.value" :label="item.label" :value="item.value" /> |
| </el-select> |
| </div> |
| </div> |
| <el-button class="operate-btn" @click="handleSearch">{{ $t('common.query') }}</el-button> |
| </div> |
| <div class="container-right-table"> |
| <el-table class="iotdb-table" border style="width: 100%" :empty-text="$t('controlPage.nodata')" :data="tableData"> |
| <template v-for="(item, index) in tableColumn"> |
| <el-table-column v-if="item.isSlowQuery" :key="'col' + index" label="" align="right" :width="item.maxWidth"> |
| <template #default="scope"> |
| <div class="slow-query" v-if="scope.row.isSlowQuery">{{ $t('controlPage.slow') }}</div> |
| </template> |
| </el-table-column> |
| <el-table-column v-else-if="item.type === 'result'" :key="'col' + index" :label="$t('controlPage.exeResult')"> |
| <template #default="scope"> |
| <div :class="+scope.row.executionResult === 1 ? 'success' : 'error'">{{ +scope.row.executionResult === 1 ? $t('common.success') : $t('common.fail') }}{{ scope.row.result }}</div> |
| </template> |
| </el-table-column> |
| <el-table-column v-else-if="item.fixed === 'right'" :key="'colright' + index" v-bind="item"> |
| <template #default="scoped"> |
| <el-button type="text" size="small" @click="handleDownload(scoped)">{{ $t('controlPage.downloadLog') }}</el-button> |
| </template> |
| </el-table-column> |
| <el-table-column v-else :key="'col' + index" show-overflow-tooltip v-bind="item"></el-table-column> |
| </template> |
| </el-table> |
| <!-- :page-sizes="[10, 25,50, 100]" --> |
| <div class="table-pagination"> |
| <el-pagination layout="slot" v-model:currentPage="currentPage" v-model:page-size="pageSize" :total="totalCount"> |
| <span class="pagination-title">{{ $t('controlPage.Ptotal') }} {{ totalCount }} {{ $t('controlPage.Pentries') }}</span> |
| </el-pagination> |
| <el-pagination layout="slot" v-model:currentPage="currentPage" v-model:page-size="pageSize" :total="totalCount"> |
| {{ $t('controlPage.EachPage') |
| }}<el-select class="pageSelectContainer" v-model="pageSize" @change="handlePageSize" placeholder="请选择"> |
| <el-option v-for="item in optionsPage" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select |
| >{{ $t('controlPage.Pentries') }} |
| </el-pagination> |
| <el-pagination |
| v-model:currentPage="currentPage" |
| v-model:page-size="pageSize" |
| layout="prev, pager, next" |
| :total="totalCount" |
| @size-change="handlePageSize" |
| @current-change="handleCurrentPage" |
| > |
| </el-pagination> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| // @ is an alias to /src |
| import { get } from 'lodash'; |
| import { ElMessage } from 'element-plus'; |
| import { handleExport } from '@/util/export'; |
| import { computed, nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'; |
| import { useI18n } from 'vue-i18n'; |
| import zhCn from 'element-plus/lib/locale/lang/zh-cn'; |
| import en from 'element-plus/lib/locale/lang/en'; |
| import de from 'element-plus/lib/locale/lang/de'; |
| // import { ElTabs } from 'element-plus'; |
| // import { useRouter } from 'vue-router'; |
| import { getClassifyList, getClassifyData, getDownloadQueryLogFile } from '../api'; |
| |
| export default { |
| name: 'Query', |
| props: { |
| data: { |
| type: Object, |
| }, |
| }, |
| setup(props) { |
| let { t, locale } = useI18n(); |
| let tabPanelOptions = ref(); |
| let tableColumnType = ref(true); |
| let activeType = ref(); |
| let runTime = ref(''); |
| let tableData = ref(); |
| let runResult = ref('0'); |
| let searchValue = ref(''); |
| let pageReactive = reactive({ |
| latestTime: '', |
| runTotal: '', |
| }); |
| let tablePage = reactive({ |
| totalCount: 0, |
| currentPage: 1, |
| pageSize: 10, |
| }); |
| let resultOptions = computed(() => [ |
| { |
| label: t('common.all'), |
| value: '0', |
| }, |
| { |
| label: t('common.success'), |
| value: '1', |
| }, |
| { |
| label: t('common.fail'), |
| value: '2', |
| }, |
| ]); |
| let langLocale = computed(() => { |
| let lang = locale.value; |
| let langMap = { |
| 'zh-cn': zhCn, |
| en, |
| de, |
| }; |
| return langMap[lang]; |
| }); |
| let tableColumn = computed(() => { |
| let flagWidthMap = { |
| 'zh-cn': 40, |
| en: 50, |
| de: 80, |
| }; |
| let ctrlWidthMap = { |
| 'zh-cn': 100, |
| en: 120, |
| de: 170, |
| }; |
| let temp = [ |
| { |
| label: '', |
| maxWidth: flagWidthMap[locale.value] || 80, |
| isSlowQuery: true, |
| }, |
| { |
| label: t('controlPage.runTime'), |
| prop: 'runningTime', |
| width: '170px', |
| }, |
| { |
| label: t('controlPage.querySentence'), |
| prop: 'statement', |
| minWidth: '180px', |
| }, |
| { |
| label: t('controlPage.totalUseTime'), |
| prop: 'totalTime', |
| minWidth: '100px', |
| }, |
| ]; |
| if (tableColumnType.value === 0) { |
| temp = [ |
| ...temp, |
| { |
| label: t('controlPage.garmmarUseTime'), |
| prop: 'analysisTime', |
| minWidth: '120px', |
| }, |
| { |
| label: t('controlPage.ybyUseTime'), |
| prop: 'precompiledTime', |
| minWidth: '120px', |
| }, |
| { |
| label: t('controlPage.yhbyUseTime'), |
| prop: 'optimizedTime', |
| minWidth: '120px', |
| }, |
| { |
| label: t('controlPage.exeUseTime'), |
| prop: 'executionTime', |
| minWidth: '150px', |
| }, |
| ]; |
| } |
| temp.push({ |
| label: t('controlPage.exeResult'), |
| prop: 'executionResult', |
| minWidth: '80px', |
| type: 'result', |
| }); |
| temp.push({ |
| fixed: 'right', |
| label: t('common.operation'), |
| width: ctrlWidthMap[locale.value], |
| }); |
| return temp; |
| }); |
| let optionsPage = computed(() => [ |
| { |
| label: '10', |
| value: 10, |
| }, |
| { |
| label: '20', |
| value: 20, |
| }, |
| { |
| label: '30', |
| value: 30, |
| }, |
| ]); |
| watch(activeType, (newValue) => { |
| if (newValue) { |
| QueryDataInit(); |
| tabPanelOptions.value.every((item) => { |
| if (item.id + '' === newValue + '') { |
| tableColumnType.value = item.flag; |
| return false; |
| } |
| return true; |
| }); |
| getCurrentQueryData(props.data.serverId, newValue); |
| } |
| }); |
| watch( |
| () => props.data, |
| (newValue) => { |
| if (newValue.status) { |
| getClassifyList(newValue.serverId).then((res) => { |
| tabPanelOptions.value = res.data.classificationList; |
| activeType.value = ''; |
| nextTick(() => { |
| activeType.value = tabPanelOptions.value[0]?.id + ''; |
| }); |
| }); |
| } else { |
| tabPanelOptions.value = []; |
| tableData.value = []; |
| QueryDataInit(); |
| } |
| }, |
| { immediate: true } |
| ); |
| |
| onMounted(() => {}); |
| function QueryDataInit() { |
| pageReactive.latestTime = ''; |
| pageReactive.runTotal = ''; |
| tablePage.currentPage = 1; |
| tablePage.pageSize = 10; |
| tablePage.totalCount = 0; |
| runResult.value = '0'; |
| searchValue.value = ''; |
| } |
| function handlePageSize() { |
| tablePage.currentPage = 1; |
| getCurrentQueryData(); |
| } |
| function handleCurrentPage() { |
| getCurrentQueryData(); |
| } |
| function getCurrentQueryData() { |
| if (!props.data.status) { |
| tableData.value = []; |
| return; |
| } |
| let query = { |
| pageSize: tablePage.pageSize, |
| pageNum: tablePage.currentPage, |
| filterString: searchValue.value || undefined, |
| startTime: (runTime.value && runTime.value[0]?.getTime()) || undefined, |
| endTime: (runTime.value && runTime.value[1]?.getTime()) || undefined, |
| executionResult: runResult.value, |
| }; |
| |
| getClassifyData(props.data.serverId, activeType.value, query).then((res) => { |
| let { data } = res; |
| pageReactive.latestTime = data.latestRunningTime; |
| pageReactive.runTotal = data.totalCount; |
| tableData.value = data.filteredQueryDataStrVOSList; |
| tablePage.totalCount = data.totalCount; |
| }); |
| } |
| function handleSearch() { |
| getCurrentQueryData(); |
| } |
| async function handleDownload({ row }) { |
| const res = await getDownloadQueryLogFile({ |
| SQLStatement: row.statement, |
| timeStamp: new Date(row.runningTime).valueOf(), |
| }); |
| let filename = get(res, 'headers.content-disposition'); |
| filename = filename ? decodeURI(filename.replace(/.*(?=filename=)filename=/, '')) : ''; |
| if (get(res, 'data.type') === 'application/json') { |
| return ElMessage({ |
| type: 'error', |
| message: `${t('common.fail')}`, |
| }); |
| } |
| handleExport(res.data, filename); |
| ElMessage({ |
| type: 'success', |
| message: `${t('device.exportSucceeded')}`, |
| }); |
| } |
| function formatInfo(val) { |
| return val || '-'; |
| } |
| return { |
| searchValue, |
| activeType, |
| tabPanelOptions, |
| runTime, |
| runResult, |
| tableData, |
| optionsPage, |
| ...toRefs(tablePage), |
| ...toRefs(pageReactive), |
| // ...toRefs(tablePage), |
| langLocale, |
| |
| resultOptions, |
| tableColumn, |
| |
| handleSearch, |
| // handlePaginateChange, |
| handleDownload, |
| handleCurrentPage, |
| handlePageSize, |
| formatInfo, |
| }; |
| }, |
| components: { |
| // ElTabs, |
| }, |
| }; |
| </script> |
| |
| <style scoped lang="scss"> |
| .query-main { |
| min-height: calc(100% - 243px); |
| padding: 20px; |
| background: #f9fbfc; |
| display: flex; |
| &-container { |
| width: 100%; |
| display: flex; |
| background: #fff; |
| border-radius: 4px; |
| border: 1px solid #eaecf0; |
| padding: 20px 20px 20px 0; |
| } |
| .container-left { |
| &:deep .el-tabs__active-bar { |
| min-width: 0 !important; |
| } |
| &:deep .el-tabs__item { |
| height: 24px; |
| line-height: 24px; |
| font-weight: 400; |
| color: #8e97aa; |
| font-size: 12px !important; |
| &.is-active { |
| font-weight: 400; |
| color: $theme-bj-color !important; |
| } |
| } |
| &:deep .el-tabs__nav-scroll, |
| &:deep .el-tabs__nav-wrap { |
| height: auto; |
| } |
| } |
| .container-right { |
| padding-left: 10px; |
| width: 500px; |
| flex: 1; |
| &-tip { |
| display: flex; |
| align-items: center; |
| height: 48px; |
| padding: 0 20px; |
| background: #fafafa; |
| font-weight: 500; |
| font-size: 12px; |
| color: #808ba3; |
| div { |
| margin-left: 50px; |
| display: flex; |
| align-items: center; |
| } |
| div:first-child { |
| margin-left: 0; |
| } |
| span { |
| padding-left: 12px; |
| font-size: 16px; |
| font-weight: 400; |
| color: #333; |
| line-height: 24px; |
| } |
| } |
| &-operate { |
| font-size: 12px; |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| .operate-item { |
| margin-top: 20px; |
| display: flex; |
| align-items: center; |
| } |
| .operate-btn { |
| margin-left: 20px; |
| margin-top: 20px; |
| } |
| .input-box { |
| width: 160px; |
| } |
| .select-box { |
| width: 120px; |
| } |
| .input-label { |
| padding: 0 10px; |
| } |
| &:deep .el-date-editor--datetimerange.el-input__inner { |
| width: 320px; |
| } |
| } |
| &-table { |
| .slow-query { |
| display: inline-block; |
| background: #f33f2b; |
| color: #fff; |
| height: 18px; |
| line-height: 18px; |
| padding: 0 2px; |
| } |
| |
| margin-top: 20px; |
| .success { |
| font-weight: 400; |
| color: #5776ed; |
| } |
| .error { |
| font-weight: 400; |
| color: #fd5c5c; |
| } |
| .table-pagination { |
| padding: 12px 0; |
| text-align: right; |
| display: flex; |
| justify-content: flex-end; |
| .pagination-title { |
| font-weight: 400; |
| font-size: 14px; |
| color: rgb(96, 98, 102); |
| } |
| &:deep button:hover { |
| color: #15c294; |
| } |
| &:deep li { |
| outline: none; |
| &:hover { |
| color: #15c294; |
| } |
| &.active { |
| color: #15c294; |
| } |
| } |
| } |
| } |
| } |
| &:deep .el-input .el-input__inner { |
| font-size: 12px; |
| } |
| &:deep .el-pagination { |
| font-size: 14px; |
| font-weight: 400; |
| color: rgba(34, 34, 34, 0.75); |
| line-height: 14px; |
| } |
| &:deep .el-pagination .el-select .el-input { |
| width: 60px; |
| } |
| } |
| </style> |
