feat(Charts): 添加场景ID配置并更新相关API调用路径
为多个图表组件添加场景ID配置项，并在配置文件中设置默认值 更新API调用路径以包含场景ID参数 新增供水系统和供风系统图表组件及相关配置 优化部分图表的数据结构和样式配置
This commit is contained in:
commit
bfc20675b0
@ -16,6 +16,7 @@ export const styleConfig = {
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
secneID: '01',
|
||||
dataset: dataJson,
|
||||
rowNum: 4,
|
||||
waitTime: 0.5,
|
||||
|
||||
@ -1,28 +1,24 @@
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="滚动列表三" :expanded="true">
|
||||
<SettingItem name="表行数">
|
||||
<n-input-number
|
||||
v-model:value="optionData.rowNum"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="请输入自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="轮播时间(s)">
|
||||
<n-input-number
|
||||
v-model:value="optionData.waitTime"
|
||||
:min="0"
|
||||
size="small"
|
||||
placeholder="请输入轮播时间"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<setting-item >
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showRankNum" size="small" />
|
||||
<n-text>显示排行数字</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
|
||||
<n-input-number v-model:value="optionData.rowNum" :min="1" size="small" placeholder="请输入自动计算"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="轮播时间(s)">
|
||||
<n-input-number v-model:value="optionData.waitTime" :min="0" size="small" placeholder="请输入轮播时间"></n-input-number>
|
||||
</SettingItem>
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.showRankNum" size="small" />
|
||||
<n-text>显示排行数字</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
</collapse-item>
|
||||
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
[
|
||||
{
|
||||
"alarmTime": "2025-08-24T23:36:39.000+00:00",
|
||||
"alarmLevel": "较大风险",
|
||||
"compName": "长客安网系统",
|
||||
"alarmDescname": "鲁UH9206于2025-08-22T07:36:39发生行人碰撞报警"
|
||||
"alarmLevel": "测试风险",
|
||||
"compName": "测试系统",
|
||||
"alarmDescname": "XXXX于2025-08-22T07:36:39发生XXXX"
|
||||
},
|
||||
{
|
||||
"alarmTime": "2025-08-24T23:34:32.000+00:00",
|
||||
"alarmLevel": "较大风险",
|
||||
"compName": "大连安网系统",
|
||||
"alarmDescname": "鲁UH9206于2025-08-22T07:34:32发生行人碰撞报警"
|
||||
"alarmLevel": "测试风险",
|
||||
"compName": "测试系统",
|
||||
"alarmDescname": "XXXX于2025-08-22T07:34:32发生XXXX"
|
||||
}
|
||||
]
|
||||
@ -273,7 +273,8 @@ const formatAlarmItem = (item) => {
|
||||
const fetchRecentAlarms = async () => {
|
||||
try {
|
||||
isLoading.value = true
|
||||
const res = await axiosInstance.get('/awjt/space/getRecentAlarms', {responseType: 'json', baseURL: '' });
|
||||
const res = await axiosInstance.get(`/awjt/space/getRecentAlarms/${props.chartConfig.option.secneID}`, { responseType: 'json', baseURL: '' });
|
||||
|
||||
if (res.state === true) {
|
||||
let rawData = [];
|
||||
if (Array.isArray(res.value.items)) {
|
||||
|
||||
@ -9,6 +9,7 @@ export const includes = ['legend']
|
||||
|
||||
// 其它配置
|
||||
const otherConfig = {
|
||||
secneID: '01',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
@ -45,11 +46,12 @@ dataJson.source.forEach(item => {
|
||||
const series = getPie3D(dataJson.source, 0.8);
|
||||
|
||||
|
||||
const option = {
|
||||
export const option = {
|
||||
...otherConfig,
|
||||
renderer: 'canvas',
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
show: true,
|
||||
data: dataJson.source.map(item => item.name),
|
||||
top: '84%',
|
||||
left: 'center',
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||
<CollapseItem name="基础配置" :expanded="true">
|
||||
<SettingItemBox name="图例">
|
||||
|
||||
@ -132,7 +132,8 @@ export class BarOption {
|
||||
Object.assign(this, opts);
|
||||
}
|
||||
}
|
||||
const option = {
|
||||
export const option = {
|
||||
secneID:"01",
|
||||
dataset: { ...dataJson }
|
||||
|
||||
}
|
||||
|
||||
@ -1,9 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
import { option } from './config'
|
||||
|
||||
</script>
|
||||
defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -53,39 +53,37 @@ const selectButton = (id: number) => {
|
||||
* @param buttonId 当前激活的按钮ID
|
||||
*/
|
||||
const updateChartData = async (buttonId: number) => {
|
||||
let dataToRender: BarOption[] = [];
|
||||
let dataToRender: any = [];
|
||||
if (buttonId === 1) {
|
||||
dataToRender = await fetchData('/spaceMapMock');
|
||||
} else if (buttonId === 2) {
|
||||
dataToRender = await fetchData('/dayMapMock');
|
||||
} else {
|
||||
console.warn(`未知的按钮ID: ${buttonId}，将使用默认数据。`);
|
||||
console.warn(`未知的按钮ID: ${buttonId}`);
|
||||
}
|
||||
// 更新 chartConfig 中的数据，这将触发 BarOptionsData computed 和 watch
|
||||
props.chartConfig.option.dataset.barOptions = dataToRender;
|
||||
console.log(`已为按钮 ${buttonId} 加载 ${dataToRender.length} 条数据。`);
|
||||
};
|
||||
const fetchData = async (url: string) => {
|
||||
if (url == '/spaceMapMock') {
|
||||
return dataJson.barOptions;
|
||||
} else if (url == '/dayMapMock') {
|
||||
} else {
|
||||
return [{ "location": "四川省.成都市", "items": [{ "tall": 120, "color": "#ff4757" }, { "tall": 50, "color": "#3A86FF" }] }, { "location": "广东省.深圳市", "items": [{ "tall": 90, "color": "#5352ed" }, { "tall": 40, "color": "#5352ed" }] }, { "location": "浙江省.杭州市", "items": [{ "tall": 150, "color": "#ff4757" }, { "tall": 70, "color": "#4ECDC4" }] }, { "location": "江苏省.南京市", "items": [{ "tall": 100, "color": "#ff4757" }, { "tall": 45, "color": "#FFD166" }] }, { "location": "湖北省.武汉市", "items": [{ "tall": 110, "color": "#ff4757" }, { "tall": 52, "color": "#6A0572" }] }, { "location": "陕西省.西安市", "items": [{ "tall": 85, "color": "#ff4757" }, { "tall": 38, "color": "#1A535C" }] }, { "location": "山东省.青岛市", "items": [{ "tall": 130, "color": "#ff4757" }, { "tall": 60, "color": "#FF8C42" }] }, { "location": "河南省.郑州市", "items": [{ "tall": 95, "color": "#ff4757" }, { "tall": 43, "color": "#7209B7" }] }, { "location": "福建省.厦门市", "items": [{ "tall": 140, "color": "#ff4757" }, { "tall": 65, "color": "#06D6A0" }] }, { "location": "辽宁省.大连市", "items": [{ "tall": 88, "color": "#ff4757" }, { "tall": 41, "color": "#118AB2" }] }]
|
||||
}
|
||||
try {
|
||||
// 无后端接口， 此为预留
|
||||
const response: any = await axiosInstance.get(`/dev${url}`, { baseURL: '' });
|
||||
if (response.state === true && response.value && response.value.length > 0) {
|
||||
return response.value; // 返回原始数据
|
||||
} else {
|
||||
console.warn('API调用失败或返回空数据，将使用静态数据。');
|
||||
return dataJson.barOptions;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取图表数据失败将使用静态数据:', error);
|
||||
return dataJson.barOptions;
|
||||
}
|
||||
// try {
|
||||
// // 无后端接口， 此为预留
|
||||
// const response: any = await axiosInstance.get(`/dev${url}`, { baseURL: '' });
|
||||
// if (response.state === true && response.value && response.value.length > 0) {
|
||||
// return response.value; // 返回原始数据
|
||||
// } else {
|
||||
// console.warn('API调用失败或返回空数据，将使用静态数据。');
|
||||
// return dataJson.barOptions;
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.error('获取图表数据失败将使用静态数据:', error);
|
||||
// return dataJson.barOptions;
|
||||
// }
|
||||
};
|
||||
|
||||
const BarOptionsData = computed(() => {
|
||||
return props.chartConfig.option.dataset.barOptions.map((item: unknown) =>
|
||||
new BarOption(item as unknown as Partial<BarOption>)
|
||||
@ -100,7 +98,7 @@ onMounted(() => {
|
||||
iframeApi = (iframe.contentWindow as any).g.active3d;
|
||||
isIframeReady.value = true;
|
||||
|
||||
const data = await fetchData('/map');
|
||||
const data = await fetchData('/spaceMapMock');
|
||||
props.chartConfig.option.dataset.barOptions = data;
|
||||
|
||||
} else {
|
||||
|
||||
@ -14,6 +14,7 @@ export const selectStyleOption = {
|
||||
borderRadius: '2px',
|
||||
}
|
||||
const otherConfig = {
|
||||
secneID: '01',
|
||||
// 轮播动画
|
||||
isCarousel: false,
|
||||
color: ['#3B72E8', '#45B5E3', '#50D4A8', '#F8B55B'],
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||
<CollapseItem name="基础配置" :expanded="true">
|
||||
<SettingItemBox name="图例">
|
||||
|
||||
@ -5,20 +5,8 @@
|
||||
],
|
||||
"source": [
|
||||
{
|
||||
"alarmLevel": "分类一",
|
||||
"alarm_count": 94
|
||||
},
|
||||
{
|
||||
"alarmLevel": "分类3",
|
||||
"alarm_count": 4
|
||||
},
|
||||
{
|
||||
"alarmLevel": "分类2",
|
||||
"alarm_count": 30
|
||||
},
|
||||
{
|
||||
"alarmLevel": "分类4",
|
||||
"alarm_count": 40
|
||||
"alarmLevel": "数据",
|
||||
"alarm_count": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -190,7 +190,7 @@ const fetchAlarmData = async ({ startTime, endTime }: { startTime: string; endTi
|
||||
};
|
||||
try {
|
||||
const res: any = await axiosInstance.get(
|
||||
`/awjt/space/getNumberByAlarmLevel`,
|
||||
`/awjt/space/getNumberByAlarmLevel/${props.chartConfig.option.secneID}`,
|
||||
{
|
||||
params: { startTime, endTime },
|
||||
responseType: 'json',
|
||||
|
||||
@ -5,6 +5,7 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './cameratree.json'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
export const option = {
|
||||
secneID: '01',
|
||||
// 摄像头id
|
||||
dataset: {
|
||||
defaultValue: '中国中车集团有限公司',
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="视频" expanded>
|
||||
<setting-item-box name="源" alone>
|
||||
<!-- <setting-item name="自定义源">
|
||||
|
||||
@ -72,7 +72,7 @@ const findParentPath = (targetKey, nodes, path = []) => {
|
||||
// 当前路径快照
|
||||
const currentPath = [...path, { key: node.key, label: node.label }]
|
||||
|
||||
console.log(node)
|
||||
// console.log(node)
|
||||
// 找到目标节点时返回完整路径（排除自身）
|
||||
if (node.key === targetKey) return [...path, { key: node.key, label: node.label }]
|
||||
|
||||
@ -528,7 +528,7 @@ const getDataSource = (newData: any) => {
|
||||
const fetchCameraTree = async () => {
|
||||
console.log('fetchCameraTree: 正在获取摄像头树数据...');
|
||||
try {
|
||||
const res = await axiosInstance.get('/awjt/api/camera/tree', { baseURL: '' ,responseType: 'json' });
|
||||
const res = await axiosInstance.get(`/awjt/api/camera/tree/${option.secneID}`, { baseURL: '', responseType: 'json' });
|
||||
console.log("API 响应数据 (Camera Tree):", res);
|
||||
if (res && res.state === true) {
|
||||
console.log("API 响应数据 (Camera Tree):", res.value);
|
||||
|
||||
@ -22,6 +22,7 @@ export const FontStyleObject = {
|
||||
[FontStyleEnum.ITALIC]: 'italic',
|
||||
}
|
||||
export const option = {
|
||||
secneID: '04',
|
||||
dataset: dataJson,
|
||||
header: ['报警事件', '时间', '所属企业', '状态'],
|
||||
headerTextColor: '#B4B4B4',
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标题" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
|
||||
|
||||
@ -88,11 +88,11 @@ const convertTimestampToDateTime = (timestamp: number | string) => {
|
||||
|
||||
const fetchRecentAlarms = async () => {
|
||||
try {
|
||||
const res:any = await axiosInstance.get(
|
||||
`/awjt/space/getRecentAlarms`,
|
||||
const res: any = await axiosInstance.get(
|
||||
`/awjt/space/getRecentAlarms/${option.value.secneID}`,
|
||||
{
|
||||
responseType: 'json',
|
||||
baseURL:''
|
||||
baseURL: ''
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ export const seriesItem = {
|
||||
}
|
||||
}
|
||||
export const option = {
|
||||
sceneId: '',
|
||||
sceneId: '04',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
|
||||
@ -8,6 +8,7 @@ export const includes = ['legend']
|
||||
|
||||
// 其它配置
|
||||
const otherConfig = {
|
||||
secneID:'04',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
@ -36,7 +37,7 @@ const otherConfig = {
|
||||
|
||||
}
|
||||
|
||||
const option = {
|
||||
export const option = {
|
||||
...otherConfig,
|
||||
backgroundColor: 'transparent',
|
||||
legend: {
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<!-- 基础配置可以复用PieCommon的配置面板 -->
|
||||
<CollapseItem name="基础配置" :expanded="true">
|
||||
<SettingItemBox name="图例">
|
||||
|
||||
@ -239,7 +239,7 @@ function generateTimeRange(period: string): { startTime: string; endTime: string
|
||||
async function fetchAlarmData({ startTime, endTime }: { startTime: string; endTime: string }) {
|
||||
try {
|
||||
const res: any = await axiosInstance.get(
|
||||
`/awjt/space/getNumberByAlarmLevel`,
|
||||
`/awjt/space/getNumberByAlarmLevel/${props.chartConfig.option.sceneID}`,
|
||||
{
|
||||
params: { startTime, endTime }, // 请求参数
|
||||
responseType: 'json',
|
||||
|
||||
@ -3,7 +3,7 @@ import { CreateComponentType } from '@/packages/index.d'
|
||||
import { TopAlarmsConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
export const option = {
|
||||
sceneId: '',
|
||||
sceneId: '04',
|
||||
dateTime: {
|
||||
selectValue: 'day',
|
||||
dataset: [
|
||||
|
||||
@ -4,6 +4,7 @@ import { yushiVideoConfig } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
secneID: '04',
|
||||
// 摄像头id
|
||||
dataset: {
|
||||
defaultValue: '',
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<!-- eslint-disable vue/no-mutating-props -->
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
<collapse-item name="视频" expanded>
|
||||
<setting-item-box name="源" alone>
|
||||
<!-- <setting-item name="自定义源">
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { AirSupplySystemConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const includes = []
|
||||
|
||||
const option = {
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = AirSupplySystemConfig.key
|
||||
public chartConfig = cloneDeep(AirSupplySystemConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>你好</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,57 @@
|
||||
{
|
||||
"dimensions": [
|
||||
"month",
|
||||
"value"
|
||||
],
|
||||
"source": [
|
||||
{
|
||||
"month": "1月",
|
||||
"value": 88
|
||||
},
|
||||
{
|
||||
"month": "2月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "3月",
|
||||
"value": 66
|
||||
},
|
||||
{
|
||||
"month": "4月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "5月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "6月",
|
||||
"value": 67
|
||||
},
|
||||
{
|
||||
"month": "7月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "8月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "9月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "10月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "11月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "12月",
|
||||
"value": 67
|
||||
}
|
||||
],
|
||||
"unit": "万kwh"
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const AirSupplySystemConfig: ConfigType = {
|
||||
key: 'AirSupplySystem',
|
||||
chartKey: 'VAirSupplySystem',
|
||||
conKey: 'VCAirSupplySystem',
|
||||
title: '供风系统',
|
||||
category: ChatCategoryEnum.IntegratedEnergy,
|
||||
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'AirSupplySystem.png'
|
||||
}
|
||||
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="content">
|
||||
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}" autoresize>
|
||||
</v-chart> -->
|
||||
<v-chart :option="option" autosize></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, onMounted, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import * as echarts from 'echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { TitleComponent, GridComponent } from 'echarts/components'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import dataJson from './data.json'
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
TitleComponent,
|
||||
GridComponent
|
||||
])
|
||||
|
||||
const replaceMergeArr = ref<string[]>([])
|
||||
|
||||
// const option = computed(() => {
|
||||
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
// })
|
||||
|
||||
const option = {
|
||||
// 添加标题配置
|
||||
title: {
|
||||
text: '单位：' + dataJson.unit,
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
dataset: dataJson,
|
||||
// 网格配置
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// X轴配置
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
//
|
||||
axisLabel: {
|
||||
color: '#80b0c4',
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
margin: 20
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Y轴配置
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 数据系列配置
|
||||
series: [{
|
||||
name: '左侧',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
type: 'bar',
|
||||
barWidth: 7,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: "rgba(26,102,255,0)" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "rgba(26,102,255,0.9)", // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0,
|
||||
|
||||
},
|
||||
{
|
||||
name: '右侧',
|
||||
type: 'bar',
|
||||
barWidth: 7,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: "rgba(51,153,255,0)" // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: "rgba(26,102,255,1)", // 100% 处的颜色
|
||||
}], false)
|
||||
}
|
||||
},
|
||||
barGap: 0
|
||||
}, {
|
||||
name: '顶部',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
type: 'pictorialBar',
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#fff',
|
||||
color: '#66B2FF' // 顶部方块的颜色
|
||||
},
|
||||
symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
|
||||
symbolSize: ['13', '7'], // 第一个值控制顶部方形大小
|
||||
symbolOffset: ['-3', '-3'], // 控制顶部放行 左右和上下
|
||||
symbolRotate: -16,
|
||||
symbolPosition: 'end',
|
||||
barGap: 0,
|
||||
z: 3,
|
||||
|
||||
}
|
||||
],
|
||||
|
||||
// 图形元素配置
|
||||
graphic: [{
|
||||
// 左侧阴影效果
|
||||
type: 'rect',
|
||||
left: 0,
|
||||
top: '15%',
|
||||
width: '25%',
|
||||
bottom: '3%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}, {
|
||||
// 底部阴影效果
|
||||
type: 'rect',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0',
|
||||
height: '10%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}]
|
||||
};
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('energy-box') {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,183 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { WaterSupplySystemConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export const includes = ['title']
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
|
||||
|
||||
const option = {
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
dataset: dataJson,
|
||||
// 网格配置
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// X轴配置
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
//
|
||||
axisLabel: {
|
||||
color: '#80b0c4',
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
margin: 20
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Y轴配置
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 数据系列配置
|
||||
series: [{
|
||||
|
||||
name: '能源消耗',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#1d7b7b' }, // 更暗的左侧颜色，增强阴影效果
|
||||
{ offset: 0.2, color: '#196b6b' }, // 左侧过渡色
|
||||
{ offset: 0.7, color: '#00cccc' }, // 中间主色
|
||||
{ offset: 0.8, color: '#33dddd' }, // 右侧过渡色
|
||||
{ offset: 1, color: '#66ffff' } // 右侧亮色，增强高光效果
|
||||
]),
|
||||
// 添加更强的3D效果
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
||||
shadowOffsetX: -5,
|
||||
shadowOffsetY: 5,
|
||||
borderRadius: [0, 0, 6, 6],
|
||||
borderWidth: 0,
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0, 255, 255, 0.9)',
|
||||
shadowBlur: 25,
|
||||
shadowOffsetX: -8,
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
// })),
|
||||
|
||||
barWidth: '40%',
|
||||
|
||||
// 3D圆柱体效果
|
||||
roundCap: true
|
||||
}, {
|
||||
name: '顶部圆',
|
||||
type: 'pictorialBar',
|
||||
z: 3,
|
||||
symbolSize: ['57%', '10'],
|
||||
symbolOffset: [0.1, -5],
|
||||
symbolPosition: "end",
|
||||
itemStyle: {
|
||||
color: "#40ECEC",
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
||||
shadowBlur: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
|
||||
// 图形元素配置
|
||||
graphic: [{
|
||||
// 单位标注
|
||||
type: 'text',
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
style: {
|
||||
text: '单位：' + dataJson.unit,
|
||||
fontSize: 12,
|
||||
fill: 'rgba(255, 255, 255, 0.7)',
|
||||
}
|
||||
}, {
|
||||
// 左侧阴影效果
|
||||
type: 'rect',
|
||||
left: 0,
|
||||
top: '15%',
|
||||
width: '25%',
|
||||
bottom: '3%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}, {
|
||||
// 底部阴影效果
|
||||
type: 'rect',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0',
|
||||
height: '10%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}]
|
||||
};
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = WaterSupplySystemConfig.key
|
||||
public chartConfig = cloneDeep(WaterSupplySystemConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>你好</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed } from 'vue'
|
||||
import { lineConf } from '@/packages/chartConfiguration/echarts/index'
|
||||
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
|
||||
import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<GlobalThemeJsonType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,57 @@
|
||||
{
|
||||
"dimensions": [
|
||||
"month",
|
||||
"value"
|
||||
],
|
||||
"source": [
|
||||
{
|
||||
"month": "1月",
|
||||
"value": 88
|
||||
},
|
||||
{
|
||||
"month": "2月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "3月",
|
||||
"value": 66
|
||||
},
|
||||
{
|
||||
"month": "4月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "5月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "6月",
|
||||
"value": 67
|
||||
},
|
||||
{
|
||||
"month": "7月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "8月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "9月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "10月",
|
||||
"value": 89
|
||||
},
|
||||
{
|
||||
"month": "11月",
|
||||
"value": 54
|
||||
},
|
||||
{
|
||||
"month": "12月",
|
||||
"value": 67
|
||||
}
|
||||
],
|
||||
"unit": "万kwh"
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const WaterSupplySystemConfig: ConfigType = {
|
||||
key: 'WaterSupplySystem',
|
||||
chartKey: 'VWaterSupplySystem',
|
||||
conKey: 'VCWaterSupplySystem',
|
||||
title: '供水系统',
|
||||
category: ChatCategoryEnum.IntegratedEnergy,
|
||||
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'WaterSupplySystem.png'
|
||||
}
|
||||
@ -0,0 +1,247 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="content">
|
||||
<!-- <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
|
||||
replaceMerge: replaceMergeArr
|
||||
}" autoresize>
|
||||
</v-chart> -->
|
||||
<v-chart :option="option" autosize></v-chart>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, computed, onMounted, ref } from 'vue'
|
||||
import VChart from 'vue-echarts'
|
||||
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
|
||||
import * as echarts from 'echarts'
|
||||
import { use } from 'echarts/core'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { BarChart } from 'echarts/charts'
|
||||
import { TitleComponent, GridComponent } from 'echarts/components'
|
||||
import config, { includes } from './config'
|
||||
import { mergeTheme } from '@/packages/public/chart'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import dataJson from './data.json'
|
||||
const props = defineProps({
|
||||
themeSetting: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
themeColor: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
|
||||
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
TitleComponent,
|
||||
GridComponent
|
||||
])
|
||||
|
||||
const replaceMergeArr = ref<string[]>([])
|
||||
|
||||
// const option = computed(() => {
|
||||
// return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
|
||||
// })
|
||||
|
||||
const option = {
|
||||
// 添加标题配置
|
||||
title: {
|
||||
text: '单位：' + dataJson.unit,
|
||||
left: '3%',
|
||||
top: '3%',
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 提示框配置
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
borderColor: '#00ffff',
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
dataset: dataJson,
|
||||
// 网格配置
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// X轴配置
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
//
|
||||
axisLabel: {
|
||||
color: '#80b0c4',
|
||||
interval: 0,
|
||||
fontSize: 9,
|
||||
margin: 20
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// Y轴配置
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
interval: 25,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: 'rgba(255, 255, 255, 0.8)',
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.1)',
|
||||
type: 'solid'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 数据系列配置
|
||||
series: [{
|
||||
|
||||
name: '能源消耗',
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: '#82ffff' }, // 更暗的左侧颜色，增强阴影效果
|
||||
{ offset: 0.2, color: '#00bfbf' }, // 左侧过渡色
|
||||
{ offset: 0.5, color: '#008f8f' }, // 中间主色
|
||||
{ offset: 0.8, color: '#00bfbf' }, // 右侧过渡色
|
||||
{ offset: 1, color: '#82ffff' } // 右侧亮色，增强高光效果
|
||||
]),
|
||||
opacity: 0.60,
|
||||
// 添加更强的3D效果
|
||||
shadowBlur: 20,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.7)',
|
||||
shadowOffsetX: -5,
|
||||
shadowOffsetY: 5,
|
||||
borderRadius: [0, 0, 4, 4],
|
||||
borderWidth: 0,
|
||||
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0, 255, 255, 0.9)',
|
||||
shadowBlur: 25,
|
||||
shadowOffsetX: -8,
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
// })),
|
||||
|
||||
barWidth: '45%',
|
||||
|
||||
// 3D圆柱体效果
|
||||
roundCap: false
|
||||
}, {
|
||||
name: '顶部圆',
|
||||
type: 'pictorialBar',
|
||||
z: 3,
|
||||
symbolSize: ['62%', '6'],
|
||||
symbolOffset: [0.1, -3],
|
||||
symbolPosition: "end",
|
||||
itemStyle: {
|
||||
color: "rgba(51, 221, 221, 0.8)",
|
||||
},
|
||||
// opacity: 0.1,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowColor: 'rgba(0, 255, 255, 0.8)',
|
||||
shadowBlur: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
|
||||
// 图形元素配置
|
||||
graphic: [{
|
||||
// 左侧阴影效果
|
||||
type: 'rect',
|
||||
left: 0,
|
||||
top: '15%',
|
||||
width: '25%',
|
||||
bottom: '3%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 更强的左侧阴影
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0)' }
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}, {
|
||||
// 底部阴影效果
|
||||
type: 'rect',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '0',
|
||||
height: '10%',
|
||||
style: {
|
||||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(0, 0, 0, 0)' },
|
||||
{ offset: 1, color: 'rgba(0, 0, 0, 0.6)' } // 底部阴影
|
||||
])
|
||||
},
|
||||
z: -1
|
||||
}]
|
||||
};
|
||||
|
||||
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
props.chartConfig.option.dataset = newData
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('energy-box') {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -2,7 +2,12 @@ import { EnergyOverviewConfig } from "./EnergyOverview"
|
||||
import { EnergyConsumptionTrendConfig } from "./EnergyConsumptionTrend"
|
||||
import { ConsumptionProportionConfig } from "./ConsumptionProportion"
|
||||
import { FeeOverviewConfig } from "./FeeOverview"
|
||||
import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
||||
import { AirSupplySystemConfig } from './AirSupplySystem'
|
||||
|
||||
export default [
|
||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig, ConsumptionProportionConfig, FeeOverviewConfig
|
||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig,
|
||||
ConsumptionProportionConfig,
|
||||
FeeOverviewConfig,
|
||||
WaterSupplySystemConfig, AirSupplySystemConfig
|
||||
]
|
||||
@ -22,6 +22,7 @@ export const FontStyleObject = {
|
||||
[FontStyleEnum.ITALIC]: 'italic',
|
||||
}
|
||||
export const option = {
|
||||
secneID:"",
|
||||
dataset: dataJson,
|
||||
header: ['报警事件', '时间', '所属企业', '状态'],
|
||||
headerTextColor: '#B4B4B4',
|
||||
|
||||
@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="场景ID" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.secneID" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="标题" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.title" type="textarea" size="small"></n-input>
|
||||
|
||||
@ -91,7 +91,7 @@ const fetchRecentAlarms = async () => {
|
||||
|
||||
const res: any = await axiosInstance({
|
||||
method: 'GET',
|
||||
url: `/space/getRecentAlarms`,
|
||||
url: `/awjt/space/getRecentAlarms/${props.chartConfig.option.secneID}`,
|
||||
responseType: 'json'
|
||||
});
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
|
||||
<div class="go-device-status-config">
|
||||
<n-form-item label="标题">
|
||||
<!-- <n-form-item label="标题">
|
||||
<n-input v-model:value="option.title" />
|
||||
</n-form-item>
|
||||
<n-form-item label="标题大小">
|
||||
@ -23,17 +24,18 @@
|
||||
</n-form-item>
|
||||
<n-form-item label="总设备">
|
||||
<n-input-number v-model:value="option.totalDevice" />
|
||||
</n-form-item>
|
||||
</n-form-item> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import { option as optionConfig } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
option: {
|
||||
type: Object as PropType<typeof option>,
|
||||
type: Object as PropType<typeof optionConfig>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
@ -4,6 +4,7 @@ import { ParkingSceneConfig } from './index'
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const option = {
|
||||
secneID: "",
|
||||
dataset: dataJson.source,
|
||||
title: '场景分布概况',
|
||||
titleColor: '#eee',
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
|
||||
<div class="go-parking-scene-config">
|
||||
|
||||
<n-form-item label="标题">
|
||||
<n-input v-model:value="option.title" />
|
||||
</n-form-item>
|
||||
@ -21,6 +23,7 @@
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
defineProps({
|
||||
option: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user