mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
feat: 开启演示模式 增加数据
This commit is contained in:
parent
a32bb7283b
commit
6eaa39045e
4
.env
4
.env
@ -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'
|
||||
|
@ -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时,两端点的纵坐标
|
||||
|
@ -15,6 +15,7 @@ export const option = {
|
||||
export const customData = {
|
||||
title: '综合PUE',
|
||||
enable: false,
|
||||
demonstration: false,
|
||||
id: null,
|
||||
circle: {
|
||||
title: '昨日PUE',
|
||||
|
@ -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="请输入"/>
|
||||
|
@ -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, // 2,查询日报;3,查询月报;4,年报
|
||||
@ -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
|
||||
|
@ -10,6 +10,7 @@ export const customData = {
|
||||
title1: '当月用电量',
|
||||
title2: '年用电量',
|
||||
enable: false,
|
||||
demonstration: false,
|
||||
arr: [
|
||||
{id: null, name: '1号楼'},
|
||||
{id: null, name: '2号楼'},
|
||||
|
@ -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}`">
|
||||
|
@ -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 })
|
||||
|
@ -8,6 +8,7 @@ export const option = {}
|
||||
export const customData = {
|
||||
title: '区域温度TOP10',
|
||||
ids: '',
|
||||
demonstration: false,
|
||||
showInterval: true,
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user