diff --git a/src/assets/icons/control.svg b/src/assets/icons/control.svg index 250d63bf..8ecf7f50 100644 --- a/src/assets/icons/control.svg +++ b/src/assets/icons/control.svg @@ -12,4 +12,4 @@ 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. --> - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/icons/time_range.svg b/src/assets/icons/time_range.svg new file mode 100644 index 00000000..5b5238ba --- /dev/null +++ b/src/assets/icons/time_range.svg @@ -0,0 +1,15 @@ + + \ No newline at end of file diff --git a/src/store/data.ts b/src/store/data.ts index d6d3e01e..20887d1b 100644 --- a/src/store/data.ts +++ b/src/store/data.ts @@ -29,3 +29,10 @@ export const TextConfig = { fontSize: 14, textAlign: "left", }; + +export const TimeRangeConfig = { + fontColor: "black", + backgroundColor: "white", + fontSize: 14, + textAlign: "center", +}; diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts index 213510fa..bad5e8ef 100644 --- a/src/store/modules/dashboard.ts +++ b/src/store/modules/dashboard.ts @@ -21,7 +21,7 @@ import graphql from "@/graphql"; import query from "@/graphql/fetch"; import { DashboardItem } from "@/types/dashboard"; import { useSelectorStore } from "@/store/modules/selectors"; -import { NewControl, TextConfig } from "../data"; +import { NewControl, TextConfig, TimeRangeConfig } from "../data"; import { AxiosResponse } from "axios"; import { ElMessage } from "element-plus"; import { useI18n } from "vue-i18n"; @@ -129,6 +129,11 @@ export const dashboardStore = defineStore({ newItem.h = 6; newItem.graph = TextConfig; } + if (type === "TimeRange") { + newItem.w = 8; + newItem.h = 6; + newItem.graph = TimeRangeConfig; + } this.activedGridItem = newItem.i; this.selectedGrid = newItem; this.layout = this.layout.map((d: LayoutConfig) => { @@ -195,6 +200,11 @@ export const dashboardStore = defineStore({ newItem.h = 6; newItem.graph = TextConfig; } + if (type === "TimeRange") { + newItem.w = 8; + newItem.h = 6; + newItem.graph = TextConfig; + } if (this.layout[idx].children) { const items = children.map((d: LayoutConfig) => { d.y = d.y + newItem.h; diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue index 282f75bb..aedcdf4b 100644 --- a/src/views/dashboard/controls/TimeRange.vue +++ b/src/views/dashboard/controls/TimeRange.vue @@ -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. --> @@ -75,7 +79,9 @@ const graph = computed(() => props.data.graph || {}); const dashboardStore = useDashboardStore(); const appStore = useAppStoreWithOut(); const content = computed(() => { - const text = appStore.duration.map((date: Date) => tf(date)).join(` ~ `); + const text = [appStore.duration.start, appStore.duration.end] + .map((date: Date) => tf(date, "YYYY-MM-DD HH:mm")) + .join(` ~ `); return text; }); @@ -86,7 +92,7 @@ function editConfig() { dashboardStore.setConfigPanel(true); dashboardStore.selectWidget(props.data); } -function tf(time: Date, format?: any): string { +function tf(time: Date, format: any): string { const local = { dow: 1, // Monday is the first day of the week hourTip: t("hourTip"), // tip of select hour @@ -136,7 +142,7 @@ function tf(time: Date, format?: any): string { }