feat: Implement templates for dashboards (#28)

This commit is contained in:
Fine0830
2022-03-19 12:11:35 +08:00
committed by GitHub
parent 1cf3887675
commit 597e98e291
61 changed files with 1583 additions and 1193 deletions

View File

@@ -13,7 +13,7 @@ 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>
<section class="app-main">
<section class="app-main flex-v">
<router-view v-slot="{ Component }" :key="$route.fullPath">
<keep-alive>
<component :is="Component" />
@@ -21,7 +21,19 @@ limitations under the License. -->
</router-view>
</section>
</template>
<script lang="ts" setup></script>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { useAppStoreWithOut } from "@/store/modules/app";
const appStore = useAppStoreWithOut();
if (!appStore.utc) {
const res = appStore.queryOAPTimeInfo();
if (res.errors) {
ElMessage.error(res.errors);
}
}
</script>
<style lang="scss" scoped>
.app-main {
height: calc(100% - 40px);

View File

@@ -24,7 +24,7 @@ limitations under the License. -->
@input="changeTimeRange"
/>
<span>
UTC{{ utcHour >= 0 ? "+" : ""
UTC{{ appStore.utcHour >= 0 ? "+" : ""
}}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
</span>
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
@@ -46,17 +46,6 @@ const route = useRoute();
const pageName = ref<string>("");
const timeRange = ref<number>(0);
const theme = ref<string>("light");
let utc = localStorage.getItem("utc") || "";
if (!utc.includes(":")) {
utc =
(localStorage.getItem("utc") || -(new Date().getTimezoneOffset() / 60)) +
":0";
}
const utcArr = (utc || "").split(":");
const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
appStore.setUTC(utcHour, utcMin);
const setConfig = (value: string) => {
pageName.value = value || "";
@@ -72,7 +61,7 @@ const handleReload = () => {
const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
appStore.setDuration(timeFormat(time));
};
function changeTimeRange(val: Date[]) {
function changeTimeRange(val: Date[] | any) {
timeRange.value =
val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
if (timeRange.value) {