feat: 开启演示模式 增加数据

This commit is contained in:
huanghao1412 2024-07-15 17:52:05 +08:00
parent a32bb7283b
commit 6eaa39045e
11 changed files with 131 additions and 17 deletions

4
.env
View File

@ -3,9 +3,9 @@ VITE_DEV_PORT = '8080'
# development path
# VITE_DEV_PATH = 'http://192.168.0.34:11887'
VITE_DEV_PATH = 'http://114.115.222.135:9008/'
VITE_DEV_PATH = 'http://114.115.222.135:9015/'
# VITE_DEV_PATH = 'http://192.168.0.120:3001'
VITE_DEV_TOKEN = 'e5982f26-54bb-45d8-827a-02bbb42a2eae'
VITE_DEV_TOKEN = '2a6c435a-1b8f-43b6-938c-ab6b73f96801'
# production path
VITE_PRO_PATH = 'http://192.168.0.235:8177'

View File

@ -253,17 +253,17 @@
<div class="item">
<div class="rect"></div>
<div class="label">{{value[1].label}}</div>
<div class="value">{{value[1].value}}</div>
<div class="value" :style="{color: getColor(value[1].value)}">{{value[1].value}}</div>
</div>
<div class="item">
<div class="rect"></div>
<div class="label">{{value[2].label}}</div>
<div class="value">{{value[2].value}}</div>
<div class="value" :style="{color: getColor(value[2].value)}">{{value[2].value}}</div>
</div>
<div class="item">
<div class="rect"></div>
<div class="label">{{value[3].label}}</div>
<div class="value">{{value[3].value}}</div>
<div class="value" :style="{color: getColor(value[3].value)}">{{value[3].value}}</div>
</div>
</div>
<div class="split"></div>
@ -277,6 +277,18 @@ type ItemType = { label: string, value: number }
type ValueType = ItemType[]
const { value } = defineProps(['value']) as { value: ValueType }
const getColor = (pue: number) => {
let color = '#4dca59'
if (pue >= 0 && pue < 1.7) {
color = '#4dca59'
} else if (pue >= 1.7 && pue < 2.2) {
color = '#e3bb26'
} else if (pue >= 2.2) {
color = '#d73f40'
}
return color
}
const color = ref('#4dca59')
const getRotate = (horizontal:string, data:number) => {
// 0

View File

@ -15,6 +15,7 @@ export const option = {
export const customData = {
title: '综合PUE',
enable: false,
demonstration: false,
id: null,
circle: {
title: '昨日PUE',

View File

@ -7,6 +7,11 @@
<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"/>
</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="请输入"/>

View File

@ -397,7 +397,7 @@ const option3 = ref({
})
const getLeftData = async () => {
dataArr.value[0] = 1
// dataArr.value[0] = 1
if(customData.value.id) {
const params = {
duration: 3, // 234
@ -429,8 +429,8 @@ const getLeftData = async () => {
}
const getCenterData = async () => {
dataArr.value[2] = 0
dataArr.value[3] = 0
// dataArr.value[2] = 0
// dataArr.value[3] = 0
if(customData.value.id) {
const params = {
strategy_ids: [Number(customData.value.id)]
@ -445,14 +445,14 @@ const getCenterData = async () => {
const getRightData = async () => {
//
dataArr.value[1] = 0
dataArr.value[4] = 0
dataArr.value[5] = 0
dataArr.value[6] = 0
option2.value.series[0].data[0].value = 0
option2.value.title[0].text = '0'
option3.value.series[0].data[0].value = 0
option3.value.title[0].text = '0'
// dataArr.value[1] = 0
// dataArr.value[4] = 0
// dataArr.value[5] = 0
// dataArr.value[6] = 0
// option2.value.series[0].data[0].value = 0
// option2.value.title[0].text = '0'
// option3.value.series[0].data[0].value = 0
// option3.value.title[0].text = '0'
let item = {
time_out: 60,
@ -484,8 +484,31 @@ const getRightData = async () => {
}
}
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 getData = async () => {
if(customData.value.demonstration) {
resetData()
return
}
if(!customData.value.enable) {
dataArr.value = [1, 0, 0, 0, 0, 0, 0]
option2.value.series[0].data[0].value = 0
@ -503,6 +526,10 @@ watch(() => customData.value.enable, () => {
getData()
})
watch(() => customData.value.demonstration, () => {
getData()
})
let timer: unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return

View File

@ -10,6 +10,7 @@ export const customData = {
title1: '当月用电量',
title2: '年用电量',
enable: false,
demonstration: false,
arr: [
{id: null, name: '1号楼'},
{id: null, name: '2号楼'},

View File

@ -10,7 +10,12 @@
</setting-item-box>
<setting-item-box name="启用数据">
<n-space>
<n-switch v-model:value="props.customData.enable" />
<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"/>
</n-space>
</setting-item-box>
<setting-item-box v-for="(it, i) in props.customData.arr" :key="i" :name="`柱状图-${i + 1}`">

View File

@ -298,8 +298,49 @@ const handleChart = () => {
}
}
const toTwoDecimalPlaces = (num: number) => {
return parseFloat(num.toFixed(2));
}
const getData = () => {
let v = radio.value.value
if(customData.value.demonstration) {
if(v === '周') {
customData.value.arr.forEach((_, i) => {
let base = Math.random() * 14000
weekData.value[i] = Array(7).fill('').map(() => {
return toTwoDecimalPlaces(base + Math.random() * 2000)
})
})
handleChart()
}
else if(v === '月') {
monthData.value = customData.value.arr.map(_ => {
let base = Math.random() * 14000
return {
name: _.name,
value: Array((moment().daysInMonth() as any) * 1).fill('').map(() => {
return toTwoDecimalPlaces(base + Math.random() * 2000)
})
}
})
handleChart()
}
else if(v === '年') {
monthData.value = customData.value.arr.map(_ => {
let base = Math.random() * 14000
return {
name: _.name,
value: Array(12).fill('').map(() => {
return toTwoDecimalPlaces(base + Math.random() * 2000)
})
}
})
handleChart()
handleChart()
}
return
}
if(customData.value.enable) {
if(v === '周') {
customData.value.arr.forEach((item, i) => {
@ -315,6 +356,7 @@ const getData = () => {
}
}
watch(() => customData.value.demonstration, getData)
watch(() => radio.value.value, getData)
watch([() => customData.value.enable, () => customData.value.arr.map(_ => _.id)], getData, { deep: true })
watch(() => customData.value.arr.map(_ => _.name), handleChart, { deep: true })

View File

@ -8,6 +8,7 @@ export const option = {}
export const customData = {
title: '区域温度TOP10',
ids: '',
demonstration: false,
showInterval: true,
}

View File

@ -2,6 +2,11 @@
<setting-item-box name="标题" :alone="true">
<n-input v-model:value="props.customData.title" size="small" placeholder="请输入"/>
</setting-item-box>
<setting-item-box name="开启演示模式" :alone="true">
<n-space>
<n-switch v-model:value="props.customData.demonstration" size="small"/>
</n-space>
</setting-item-box>
<setting-item-box name="区域温度测点(英文逗号隔开)" :alone="true">
<n-input v-model:value="props.customData.ids" size="small" placeholder="请输入"/>
</setting-item-box>

View File

@ -73,6 +73,10 @@ const jumpToMachineRoom = (row: any) => {
}
}
const toTwoDecimalPlaces = (num: number) => {
return parseFloat(num.toFixed(2));
}
const getData = () => {
const params = {
signal_ids: customData.value.ids.split(',')
@ -80,10 +84,21 @@ const getData = () => {
publicInterface('/dcim/dems/device_point', 'temp_list_dashboard', params).then((res: any) => {
if (res.data && res.data.length) {
data.value = res.data.slice(0, 10)
if(customData.value.demonstration) {
data.value = data.value.map((item: any) => {
if(!item?.dems_device_point?.node_value) {
if(!item.dems_device_point) item.dems_device_point = {}
item.dems_device_point.node_value = toTwoDecimalPlaces(25 + Math.random() * 10)
}
return item
})
}
}
})
}
watch(() => customData.value.demonstration, getData)
let timer:unknown
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
if(!isPreview()) return