mirror of
https://gitee.com/dromara/go-view.git
synced 2025-06-30 00:29:16 +08:00
feat: token失效跳转登录页 设备分类接口加空间id 加仪表盘 增加下右距离选项 采集流量实时监控刷新
This commit is contained in:
huanghao1412
parent
44f99b06b7
commit
9a1ecb7243
@ -1,5 +1,5 @@
|
||||
import axios, { AxiosResponse, AxiosRequestConfig, Axios, AxiosError, InternalAxiosRequestConfig } from 'axios'
|
||||
import { RequestHttpHeaderEnum, ResultEnum, ModuleTypeEnum } from '@/enums/httpEnum'
|
||||
import { RequestHttpHeaderEnum, ResultEnum, ResultErrcode } from '@/enums/httpEnum'
|
||||
import { PageEnum, ErrorPageNameMap } from '@/enums/pageEnum'
|
||||
import { StorageEnum } from '@/enums/storageEnum'
|
||||
import { axiosPre } from '@/settings/httpSetting'
|
||||
@ -7,6 +7,7 @@ import { SystemStoreEnum, SystemStoreUserInfoEnum } from '@/store/modules/system
|
||||
import { redirectErrorPage, getLocalStorage, routerTurnByName, isPreview } from '@/utils'
|
||||
import { fetchAllowList } from './axios.config'
|
||||
import includes from 'lodash/includes'
|
||||
import { postMessageToParent } from "@/utils";
|
||||
|
||||
export interface MyResponseType<T> {
|
||||
code: ResultEnum
|
||||
@ -50,16 +51,27 @@ axiosInstance.interceptors.request.use(
|
||||
// 响应拦截器
|
||||
axiosInstance.interceptors.response.use(
|
||||
(res: AxiosResponse) => {
|
||||
const { code, errcode, errmsg } = res.data as { code: number, errcode: string, errmsg: string }
|
||||
|
||||
const logOutCodeList = ['00004', '000012', '000013']
|
||||
if(logOutCodeList.some(_ => _ === errcode)) {
|
||||
window['$message'].error(errmsg)
|
||||
setTimeout(() => {
|
||||
postMessageToParent({
|
||||
type: 'logOut'
|
||||
})
|
||||
})
|
||||
return Promise.resolve(res.data)
|
||||
}
|
||||
// 预览页面错误不进行处理
|
||||
if (isPreview()) {
|
||||
return Promise.resolve(res.data)
|
||||
}
|
||||
const { code } = res.data as { code: number }
|
||||
|
||||
if (code === undefined || code === null) return Promise.resolve(res.data)
|
||||
// if (code === undefined || code === null) return Promise.resolve(res.data)
|
||||
|
||||
// 成功
|
||||
if (code === ResultEnum.SUCCESS) {
|
||||
if (errcode === ResultErrcode.SUCCESS) {
|
||||
return Promise.resolve(res.data)
|
||||
}
|
||||
|
||||
@ -71,27 +83,28 @@ axiosInstance.interceptors.response.use(
|
||||
// }
|
||||
|
||||
// 固定错误码重定向
|
||||
if (ErrorPageNameMap.get(code)) {
|
||||
redirectErrorPage(code)
|
||||
return Promise.resolve(res.data)
|
||||
}
|
||||
// if (ErrorPageNameMap.get(code)) {
|
||||
// redirectErrorPage(code)
|
||||
// return Promise.resolve(res.data)
|
||||
// }
|
||||
|
||||
// 提示错误
|
||||
window['$message'].error(window['$t']((res.data as any).msg))
|
||||
// 统一提示错误
|
||||
window['$message'].error(errmsg)
|
||||
return Promise.resolve(res.data)
|
||||
},
|
||||
(err: AxiosError) => {
|
||||
const status = err.response?.status
|
||||
switch (status) {
|
||||
case 401:
|
||||
routerTurnByName(PageEnum.BASE_LOGIN_NAME)
|
||||
Promise.reject(err)
|
||||
break
|
||||
|
||||
default:
|
||||
Promise.reject(err)
|
||||
break
|
||||
}
|
||||
Promise.reject(err)
|
||||
// const status = err.response?.status
|
||||
// switch (status) {
|
||||
// case 401:
|
||||
// routerTurnByName(PageEnum.BASE_LOGIN_NAME)
|
||||
// Promise.reject(err)
|
||||
// break
|
||||
//
|
||||
// default:
|
||||
// Promise.reject(err)
|
||||
// break
|
||||
// }
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
BIN
src/assets/images/chart/charts/Dashboard.png
Normal file
BIN
src/assets/images/chart/charts/Dashboard.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
@ -33,13 +33,37 @@
|
||||
<n-text depth="3">左</n-text>
|
||||
</template>
|
||||
</n-input-number>
|
||||
<n-input-number
|
||||
:value="marginBottom"
|
||||
@update:value="v => handleUpdate('y', v)"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="px"
|
||||
style="margin-top: 5px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-text depth="3">下</n-text>
|
||||
</template>
|
||||
</n-input-number>
|
||||
<n-input-number
|
||||
:value="marginRight"
|
||||
@update:value="v => handleUpdate('x', v)"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="px"
|
||||
style="margin-top: 5px;"
|
||||
>
|
||||
<template #prefix>
|
||||
<n-text depth="3">右</n-text>
|
||||
</template>
|
||||
</n-input-number>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { PropType, computed } from 'vue'
|
||||
import { PickCreateComponentType } from '@/packages/index.d'
|
||||
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
|
||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { renderIcon } from '@/utils'
|
||||
import { icon } from '@/plugins/index'
|
||||
import { EditCanvasConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
@ -125,4 +149,25 @@ const positonHandle = (key: string) => {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const marginBottom = computed(() => {
|
||||
const { h, y } = props.chartAttr
|
||||
const { height:canvasHeight } = props.canvasConfig
|
||||
return canvasHeight - h - y
|
||||
})
|
||||
const marginRight = computed(() => {
|
||||
const { w, x } = props.chartAttr
|
||||
const { width:canvasWidth } = props.canvasConfig
|
||||
return canvasWidth - w - x
|
||||
})
|
||||
const handleUpdate = (type: string, v: number) => {
|
||||
const { w, h } = props.chartAttr
|
||||
const { width:canvasWidth, height:canvasHeight } = props.canvasConfig
|
||||
if(type === 'y') {
|
||||
props.chartAttr.y = canvasHeight - h - v
|
||||
}
|
||||
else if(type === 'x') {
|
||||
props.chartAttr.x = canvasWidth - w - v
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
19
src/hooks/commonDataComponents/useDeviceClassRes.ts
Normal file
19
src/hooks/commonDataComponents/useDeviceClassRes.ts
Normal file
@ -0,0 +1,19 @@
|
||||
import { publicInterface } from "@/api/path";
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { ResultErrcode } from "@/enums/httpEnum";
|
||||
import { DeviceClassType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import dataJson from "./data.json";
|
||||
|
||||
export const handleDeviceClass = (targetComponent: CreateComponentType) => {
|
||||
const obj = targetComponent.commonData[targetComponent.commonData.currentSource] as DeviceClassType
|
||||
let { enable, space_complete_id } = obj
|
||||
if(!enable) return {
|
||||
errcode: ResultErrcode.SUCCESS,
|
||||
data: { ...dataJson },
|
||||
errmsg: ''
|
||||
}
|
||||
const query = {
|
||||
space_complete_id
|
||||
}
|
||||
return publicInterface('/dcim/system/custom_large_screen', 'count_device_by_device_type_active', query)
|
||||
}
|
||||
@ -12,6 +12,7 @@ import { handleRecordValueHistory } from './commonDataComponents/useRecordValueH
|
||||
import { handlePointRealTime } from './commonDataComponents/usePointRealTimeRes'
|
||||
import { handleSinglePoint } from './commonDataComponents/useSinglePointRes'
|
||||
import { handleMonthAlarmClass } from './commonDataComponents/useMonthAlarmClassRes'
|
||||
import { handleDeviceClass } from './commonDataComponents/useDeviceClassRes'
|
||||
import { handleNoParam } from './commonDataComponents/useNoParamRes'
|
||||
import { ResultErrcode } from '@/enums/httpEnum'
|
||||
|
||||
@ -97,7 +98,7 @@ export const useChartCommonData = (
|
||||
clearInterval(fetchInterval)
|
||||
|
||||
const fetchFn = async () => {
|
||||
let res
|
||||
let res, isMultiple = true
|
||||
switch (targetComponent.commonData?.currentSource) {
|
||||
case CurrentSourceEnum.POINTHISTORY:
|
||||
res = await handlePointHistory(targetComponent)
|
||||
@ -113,30 +114,41 @@ export const useChartCommonData = (
|
||||
break;
|
||||
case CurrentSourceEnum.SINGLEPOINT:
|
||||
res = await handleSinglePoint(targetComponent)
|
||||
isMultiple = false
|
||||
break;
|
||||
case CurrentSourceEnum.MONTHALARMCLASS:
|
||||
res = await handleMonthAlarmClass(targetComponent)
|
||||
break;
|
||||
case CurrentSourceEnum.DEVICECLASS:
|
||||
res = await handleDeviceClass(targetComponent)
|
||||
break;
|
||||
default:
|
||||
res = await handleNoParam(targetComponent)
|
||||
// res = await handleNoParam(targetComponent)
|
||||
break;
|
||||
}
|
||||
if (res && res.errcode === ResultErrcode.SUCCESS) {
|
||||
try {
|
||||
const { data } = res
|
||||
if(Object.prototype.toString.call(data) === '[object Array]') {
|
||||
if(data.length) echartsUpdateHandle(data[0])
|
||||
// 多值的
|
||||
if(isMultiple) {
|
||||
if(Object.prototype.toString.call(data) === '[object Array]') {
|
||||
if(data.length && data[0].dimensions && data[0].source) echartsUpdateHandle(data[0])
|
||||
else throw Error()
|
||||
}
|
||||
else if(Object.prototype.toString.call(data) === '[object Object]'){
|
||||
if(data.dimensions && data.source) echartsUpdateHandle(data)
|
||||
else throw Error()
|
||||
}
|
||||
}
|
||||
else if(Object.prototype.toString.call(data) === '[object Object]'){
|
||||
echartsUpdateHandle(data)
|
||||
// 单值的
|
||||
else {
|
||||
if(data) echartsUpdateHandle(data)
|
||||
else throw Error()
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
window['$message'].error('数据错误')
|
||||
}
|
||||
}
|
||||
else if(res && res.errmsg){
|
||||
window['$message'].warning(res.errmsg)
|
||||
}
|
||||
}
|
||||
// 普通初始化与组件交互处理监听
|
||||
watch(
|
||||
|
||||
@ -0,0 +1,32 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { DashboardConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
// import logo from '@/assets/logo.png'
|
||||
import { CurrentSourceEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
|
||||
|
||||
export const option = {
|
||||
dataset: 0,
|
||||
showUnit: false,
|
||||
showSubtext: true,
|
||||
showSubtextUnit: true,
|
||||
min: 0,
|
||||
max: 100,
|
||||
titleFontSize: 24,
|
||||
titleColor: '#fff',
|
||||
subtextFontSize: 20,
|
||||
subtextColor: '#fff'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
constructor() {
|
||||
super();
|
||||
this.attr.w = 250
|
||||
this.attr.h = 250
|
||||
this.commonData.currentSource = CurrentSourceEnum.SINGLEPOINT
|
||||
}
|
||||
public key = DashboardConfig.key
|
||||
public chartConfig = cloneDeep(DashboardConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<CollapseItem :name="`仪表盘`" :expanded="true">
|
||||
<SettingItemBox name="数据">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="config.showUnit" size="small" />
|
||||
<n-text>展示单位</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="最大值">
|
||||
<n-input-number v-model:value="config.max" placeholder="请输入最大值" size="small" clearable/>
|
||||
</SettingItem>
|
||||
<SettingItem name="最小值">
|
||||
<n-input-number v-model:value="config.min" placeholder="请输入最小值" size="small" clearable/>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number v-model:value="config.titleFontSize" placeholder="请输入字体大小" size="small" clearable/>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="config.titleColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="副标题">
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="config.showSubtext" size="small" />
|
||||
<n-text>展示副标题</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-space>
|
||||
<n-switch v-model:value="config.showSubtextUnit" size="small" />
|
||||
<n-text>展示单位</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
<SettingItem name="字体大小">
|
||||
<n-input-number v-model:value="config.subtextFontSize" placeholder="请输入字体大小" size="small" clearable/>
|
||||
</SettingItem>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="config.subtextColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import {computed, PropType} from "vue";
|
||||
import {GlobalThemeJsonType} from "@/settings/chartThemes";
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const config = computed(() => {
|
||||
return props.optionData
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/CustomComponents/index.d'
|
||||
|
||||
export const DashboardConfig: ConfigType = {
|
||||
key: 'Dashboard',
|
||||
chartKey: 'VDashboard',
|
||||
conKey: 'VCDashboard',
|
||||
title: '仪表盘',
|
||||
category: ChatCategoryEnum.CUSTOMCOMPONENTS,
|
||||
categoryName: ChatCategoryEnumName.CUSTOMCOMPONENTS,
|
||||
package: PackagesCategoryEnum.CUSTOMCOMPONENTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'Dashboard.png'
|
||||
}
|
||||
@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div style="position: relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 180 180" style="enable-background:new 0 0 180 180;">
|
||||
<defs>
|
||||
<linearGradient id="linear-gradient-pue" x1="32.09" y1="80" x2="171.91" y2="80" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4196ff" stop-opacity="0.1" />
|
||||
<stop offset="0.5" stop-color="#4196ff" stop-opacity="0.5" />
|
||||
<stop offset="1" stop-color="#4196ff" stop-opacity="0.1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-pue-2" x1="72" y1="191" x2="132" y2="191" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0" stop-color="#4196ff" stop-opacity="0.5" />
|
||||
<stop offset="1" stop-color="#4196ff" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient id="linear-gradient-pue-3" x1="0" x2="60" xlink:href="#linear-gradient-pue-2" />
|
||||
<linearGradient id="linear-gradient-pue-4" x1="144" x2="204" xlink:href="#linear-gradient-pue-2" />
|
||||
</defs>
|
||||
<g id="内容" transform="translate(-12, 10)">
|
||||
<circle cx="102" cy="80" r="80" style="fill:#4196ff;opacity:0.05" />
|
||||
<circle cx="102" cy="80" r="72.73" style="fill:#4196ff;opacity:0.1" />
|
||||
<path d="M58.73,142.92a76.38,76.38,0,0,0,87.27-.5" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<path d="M177.09,66.11A76.38,76.38,0,0,0,115,4.75" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<path d="M67.82,11.69A76.5,76.5,0,0,0,26.75,67" style="fill:none;stroke:#55a8fd;stroke-miterlimit:10;stroke-opacity:0.2" />
|
||||
<circle cx="102" cy="80" r="69.91" style="fill:#091c38" />
|
||||
<path d="M102,11.09A68.91,68.91,0,1,1,33.09,80,69,69,0,0,1,102,11.09m0-1A69.91,69.91,0,1,0,171.91,80,69.91,69.91,0,0,0,102,10.09Z" style="fill:url(#linear-gradient-pue)" />
|
||||
<g style="opacity:0.5">
|
||||
<path d="M50,123.65l-1.53,1.28a70.46,70.46,0,0,0,8.62,8.62L58.35,132A68.56,68.56,0,0,1,50,123.65Z" style="fill:#3a73ad" />
|
||||
<path d="M58.35,132l-1.28,1.53a70.24,70.24,0,0,0,10,7l1-1.73A68.28,68.28,0,0,1,58.35,132Z" style="fill:#3a73ad" />
|
||||
<path d="M43.18,114l-1.73,1a70.13,70.13,0,0,0,7,10L50,123.65A68.08,68.08,0,0,1,43.18,114Z" style="fill:#3a73ad" />
|
||||
<path d="M35.11,91.79l-2,.35a69.56,69.56,0,0,0,3.15,11.78l1.88-.69A67.34,67.34,0,0,1,35.11,91.79Z" style="fill:#3a73ad" />
|
||||
<path d="M160.82,114l1.73,1a69.49,69.49,0,0,0,5.16-11l-1.88-.68A67.78,67.78,0,0,1,160.82,114Z" style="fill:#3a73ad" />
|
||||
<path d="M102,147.91h0v2h0a70.34,70.34,0,0,0,12.14-1.05l-.35-2A68.44,68.44,0,0,1,102,147.91Z" style="fill:#3a73ad" />
|
||||
<path d="M113.79,146.89l.35,2a69.43,69.43,0,0,0,11.78-3.14l-.68-1.88A67.47,67.47,0,0,1,113.79,146.89Z" style="fill:#3a73ad" />
|
||||
<path d="M58.35,28l-1.28-1.53a70.46,70.46,0,0,0-8.62,8.62L50,36.35A68.42,68.42,0,0,1,58.35,28Z" style="fill:#3a73ad" />
|
||||
<path d="M154,36.35l1.53-1.28a70.46,70.46,0,0,0-8.62-8.62L145.65,28A68.49,68.49,0,0,1,154,36.35Z" style="fill:#3a73ad" />
|
||||
<path d="M160.82,46l1.73-1a70.09,70.09,0,0,0-7-10L154,36.35A68.23,68.23,0,0,1,160.82,46Z" style="fill:#3a73ad" />
|
||||
<path d="M38.17,56.77l-1.88-.68a69.49,69.49,0,0,0-3.15,11.78l2,.35A67.43,67.43,0,0,1,38.17,56.77Z" style="fill:#3a73ad" />
|
||||
<path d="M68,21.18l-1-1.73a70.12,70.12,0,0,0-10,7L58.35,28A68,68,0,0,1,68,21.18Z" style="fill:#3a73ad" />
|
||||
<path d="M78.77,16.17l-.68-1.88a69.72,69.72,0,0,0-11,5.16l1,1.73A67.55,67.55,0,0,1,78.77,16.17Z" style="fill:#3a73ad" />
|
||||
<path d="M113.79,13.11l.35-2A70.43,70.43,0,0,0,102,10.09v2A68.44,68.44,0,0,1,113.79,13.11Z" style="fill:#3a73ad" />
|
||||
</g>
|
||||
<g style="opacity:0.25">
|
||||
<path d="M102,22.09A57.91,57.91,0,1,1,44.09,80,58,58,0,0,1,102,22.09m0-1A58.91,58.91,0,1,0,160.91,80,58.91,58.91,0,0,0,102,21.09Z" style="fill:#55a8fd" />
|
||||
</g>
|
||||
<line x1="102" y1="14" x2="102" y2="20" style="fill:#55a8fd" />
|
||||
<line x1="99.81" y1="17.41" x2="99.88" y2="19.43" style="fill:#55a8fd" />
|
||||
<line x1="97.49" y1="15.51" x2="97.77" y2="19.54" style="fill:#55a8fd" />
|
||||
<line x1="95.46" y1="17.72" x2="95.67" y2="19.73" style="fill:#55a8fd" />
|
||||
<line x1="93" y1="15.98" x2="93.56" y2="19.98" style="fill:#55a8fd" />
|
||||
<line x1="91.13" y1="18.32" x2="91.48" y2="20.32" style="fill:#55a8fd" />
|
||||
<line x1="88.56" y1="16.77" x2="89.4" y2="20.72" style="fill:#55a8fd" />
|
||||
<line x1="86.85" y1="19.23" x2="87.34" y2="21.19" style="fill:#55a8fd" />
|
||||
<line x1="84.18" y1="17.86" x2="85.29" y2="21.74" style="fill:#55a8fd" />
|
||||
<line x1="82.65" y1="20.44" x2="83.27" y2="22.36" style="fill:#55a8fd" />
|
||||
<line x1="79.89" y1="19.25" x2="81.27" y2="23.05" style="fill:#55a8fd" />
|
||||
<line x1="78.54" y1="21.93" x2="79.3" y2="23.81" style="fill:#55a8fd" />
|
||||
<line x1="75.71" y1="20.94" x2="77.35" y2="24.63" style="fill:#55a8fd" />
|
||||
<line x1="74.55" y1="23.71" x2="75.43" y2="25.53" style="fill:#55a8fd" />
|
||||
<line x1="71.65" y1="22.92" x2="73.55" y2="26.49" style="fill:#55a8fd" />
|
||||
<line x1="70.69" y1="25.76" x2="71.7" y2="27.51" style="fill:#55a8fd" />
|
||||
<line x1="67.74" y1="25.18" x2="69.88" y2="28.6" style="fill:#55a8fd" />
|
||||
<line x1="66.98" y1="28.08" x2="68.11" y2="29.75" style="fill:#55a8fd" />
|
||||
<line x1="64" y1="27.7" x2="66.38" y2="30.97" style="fill:#55a8fd" />
|
||||
<line x1="63.44" y1="30.65" x2="64.69" y2="32.24" style="fill:#55a8fd" />
|
||||
<line x1="60.45" y1="30.48" x2="63.04" y2="33.57" style="fill:#55a8fd" />
|
||||
<line x1="60.1" y1="33.46" x2="61.45" y2="34.96" style="fill:#55a8fd" />
|
||||
<line x1="57.09" y1="33.5" x2="59.9" y2="36.4" style="fill:#55a8fd" />
|
||||
<line x1="56.95" y1="36.5" x2="58.4" y2="37.9" style="fill:#55a8fd" />
|
||||
<line x1="53.96" y1="36.74" x2="56.96" y2="39.45" style="fill:#55a8fd" />
|
||||
<line x1="54.03" y1="39.75" x2="55.57" y2="41.04" style="fill:#55a8fd" />
|
||||
<line x1="51.06" y1="40.2" x2="54.24" y2="42.69" style="fill:#55a8fd" />
|
||||
<line x1="51.34" y1="43.19" x2="52.97" y2="44.38" style="fill:#55a8fd" />
|
||||
<line x1="48.41" y1="43.85" x2="51.75" y2="46.11" style="fill:#55a8fd" />
|
||||
<line x1="48.89" y1="46.81" x2="50.6" y2="47.88" style="fill:#55a8fd" />
|
||||
<line x1="46.01" y1="47.68" x2="49.51" y2="49.7" style="fill:#55a8fd" />
|
||||
<line x1="46.71" y1="50.6" x2="48.49" y2="51.55" style="fill:#55a8fd" />
|
||||
<line x1="43.9" y1="51.66" x2="47.53" y2="53.43" style="fill:#55a8fd" />
|
||||
<line x1="44.79" y1="54.53" x2="46.63" y2="55.35" style="fill:#55a8fd" />
|
||||
<line x1="42.06" y1="55.78" x2="45.81" y2="57.3" style="fill:#55a8fd" />
|
||||
<line x1="43.15" y1="58.58" x2="45.05" y2="59.27" style="fill:#55a8fd" />
|
||||
<line x1="40.52" y1="60.02" x2="44.36" y2="61.27" style="fill:#55a8fd" />
|
||||
<line x1="41.8" y1="62.74" x2="43.74" y2="63.29" style="fill:#55a8fd" />
|
||||
<line x1="39.27" y1="64.36" x2="43.19" y2="65.34" style="fill:#55a8fd" />
|
||||
<line x1="40.74" y1="66.98" x2="42.72" y2="67.4" style="fill:#55a8fd" />
|
||||
<line x1="38.34" y1="68.78" x2="42.31" y2="69.48" style="fill:#55a8fd" />
|
||||
<line x1="39.98" y1="71.29" x2="41.98" y2="71.57" style="fill:#55a8fd" />
|
||||
<line x1="37.71" y1="73.24" x2="41.72" y2="73.67" style="fill:#55a8fd" />
|
||||
<line x1="39.53" y1="75.63" x2="41.54" y2="75.77" style="fill:#55a8fd" />
|
||||
<line x1="37.39" y1="77.74" x2="41.43" y2="77.89" style="fill:#55a8fd" />
|
||||
<line x1="39" y1="80" x2="42" y2="80" style="fill:#55a8fd" />
|
||||
<line x1="37.39" y1="82.26" x2="41.43" y2="82.11" style="fill:#55a8fd" />
|
||||
<line x1="39.53" y1="84.37" x2="41.54" y2="84.23" style="fill:#55a8fd" />
|
||||
<line x1="37.71" y1="86.76" x2="41.72" y2="86.33" style="fill:#55a8fd" />
|
||||
<line x1="39.98" y1="88.71" x2="41.98" y2="88.43" style="fill:#55a8fd" />
|
||||
<line x1="38.34" y1="91.22" x2="42.31" y2="90.52" style="fill:#55a8fd" />
|
||||
<line x1="40.74" y1="93.02" x2="42.72" y2="92.6" style="fill:#55a8fd" />
|
||||
<line x1="39.27" y1="95.64" x2="43.19" y2="94.66" style="fill:#55a8fd" />
|
||||
<line x1="41.8" y1="97.26" x2="43.74" y2="96.71" style="fill:#55a8fd" />
|
||||
<line x1="40.52" y1="99.98" x2="44.36" y2="98.73" style="fill:#55a8fd" />
|
||||
<line x1="43.15" y1="101.42" x2="45.05" y2="100.73" style="fill:#55a8fd" />
|
||||
<line x1="42.06" y1="104.22" x2="45.81" y2="102.7" style="fill:#55a8fd" />
|
||||
<line x1="44.79" y1="105.47" x2="46.63" y2="104.65" style="fill:#55a8fd" />
|
||||
<line x1="43.9" y1="108.34" x2="47.53" y2="106.57" style="fill:#55a8fd" />
|
||||
<line x1="46.71" y1="109.4" x2="48.49" y2="108.45" style="fill:#55a8fd" />
|
||||
<line x1="46.01" y1="112.32" x2="49.51" y2="110.3" style="fill:#55a8fd" />
|
||||
<line x1="48.89" y1="113.19" x2="50.6" y2="112.12" style="fill:#55a8fd" />
|
||||
<line x1="48.41" y1="116.15" x2="51.75" y2="113.89" style="fill:#55a8fd" />
|
||||
<line x1="51.34" y1="116.81" x2="52.97" y2="115.62" style="fill:#55a8fd" />
|
||||
<line x1="51.06" y1="119.8" x2="54.24" y2="117.31" style="fill:#55a8fd" />
|
||||
<line x1="54.03" y1="120.25" x2="55.57" y2="118.96" style="fill:#55a8fd" />
|
||||
<line x1="53.96" y1="123.26" x2="56.96" y2="120.55" style="fill:#55a8fd" />
|
||||
<line x1="56.95" y1="123.5" x2="58.4" y2="122.1" style="fill:#55a8fd" />
|
||||
<line x1="57.09" y1="126.5" x2="59.9" y2="123.6" style="fill:#55a8fd" />
|
||||
<line x1="60.1" y1="126.54" x2="61.45" y2="125.04" style="fill:#55a8fd" />
|
||||
<line x1="60.45" y1="129.52" x2="63.04" y2="126.43" style="fill:#55a8fd" />
|
||||
<line x1="63.44" y1="129.35" x2="64.69" y2="127.76" style="fill:#55a8fd" />
|
||||
<line x1="64" y1="132.3" x2="66.38" y2="129.03" style="fill:#55a8fd" />
|
||||
<line x1="66.98" y1="131.92" x2="68.11" y2="130.25" style="fill:#55a8fd" />
|
||||
<line x1="67.74" y1="134.82" x2="69.88" y2="131.4" style="fill:#55a8fd" />
|
||||
<line x1="70.69" y1="134.24" x2="71.7" y2="132.49" style="fill:#55a8fd" />
|
||||
<line x1="71.65" y1="137.08" x2="73.55" y2="133.51" style="fill:#55a8fd" />
|
||||
<line x1="74.55" y1="136.29" x2="75.43" y2="134.47" style="fill:#55a8fd" />
|
||||
<line x1="75.71" y1="139.06" x2="77.35" y2="135.37" style="fill:#55a8fd" />
|
||||
<line x1="78.54" y1="138.07" x2="79.29" y2="136.19" style="fill:#55a8fd" />
|
||||
<line x1="79.89" y1="140.75" x2="81.27" y2="136.95" style="fill:#55a8fd" />
|
||||
<line x1="82.65" y1="139.56" x2="83.27" y2="137.64" style="fill:#55a8fd" />
|
||||
<line x1="84.18" y1="142.14" x2="85.29" y2="138.26" style="fill:#55a8fd" />
|
||||
<line x1="86.85" y1="140.77" x2="87.34" y2="138.81" style="fill:#55a8fd" />
|
||||
<line x1="88.56" y1="143.23" x2="89.4" y2="139.28" style="fill:#55a8fd" />
|
||||
<line x1="91.13" y1="141.68" x2="91.48" y2="139.68" style="fill:#55a8fd" />
|
||||
<line x1="93" y1="144.02" x2="93.56" y2="140.02" style="fill:#55a8fd" />
|
||||
<line x1="95.46" y1="142.28" x2="95.67" y2="140.27" style="fill:#55a8fd" />
|
||||
<line x1="97.49" y1="144.49" x2="97.77" y2="140.46" style="fill:#55a8fd" />
|
||||
<line x1="99.81" y1="142.59" x2="99.88" y2="140.57" style="fill:#55a8fd" />
|
||||
<line x1="102" y1="146" x2="102" y2="140" style="fill:#55a8fd" />
|
||||
<line x1="104.19" y1="142.59" x2="104.12" y2="140.57" style="fill:#55a8fd" />
|
||||
<line x1="106.51" y1="144.49" x2="106.23" y2="140.46" style="fill:#55a8fd" />
|
||||
<line x1="108.55" y1="142.28" x2="108.34" y2="140.27" style="fill:#55a8fd" />
|
||||
<line x1="111" y1="144.02" x2="110.44" y2="140.02" style="fill:#55a8fd" />
|
||||
<line x1="112.87" y1="141.68" x2="112.52" y2="139.68" style="fill:#55a8fd" />
|
||||
<line x1="115.44" y1="143.23" x2="114.6" y2="139.28" style="fill:#55a8fd" />
|
||||
<line x1="117.15" y1="140.77" x2="116.66" y2="138.81" style="fill:#55a8fd" />
|
||||
<line x1="119.82" y1="142.14" x2="118.71" y2="138.26" style="fill:#55a8fd" />
|
||||
<line x1="121.35" y1="139.56" x2="120.73" y2="137.64" style="fill:#55a8fd" />
|
||||
<line x1="124.11" y1="140.75" x2="122.73" y2="136.95" style="fill:#55a8fd" />
|
||||
<line x1="125.46" y1="138.07" x2="124.7" y2="136.19" style="fill:#55a8fd" />
|
||||
<line x1="128.29" y1="139.06" x2="126.65" y2="135.37" style="fill:#55a8fd" />
|
||||
<line x1="129.46" y1="136.29" x2="128.57" y2="134.47" style="fill:#55a8fd" />
|
||||
<line x1="132.35" y1="137.08" x2="130.45" y2="133.51" style="fill:#55a8fd" />
|
||||
<line x1="133.31" y1="134.24" x2="132.3" y2="132.49" style="fill:#55a8fd" />
|
||||
<line x1="136.26" y1="134.82" x2="134.12" y2="131.4" style="fill:#55a8fd" />
|
||||
<line x1="137.02" y1="131.92" x2="135.89" y2="130.25" style="fill:#55a8fd" />
|
||||
<line x1="140" y1="132.3" x2="137.62" y2="129.03" style="fill:#55a8fd" />
|
||||
<line x1="140.56" y1="129.35" x2="139.31" y2="127.76" style="fill:#55a8fd" />
|
||||
<line x1="143.55" y1="129.52" x2="140.96" y2="126.43" style="fill:#55a8fd" />
|
||||
<line x1="143.91" y1="126.54" x2="142.55" y2="125.04" style="fill:#55a8fd" />
|
||||
<line x1="146.91" y1="126.5" x2="144.1" y2="123.6" style="fill:#55a8fd" />
|
||||
<line x1="147.05" y1="123.5" x2="145.6" y2="122.1" style="fill:#55a8fd" />
|
||||
<line x1="150.04" y1="123.26" x2="147.04" y2="120.55" style="fill:#55a8fd" />
|
||||
<line x1="149.98" y1="120.25" x2="148.43" y2="118.96" style="fill:#55a8fd" />
|
||||
<line x1="152.94" y1="119.8" x2="149.76" y2="117.31" style="fill:#55a8fd" />
|
||||
<line x1="152.67" y1="116.81" x2="151.03" y2="115.62" style="fill:#55a8fd" />
|
||||
<line x1="155.59" y1="116.15" x2="152.25" y2="113.89" style="fill:#55a8fd" />
|
||||
<line x1="155.11" y1="113.19" x2="153.4" y2="112.12" style="fill:#55a8fd" />
|
||||
<line x1="157.99" y1="112.32" x2="154.49" y2="110.3" style="fill:#55a8fd" />
|
||||
<line x1="157.29" y1="109.4" x2="155.51" y2="108.45" style="fill:#55a8fd" />
|
||||
<line x1="160.1" y1="108.34" x2="156.47" y2="106.57" style="fill:#55a8fd" />
|
||||
<line x1="159.21" y1="105.47" x2="157.37" y2="104.65" style="fill:#55a8fd" />
|
||||
<line x1="161.94" y1="104.22" x2="158.19" y2="102.7" style="fill:#55a8fd" />
|
||||
<line x1="160.85" y1="101.42" x2="158.95" y2="100.73" style="fill:#55a8fd" />
|
||||
<line x1="163.48" y1="99.98" x2="159.64" y2="98.73" style="fill:#55a8fd" />
|
||||
<line x1="162.2" y1="97.26" x2="160.26" y2="96.71" style="fill:#55a8fd" />
|
||||
<line x1="164.73" y1="95.64" x2="160.81" y2="94.66" style="fill:#55a8fd" />
|
||||
<line x1="163.26" y1="93.02" x2="161.28" y2="92.6" style="fill:#55a8fd" />
|
||||
<line x1="165.66" y1="91.22" x2="161.69" y2="90.52" style="fill:#55a8fd" />
|
||||
<line x1="164.02" y1="88.71" x2="162.02" y2="88.43" style="fill:#55a8fd" />
|
||||
<line x1="166.29" y1="86.76" x2="162.28" y2="86.33" style="fill:#55a8fd" />
|
||||
<line x1="164.47" y1="84.37" x2="162.46" y2="84.23" style="fill:#55a8fd" />
|
||||
<line x1="166.61" y1="82.25" x2="162.57" y2="82.11" style="fill:#55a8fd" />
|
||||
<line x1="165" y1="80" x2="163" y2="80" style="fill:#55a8fd" />
|
||||
<line x1="166.61" y1="77.74" x2="162.57" y2="77.89" style="fill:#55a8fd" />
|
||||
<line x1="164.47" y1="75.63" x2="162.46" y2="75.77" style="fill:#55a8fd" />
|
||||
<line x1="166.29" y1="73.24" x2="162.28" y2="73.67" style="fill:#55a8fd" />
|
||||
<line x1="164.02" y1="71.28" x2="162.02" y2="71.57" style="fill:#55a8fd" />
|
||||
<line x1="165.66" y1="68.78" x2="161.69" y2="69.48" style="fill:#55a8fd" />
|
||||
<line x1="163.26" y1="66.98" x2="161.28" y2="67.4" style="fill:#55a8fd" />
|
||||
<line x1="164.73" y1="64.36" x2="160.81" y2="65.34" style="fill:#55a8fd" />
|
||||
<line x1="162.2" y1="62.74" x2="160.26" y2="63.29" style="fill:#55a8fd" />
|
||||
<line x1="163.48" y1="60.02" x2="159.64" y2="61.27" style="fill:#55a8fd" />
|
||||
<line x1="160.85" y1="58.58" x2="158.95" y2="59.27" style="fill:#55a8fd" />
|
||||
<line x1="161.94" y1="55.78" x2="158.19" y2="57.3" style="fill:#55a8fd" />
|
||||
<line x1="159.21" y1="54.53" x2="157.37" y2="55.35" style="fill:#55a8fd" />
|
||||
<line x1="160.1" y1="51.66" x2="156.47" y2="53.43" style="fill:#55a8fd" />
|
||||
<line x1="157.29" y1="50.6" x2="155.51" y2="51.55" style="fill:#55a8fd" />
|
||||
<line x1="157.99" y1="47.68" x2="154.49" y2="49.7" style="fill:#55a8fd" />
|
||||
<line x1="155.11" y1="46.81" x2="153.4" y2="47.88" style="fill:#55a8fd" />
|
||||
<line x1="155.59" y1="43.85" x2="152.25" y2="46.11" style="fill:#55a8fd" />
|
||||
<line x1="152.67" y1="43.19" x2="151.03" y2="44.38" style="fill:#55a8fd" />
|
||||
<line x1="152.94" y1="40.2" x2="149.76" y2="42.69" style="fill:#55a8fd" />
|
||||
<line x1="149.97" y1="39.74" x2="148.43" y2="41.04" style="fill:#55a8fd" />
|
||||
<line x1="150.04" y1="36.74" x2="147.04" y2="39.45" style="fill:#55a8fd" />
|
||||
<line x1="147.05" y1="36.5" x2="145.6" y2="37.9" style="fill:#55a8fd" />
|
||||
<line x1="146.91" y1="33.5" x2="144.1" y2="36.4" style="fill:#55a8fd" />
|
||||
<line x1="143.9" y1="33.46" x2="142.55" y2="34.96" style="fill:#55a8fd" />
|
||||
<line x1="143.55" y1="30.48" x2="140.96" y2="33.57" style="fill:#55a8fd" />
|
||||
<line x1="140.56" y1="30.65" x2="139.31" y2="32.24" style="fill:#55a8fd" />
|
||||
<line x1="140" y1="27.7" x2="137.62" y2="30.97" style="fill:#55a8fd" />
|
||||
<line x1="137.02" y1="28.08" x2="135.89" y2="29.75" style="fill:#55a8fd" />
|
||||
<line x1="136.26" y1="25.18" x2="134.12" y2="28.6" style="fill:#55a8fd" />
|
||||
<line x1="133.31" y1="25.76" x2="132.3" y2="27.51" style="fill:#55a8fd" />
|
||||
<line x1="132.35" y1="22.92" x2="130.45" y2="26.49" style="fill:#55a8fd" />
|
||||
<line x1="129.45" y1="23.71" x2="128.57" y2="25.53" style="fill:#55a8fd" />
|
||||
<line x1="128.29" y1="20.94" x2="126.65" y2="24.63" style="fill:#55a8fd" />
|
||||
<line x1="125.46" y1="21.93" x2="124.71" y2="23.81" style="fill:#55a8fd" />
|
||||
<line x1="124.11" y1="19.25" x2="122.73" y2="23.05" style="fill:#55a8fd" />
|
||||
<line x1="121.35" y1="20.44" x2="120.73" y2="22.36" style="fill:#55a8fd" />
|
||||
<line x1="119.82" y1="17.86" x2="118.71" y2="21.74" style="fill:#55a8fd" />
|
||||
<line x1="117.15" y1="19.23" x2="116.66" y2="21.19" style="fill:#55a8fd" />
|
||||
<line x1="115.44" y1="16.77" x2="114.6" y2="20.72" style="fill:#55a8fd" />
|
||||
<line x1="112.87" y1="18.32" x2="112.52" y2="20.32" style="fill:#55a8fd" />
|
||||
<line x1="111" y1="15.98" x2="110.44" y2="19.98" style="fill:#55a8fd" />
|
||||
<line x1="108.54" y1="17.72" x2="108.34" y2="19.73" style="fill:#55a8fd" />
|
||||
<line x1="106.51" y1="15.51" x2="106.23" y2="19.54" style="fill:#55a8fd" />
|
||||
<line x1="104.19" y1="17.41" x2="104.12" y2="19.43" style="fill:#55a8fd" />
|
||||
<g id="PUE表盘">
|
||||
<!-- <text transform="translate(81.38 127.27)" style="font-size:12px;fill:#fff;font-family:PingFang-SC-Regular, PingFang SC-Regular">{{subtext}}</text>-->
|
||||
<!-- <text-->
|
||||
<!-- transform="translate(78 109)"-->
|
||||
<!-- style="font-size:24px;fill:#4dca59;font-family:PingFang-SC-Bold, PingFang SC-Bold;font-weight:700"-->
|
||||
<!-- :style="{ fill: color }"-->
|
||||
<!-- >{{title}}</text>-->
|
||||
<g id="PUE表盘-2" data-name="PUE表盘">
|
||||
<path d="M157,80A55,55,0,0,0,47,80Z" style="fill:#1c3d5e" />
|
||||
<line x1="50.05" y1="80" x2="47" y2="80" style="fill:#fff" />
|
||||
<line x1="59.98" y1="49.47" x2="57.5" y2="47.67" style="fill:#fff" />
|
||||
<line x1="85.95" y1="30.6" x2="85" y2="27.69" style="fill:#fff" />
|
||||
<line x1="118.05" y1="30.6" x2="119" y2="27.69" style="fill:#fff" />
|
||||
<line x1="144.02" y1="49.47" x2="146.5" y2="47.67" style="fill:#fff" />
|
||||
<line x1="153.95" y1="80" x2="157" y2="80" style="fill:#fff" />
|
||||
<path d="M144.78,80a42.78,42.78,0,0,0-85.56,0Z" style="fill:#091c38" />
|
||||
<path d="M50.05,80h6.11a45.84,45.84,0,0,1,41-45.58l-.64-6.08A52,52,0,0,0,50.05,80Z" style="fill:#4dca59" />
|
||||
<path d="M102,28.06a52.48,52.48,0,0,0-5.43.28l.64,6.08a46.48,46.48,0,0,1,4.79-.25,45.76,45.76,0,0,1,37.08,18.89L144,49.47A51.86,51.86,0,0,0,102,28.06Z" style="fill:#e3bb26" />
|
||||
<path d="M139.08,53.06A45.63,45.63,0,0,1,147.83,80h6.11A51.71,51.71,0,0,0,144,49.47Z" style="fill:#d73f40" />
|
||||
<text transform="translate(58 79.34)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[0]}}</text>
|
||||
<text transform="translate(131.7 58.97)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[4]}}</text>
|
||||
<text transform="translate(110.82 43.93)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[3]}}</text>
|
||||
<text transform="translate(67.21 58.97)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[1]}}</text>
|
||||
<text transform="translate(86.86 43.93)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[2]}}</text>
|
||||
<text transform="translate(138.45 79.34)" style="font-size:5.527289867401123px;fill:#909fad;font-family:MicrosoftYaHei, Microsoft YaHei">{{scale[5]}}</text>
|
||||
<polygon points="110 80 104.06 78 64 80 104.06 82 110 80" style="fill:#fff" :transform="getRotate" />
|
||||
<circle cx="102" cy="80" r="4" style="fill:#fff" />
|
||||
<circle cx="102" cy="80" r="2" style="fill:#091c38" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
style="position: absolute;top: 55%;left: 50%;transform: translateX(-50%);font-family:PingFang-SC-Regular, PingFang SC-Regular"
|
||||
>
|
||||
<div
|
||||
style="text-align: center;"
|
||||
:style="{
|
||||
color: option.titleColor,
|
||||
fontSize: `${option.titleFontSize}px`,
|
||||
height: `${option.titleFontSize}px`,
|
||||
lineHeight: `${option.titleFontSize}px`,
|
||||
}"
|
||||
>{{title}}</div>
|
||||
<div
|
||||
style="text-align: center;margin-top: 5px"
|
||||
:style="{
|
||||
color: option.subtextColor,
|
||||
fontSize: `${option.subtextFontSize}px`,
|
||||
height: `${option.subtextFontSize}px`,
|
||||
lineHeight: `${option.subtextFontSize}px`,
|
||||
}"
|
||||
>{{subtext}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, ref, computed, watch } from "vue";
|
||||
import config from './config'
|
||||
import { resultType } from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import { useChartCommonData } from "@/hooks";
|
||||
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
|
||||
|
||||
// const color = ref('#4dca59')
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const option = computed(() => props.chartConfig.option)
|
||||
|
||||
const scale = computed(() => {
|
||||
const { min, max } = props.chartConfig.option
|
||||
if(typeof min === 'number' && typeof max === 'number') {
|
||||
const twentyPercent = (max - min) / 5
|
||||
return Array(6).fill('').map((_, i) => (min + i * twentyPercent).toFixed(1))
|
||||
}
|
||||
else return Array(6).fill('').map((_, i) => i * 20)
|
||||
})
|
||||
|
||||
let title = ref()
|
||||
let subtext = ref()
|
||||
const handleData = (data: resultType) => {
|
||||
const { name, unit, value } = data
|
||||
const { showUnit, showSubtext, showSubtextUnit } = props.chartConfig.option
|
||||
title.value = showUnit ? `${value}${unit}` : value
|
||||
subtext.value = showSubtext ? name : ''
|
||||
subtext.value += showSubtextUnit ? showSubtext && unit ? `(${unit})` : unit : ''
|
||||
}
|
||||
|
||||
// 配置时
|
||||
watch(
|
||||
() => props.chartConfig.commonData,
|
||||
newData => {
|
||||
try {
|
||||
const data = newData[newData.currentSource] as Object & { result: resultType }
|
||||
handleData(data.result)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
watch(() => props.chartConfig.option, (v) => {
|
||||
const commonData = props.chartConfig.commonData
|
||||
const data = commonData[commonData.currentSource] as Object & { result: resultType }
|
||||
handleData(data.result)
|
||||
}, {
|
||||
immediate: true,
|
||||
deep: true,
|
||||
})
|
||||
|
||||
const computeValue = computed(() => {
|
||||
const commonData = props.chartConfig.commonData
|
||||
const data = commonData[commonData.currentSource] as Object & { result: resultType }
|
||||
return data.result.value
|
||||
})
|
||||
const getRotate = computed(() => {
|
||||
const horizontal = '80'
|
||||
const data = computeValue.value || 0
|
||||
const { min, max } = props.chartConfig.option
|
||||
// 传入指针水平位置，计算指针角度，水平位置即为指针角度为0时，两端点的纵坐标
|
||||
const pue = parseFloat(data.toString()) // 当前指针值
|
||||
const angel = Math.ceil((pue - min) / (max - min) * 180) // 1代表表盘最小值，2.5代表表盘最大值，180代表表盘最大角度
|
||||
return `rotate(${angel} 102 ${horizontal})`
|
||||
})
|
||||
|
||||
useChartCommonData(props.chartConfig, useChartEditStore)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -6,8 +6,7 @@
|
||||
:option="option"
|
||||
:manual-update="false"
|
||||
:update-options="{
|
||||
notMerge: true,
|
||||
replaceMerge: ['series', 'xAxis']
|
||||
replaceMerge: []
|
||||
}"
|
||||
autoresize
|
||||
style="overflow: visible"
|
||||
@ -235,22 +234,34 @@ const getData = () => {
|
||||
}
|
||||
query.types = [methodArr[0]]
|
||||
query.query_type = methodArr[1] || ''
|
||||
option.xAxis['data'] = []
|
||||
option.series[0]['data'] = []
|
||||
// option.xAxis['data'] = []
|
||||
// option.series[0]['data'] = []
|
||||
|
||||
publicInterface('/dcim/dems/statistic', 'get_point_realtime_data_echarts', query).then((res:any) => {
|
||||
if (res && res.data && res.data['current']) {
|
||||
const data = res.data
|
||||
option.xAxis['data'] = data['echarts'] && data['echarts']['xAxis'] && data['echarts']['xAxis']['data'] ? data['echarts']['xAxis']['data'].map((item:any) => {
|
||||
const time = query.query_type === '' ? moment(item).format('YYYY-MM-DD HH:mm:ss') : query.query_type === 'day' ? moment(item).format('YYYY-MM-DD') : moment(item).format('YYYY-MM')
|
||||
return time
|
||||
}) : []
|
||||
option.series[0]['data'] = data['echarts'] && data['echarts']['series'] && data['echarts']['series'][0] && data['echarts']['series'][0]['data'] ? data['echarts']['series'][0] && data['echarts']['series'][0]['data'] : []
|
||||
if (query.query_type === '') {
|
||||
option.tooltip.formatter = '{b}<br/>' + '速率(测点/s)' + ' ' + '{c}'
|
||||
} else {
|
||||
option.tooltip.formatter = '{b}<br/>' + '测点总数' + ' ' + '{c}'
|
||||
}
|
||||
// option.xAxis['data'] = data['echarts'] && data['echarts']['xAxis'] && data['echarts']['xAxis']['data'] ? data['echarts']['xAxis']['data'].map((item:any) => {
|
||||
// const time = query.query_type === '' ? moment(item).format('YYYY-MM-DD HH:mm:ss') : query.query_type === 'day' ? moment(item).format('YYYY-MM-DD') : moment(item).format('YYYY-MM')
|
||||
// return time
|
||||
// }) : []
|
||||
// option.series[0]['data'] = data['echarts'] && data['echarts']['series'] && data['echarts']['series'][0] && data['echarts']['series'][0]['data'] ? data['echarts']['series'][0] && data['echarts']['series'][0]['data'] : []
|
||||
// if (query.query_type === '') {
|
||||
// option.tooltip.formatter = '{b}<br/>' + '速率(测点/s)' + ' ' + '{c}'
|
||||
// } else {
|
||||
// option.tooltip.formatter = '{b}<br/>' + '测点总数' + ' ' + '{c}'
|
||||
// }
|
||||
nextTick(() => {
|
||||
if(!vChartRef.value) return
|
||||
let xAxisData = data['echarts'] && data['echarts']['xAxis'] && data['echarts']['xAxis']['data'] ? data['echarts']['xAxis']['data'].map((item:any) => {
|
||||
const time = query.query_type === '' ? moment(item).format('YYYY-MM-DD HH:mm:ss') : query.query_type === 'day' ? moment(item).format('YYYY-MM-DD') : moment(item).format('YYYY-MM')
|
||||
return time
|
||||
}) : []
|
||||
let series0Data = data['echarts'] && data['echarts']['series'] && data['echarts']['series'][0] && data['echarts']['series'][0]['data'] ? data['echarts']['series'][0] && data['echarts']['series'][0]['data'] : []
|
||||
vChartRef.value.setOption({
|
||||
xAxis: { data: xAxisData },
|
||||
series: [{ data:series0Data }]
|
||||
})
|
||||
})
|
||||
}
|
||||
}).catch((e:unknown) => {
|
||||
console.log(e)
|
||||
|
||||
@ -4,6 +4,7 @@ import { RealTimeTrafficConfig } from './RealTimeTraffic'
|
||||
import { OverviewOfComputingNodesConfig } from './OverviewOfComputingNodes'
|
||||
import { GDMapConfig } from './GDMap'
|
||||
import { MonitorRealTimeEventsConfig } from './MonitorRealTimeEvents'
|
||||
import { DashboardConfig } from './Dashboard'
|
||||
|
||||
export default [
|
||||
// Theme1Config,
|
||||
@ -12,4 +13,5 @@ export default [
|
||||
OverviewOfComputingNodesConfig,
|
||||
GDMapConfig,
|
||||
MonitorRealTimeEventsConfig,
|
||||
DashboardConfig,
|
||||
]
|
||||
|
||||
@ -80,7 +80,8 @@ const commonData: commonDataType = {
|
||||
space_complete_id: ''
|
||||
},
|
||||
deviceClass: {
|
||||
enable: false
|
||||
enable: false,
|
||||
space_complete_id: ''
|
||||
},
|
||||
singlePoint: {
|
||||
enable: false,
|
||||
|
||||
@ -335,6 +335,12 @@ export interface MonthAlarmClassType {
|
||||
space_complete_id: string
|
||||
}
|
||||
|
||||
// 设备分类统计
|
||||
export interface DeviceClassType {
|
||||
enable: boolean
|
||||
space_complete_id: string
|
||||
}
|
||||
|
||||
// 通用组件数据
|
||||
export interface commonDataType {
|
||||
// 多数据
|
||||
@ -345,7 +351,8 @@ export interface commonDataType {
|
||||
pointRealTime: PointRealTimeType
|
||||
monthAlarmClass: MonthAlarmClassType
|
||||
// 多数据无参数
|
||||
deviceClass: NoParamsType
|
||||
// 设备分类统计
|
||||
deviceClass: DeviceClassType
|
||||
// 单数据
|
||||
singlePoint: SinglePointType
|
||||
}
|
||||
|
||||
@ -44,18 +44,18 @@ const packagesListObj = {
|
||||
icon: renderIcon(AirPlaneOutlineIcon),
|
||||
label: PackagesCategoryName.ICONS
|
||||
},
|
||||
[PackagesCategoryEnum.THEMESANDLAYOUTS]: {
|
||||
icon: renderIcon(Apps20RegularIcon),
|
||||
label: PackagesCategoryName.THEMESANDLAYOUTS
|
||||
},
|
||||
// [PackagesCategoryEnum.THEMESANDLAYOUTS]: {
|
||||
// icon: renderIcon(Apps20RegularIcon),
|
||||
// label: PackagesCategoryName.THEMESANDLAYOUTS
|
||||
// },
|
||||
[PackagesCategoryEnum.CUSTOMCOMPONENTS]: {
|
||||
icon: renderIcon(AreaCustomIcon),
|
||||
label: PackagesCategoryName.CUSTOMCOMPONENTS
|
||||
},
|
||||
[PackagesCategoryEnum.BACKGROUNDS]: {
|
||||
icon: renderIcon(InsertPhotoSharpIcon),
|
||||
label: PackagesCategoryName.BACKGROUNDS
|
||||
}
|
||||
// [PackagesCategoryEnum.BACKGROUNDS]: {
|
||||
// icon: renderIcon(InsertPhotoSharpIcon),
|
||||
// label: PackagesCategoryName.BACKGROUNDS
|
||||
// }
|
||||
}
|
||||
|
||||
export const useAsideHook = () => {
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<setting-item-box name="启用数据" :alone="true">
|
||||
<n-space justify="start">
|
||||
<n-switch v-model:value="currentObj.enable"/>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="空间ID" :alone="true">
|
||||
<n-space justify="start">
|
||||
<n-input
|
||||
v-model:value="currentObj.space_complete_id"
|
||||
size="small"
|
||||
placeholder="请输入测点ID"
|
||||
clearable
|
||||
/>
|
||||
</n-space>
|
||||
</setting-item-box>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed} from 'vue'
|
||||
import type {Ref} from 'vue'
|
||||
import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
|
||||
import {useTargetData} from '../../hooks/useTargetData.hook'
|
||||
import {commonDataType} from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
|
||||
|
||||
const currentObj = computed(() => {
|
||||
return targetData.value.commonData[targetData.value.commonData.currentSource]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@ -25,14 +25,14 @@ import {SettingItemBox} from '@/components/Pages/ChartItemSetting'
|
||||
import {useTargetData} from '../../hooks/useTargetData.hook'
|
||||
import {DateOptions, PolicyOptions} from './ComponentsType.d'
|
||||
import {icon} from '@/plugins/icon'
|
||||
import {commonDataType, RecordValueHistoryType} from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
import {commonDataType, MonthAlarmClassType} from '@/store/modules/chartEditStore/chartEditStore.d'
|
||||
|
||||
const {CloseIcon, AddIcon} = icon.ionicons5
|
||||
|
||||
const {targetData} = useTargetData() as { targetData: Ref<{ commonData: commonDataType, id: string }> }
|
||||
|
||||
const target = computed(() => {
|
||||
return targetData.value.commonData[targetData.value.commonData.currentSource]
|
||||
return targetData.value.commonData[targetData.value.commonData.currentSource] as MonthAlarmClassType
|
||||
})
|
||||
|
||||
// const recordValueHistory: Ref<RecordValueHistoryType> = computed(() => targetData.value.commonData.recordValueHistory)
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<RecordValueHistory v-else-if="matchComponent(CurrentSourceEnum.RECORDVALUEHISTORY)"/>
|
||||
<PointRealTime v-else-if="matchComponent(CurrentSourceEnum.POINTREALTIME)"/>
|
||||
<MonthAlarmClass v-else-if="matchComponent(CurrentSourceEnum.MONTHALARMCLASS)"/>
|
||||
<NoParam v-else/>
|
||||
<DeviceClass v-else-if="matchComponent(CurrentSourceEnum.DEVICECLASS)"/>
|
||||
</template>
|
||||
<template v-else-if="IsCommonSingle">
|
||||
<setting-item-box name="数据源" :alone="true">
|
||||
@ -63,6 +63,7 @@ import RecordValueHistory from './components/RecordValueHistory.vue'
|
||||
import PointRealTime from './components/PointRealTime.vue'
|
||||
import SinglePoint from './components/SinglePoint.vue'
|
||||
import MonthAlarmClass from './components/MonthAlarmClass.vue'
|
||||
import DeviceClass from './components/DeviceClass.vue'
|
||||
import NoParam from './components/NoParam.vue'
|
||||
import { computed } from 'vue'
|
||||
import type { Ref } from 'vue'
|
||||
@ -77,7 +78,7 @@ import { TextBarrageConfig } from "@/packages/components/Informations/Texts/Text
|
||||
import { TextCommonConfig } from "@/packages/components/Informations/Texts/TextCommon/index";
|
||||
import { TextGradientConfig } from "@/packages/components/Informations/Texts/TextGradient/index";
|
||||
import { WaterPoloConfig } from "@/packages/components/Charts/Mores/WaterPolo/index";
|
||||
|
||||
import { DashboardConfig } from '@/packages/components/CustomComponents/CustomComponents/Dashboard/index'
|
||||
// const ChartDataStatic = loadAsyncComponent(() => import('./components/ChartDataStatic/index.vue'))
|
||||
|
||||
const { targetData } = useTargetData() as { targetData: Ref<CreateComponentType | CreateComponentGroupType> }
|
||||
@ -102,6 +103,7 @@ const IsCommonSingle = computed(() => {
|
||||
TextCommonConfig,
|
||||
TextGradientConfig,
|
||||
WaterPoloConfig,
|
||||
DashboardConfig,
|
||||
]
|
||||
const { package:packageStr, category, key } = targetData.value.chartConfig
|
||||
const flag = singleCharArr.some(_ => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user