github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 20:01:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

build: migrate the build tool from vue-cli to vite4 (#208)

Browse Source
This commit is contained in:
Fine0830
2022-12-17 14:07:03 +08:00
committed by GitHub
parent 1e0c253488
commit 44dcb1e7f6
214 changed files with 27014 additions and 54234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/alarm/Header.vue
View File

@@ -28,12 +28,7 @@ limitations under the License. -->
</div>
<div class="mr-10 ml-10">
<span class="grey">{{ t("searchKeyword") }}: </span>
<el-input
size="small"
v-model="keyword"
class="alarm-tool-input"
@change="refreshAlarms({ pageNum: 1 })"
/>
<el-input size="small" v-model="keyword" class="alarm-tool-input" @change="refreshAlarms({ pageNum: 1 })" />
</div>
<div class="pagination">
<el-pagination
@@ -48,84 +43,79 @@ limitations under the License. -->
/>
</div>
</div>
<ConditionTags
:type="'ALARM'"
@update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
/>
<ConditionTags :type="'ALARM'" @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })" />
</nav>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import ConditionTags from "@/views/components/ConditionTags.vue";
import { AlarmOptions } from "./data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useAlarmStore } from "@/store/modules/alarm";
import { ElMessage } from "element-plus";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import ConditionTags from "@/views/components/ConditionTags.vue";
import { AlarmOptions } from "./data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { useAlarmStore } from "@/store/modules/alarm";
import { ElMessage } from "element-plus";
const appStore = useAppStoreWithOut();
const alarmStore = useAlarmStore();
const { t } = useI18n();
const pageSize = 20;
const entity = ref<string>("");
const keyword = ref<string>("");
const pageNum = ref<number>(1);
const total = computed(() =>
alarmStore.alarms.length === pageSize
? pageSize * pageNum.value + 1
: pageSize * pageNum.value
);
const appStore = useAppStoreWithOut();
const alarmStore = useAlarmStore();
const { t } = useI18n();
const pageSize = 20;
const entity = ref<string>("");
const keyword = ref<string>("");
const pageNum = ref<number>(1);
const total = computed(() =>
alarmStore.alarms.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
);
refreshAlarms({ pageNum: 1 });
async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
const params: any = {
duration: appStore.durationTime,
paging: {
pageNum: param.pageNum,
pageSize,
},
tags: param.tagsMap,
};
params.scope = entity.value || undefined;
params.keyword = keyword.value || undefined;
const res = await alarmStore.getAlarms(params);
if (res.errors) {
ElMessage.error(res.errors);
}
}
function changeEntity(param: any) {
entity.value = param[0].value;
refreshAlarms({ pageNum: 1 });
}
function changePage(p: number) {
pageNum.value = p;
refreshAlarms({ pageNum: p });
}
async function refreshAlarms(param: { pageNum: number; tagsMap?: any }) {
const params: any = {
duration: appStore.durationTime,
paging: {
pageNum: param.pageNum,
pageSize,
},
tags: param.tagsMap,
};
params.scope = entity.value || undefined;
params.keyword = keyword.value || undefined;
const res = await alarmStore.getAlarms(params);
if (res.errors) {
ElMessage.error(res.errors);
}
}
function changeEntity(param: any) {
entity.value = param[0].value;
refreshAlarms({ pageNum: 1 });
}
function changePage(p: number) {
pageNum.value = p;
refreshAlarms({ pageNum: p });
}
</script>
<style lang="scss" scoped>
.alarm-tool {
font-size: 12px;
border-bottom: 1px solid #c1c5ca41;
background-color: #f0f2f5;
padding: 10px;
position: relative;
}
.alarm-tool {
font-size: 12px;
border-bottom: 1px solid #c1c5ca41;
background-color: #f0f2f5;
padding: 10px;
position: relative;
}
.alarm-tool-input {
border-style: unset;
outline: 0;
padding: 2px 5px;
width: 250px;
border-radius: 3px;
}
.alarm-tool-input {
border-style: unset;
outline: 0;
padding: 2px 5px;
width: 250px;
border-radius: 3px;
}
.pagination {
position: absolute;
top: 10px;
right: 5px;
}
.pagination {
position: absolute;
top: 10px;
right: 5px;
}
</style>