diff --git a/README.md b/README.md index c664b7c..058fe01 100644 --- a/README.md +++ b/README.md @@ -112,6 +112,8 @@ export const http = (type?: RequestHttpEnum) => { ## 交流 +zs + QQ 群：1030129384 ![QQ群](readme/go-view-qq.png) diff --git a/src/assets/images/chart/charts/SmallBorder.png b/src/assets/images/chart/charts/SmallBorder.png new file mode 100644 index 0000000..bab6562 Binary files /dev/null and b/src/assets/images/chart/charts/SmallBorder.png differ diff --git a/src/assets/images/chart/charts/alarm_list.png b/src/assets/images/chart/charts/alarm_list.png new file mode 100644 index 0000000..0da795b Binary files /dev/null and b/src/assets/images/chart/charts/alarm_list.png differ diff --git a/src/assets/images/chart/charts/top_alarms.png b/src/assets/images/chart/charts/top_alarms.png new file mode 100644 index 0000000..0174846 Binary files /dev/null and b/src/assets/images/chart/charts/top_alarms.png differ diff --git a/src/packages/components/Charts/MyComponents/AlarmList/config.ts b/src/packages/components/Charts/MyComponents/AlarmList/config.ts index 36fca19..8556cd3 100644 --- a/src/packages/components/Charts/MyComponents/AlarmList/config.ts +++ b/src/packages/components/Charts/MyComponents/AlarmList/config.ts @@ -2,29 +2,56 @@ import { PublicConfigClass } from '@/packages/public' import { CreateComponentType } from '@/packages/index.d' import { AlarmListConfig } from './index' import dataJson from './data.json' +import { chartInitConfig } from '@/settings/designSetting' +export enum FontWeightEnum { + NORMAL = '常规', + BOLD = '加粗', +} +export enum FontStyleEnum { + NORMAL = '常规', + ITALIC = '斜体', +} + +export const FontWeightObject = { + [FontWeightEnum.NORMAL]: 'normal', + [FontWeightEnum.BOLD]: 'bold', +} + +export const FontStyleObject = { + [FontStyleEnum.NORMAL]: 'normal', + [FontStyleEnum.ITALIC]: 'italic', +} export const option = { dataset: dataJson.source, header: ['报警事件', '时间', '所属企业', '状态'], headerTextColor: '#B4B4B4', textColor: '#ffffff', headerBackgroundColor: '#17325F', - itemBackgroundColor: '#0F233E', + itemBackgroundColor: '#242834', statusColors: { '未解决': '#FF4D4F', '已解决': '#ffffff' }, - headerHeight: 40, - itemHeight: 35, - fontSize: 14, + headerHeight: 30, + itemHeight: 30, + fontSize: 12, title: '近60分钟报警信息', - titleSize: 18, + titleSize: 17, titleColor: '#ffffff', - iconColor: '#00E5FF' + iconColor: '#00E5FF', + fontWeight: 'normal', + fontStyle: 'normal', + paddingX: 40, + paddingY: -19, + letterSpacing: 2, + isShowButton: false } export default class Config extends PublicConfigClass implements CreateComponentType { public key = AlarmListConfig.key public chartConfig = AlarmListConfig public option = option + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } + } diff --git a/src/packages/components/Charts/MyComponents/AlarmList/config.vue b/src/packages/components/Charts/MyComponents/AlarmList/config.vue index 4378d80..101257f 100644 --- a/src/packages/components/Charts/MyComponents/AlarmList/config.vue +++ b/src/packages/components/Charts/MyComponents/AlarmList/config.vue @@ -1,31 +1,70 @@ diff --git a/src/packages/components/Charts/MyComponents/AlarmList/index.vue b/src/packages/components/Charts/MyComponents/AlarmList/index.vue index 3d3a682..b284030 100644 --- a/src/packages/components/Charts/MyComponents/AlarmList/index.vue +++ b/src/packages/components/Charts/MyComponents/AlarmList/index.vue @@ -1,61 +1,64 @@ diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/data.json b/src/packages/components/Charts/MyComponents/LineGraph01/data.json new file mode 100644 index 0000000..5257831 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/data.json @@ -0,0 +1,96 @@ +{ + "title": "报警处置情况", + "names": [ + "报警总数", + "未处置报警数", + "平均处置时长" + ], + "tip": "报警处置效率", + "dataIndex": 0, + "dataSource": [ + { + "dataname": "当日", + "values": [ + 2623, + 2623, + 2623 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 99 + ], + [ + "14:00", + 19 + ], + [ + "15:00", + 75 + ], + [ + "16:00", + 26 + ], + [ + "17:00", + 35 + ], + [ + "18:00", + 20 + ], + [ + "19:00", + 10 + ] + ] + }, + { + "dataname": "昨日", + "values": [ + 2734, + 2829, + 2232 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 12 + ], + [ + "14:00", + 22 + ], + [ + "15:00", + 23 + ], + [ + "16:00", + 3 + ], + [ + "17:00", + 68 + ], + [ + "18:00", + 56 + ], + [ + "19:00", + 45 + ] + ] + } + ] +} \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png b/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png new file mode 100644 index 0000000..88dbbb9 Binary files /dev/null and b/src/packages/components/Charts/MyComponents/LineGraph01/icon01.png differ diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/index.ts b/src/packages/components/Charts/MyComponents/LineGraph01/index.ts new file mode 100644 index 0000000..66e904b --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/index.ts @@ -0,0 +1,17 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +// 曲线图 +export const LineGraph01Config: ConfigType = { + key: 'LineGraph01', + chartKey: 'VLineGraph01', + conKey: 'VCLineGraph01', + title: '曲线图(带边框和标题)', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.ECHARTS, + image: "LineGraph01.png", +} + +// 默认导出配置对象 +export default LineGraph01Config \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph01/index.vue b/src/packages/components/Charts/MyComponents/LineGraph01/index.vue new file mode 100644 index 0000000..89b194e --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph01/index.vue @@ -0,0 +1,653 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/config.ts b/src/packages/components/Charts/MyComponents/LineGraph02/config.ts new file mode 100644 index 0000000..3f12d2e --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/config.ts @@ -0,0 +1,114 @@ +import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public' +import { LineGraph02Config } from './index' +import { CreateComponentType } from '@/packages/index.d' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' +import dataJson from './data.json' +export interface DataSourceItem { + dataname: string; + values: number[]; + datavalues: (string | number)[][]; +} +export interface DatasType { + title: string; + names: string[]; + tip: string; + dataIndex: number; + dataSource: DataSourceItem[]; +} + + +export const includes = ['legend', 'xAxis', 'yAxis', 'grid'] +export const seriesItem = { + type: 'line', + smooth: true, + symbol: 'none', + + label: { + show: false, + position: 'top', + color: '#fff', + fontSize: 12 + }, + itemStyle: { + color: null, + borderRadius: 0 + }, + lineStyle: { + type: 'solid', + width: 2, + color: '#50BB9A' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [{ + offset: 0, + color: 'rgba(80,187,154,0.6)' + }, { + offset: 1, + color: 'rgba(80,187,154,0.3)' + }] + } + } +} +export const option = { + dataset: { + source: dataJson.dataSource[0].datavalues + }, + grid: { + left: '15%', + right: '12%', + top: 9, + bottom: '25%' + }, + xAxis: { + type: 'category', + boundaryGap: false, + axisLine: { + show: false + }, + axisTick: { + show: false + + }, + axisLabel: { + color: '#B7BFC6' + } + }, + + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}s', + color: "#4C535B" + }, + + axisLine: { + show: false + }, + axisTick: { + show: false + } + }, + legend: { + show: false + }, + series: [seriesItem] +}; + + + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key: string = LineGraph02Config.key + public chartConfig = cloneDeep(LineGraph02Config) + public mockData = dataJson + // 图表配置项 + public option = echartOptionProfixHandle(option, includes) + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } +} + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/config.vue b/src/packages/components/Charts/MyComponents/LineGraph02/config.vue new file mode 100644 index 0000000..415af52 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/config.vue @@ -0,0 +1,61 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/data.json b/src/packages/components/Charts/MyComponents/LineGraph02/data.json new file mode 100644 index 0000000..5257831 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/data.json @@ -0,0 +1,96 @@ +{ + "title": "报警处置情况", + "names": [ + "报警总数", + "未处置报警数", + "平均处置时长" + ], + "tip": "报警处置效率", + "dataIndex": 0, + "dataSource": [ + { + "dataname": "当日", + "values": [ + 2623, + 2623, + 2623 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 99 + ], + [ + "14:00", + 19 + ], + [ + "15:00", + 75 + ], + [ + "16:00", + 26 + ], + [ + "17:00", + 35 + ], + [ + "18:00", + 20 + ], + [ + "19:00", + 10 + ] + ] + }, + { + "dataname": "昨日", + "values": [ + 2734, + 2829, + 2232 + ], + "datavalues": [ + [ + "时间", + "数值" + ], + [ + "13:00", + 12 + ], + [ + "14:00", + 22 + ], + [ + "15:00", + 23 + ], + [ + "16:00", + 3 + ], + [ + "17:00", + 68 + ], + [ + "18:00", + 56 + ], + [ + "19:00", + 45 + ] + ] + } + ] +} \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png b/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png new file mode 100644 index 0000000..88dbbb9 Binary files /dev/null and b/src/packages/components/Charts/MyComponents/LineGraph02/icon01.png differ diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/index.ts b/src/packages/components/Charts/MyComponents/LineGraph02/index.ts new file mode 100644 index 0000000..2374226 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/index.ts @@ -0,0 +1,17 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +// 曲线图 +export const LineGraph02Config: ConfigType = { + key: 'LineGraph02', + chartKey: 'VLineGraph02', + conKey: 'VCLineGraph02', + title: '曲线图(无边框和标题)', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.ECHARTS, + image: "LineGraph02.png", +} + +// 默认导出配置对象 +export default LineGraph02Config \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/LineGraph02/index.vue b/src/packages/components/Charts/MyComponents/LineGraph02/index.vue new file mode 100644 index 0000000..5862e72 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/LineGraph02/index.vue @@ -0,0 +1,432 @@ + + + + + + + diff --git a/src/packages/components/Charts/MyComponents/MaxTrim/config.ts b/src/packages/components/Charts/MyComponents/MaxTrim/config.ts new file mode 100644 index 0000000..e777bf6 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/MaxTrim/config.ts @@ -0,0 +1,58 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { MaxTrimConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' + +export enum WritingModeEnum { + HORIZONTAL = '水平', + VERTICAL = '垂直' +} + +export const WritingModeObject = { + [WritingModeEnum.HORIZONTAL]: 'horizontal-tb', + [WritingModeEnum.VERTICAL]: 'vertical-rl' +} + +export enum FontWeightEnum { + NORMAL = '常规', + BOLD = '加粗', +} + +export enum FontStyleEnum { + NORMAL = '常规', + ITALIC = '斜体', +} + +export const FontWeightObject = { + [FontWeightEnum.NORMAL]: 'normal', + [FontWeightEnum.BOLD]: 'bold', +} + +export const FontStyleObject = { + [FontStyleEnum.NORMAL]: 'normal', + [FontStyleEnum.ITALIC]: 'italic', +} + +export const option = { + dataset: '储罐区监控', + fontSize: 38, + fontColor: '#ffffff', + paddingX: 35, + paddingY: 6, + textAlign: 'start', // 水平对齐方式 + fontWeight: 'bold', + fontStyle: 'italic', + // 字间距 + letterSpacing: 10, + writingMode: 'horizontal-tb', + backgroundColor: '#00000000' +} + + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = MaxTrimConfig.key + public chartConfig = cloneDeep(MaxTrimConfig) + public attr = { ...chartInitConfig, x: 0, y: 0, w: 1920, h: 94, zIndex: 1 } + public option = cloneDeep(option) +} diff --git a/src/packages/components/Charts/MyComponents/MaxTrim/config.vue b/src/packages/components/Charts/MyComponents/MaxTrim/config.vue new file mode 100644 index 0000000..e139943 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/MaxTrim/config.vue @@ -0,0 +1,96 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/MaxTrim/index.ts b/src/packages/components/Charts/MyComponents/MaxTrim/index.ts new file mode 100644 index 0000000..d11e140 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/MaxTrim/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, ChartFrameEnum } from '@/packages/index.d' + +export const MaxTrimConfig: ConfigType = { + key: 'MaxTrim', + chartKey: 'VMaxTrim', + conKey: 'VCMaxTrim', + title: '最大装饰条', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.COMMON, + image: 'MaxTrim.png' +} +export default MaxTrimConfig \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/MaxTrim/index.vue b/src/packages/components/Charts/MyComponents/MaxTrim/index.vue new file mode 100644 index 0000000..472ce16 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/MaxTrim/index.vue @@ -0,0 +1,347 @@ + + + + diff --git a/src/packages/components/Charts/MyComponents/SmallBorder/config.ts b/src/packages/components/Charts/MyComponents/SmallBorder/config.ts new file mode 100644 index 0000000..ccf8d39 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.ts @@ -0,0 +1,18 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { SmallBorderConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import { chartInitConfig } from '@/settings/designSetting' + +export const option = { + colors: ['#1089ff', '#0000ff'], + backgroundColor: '#00000000' +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = SmallBorderConfig.key + public chartConfig = cloneDeep(SmallBorderConfig) + public option = cloneDeep(option) + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } + +} diff --git a/src/packages/components/Charts/MyComponents/SmallBorder/config.vue b/src/packages/components/Charts/MyComponents/SmallBorder/config.vue new file mode 100644 index 0000000..8c5b2c2 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/SmallBorder/config.vue @@ -0,0 +1,54 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/SmallBorder/index.ts b/src/packages/components/Charts/MyComponents/SmallBorder/index.ts new file mode 100644 index 0000000..22e23e3 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.ts @@ -0,0 +1,17 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +// import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' +// 曲线图 +export const SmallBorderConfig: ConfigType = { + key: 'SmallBorder', + chartKey: 'VSmallBorder', + conKey: 'VCSmallBorder', + title: '带标题小边框', + category: 'MyComponents', + categoryName: '自定义组件', + package: 'Charts', + chartFrame: ChartFrameEnum.COMMON, + image: "SmallBorder.png", +} + +// 默认导出配置对象 +export default SmallBorderConfig \ No newline at end of file diff --git a/src/packages/components/Charts/MyComponents/SmallBorder/index.vue b/src/packages/components/Charts/MyComponents/SmallBorder/index.vue new file mode 100644 index 0000000..4f4b8a8 --- /dev/null +++ b/src/packages/components/Charts/MyComponents/SmallBorder/index.vue @@ -0,0 +1,259 @@ + + + diff --git a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts b/src/packages/components/Charts/MyComponents/TopAlarms/config.ts index a66d567..833117b 100644 --- a/src/packages/components/Charts/MyComponents/TopAlarms/config.ts +++ b/src/packages/components/Charts/MyComponents/TopAlarms/config.ts @@ -2,24 +2,29 @@ import { PublicConfigClass } from '@/packages/public' import { CreateComponentType } from '@/packages/index.d' import { TopAlarmsConfig } from './index' import dataJson from './data.json' - +import { chartInitConfig } from '@/settings/designSetting' export const option = { dataset: dataJson.source, title: '未处置报警数TOP5', titleColor: '#ffffff', - titleSize: 18, - rankColor: '#ffffff', - nameColor: '#B0E0E6', - valueColor: '#ffffff', - barColorStart: '#00D9FF', - barColorEnd: '#0055FF', + titleSize: 17, + rankColor: '#5AA1AD', + nameColor: '#eeeeee', + valueColor: '#eeeeee', + barColorStart: '#2f72b5', + barColorEnd: '#99C6E6', dropdownOptions: ['当日', '当月', '当年'], dropdownDefault: '当日', - iconColor: '#00E5FF' + iconColor: '#00E5FF', + letterSpacing:2, + paddingX: 40, + paddingY: -5, + isShowButton: false } export default class Config extends PublicConfigClass implements CreateComponentType { public key = TopAlarmsConfig.key public chartConfig = TopAlarmsConfig public option = option + public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 300, zIndex: 1 } } diff --git a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue b/src/packages/components/Charts/MyComponents/TopAlarms/index.vue index 2ffb20d..99befc3 100644 --- a/src/packages/components/Charts/MyComponents/TopAlarms/index.vue +++ b/src/packages/components/Charts/MyComponents/TopAlarms/index.vue @@ -1,54 +1,64 @@