diff --git a/examples/main.js b/examples/main.js index de8ecf47..43715077 100644 --- a/examples/main.js +++ b/examples/main.js @@ -5,7 +5,6 @@ import router from './router/router'; import axios from './router/axios'; import utils from './utils'; import vcUI from 'dvcp-ui'; -import dvUI from 'dvcp-dv-ui' import 'dvcp-ui/lib/styles/common.scss'; import 'dvcp-ui/lib/dvcp-ui.css'; import store from './store'; @@ -15,7 +14,6 @@ Vue.use(dataV); Vue.use(ui); Vue.use(vcUI); -Vue.use(dvUI); //富文本编辑器配置 Vue.config.productionTip = false; Vue.prototype.$axios = axios; diff --git a/package.json b/package.json index 02b0a1bc..60feafc4 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "lib:core": "vue-cli-service build --target lib --dest core/dist core/index.js --name vc-app-core&&npm unpublish --force&&npm publish", "lib:project": "node project/build.js", "lib:all": "node project/allProject.js&&npm unpublish --workspaces --force&&npm publish --workspaces", - "ui": "npm i dvcp-ui@latest dvcp-dv-ui@latest" + "ui": "npm i dvcp-ui@latest" }, "workspaces": [ "project/*" @@ -21,7 +21,6 @@ "bin-code-editor": "^0.9.0", "dayjs": "^1.8.35", "dvcp-dv": "^1.0.0", - "dvcp-dv-ui": "^2.0.0", "dvcp-ui": "^1.42.2", "echarts": "^5.1.2", "mp4box": "^0.4.1", diff --git a/packages/bigscreen/designer/AppDesigner.vue b/packages/bigscreen/designer/AppDesigner.vue index a81009d1..ca598ddf 100644 --- a/packages/bigscreen/designer/AppDesigner.vue +++ b/packages/bigscreen/designer/AppDesigner.vue @@ -6,22 +6,29 @@ - - diff --git a/project/dvui/components/AiEchart/template/bar/barChart1.js b/project/dvui/components/AiEchart/template/bar/barChart1.js new file mode 100644 index 00000000..5c54032a --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart1.js @@ -0,0 +1,91 @@ +export default { + legend: { + right: 0, + itemHeight: 5, + itemWidth: 16, + textStyle: { color: '#fff' } + }, + yAxis: { + nameGap: 23, + minInterval: 1, + splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } }, + axisLabel: { color: '#fff' }, + axisPointer: { show: false } + }, + axisPointer: { + type: 'shadow', + triggerTooltip: false, + shadowStyle: { color: 'rgba(46, 153, 255, .2)' } + }, + color: [ + { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(66, 187, 255, 1)' }, + { offset: 1, color: 'rgba(37, 143, 255, 0.2)' } + ] + }, + { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(66, 255, 254, 1)' }, + { offset: 1, color: 'rgba(37, 255, 246, 0.2)' } + ] + }, + { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(97, 253, 185, 1)' }, + { offset: 1, color: 'rgba(97, 253, 185, 0.2)' } + ] + }, + { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(253, 108, 57, 1)' }, + { offset: 1, color: 'rgba(253, 108, 57, 0.2)' } + ] + }, + { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: 'rgba(248, 187, 25, 1)' }, + { offset: 1, color: 'rgba(55, 39, 5, 1)' } + ] + } + ], + daemon: { + type: 'bar', + label: { + show: true, + position: 'top', + color: '#fff', + formatter: e => { + return e.data[e.seriesName] || '' + } + }, + barWidth: 16, + barCategoryGap: 40, + itemStyle: {} + } +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart2.js b/project/dvui/components/AiEchart/template/bar/barChart2.js new file mode 100644 index 00000000..d66c7e24 --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart2.js @@ -0,0 +1,24 @@ +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + itemWidth: 16, itemHeight: 5 + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'} + }, + yAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff'}, axisPointer: {show: false} + }, + axisPointer: { + type: 'shadow', show: true, + shadowStyle: {color: 'rgba(46, 153, 255, .2)'} + }, + daemon: {type: 'bar', barWidth: 2, barGap: 4} +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart3.js b/project/dvui/components/AiEchart/template/bar/barChart3.js new file mode 100644 index 00000000..05c565f8 --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart3.js @@ -0,0 +1,33 @@ +export default { + legend: {show: false}, + yAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff'}, axisPointer: {show: false} + }, + axisPointer: { + type: 'none', show: true, triggerTooltip: false, + }, + daemon: { + type: 'bar', label: {show: true, position: 'insideBottom', color: '#fff'}, + barWidth: 24, + showBackground: true, + backgroundStyle: { + color: 'rgba(123, 165, 255, .2)' + }, + itemStyle: { + color: { + type: 'linear', x: 0, x2: 0, y: 0, y2: 1, + colorStops: [{offset: 0, color: '#42BBFF'}, {offset: 1, color: 'rgba(37, 143, 255, 0.2)'}] + } + }, + emphasis: { + itemStyle: { + color: { + type: 'linear', x: 0, x2: 0, y: 0, y2: 1, + colorStops: [{offset: 0, color: '#42FFFE'}, {offset: 1, color: 'rgba(37, 255, 246, 0.2)'}] + } + } + } + } +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart5.js b/project/dvui/components/AiEchart/template/bar/barChart5.js new file mode 100644 index 00000000..cc17000a --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart5.js @@ -0,0 +1,23 @@ +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + itemWidth: 16, itemHeight: 5 + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'} + }, + yAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff'}, axisPointer: {show: false} + }, + axisPointer: { + type: 'none', show: true, triggerTooltip: false, + }, + daemon: {type: 'bar', barWidth: 12, stack: 'stack'} +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart7.js b/project/dvui/components/AiEchart/template/bar/barChart7.js new file mode 100644 index 00000000..589e1fce --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart7.js @@ -0,0 +1,45 @@ +export default { + legend: {show: false}, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}, + axisPointer: { + type: 'shadow', shadowStyle: {color: 'rgba(46, 153, 255, .2)'}, + label: {show: true, backgroundColor: 'transparent', fontSize: 14, margin: 1, color: '#28FBFF'} + } + }, + yAxis: { + type: 'category', + axisLabel: {color: '#fff', fontSize: 14}, + axisTick: {show: false}, + axisLine: {show: false}, + }, + xAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff', fontSize: 14}, + }, + daemon: { + type: 'bar', barWidth: 10, barGap: '40%', + label: {show: true, position: 'insideRight', color: '#fff', fontSize: 14}, + showBackground: true, + backgroundStyle: { + color: 'rgba(123, 165, 255, .2)' + }, + itemStyle: { + color: { + type: 'linear', x: 0, x2: 1, y: 0, y2: 0, + colorStops: [{offset: 0, color: 'rgba(37, 143, 255,.5)'}, {offset: 1, color: 'rgba(43, 199, 255, 1)'}] + } + }, + emphasis: { + label: {color: '#28FBFF', position: 'right'}, + itemStyle: { + color: { + type: 'linear', x: 0, x2: 1, y: 0, y2: 0, + colorStops: [{offset: 0, color: 'rgba(37, 255, 246, 0.5)'}, {offset: 1, color: '#28FBFF'}] + } + } + } + } +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart8.js b/project/dvui/components/AiEchart/template/bar/barChart8.js new file mode 100644 index 00000000..f77b2bac --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart8.js @@ -0,0 +1,36 @@ +import tools from "../tools"; + +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + itemWidth: 16, itemHeight: 5 + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'} + }, + yAxis: { + type: 'category', + axisLabel: {color: '#fff', fontSize: 14}, + axisLine: {lineStyle: {color: 'rgba(255,255,255,.5)'}}, + axisPointer: {show: false}, + }, + xAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff', fontSize: 14}, + }, + daemon: { + type: 'bar', barWidth: 10, + itemStyle: { + color: ({color}) => ({ + type: 'linear', x: 0, x2: 1, y: 0, y2: 0, + colorStops: [{offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, {offset: 1, color}] + }) + }, + } +} diff --git a/project/dvui/components/AiEchart/template/bar/barChart9.js b/project/dvui/components/AiEchart/template/bar/barChart9.js new file mode 100644 index 00000000..00d5b53c --- /dev/null +++ b/project/dvui/components/AiEchart/template/bar/barChart9.js @@ -0,0 +1,29 @@ +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + itemWidth: 16, itemHeight: 5 + }, + grid: { + left: 80, right: 0 + }, + tooltip: { + backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', textStyle: {color: '#fff'}, + }, + yAxis: { + type: 'category', + axisLabel: {color: '#fff', fontSize: 14, margin: 23}, + axisTick: {show: false}, + axisLine: {show: false}, + }, + xAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff', fontSize: 14}, + }, + daemon: { + type: 'bar', barWidth: 10, barGap: '40%', stack: 'stack', + showBackground: true, + backgroundStyle: {color: 'rgba(123, 165, 255, .2)'} + } +} diff --git a/project/dvui/components/AiEchart/template/line/lineChart1.js b/project/dvui/components/AiEchart/template/line/lineChart1.js new file mode 100644 index 00000000..853bbe0a --- /dev/null +++ b/project/dvui/components/AiEchart/template/line/lineChart1.js @@ -0,0 +1,40 @@ +import tools from '../tools'; + +export default { + legend: { show: false }, + grid: { + left: 50, + right: 0 + }, + tooltip: { + trigger: 'axis', + backgroundColor: 'rgba(14, 51, 111, 0.9)', + borderColor: '#1A6ABC', + textStyle: { color: '#fff' }, + axisPointer: { type: 'cross' } + }, + yAxis: { + nameGap: 23, + minInterval: 1, + splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } }, + axisLabel: { color: '#fff' }, + axisPointer: { snap: true } + }, + daemon: (color) => ({ + showSymbol: false, + lineStyle: { shadowBlur: 4, shadowOffsetY: 2 }, + areaStyle: { + color: { + type: 'linear', + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + { offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.5) }, + { offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.5) } + ] + } + } + }) +}; diff --git a/project/dvui/components/AiEchart/template/line/lineChart2.js b/project/dvui/components/AiEchart/template/line/lineChart2.js new file mode 100644 index 00000000..daf019b9 --- /dev/null +++ b/project/dvui/components/AiEchart/template/line/lineChart2.js @@ -0,0 +1,27 @@ +import tools from "../tools"; + +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'} + }, + daemon: color => ({ + showSymbol: false, + lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, + areaStyle: { + color: { + type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [ + {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, + {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)}, + ] + } + } + }) +} diff --git a/project/dvui/components/AiEchart/template/line/lineChart3.js b/project/dvui/components/AiEchart/template/line/lineChart3.js new file mode 100644 index 00000000..d59080b1 --- /dev/null +++ b/project/dvui/components/AiEchart/template/line/lineChart3.js @@ -0,0 +1,16 @@ +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'} + }, + daemon: { + lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, + } +} diff --git a/project/dvui/components/AiEchart/template/line/lineChart4.js b/project/dvui/components/AiEchart/template/line/lineChart4.js new file mode 100644 index 00000000..ccb0dde4 --- /dev/null +++ b/project/dvui/components/AiEchart/template/line/lineChart4.js @@ -0,0 +1,19 @@ +export default { + legend: { + right: 0, itemGap: 16, + textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, + }, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'} + }, + daemon: { + lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, + emphasis: { + focus: 'self' + } + } +} diff --git a/project/dvui/components/AiEchart/template/line/lineChart5.js b/project/dvui/components/AiEchart/template/line/lineChart5.js new file mode 100644 index 00000000..fe8d483a --- /dev/null +++ b/project/dvui/components/AiEchart/template/line/lineChart5.js @@ -0,0 +1,31 @@ +import tools from "../tools"; + +export default { + legend: {show: false}, + grid: { + left: 50, right: 0 + }, + tooltip: { + trigger: 'axis', backgroundColor: 'rgba(14, 51, 111, 0.9)', borderColor: '#1A6ABC', + textStyle: {color: '#fff'}, + axisPointer: {type: 'cross'} + }, + yAxis: { + nameGap: 23, minInterval: 1, + splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}}, + axisLabel: {color: '#fff'}, + axisPointer: {snap: true} + }, + daemon: color=> ({ + showSymbol: false, smooth: true, + lineStyle: {shadowBlur: 4, shadowOffsetY: 2}, + areaStyle: { + color: { + type: 'linear', x: 0, x2: 0, y: 0, y2: 1, colorStops: [ + {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, .5)}, + {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0)}, + ] + } + } + }) +} diff --git a/project/dvui/components/AiEchart/template/pie/pieChart2.js b/project/dvui/components/AiEchart/template/pie/pieChart2.js new file mode 100644 index 00000000..2bee12ef --- /dev/null +++ b/project/dvui/components/AiEchart/template/pie/pieChart2.js @@ -0,0 +1,96 @@ +export default { + legend: { + bottom: 0, + itemGap: 14, + itemWidth: 16, + itemHeight: 5, + textStyle: {color: "#fff", fontSize: 14} + }, + grid: { + height: 260 + }, + xAxis: {show: false}, + yAxis: {show: false}, + tooltip: { + backgroundColor: "rgba(14, 51, 111, 0.9)", + borderColor: "#1A6ABC", + textStyle: {color: "#fff"} + }, + series: { + type: "pie", + minShowLabelAngle: 10, + radius: [70, 81], + itemStyle: { + borderColor: "#fff", + borderWidth: 2 + }, + label: { + color: "#A8D7F3", + fontSize: 14, + formatter: "{name|{b}}\n{v|{d}%}", + minMargin: 5, + edgeDistance: 10, + lineHeight: 22, + rich: { + v: { + color: "#fff" + } + } + }, + labelLine: {}, + labelLayout: function (params) { + let points = params.labelLinePoints, + isLeft = points[2][0] < points[1][0] + points[2][0] = + points[2][0] + (params.labelRect.width + 4) * (isLeft ? -1 : 1) + return { + labelLinePoints: points + } + } + }, + render: (h, params) => { + const formatNum = num => { + if (num >= 10000000) { + return num / 10000000 + "千万" + } + + if (num >= 10000) { + return num / 10000 + "万" + } + + return parseFloat(num.toFixed(2)) + } + + let total = params.data.reduce((t, e) => { + return t + Number(Object.values(e)?.[1] || 0) + }, 0) + return h( + "div", + { + style: { + height: "162px", + width: "162px", + color: "#8BCCFF", + left: "50%", + top: "50%", + display: "flex", + alignItems: "center", + justifyContent: "center", + flexDirection: "column", + position: "absolute", + transform: "translate(-50%,-50%)", + backgroundImage: `url('https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie2Circle.png')`, + backgroundPosition: "center" + } + }, + [ + h( + "span", + {style: {fontSize: "28px", color: "#fff", fontFamily: "DIN"}}, + formatNum(total) + ), + h("span", null, "总量") + ] + ) + } +} diff --git a/project/dvui/components/AiEchart/template/tools.js b/project/dvui/components/AiEchart/template/tools.js new file mode 100644 index 00000000..944ad91f --- /dev/null +++ b/project/dvui/components/AiEchart/template/tools.js @@ -0,0 +1,24 @@ +export default { + $colorUtils: { + Hex2RGBA(color, alpha = 1) { + let hex = 0; + if (color.charAt(0) == "#") { + if (color.length == 4) { + //检测诸如#FFF简写格式 + color = "#" + color.charAt(1).repeat(2) + + color.charAt(2).repeat(2) + + color.charAt(3).repeat(2); + } + hex = parseInt(color.slice(1), 16); + } + let r = hex >> 16 & 0xFF; + let g = hex >> 8 & 0xFF; + let b = hex & 0xFF; + return `rgba(${r},${g},${b},${alpha})`; + }, + RGBtoHex(r, g, b) { + let hex = r << 16 | g << 8 | b; + return "#" + hex.toString(16); + } + } +} diff --git a/project/dvui/components/AiMonitor/AiMonitor.vue b/project/dvui/components/AiMonitor/AiMonitor.vue new file mode 100644 index 00000000..a9b88088 --- /dev/null +++ b/project/dvui/components/AiMonitor/AiMonitor.vue @@ -0,0 +1,48 @@ +