mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-13 14:02:10 +08:00
feat: 调整接口
This commit is contained in:
huanghao1412
parent
8669f83162
commit
2615b37357
@ -81,11 +81,16 @@ const getData = async() => {
|
||||
offline_num: 0
|
||||
}
|
||||
})
|
||||
if (systemConfig.dglt_device_status_type_config && systemConfig.dglt_device_status_type_config !== '[]') {
|
||||
let config: any = []
|
||||
try {
|
||||
config = JSON.parse(customData.value.config)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
if (config && config.length) {
|
||||
// 如果配置了展示的设备分类（不配置默认全部）
|
||||
systemDatas.value = systemDatas.value.filter((e: any) => {
|
||||
const dglt_device_status_type_config = JSON.parse(systemConfig.dglt_device_status_type_config)
|
||||
return dglt_device_status_type_config.find((v: any) => v.code === e.device_code)
|
||||
return config.find((v: any) => v.code === e.device_code)
|
||||
})
|
||||
}
|
||||
const params = {
|
||||
@ -121,6 +126,8 @@ const openDialog = (item: any) => {
|
||||
})
|
||||
}
|
||||
|
||||
watch(() => customData.value.config, getData)
|
||||
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
if(!isPreview()) return
|
||||
|
||||
@ -9,11 +9,11 @@ export const customData = {
|
||||
title: '近7日用电量',
|
||||
title1: '当月用电量',
|
||||
title2: '年用电量',
|
||||
barId1: null,
|
||||
barId2: null,
|
||||
barName1: '1号楼',
|
||||
barName2: '2号楼',
|
||||
enable: false,
|
||||
arr: [
|
||||
{id: null, name: '1号楼'},
|
||||
{id: null, name: '2号楼'},
|
||||
],
|
||||
showInterval: true,
|
||||
}
|
||||
|
||||
|
||||
@ -13,24 +13,62 @@
|
||||
<n-switch v-model:value="props.customData.enable" />
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="柱1-ID" :alone="true">
|
||||
<n-input-number v-model:value="props.customData.barId1" size="small" placeholder="请输入"/>
|
||||
<setting-item-box v-for="(it, i) in props.customData.arr" :key="i" :name="`柱状图-${i + 1}`">
|
||||
<setting-item name="名字">
|
||||
<n-input v-model:value="it.name" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
<setting-item name="报表ID">
|
||||
<n-input-number v-model:value="it.id" size="small" placeholder="请输入"/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="柱1-名字" :alone="true">
|
||||
<n-input v-model:value="props.customData.barName1" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="柱2-ID" :alone="true">
|
||||
<n-input-number v-model:value="props.customData.barId2" size="small" placeholder="请输入"/>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="柱2-名字" :alone="true">
|
||||
<n-input v-model:value="props.customData.barName1" size="small" placeholder="请输入"/>
|
||||
<setting-item-box name="增加楼栋" :alone="true">
|
||||
<n-space vertical>
|
||||
<div v-for="(item, i) in computeArr" :key="i" style="margin-top: 2px;display: flex">
|
||||
<n-text style="flex: 1;margin-right: 10px;">{{ item }}</n-text>
|
||||
<n-button v-if="computeArr.length !== 1" style="flex: none;margin-right: 10px;" @click="handleDelete(i)" circle size="tiny">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<CloseIcon/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<n-button v-if="i === computeArr.length - 1" @click="handleAdd" circle size="tiny">
|
||||
<template #icon>
|
||||
<n-icon>
|
||||
<AddIcon/>
|
||||
</n-icon>
|
||||
</template>
|
||||
</n-button>
|
||||
<div v-else style="width: 22px"></div>
|
||||
</div>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import {computed} from "vue";
|
||||
import {cloneDeep} from "lodash";
|
||||
import {icon} from "@/plugins";
|
||||
|
||||
const { CloseIcon, AddIcon } = icon.ionicons5
|
||||
|
||||
const props = defineProps(['customData', 'request'])
|
||||
|
||||
const computeArr = computed(() => {
|
||||
return props.customData.arr.map((item: any, index: number) => {
|
||||
return `柱状图-${index + 1}`
|
||||
})
|
||||
})
|
||||
|
||||
const handleDelete = (i: number) => {
|
||||
props.customData.arr.splice(i, 1)
|
||||
}
|
||||
|
||||
const handleAdd = () => {
|
||||
let obj = { name: '', id: null }
|
||||
props.customData.arr.push(cloneDeep(obj))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -56,52 +56,41 @@ let title = computed(() => {
|
||||
return v
|
||||
})
|
||||
|
||||
let buildingOne7DaysData: Ref<number[]> = ref([])
|
||||
let buildingTen7DaysData: Ref<number[]> = ref([])
|
||||
let weekData: Ref<any> = ref({})
|
||||
const getWeekData = (i: number) => {
|
||||
let params = {
|
||||
strategy_ids: [(customData.value as any)[`barId${i + 1}`]]
|
||||
strategy_ids: [customData.value.arr[i].id]
|
||||
}
|
||||
publicInterface('/dynamic_report/manager', 'query_err_report_by_one', params).then((res: any) => {
|
||||
if (res.data) {
|
||||
if (i === 0) {
|
||||
buildingOne7DaysData.value = res.data.map((e: any) => parseFloat(e.value).toFixed(2))
|
||||
weekData.value[i] = res.data.map((e: any) => parseFloat(e.value).toFixed(2))
|
||||
} else {
|
||||
buildingTen7DaysData.value = res.data.map((e: any) => parseFloat(e.value).toFixed(2))
|
||||
}
|
||||
} else {
|
||||
if (i === 0) {
|
||||
buildingOne7DaysData.value = [0, 0, 0, 0, 0, 0, 0]
|
||||
} else {
|
||||
buildingTen7DaysData.value = [0, 0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
weekData.value[i] = [0, 0, 0, 0, 0, 0, 0]
|
||||
}
|
||||
handleChart()
|
||||
})
|
||||
}
|
||||
|
||||
let monthData: Ref<any> = ref([])
|
||||
const getMonthData = (duration: number, start_time: string, end_time: string) => {
|
||||
const params = {
|
||||
duration, // 2，查询日报；3，查询月报；4，年报
|
||||
start_time,
|
||||
end_time,
|
||||
strategy_ids: [customData.value.barId1, customData.value.barId2],
|
||||
strategy_ids: customData.value.arr.map(_ => _.id),
|
||||
}
|
||||
publicInterface('/dynamic_report/err', 'err', params).then((res: any) => {
|
||||
if (res.data && res.data.tables) {
|
||||
const data = res.data.tables.data
|
||||
buildingOne7DaysData.value = data.map((e: any) => {
|
||||
if (e.field0) {
|
||||
return e.field0
|
||||
} else {
|
||||
return 0
|
||||
monthData.value = customData.value.arr.map((item, i) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: data.map((e: any) => {
|
||||
if(e[`field${i}`]) {
|
||||
return e[`field${i}`]
|
||||
}
|
||||
else return 0
|
||||
})
|
||||
buildingTen7DaysData.value = data.map((e: any) => {
|
||||
if (e.field1) {
|
||||
return e.field1
|
||||
} else {
|
||||
return 0
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -112,12 +101,21 @@ const getMonthData = (duration: number, start_time: string, end_time: string) =>
|
||||
let echart6Options:Ref<any> = ref({})
|
||||
const vChartRef = ref()
|
||||
const handleChart = () => {
|
||||
// x轴数据
|
||||
let dateList:any = []
|
||||
let data: any = []
|
||||
if (radio.value.value === '周') {
|
||||
for (let i = 7; i > 0; i--) {
|
||||
dateList.push(moment().subtract(i, 'day').startOf('day').format('M月D日'))
|
||||
}
|
||||
} else if (radio.value.value === '月') {
|
||||
data = customData.value.arr.map((item, i) => {
|
||||
return {
|
||||
name: item.name,
|
||||
value: weekData.value[i],
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (radio.value.value === '月') {
|
||||
const startDate = moment().startOf('month').format('yyyy-MM-DD HH:mm:ss')
|
||||
const endDate = moment().endOf('month').subtract(1, 'day').format('yyyy-MM-DD HH:mm:ss')
|
||||
dateList.push(startDate)
|
||||
@ -128,11 +126,26 @@ const handleChart = () => {
|
||||
addNum++
|
||||
}
|
||||
dateList = dateList.map((e: any) => moment(e).format('M月D日'))
|
||||
} else if (radio.value.value === '年') {
|
||||
dateList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
data = monthData.value
|
||||
}
|
||||
else if (radio.value.value === '年') {
|
||||
dateList = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
data = monthData.value
|
||||
}
|
||||
let color = [
|
||||
['rgba(73, 146, 255, .3)', 'rgba(73, 146, 255, 1)'],
|
||||
['rgba(124, 255, 178, .1)', 'rgba(124, 255, 178, 1)'],
|
||||
['rgba(253, 221, 96, .3)', 'rgba(253, 221, 96, 1)'],
|
||||
['rgba(255, 110, 118, .3)', 'rgba(255, 110, 118, 1)'],
|
||||
['rgba(88, 217, 249, .3)', 'rgba(88, 217, 249, 1)'],
|
||||
['rgba(5, 192, 145, .3)', 'rgba(5, 192, 145, 1)'],
|
||||
['rgba(255, 138, 69, .3)', 'rgba(255, 138, 69, 1)'],
|
||||
['rgba(141, 72, 227, .3)', 'rgba(141, 72, 227, 1)'],
|
||||
['rgba(221, 121, 255, .3)', 'rgba(221, 121, 255, 1)']
|
||||
]
|
||||
|
||||
echart6Options.value = {
|
||||
color: ['#00ffff', '#395bf0'],
|
||||
color: color.map(_ => _[1]),
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
@ -149,7 +162,7 @@ const handleChart = () => {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
data: [customData.value.barName1, customData.value.barName2]
|
||||
data: customData.value.arr.map(_ => _.name)
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
@ -214,9 +227,9 @@ const handleChart = () => {
|
||||
data: dateList
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: customData.value.barName1,
|
||||
series: data.map((_: any, i: number) => {
|
||||
return {
|
||||
name: _.name,
|
||||
type: 'bar',
|
||||
// xAxisIndex: 1,
|
||||
zlevel: 1,
|
||||
@ -232,11 +245,11 @@ const handleChart = () => {
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 246, 249, .3)'
|
||||
color: color[i][0]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 246, 249, 1)'
|
||||
color: color[i][1]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -244,40 +257,9 @@ const handleChart = () => {
|
||||
}
|
||||
},
|
||||
barWidth: '20%',
|
||||
data: buildingOne7DaysData.value
|
||||
},
|
||||
{
|
||||
name: customData.value.barName2,
|
||||
type: 'bar',
|
||||
// xAxisIndex: 1,
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: () => {
|
||||
return {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 1,
|
||||
x2: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(63, 146, 250, .3)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(63, 146, 250, 1)'
|
||||
data: _.value
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
barWidth: '20%',
|
||||
data: buildingTen7DaysData.value
|
||||
}
|
||||
],
|
||||
}),
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
@ -320,8 +302,9 @@ const getData = () => {
|
||||
let v = radio.value.value
|
||||
if(customData.value.enable) {
|
||||
if(v === '周') {
|
||||
getWeekData(0)
|
||||
getWeekData(1)
|
||||
customData.value.arr.forEach((item, i) => {
|
||||
getWeekData(i)
|
||||
})
|
||||
}
|
||||
else if(v === '月') {
|
||||
getMonthData(3, moment().startOf('month').format('yyyy-MM-DD HH:mm:ss'), moment().endOf('month').format('yyyy-MM-DD HH:mm:ss'))
|
||||
@ -333,7 +316,8 @@ const getData = () => {
|
||||
}
|
||||
|
||||
watch(() => radio.value.value, getData)
|
||||
watch(() => customData.value.enable, getData)
|
||||
watch([() => customData.value.enable, () => customData.value.arr.map(_ => _.id)], getData, { deep: true })
|
||||
watch(() => customData.value.arr.map(_ => _.name), handleChart, { deep: true })
|
||||
|
||||
let timer:unknown
|
||||
watch(() => [props.chartConfig.request.requestInterval, props.chartConfig.request.requestIntervalUnit].join('&&'), v => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user