diff --git a/public/assets/rank0.png b/public/assets/rank0.png new file mode 100644 index 0000000..cca846b Binary files /dev/null and b/public/assets/rank0.png differ diff --git a/public/assets/rank1.png b/public/assets/rank1.png new file mode 100644 index 0000000..63cc6b1 Binary files /dev/null and b/public/assets/rank1.png differ diff --git a/public/assets/rank2.png b/public/assets/rank2.png new file mode 100644 index 0000000..34a633e Binary files /dev/null and b/public/assets/rank2.png differ diff --git a/public/assets/rank3.png b/public/assets/rank3.png new file mode 100644 index 0000000..64312e8 Binary files /dev/null and b/public/assets/rank3.png differ diff --git a/public/assets/rank4.png b/public/assets/rank4.png new file mode 100644 index 0000000..7955a4b Binary files /dev/null and b/public/assets/rank4.png differ diff --git a/public/assets/title_bg.png b/public/assets/title_bg.png new file mode 100644 index 0000000..02b39a9 Binary files /dev/null and b/public/assets/title_bg.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank0.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank0.png new file mode 100644 index 0000000..cca846b Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank0.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank1.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank1.png new file mode 100644 index 0000000..63cc6b1 Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank1.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank2.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank2.png new file mode 100644 index 0000000..34a633e Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank2.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank3.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank3.png new file mode 100644 index 0000000..64312e8 Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank3.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank4.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank4.png new file mode 100644 index 0000000..7955a4b Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/rank4.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/tag.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/tag.png new file mode 100644 index 0000000..401285c Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/tag.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/title_bg.png b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/title_bg.png new file mode 100644 index 0000000..02b39a9 Binary files /dev/null and b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/assets/title_bg.png differ diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.ts b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.ts new file mode 100644 index 0000000..bc24166 --- /dev/null +++ b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.ts @@ -0,0 +1,17 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { ConstructionIndexConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' + +//导入数据 +import dataJson from './data.json' + +export const option = { + dataset: dataJson.source +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = ConstructionIndexConfig.key + public chartConfig = cloneDeep(ConstructionIndexConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.vue b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.vue new file mode 100644 index 0000000..75616b3 --- /dev/null +++ b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/config.vue @@ -0,0 +1,18 @@ + + + + diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/data.json b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/data.json new file mode 100644 index 0000000..f1d63c3 --- /dev/null +++ b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/data.json @@ -0,0 +1,27 @@ +{ + "source": { + "constructionIndex": 10, + "productionLine": [ + { + "name": "生产线1", + "value": 136 + }, + { + "name": "生产线2", + "value": 98 + }, + { + "name": "生产线3", + "value": 96 + }, + { + "name": "生产线4", + "value": 68 + }, + { + "name": "生产线5", + "value": 64 + } + ] + } +} \ No newline at end of file diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.ts b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.ts new file mode 100644 index 0000000..710990e --- /dev/null +++ b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' + +export const ConstructionIndexConfig: ConfigType = { + key: 'ConstructionIndex', + chartKey: 'VConstructionIndex', + conKey: 'VCConstructionIndex', + title: '开工指数', + category: ChatCategoryEnum.IntegratedEnergy, + categoryName: ChatCategoryEnumName.IntegratedEnergy, + package: PackagesCategoryEnum.CHARTS, + chartFrame: ChartFrameEnum.COMMON, + image: 'EnergyOverview.png' +} \ No newline at end of file diff --git a/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.vue b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.vue new file mode 100644 index 0000000..689d31a --- /dev/null +++ b/src/packages/components/Charts/IntegratedEnergy/ConstructionIndex/index.vue @@ -0,0 +1,168 @@ + + + + + \ No newline at end of file diff --git a/src/packages/components/Charts/IntegratedEnergy/ConsumptionProportion/test.js b/src/packages/components/Charts/IntegratedEnergy/ConsumptionProportion/test.js deleted file mode 100644 index 0a56abc..0000000 --- a/src/packages/components/Charts/IntegratedEnergy/ConsumptionProportion/test.js +++ /dev/null @@ -1,320 +0,0 @@ -// 传入数据生成 option -const dataList = [ - { - name: '公务用车运行维护费', - val: 1230,//存储数据的地方 - itemStyle: { - color: 'rgba(0, 81, 180, 0.5)', - }, - }, - - { - name: '办公费', - val: 800,//存储数据的地方 - itemStyle: { - color: 'rgba(255, 196, 0, 0.5)', - }, - }, - { - name: '差旅费', - val: 500,//存储数据的地方 - itemStyle: { - color: 'rgba(95, 144, 110, 0.5)', - }, - }, -]; -const heightProportion = 0.2 // 柱状扇形的高度比例 - - -// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation -function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) { - - // 计算 - let midRatio = (startRatio + endRatio) / 3; - - let startRadian = startRatio * Math.PI * 2; - let endRadian = endRatio * Math.PI * 2; - let midRadian = midRatio * Math.PI * 2; - - // 如果只有一个扇形，则不实现选中效果。 - if (startRatio === 0 && endRatio === 1) { - isSelected = false; - } - - // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） - k = typeof k !== 'undefined' ? k : 1 / 3; - - // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） - let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; - let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; - - // 计算高亮效果的放大比例（未高亮，则比例为 1） - let hoverRate = isHovered ? 1.1 : 1; - - // 返回曲面参数方程 - return { - u: { - min: -Math.PI, - max: Math.PI * 3, - step: Math.PI / 32 - }, - - v: { - min: 0, - max: Math.PI * 2, - step: Math.PI / 20 - }, - - x: function (u, v) { - if (u < startRadian) { - return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - if (u > endRadian) { - return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - - y: function (u, v) { - if (u < startRadian) { - return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - if (u > endRadian) { - return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate; - } - return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; - }, - - z: function (u, v) { - if (u < -Math.PI * 0.5) { - return Math.sin(u); - } - if (u > Math.PI * 2.5) { - return Math.sin(u); - } - return Math.sin(v) > 0 ? heightProportion * height : -1; - } - }; -}; - -// 生成模拟 3D 饼图的配置项 -function getPie3D(pieData, internalDiameterRatio) { - - let series = []; - let sumValue = 0; - let startValue = 0; - let endValue = 0; - let legendData = []; - let linesSeries = []; // line3D模拟label指示线 - let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3; - - // 为每一个饼图数据，生成一个 series-surface 配置 - for (let i = 0; i < pieData.length; i++) { - - sumValue += pieData[i].value; - - let seriesItem = { - name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name, - type: 'surface', - parametric: true, - wireframe: { - show: false - }, - pieData: pieData[i], - pieStatus: { - selected: false, - hovered: false, - k: k - } - }; - - if (typeof pieData[i].itemStyle != 'undefined') { - - let itemStyle = {}; - - typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null; - typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null; - - seriesItem.itemStyle = itemStyle; - } - series.push(seriesItem); - } - - // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， - // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 - for (let i = 0; i < series.length; i++) { - endValue = startValue + series[i].pieData.value; - // console.log(series[i]); - series[i].pieData.startRatio = startValue / sumValue; - series[i].pieData.endRatio = endValue / sumValue; - series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, - series[i].pieData.endRatio, - false, - false, - k, - series[i].pieData.value - ); - - startValue = endValue; - - // 计算label指示线的起始和终点位置 - let midRadian = (series[i].pieData.endRatio + series[i].pieData.startRatio) * Math.PI; - let posX = Math.cos(midRadian) * (1 + Math.cos(Math.PI / 2)); - let posY = Math.sin(midRadian) * (1 + Math.cos(Math.PI / 2)); - let posZ = Math.log(Math.abs(series[i].pieData.value + 1)) * 0.1; - let flag = ((midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= 3 * Math.PI / 2 && midRadian <= Math.PI * 2)) ? 1 : -1; - let color = pieData[i].itemStyle.color; - let turningPosArr = [posX * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.8) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (2)] - let endPosArr = [posX * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posY * (1.9) + (i * 0.1 * flag) + (flag < 0 ? -0.5 : 0), posZ * (6)] - - linesSeries.push({ - type: 'line3D', - lineStyle: { - color: color, - }, - data: [[posX, posY, posZ], turningPosArr, endPosArr] - }, - { - type: 'scatter3D', - label: { - show: true, - distance: 0, - position: 'center', - textStyle: { - color: '#ffffff', - backgroundColor: color, - borderWidth: 2, - fontSize: 14, - padding: 10, - borderRadius: 4, - }, - formatter: '{b}' - }, - symbolSize: 0, - data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }] - }); - - legendData.push(series[i].name); - } - series = series.concat(linesSeries) - - // 最底下圆盘 - series.push({ - name: 'mouseoutSeries', - type: 'surface', - parametric: true, - wireframe: { - show: false, - }, - itemStyle: { - opacity: 1, - color: 'rgba(25, 93, 176, 1)', - }, - parametricEquation: { - u: { - min: 0, - max: Math.PI * 2, - step: Math.PI / 20, - }, - v: { - min: 0, - max: Math.PI, - step: Math.PI / 20, - }, - x: function (u, v) { - return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2; - }, - y: function (u, v) { - return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2; - }, - z: function (u, v) { - return Math.cos(v) > 0 ? -0 : -1.5; - }, - }, - }); - return series; -} - -let total = 0 -dataList.forEach(item => { - total += item.val -}) -const series = getPie3D(dataList.map(item => { - item.value = Number((item.val / total * 100).toFixed(2)) - return item -}), 0.8, 240, 28, 26, 1); - -// 准备待返回的配置项，把准备好的 legendData、series 传入。 -option = { - legend: { - tooltip: { - show: true, - }, - data: dataList.map(item => item.name), - top: '5%', - left: '5%', - icon: 'circle', - textStyle: { - color: '#fff', - fontSize: 14, - }, - }, - animation: true, - title: [ - { - x: 'center', - top: '40%', - text: total, - textStyle: { - color: '#fff', - fontSize: 42, - fontWeight: 'bold' - }, - }, - { - x: 'center', - top: '48%', - text: '还款总额', - textStyle: { - color: '#fff', - fontSize: 22, - fontWeight: 400 - }, - }, - ], - backgroundColor: '#333', - labelLine: { - show: true, - lineStyle: { - color: '#7BC0CB', - }, - }, - label: { - show: false, - }, - xAxis3D: { - min: -1.5, - max: 1.5, - }, - yAxis3D: { - min: -1.5, - max: 1.5, - }, - zAxis3D: { - min: -1, - max: 1, - }, - grid3D: { - show: false, - boxHeight: 4, - bottom: '50%', - viewControl: { - distance: 180, - alpha: 25, - beta: 60, - autoRotate: true, // 自动旋转 - }, - }, - - series: series, -}; \ No newline at end of file diff --git a/src/packages/components/Charts/IntegratedEnergy/index.ts b/src/packages/components/Charts/IntegratedEnergy/index.ts index 3487cae..14d753f 100644 --- a/src/packages/components/Charts/IntegratedEnergy/index.ts +++ b/src/packages/components/Charts/IntegratedEnergy/index.ts @@ -7,10 +7,11 @@ import { AirSupplySystemConfig } from './AirSupplySystem' import { PowerSupplySystemConfig } from './PowerSupplySystem' import { GasSystemConfig } from './GasSystem' import { LineGradientsConfig } from './LineGradients' +import { ConstructionIndexConfig } from './ConstructionIndex' export default [ - EnergyOverviewConfig, EnergyConsumptionTrendConfig, - ConsumptionProportionConfig, - FeeOverviewConfig, - WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig, - GasSystemConfig,LineGradientsConfig + EnergyOverviewConfig, EnergyConsumptionTrendConfig, + ConsumptionProportionConfig, + FeeOverviewConfig, + WaterSupplySystemConfig, AirSupplySystemConfig, PowerSupplySystemConfig, + GasSystemConfig, LineGradientsConfig, ConstructionIndexConfig ]