Merge branch 'master' of http://119.45.132.149:3000/security/go-view-fetch
This commit is contained in:
commit
b0aea5a9e0
@ -1,39 +1,52 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
|
||||
import { LineGradientsConfig } from './index'
|
||||
import { CarbonEmissionConfig } from './index'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { graphic } from 'echarts/core'
|
||||
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import dataJson from './data.json'
|
||||
import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
|
||||
|
||||
export const includes = [ 'xAxis', 'yAxis', 'grid']
|
||||
export const includes = ['xAxis', 'yAxis']
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
top:'20',
|
||||
right:'50',
|
||||
itemStyle:{
|
||||
top: '20',
|
||||
right: '50',
|
||||
itemStyle: {
|
||||
borderType: 'dotted'
|
||||
},
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
cap:'round',
|
||||
opacity:0.9,
|
||||
type: 'dashed',
|
||||
cap: 'round',
|
||||
opacity: 0.9,
|
||||
},
|
||||
// icon: 'rect',
|
||||
data:[{
|
||||
data: [{
|
||||
name: '电',
|
||||
// 强制设置图形为圆。
|
||||
icon: 'rect',
|
||||
itemStyle:{
|
||||
itemStyle: {
|
||||
color: 'rgba(12, 109, 196,1)'
|
||||
}, textStyle: {
|
||||
color: '#eee'
|
||||
},
|
||||
},{
|
||||
}, {
|
||||
name: '燃气',
|
||||
textStyle: {
|
||||
color: '#eee'
|
||||
},
|
||||
// 强制设置图形为圆。
|
||||
icon: 'rect',
|
||||
itemStyle:{
|
||||
itemStyle: {
|
||||
color: 'rgba(48, 189, 104,1)'
|
||||
},
|
||||
}],
|
||||
@ -53,21 +66,22 @@ const option = {
|
||||
show: true,
|
||||
type: 'value',
|
||||
name: '单位：万/kwh',
|
||||
nameGap:30,
|
||||
axisLine:{
|
||||
nameGap: 30,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
splitLine:{
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle:{
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity:0.5
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
dataset: { ...dataJson },
|
||||
series: [
|
||||
{
|
||||
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 0, //设定实心点的大小
|
||||
@ -131,8 +145,8 @@ const option = {
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key: string = LineGradientsConfig.key
|
||||
public chartConfig = cloneDeep(LineGradientsConfig)
|
||||
public key: string = CarbonEmissionConfig.key
|
||||
public chartConfig = cloneDeep(CarbonEmissionConfig)
|
||||
// 图表配置项
|
||||
public option = echartOptionProfixHandle(option, includes)
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<CollapseItem v-for="(item, index) in seriesList" :key="index" name="单折线面积图" :expanded="true">
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number v-model:value="item.lineStyle.width" :min="1" size="small" placeholder="自动计算"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number v-model:value="item.symbolSize" :min="1" :max="100" size="small"
|
||||
placeholder="自动计算"></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<Setting-item-box name="标签">
|
||||
<Setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</Setting-item>
|
||||
<Setting-item name="大小">
|
||||
<n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
|
||||
</Setting-item>
|
||||
<Setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
|
||||
</Setting-item>
|
||||
<Setting-item name="位置">
|
||||
<n-select v-model:value="item.label.position" :options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]" />
|
||||
</Setting-item>
|
||||
</Setting-item-box>
|
||||
</CollapseItem>
|
||||
</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
|
||||
},
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@ -1,14 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const LineGradientsConfig: ConfigType = {
|
||||
key: 'LineGradients',
|
||||
chartKey: 'VLineGradients',
|
||||
conKey: 'VCLineGradients',
|
||||
export const CarbonEmissionConfig: ConfigType = {
|
||||
key: 'CarbonEmission',
|
||||
chartKey: 'VCarbonEmission',
|
||||
conKey: 'VCCarbonEmission',
|
||||
title: '碳排放',
|
||||
category: ChatCategoryEnum.IntegratedEnergy,
|
||||
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
chartFrame: ChartFrameEnum.ECHARTS,
|
||||
image: 'line_gradient.png'
|
||||
image: 'carbon_emission.png'
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 512 512"><path fill="#dbb361" d="M512 80c0 18-14.3 34.6-38.4 48c-29.1 16.1-72.5 27.5-122.3 30.9c-3.7-1.8-7.4-3.5-11.3-5c-39.4-16.5-91.8-25.9-148-25.9c-8.3 0-16.4.2-24.5.6l-1.1-.6C142.3 114.6 128 98 128 80c0-44.2 86-80 192-80s192 35.8 192 80m-351.3 81.1c10.2-.7 20.7-1.1 31.3-1.1c62.2 0 117.4 12.3 152.5 31.4c24.8 13.5 39.5 30.3 39.5 48.6c0 4-.7 7.9-2.1 11.7c-4.6 13.2-17 25.3-35 35.5c-.1.1-.3.1-.4.2c-.3.2-.6.3-.9.5c-35 19.4-90.8 32-153.6 32c-59.6 0-112.9-11.3-148.2-29.1c-1.9-.9-3.7-1.9-5.5-2.9C14.3 274.6 0 258 0 240c0-34.8 53.4-64.5 128-75.4c10.5-1.5 21.4-2.7 32.7-3.5M416 240c0-21.9-10.6-39.9-24.1-53.4c28.3-4.4 54.2-11.4 76.2-20.5c16.3-6.8 31.5-15.2 43.9-25.5V176c0 19.3-16.5 37.1-43.8 50.9c-14.6 7.4-32.4 13.7-52.4 18.5c.1-1.8.2-3.5.2-5.3zm-32 96c0 18-14.3 34.6-38.4 48c-1.8 1-3.6 1.9-5.5 2.9C304.9 404.7 251.6 416 192 416c-62.8 0-118.6-12.6-153.6-32C14.3 370.6 0 354 0 336v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 342.6 135.8 352 192 352s108.6-9.4 148.1-25.9c7.8-3.2 15.3-6.9 22.4-10.9c6.1-3.4 11.8-7.2 17.2-11.2c1.5-1.1 2.9-2.3 4.3-3.4v9.1zm32 0v-57.9c19-4.2 36.5-9.5 52.1-16c16.3-6.8 31.5-15.2 43.9-25.5V272c0 10.5-5 21-14.9 30.9c-16.3 16.3-45 29.7-81.3 38.4c.1-1.7.2-3.5.2-5.3M192 448c56.2 0 108.6-9.4 148.1-25.9c16.3-6.8 31.5-15.2 43.9-25.5V432c0 44.2-86 80-192 80S0 476.2 0 432v-35.4c12.5 10.3 27.6 18.7 43.9 25.5C83.4 438.6 135.8 448 192 448"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -5,7 +5,10 @@ import cloneDeep from 'lodash/cloneDeep'
|
||||
import { chartInitConfig } from '@/settings/designSetting'
|
||||
|
||||
//导入数据
|
||||
import costIcon from './assets/cost.svg'
|
||||
import costIcon from './assets/cost.png'
|
||||
import gasIcon from './assets/gasSupply.png'
|
||||
import EleIcon from './assets/mainsElectricity.png'
|
||||
import watIcon from './assets/waterSupply.png'
|
||||
import dataJson from './data.json'
|
||||
const otherOption = {
|
||||
sceneCode: '',
|
||||
@ -19,21 +22,21 @@ const otherOption = {
|
||||
valueClass: 'value-cost'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
icon: EleIcon,
|
||||
label: '市电',
|
||||
field: 'mainsElectricity',
|
||||
unit: '单位',
|
||||
valueClass: 'value-electricity'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
icon: watIcon,
|
||||
label: '供水',
|
||||
field: 'waterSupply',
|
||||
unit: '单位',
|
||||
valueClass: 'value-water'
|
||||
},
|
||||
{
|
||||
icon: costIcon,
|
||||
icon: gasIcon,
|
||||
label: '燃气',
|
||||
field: 'gasSupply',
|
||||
unit: '单位',
|
||||
@ -50,5 +53,5 @@ export default class Config extends PublicConfigClass implements CreateComponent
|
||||
public key = EnergyOverviewConfig.key
|
||||
public chartConfig = cloneDeep(EnergyOverviewConfig)
|
||||
public option = cloneDeep(option)
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 889, h: 267, zIndex: 1 }
|
||||
public attr = { ...chartInitConfig, x: 0, y: 0, w: 900, h: 310, zIndex: 1 }
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="go-energy-box">
|
||||
<div class="grid-container">
|
||||
<div v-for="(item, index) in configOption.gridItems" :key="index" class="grid-item">
|
||||
<div v-for="(item, index) in chartConfig.option.gridItems" :key="index" class="grid-item">
|
||||
<span class="item">
|
||||
<img class="icon" :src="item.icon" :alt="item.label">
|
||||
</span>
|
||||
@ -20,11 +20,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { PropType, shallowReactive, watch } from 'vue'
|
||||
import { PropType, reactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { option as configOption } from './config'
|
||||
// import { option as configOption } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
@ -33,8 +33,8 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: configOption.dataset
|
||||
const option = reactive({
|
||||
dataset: props.chartConfig.option.dataset
|
||||
})
|
||||
|
||||
|
||||
@ -70,6 +70,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 10px;
|
||||
padding: 0 10px;
|
||||
|
||||
.grid-item {
|
||||
// background-color: #043951;
|
||||
@ -83,7 +84,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
.item-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 20px;
|
||||
margin-left: 5px;
|
||||
margin-right: 20px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@ -96,9 +97,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.value {
|
||||
font-size: 35px;
|
||||
//使用庞门正道标题体
|
||||
|
||||
font-size: 30px;
|
||||
letter-spacing: 3px;
|
||||
// flex-grow: 1;
|
||||
// flex-shrink: 0;
|
||||
@ -122,11 +126,12 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
|
||||
.label {
|
||||
color: #07A1C8;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
align-self: flex-start;
|
||||
|
||||
// 使用思源黑体
|
||||
font-family: 'Source Han Sans CN';
|
||||
// 使用渐变背景色
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.624) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.796) 0%, rgba(255, 255, 255, 1) 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@ -161,8 +166,9 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
|
||||
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
// background-color: #07A1C8;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
flex-shrink: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@ -1,95 +0,0 @@
|
||||
<template>
|
||||
<!-- Echarts 全局设置 -->
|
||||
<global-setting :optionData="optionData"></global-setting>
|
||||
<CollapseItem
|
||||
v-for="(item, index) in seriesList"
|
||||
:key="index"
|
||||
name="单折线面积图"
|
||||
:expanded="true"
|
||||
>
|
||||
<SettingItemBox name="线条">
|
||||
<SettingItem name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="item.lineStyle.width"
|
||||
:min="1"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="类型">
|
||||
<n-select
|
||||
v-model:value="item.lineStyle.type"
|
||||
size="small"
|
||||
:options="lineConf.lineStyle.type"
|
||||
></n-select>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<SettingItemBox name="实心点">
|
||||
<SettingItem name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.symbolSize"
|
||||
:min="1"
|
||||
:max="100"
|
||||
size="small"
|
||||
placeholder="自动计算"
|
||||
></n-input-number>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
<setting-item-box name="标签">
|
||||
<setting-item>
|
||||
<n-space>
|
||||
<n-switch v-model:value="item.label.show" size="small" />
|
||||
<n-text>展示标签</n-text>
|
||||
</n-space>
|
||||
</setting-item>
|
||||
<setting-item name="大小">
|
||||
<n-input-number
|
||||
v-model:value="item.label.fontSize"
|
||||
size="small"
|
||||
:min="1"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="item.label.color"
|
||||
></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="位置">
|
||||
<n-select
|
||||
v-model:value="item.label.position"
|
||||
:options="[
|
||||
{ label: 'top', value: 'top' },
|
||||
{ label: 'left', value: 'left' },
|
||||
{ label: 'right', value: 'right' },
|
||||
{ label: 'bottom', value: 'bottom' },
|
||||
]"
|
||||
/>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</CollapseItem>
|
||||
</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
|
||||
},
|
||||
})
|
||||
|
||||
const seriesList = computed(() => {
|
||||
return props.optionData.series
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,27 @@
|
||||
import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public';
|
||||
import { PowerConsumptionRankingSystemConfig } from './index';
|
||||
import { CreateComponentType } from '@/packages/index.d';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import { chartInitConfig } from '@/settings/designSetting';
|
||||
import dataJson from './data.json'
|
||||
|
||||
export const option = {
|
||||
// 进行时效果
|
||||
processing: true,
|
||||
// 渐变颜色
|
||||
color: '#23ffe2',
|
||||
color2: '#0f86eb',
|
||||
// 轨道颜色
|
||||
railColor: '#09222e',
|
||||
railBorderColor: '#0d5f68',
|
||||
borderRadius: 50,
|
||||
railWidth: 60,
|
||||
dataset: dataJson
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = PowerConsumptionRankingSystemConfig.key
|
||||
public attr = { ...chartInitConfig, w: 450, h: 320, zIndex: 1 }
|
||||
public chartConfig = cloneDeep(PowerConsumptionRankingSystemConfig)
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<!-- 默认展开 -->
|
||||
<CollapseItem name="柱状图横向排行" :expanded="true">
|
||||
<SettingItemBox name="柱状图">
|
||||
<!-- 颜色粗细等等... -->
|
||||
<SettingItem name="进度条渐变颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="进度条渐变颜色2">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.color2"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="轨道颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem name="轨道长度">
|
||||
<n-input-number v-model:value="optionData.railWidth" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="圆角">
|
||||
<n-input-number v-model:value="optionData.borderRadius" size="small"></n-input-number>
|
||||
</SettingItem>
|
||||
<SettingItem name="轨道边框颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.railBorderColor"></n-color-picker>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
// 以下是封装的设置模块布局组件，具体效果可在官网查看
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
|
||||
// 获取 option 的数据，便于使用 typeof 获取类型
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
[
|
||||
{
|
||||
"name": "产线名称1",
|
||||
"value": 40000,
|
||||
"percentage": 60,
|
||||
"unit":"/kwh"
|
||||
},
|
||||
{
|
||||
"name": "产线名称2",
|
||||
"value": 34000,
|
||||
"percentage": 40,
|
||||
"unit":"/kwh"
|
||||
|
||||
},
|
||||
{
|
||||
"name": "产线名称3",
|
||||
"value": 30000,
|
||||
"percentage": 60,
|
||||
"unit":"/kwh"
|
||||
},
|
||||
{
|
||||
"name": "产线名称4",
|
||||
"value": 28000,
|
||||
"percentage": 50,
|
||||
"unit":"/kwh"
|
||||
},
|
||||
{
|
||||
"name": "产线名称5",
|
||||
"value": 25000,
|
||||
"percentage": 60,
|
||||
"unit":"/kwh"
|
||||
}
|
||||
]
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,22 @@
|
||||
// 公共类型声明
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
// 当前[信息模块]分类声明
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const PowerConsumptionRankingSystemConfig: ConfigType = {
|
||||
// 唯一key
|
||||
key: 'PowerConsumptionRankingSystem',
|
||||
// 图表组件渲染 Components 格式: V + key
|
||||
chartKey: 'VPowerConsumptionRankingSystem',
|
||||
// 配置组件渲染 Components 格式: VC + key
|
||||
conKey: 'VCPowerConsumptionRankingSystem',
|
||||
// 名称
|
||||
title: '用电量排行',
|
||||
// 子分类目录
|
||||
category: ChatCategoryEnum.IntegratedEnergy,
|
||||
categoryName: ChatCategoryEnumName.IntegratedEnergy,
|
||||
// 包分类
|
||||
package: PackagesCategoryEnum.CHARTS,
|
||||
// 图片
|
||||
image: 'PowerConsumptionRankingSystem.png'
|
||||
}
|
||||
@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="flex_column wrapper">
|
||||
<!-- 顶部标题栏 -->
|
||||
<!-- <div class="title-bar">
|
||||
<div class="title">用电量排名</div>
|
||||
<div class="tabs">
|
||||
<div class="tab active">市电</div>
|
||||
<div class="tab">供水</div>
|
||||
<div class="tab">燃气</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div v-for="(item, index) in dataset" :key="index" class="flex_v chart_item">
|
||||
<!-- 包裹每行的内容（序号、名称、进度条、数值） -->
|
||||
<div class="row-content row-bg-container">
|
||||
<div class="left-group ">
|
||||
<div v-if="index == 0" class="squareIcon squareIcon1 flex_c ">{{ index + 1 }}</div>
|
||||
<div v-else-if="index == 1" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
|
||||
<div v-else-if="index == 2" class="squareIcon squareIcon1 flex_c">{{ index + 1 }}</div>
|
||||
<div v-else class="squareIcon squareIcon2 flex_c">{{ index + 1 }}</div>
|
||||
<div class="name" :title="item.name">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="right-group">
|
||||
<div class="bar_wrapper">
|
||||
<div class="bar_body" :style="{
|
||||
width: item.percentage + '%',
|
||||
height: '12px', borderRadius: borderRadius + 'px'
|
||||
}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="value">{{ item.value }}{{ item.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, watch, shallowReactive, onMounted } from 'vue'
|
||||
import { useChartDataFetch } from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import config, { option as configOption } from './config'
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<config>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
// 取配置数据
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { color, color2, railColor, railBorderColor, borderRadius, railWidth, dataset } = toRefs(
|
||||
props.chartConfig.option
|
||||
)
|
||||
|
||||
// 手动更新
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
try {
|
||||
dataset.value = newData
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
// 预览更新
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: Array<{ name: string; value: number, percentage: number, unit: string }>) => {
|
||||
dataset.value = newData
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.flex_v {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex_column {
|
||||
// background-color: antiquewhite;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex_c {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// .wrapper {
|
||||
// width: 450px;
|
||||
// height: 320px;
|
||||
// background: url('./images/背景框_03.png') no-repeat center center;
|
||||
// background-size: cover;
|
||||
// padding: 10px;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
|
||||
// .title-bar {
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
// align-items: center;
|
||||
// margin-bottom: 10px;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
// .title {
|
||||
// font-size: 16px;
|
||||
// font-weight: bold;
|
||||
// margin-left: 30px;
|
||||
// width: 100px;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// font-family: "思源黑体", sans-serif;
|
||||
// letter-spacing: 2px;
|
||||
// padding-bottom: 2px;
|
||||
|
||||
// }
|
||||
|
||||
// .tabs {
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
// .tab {
|
||||
// padding-right: 6px;
|
||||
// margin-left: 6px;
|
||||
// cursor: pointer;
|
||||
// font-size: 16px;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// font-family: "思源黑体";
|
||||
// color: #2A99FF;
|
||||
// }
|
||||
|
||||
// .tab.active {
|
||||
// // background-color: #007bff;
|
||||
// }
|
||||
|
||||
// .name {
|
||||
// width: 100px;
|
||||
// white-space: nowrap;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// padding: 8px;
|
||||
// color: #fff;
|
||||
// }
|
||||
|
||||
.value {
|
||||
margin: 0 0 0 10px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bar_wrapper {
|
||||
width: v-bind('railWidth + "px"');
|
||||
height: 12px;
|
||||
border: 1px solid v-bind('railBorderColor');
|
||||
border-radius: v-bind('borderRadius + "px"');
|
||||
background-color: v-bind('railColor');
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.bar_body {
|
||||
background: linear-gradient(to right, v-bind('color'), v-bind('color2'));
|
||||
}
|
||||
|
||||
.progressClass {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.squareIcon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.squareIcon1 {
|
||||
background: url('./images/排行底1_03.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.squareIcon2 {
|
||||
background: url('./images/排行底2_03.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart_item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.row-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 180px;
|
||||
// 调整左侧外边距，进一步微调位置
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.right-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.row-bg-container {
|
||||
width: 100%;
|
||||
background: url('./images/左3条_03.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
// 增加左侧内边距，使背景更靠左边
|
||||
padding: 12px 0 30px 20px;
|
||||
height: 35px;
|
||||
box-sizing: border-box; // 确保内边距和边框包含在宽度内
|
||||
}
|
||||
</style>
|
||||
@ -6,12 +6,12 @@ import { WaterSupplySystemConfig } from "./WaterSupplySystem"
|
||||
import { AirSupplySystemConfig } from './AirSupplySystem'
|
||||
import { PowerSupplySystemConfig } from './PowerSupplySystem'
|
||||
import { GasSystemConfig } from './GasSystem'
|
||||
import { LineGradientsConfig } from './LineGradients'
|
||||
import { ConstructionIndexConfig } from './ConstructionIndex'
|
||||
import { CarbonEmissionConfig } from './CarbonEmission'
|
||||
export default [
|
||||
EnergyOverviewConfig, EnergyConsumptionTrendConfig,
|
||||
ConsumptionProportionConfig,
|
||||
FeeOverviewConfig,
|
||||
WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig,
|
||||
GasSystemConfig, LineGradientsConfig, ConstructionIndexConfig
|
||||
GasSystemConfig,CarbonEmissionConfig,ConstructionIndexConfig
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user