fix: 设备一张图

This commit is contained in:
宝莉 2024-09-10 15:15:29 +08:00
commit 629af7bdd0
8 changed files with 188 additions and 58 deletions

View File

@ -16,21 +16,29 @@ export const customData = {
title: '综合PUE',
enable: false,
demonstration: false,
manual: false,
id: null,
circle: {
title: '昨日PUE',
value: 0,
},
center: {
title1: '实时PUE',
value1: 0,
title2: '上周PUE',
value2: 0,
title3: '上月PUE',
value3: 0,
},
right: {
title1: '总功率(kWh)',
value1: 0,
calculation1: '',
title2: 'IT功率(kW)',
value2: 0,
calculation2: '',
title3: '其他功率(kW)',
value3: 0,
},
showInterval: true,
}

View File

@ -7,55 +7,125 @@
<n-switch v-model:value="props.customData.enable" size="small"/>
</n-space>
</setting-item-box>
<setting-item-box name="开启演示模式">
<n-space>
<n-switch v-model:value="props.customData.demonstration" size="small"/>
<setting-item-box name="模式" alone>
<n-space >
<n-radio
:checked="checkedValue === 'normal'"
value="normal"
name="mode"
@change="handleChange"
>普通模式</n-radio>
<n-radio
:checked="checkedValue === 'demonstration'"
value="demonstration"
name="mode"
@change="handleChange"
>演示模式</n-radio>
<n-radio
:checked="checkedValue === 'manual'"
value="manual"
name="mode"
@change="handleChange"
>手动模式</n-radio>
</n-space>
</setting-item-box>
<setting-item-box name="报表ID" alone>
<setting-item name="控制左边和中间的ID">
<n-input v-model:value="props.customData.id" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="仪表盘">
<setting-item name="标题">
<n-input v-model:value="props.customData.circle.title" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="中间">
<setting-item name="标题1">
<n-input v-model:value="props.customData.center.title1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题2">
<n-input v-model:value="props.customData.center.title2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题3">
<n-input v-model:value="props.customData.center.title3" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="右边">
<setting-item name="标题1">
<n-input v-model:value="props.customData.right.title1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="测点计算公式1">
<n-input v-model:value="props.customData.right.calculation1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题2">
<n-input v-model:value="props.customData.right.title2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="测点计算公式2">
<n-input v-model:value="props.customData.right.calculation2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题3">
<n-input v-model:value="props.customData.right.title3" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<template v-if="checkedValue === 'normal'">
<setting-item-box name="报表ID" alone>
<setting-item name="控制左边和中间的ID">
<n-input v-model:value="props.customData.id" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="仪表盘">
<setting-item name="标题">
<n-input v-model:value="props.customData.circle.title" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="中间">
<setting-item name="标题1">
<n-input v-model:value="props.customData.center.title1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题2">
<n-input v-model:value="props.customData.center.title2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题3">
<n-input v-model:value="props.customData.center.title3" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="右边">
<setting-item name="标题1">
<n-input v-model:value="props.customData.right.title1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="测点计算公式1">
<n-input v-model:value="props.customData.right.calculation1" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题2">
<n-input v-model:value="props.customData.right.title2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="测点计算公式2">
<n-input v-model:value="props.customData.right.calculation2" size="small" placeholder="请输入"/>
</setting-item>
<setting-item name="标题3">
<n-input v-model:value="props.customData.right.title3" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
</template>
<template v-else-if="checkedValue === 'manual'">
<setting-item-box name="仪表盘">
<setting-item :name="props.customData.circle.title">
<n-input-number v-model:value="props.customData.circle.value" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="中间">
<setting-item :name="props.customData.center.title1">
<n-input-number v-model:value="props.customData.center.value1" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
<setting-item :name="props.customData.center.title2">
<n-input-number v-model:value="props.customData.center.value2" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
<setting-item :name="props.customData.center.title3">
<n-input-number v-model:value="props.customData.center.value3" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
<setting-item-box name="右边">
<setting-item :name="props.customData.right.title1">
<n-input-number v-model:value="props.customData.right.value1" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
<setting-item :name="props.customData.right.title2">
<n-input-number v-model:value="props.customData.right.value2" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
<setting-item :name="props.customData.right.title3">
<n-input-number v-model:value="props.customData.right.value3" step="0.001" size="small" placeholder="请输入"/>
</setting-item>
</setting-item-box>
</template>
</template>
<script lang="ts" setup>
import { watch, ref } from 'vue'
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
const props = defineProps(['customData', 'request'])
const checkedValue = ref('normal')
if(props.customData.demonstration) checkedValue.value = 'demonstration'
if(props.customData.manual) checkedValue.value = 'manual'
const handleChange = (e: Event) => {
checkedValue.value = (e.target as HTMLInputElement).value
if(checkedValue.value === 'normal') {
props.customData.demonstration = false
props.customData.manual = false
}
else if(checkedValue.value === 'demonstration') {
props.customData.demonstration = true
props.customData.manual = false
}
else if(checkedValue.value === 'manual') {
props.customData.demonstration = false
props.customData.manual = true
}
}
</script>
<style lang="scss" scoped>

View File

@ -488,14 +488,47 @@ const toTwoDecimalPlaces = (num:number) => {
return parseFloat(num.toFixed(2));
}
// const resetData = () => {
// let a = toTwoDecimalPlaces(1 + Math.random() * 0.6)
// let b = toTwoDecimalPlaces(1 + Math.random() * 0.6)
// let c = toTwoDecimalPlaces(1 + Math.random() * 0.6)
// let d = toTwoDecimalPlaces(1 + Math.random() * 0.6)
// let e = toTwoDecimalPlaces(Math.random() * 5000)
// let f = toTwoDecimalPlaces(e * (0.8 + Math.random() * 0.1))
// let g = e - f
//
// dataArr.value = [a, b, c, d, e, f, g]
// option2.value.series[0].data[0].value = toTwoDecimalPlaces(f * 100 / e)
// option2.value.title[0].text = toTwoDecimalPlaces(f * 100 / e) + ''
// option3.value.series[0].data[0].value = toTwoDecimalPlaces(g * 100/ e)
// option3.value.title[0].text = toTwoDecimalPlaces(g * 100 / e) + ''
// }
const resetData = () => {
let random = 0.8 + Math.random() * 0.2
let a = toTwoDecimalPlaces(1 + Math.random() * 0.6)
let b = toTwoDecimalPlaces(1 + Math.random() * 0.6)
let c = toTwoDecimalPlaces(1 + Math.random() * 0.6)
let d = toTwoDecimalPlaces(1 + Math.random() * 0.6)
let e = toTwoDecimalPlaces(Math.random() * 5000)
let f = toTwoDecimalPlaces(e * (0.8 + Math.random() * 0.1))
let g = e - f
let f = 1152 * 4 * random
let g = 277 * 4 * random
let e = f + g
let b = e / f
dataArr.value = [a, b, c, d, e, f, g]
option2.value.series[0].data[0].value = toTwoDecimalPlaces(f * 100 / e)
option2.value.title[0].text = toTwoDecimalPlaces(f * 100 / e) + ''
option3.value.series[0].data[0].value = toTwoDecimalPlaces(g * 100/ e)
option3.value.title[0].text = toTwoDecimalPlaces(g * 100 / e) + ''
}
const resetData1 = () => {
let a = customData.value.circle.value
let b = customData.value.center.value1
let c = customData.value.center.value2
let d = customData.value.center.value3
let e = customData.value.right.value1
let f = customData.value.right.value2
let g = customData.value.right.value3
dataArr.value = [a, b, c, d, e, f, g]
option2.value.series[0].data[0].value = toTwoDecimalPlaces(f * 100 / e)
@ -509,6 +542,10 @@ const getData = async () => {
resetData()
return
}
if(customData.value.manual) {
resetData1()
return
}
if(!customData.value.enable) {
dataArr.value = [1, 0, 0, 0, 0, 0, 0]
option2.value.series[0].data[0].value = 0
@ -530,6 +567,21 @@ watch(() => customData.value.demonstration, () => {
getData()
})
watch([
() => customData.value.manual,
() => customData.value.circle.value,
() => customData.value.center.value1,
() => customData.value.center.value2,
() => customData.value.center.value3,
() => customData.value.right.value1,
() => customData.value.right.value2,
() => customData.value.right.value3,
], () => {
getData()
}, {
deep: true
})
let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return

View File

@ -12,17 +12,11 @@ export const customData = {
{
name: '一号楼', show: true, label: '设计容量', value: 20000, label1: '已使用', calculation: '', floor: [
{ label: '1F', calculation: '' },
{ label: '2F', calculation: '' },
{ label: '3F', calculation: '' },
{ label: '4F', calculation: '' },
]
},
{
name: '二号楼', show: true, label: '设计容量', value: 20000, label1: '已使用', calculation: '', floor: [
{ label: '1F', calculation: '' },
{ label: '2F', calculation: '' },
{ label: '3F', calculation: '' },
{ label: '4F', calculation: '' },
]
}
],

View File

@ -121,9 +121,9 @@ onUnmounted(() => {
//
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
option.dataset = newData
})
// useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
// option.dataset = newData
// })
</script>
<style lang="scss" scoped>

View File

@ -450,7 +450,7 @@ export interface commonDataType {
// customEvent事件
export interface CustomEventType {
click: {
linkHead: 'http://' | 'https://'
linkHead: 'http://' | 'https://' | '/'
link: string
isBlank: boolean
}

View File

@ -69,21 +69,24 @@ const showModal = ref(false)
// init()
// })
const linkHeadOptions = ['http://', 'https://'].map(_ => ({label: _, value: _}))
const linkHeadOptions = ['http://', 'https://', '/'].map(_ => ({label: _, value: _}))
const finallyLink = computed(() => {
return targetData.value.customEvent.click.linkHead + (targetData.value as any).customEvent.click.link
})
const handleClick = () => {
if(!finallyLink.value) return
let isRelativePath = targetData.value.customEvent.click.linkHead === '/'
if(targetData.value.customEvent.click.isBlank) postMessageToParent({
type: 'windowOpen',
url: finallyLink.value,
openNew: true
openNew: true,
isRelativePath
})
else postMessageToParent({
type: 'windowOpen',
url: finallyLink.value,
isRelativePath
})
}
</script>

View File

@ -7,14 +7,17 @@ const bindEvent = (item:any) => {
obj = {
click: () => {
if(!link) return
let isRelativePath = linkHead === '/'
if(isBlank) postMessageToParent({
type: 'windowOpen',
url: `${linkHead}${link}`,
openNew: true
openNew: true,
isRelativePath
})
else postMessageToParent({
type: 'windowOpen',
url: `${linkHead}${link}`,
isRelativePath
})
}
}