diff --git a/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf b/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf new file mode 100644 index 0000000..cd65b62 Binary files /dev/null and b/src/assets/font/PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf differ diff --git a/src/assets/font/font.css b/src/assets/font/font.css new file mode 100644 index 0000000..5ce0ae8 --- /dev/null +++ b/src/assets/font/font.css @@ -0,0 +1,7 @@ +/*庞门正道标题体免费版-Regular*/ +@font-face { + font-family: "title"; + src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan-2.ttf'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/src/assets/images/air-tab-select.png b/src/assets/images/air-tab-select.png new file mode 100644 index 0000000..9c29e52 Binary files /dev/null and b/src/assets/images/air-tab-select.png differ diff --git a/src/assets/images/air-tab.png b/src/assets/images/air-tab.png new file mode 100644 index 0000000..e74a63d Binary files /dev/null and b/src/assets/images/air-tab.png differ diff --git a/src/assets/images/rank-bg.png b/src/assets/images/rank-bg.png new file mode 100644 index 0000000..56a69a9 Binary files /dev/null and b/src/assets/images/rank-bg.png differ diff --git a/src/assets/images/split.png b/src/assets/images/split.png new file mode 100644 index 0000000..1b74dc9 Binary files /dev/null and b/src/assets/images/split.png differ diff --git a/src/assets/images/system-box.png b/src/assets/images/system-box.png new file mode 100644 index 0000000..62bd87a Binary files /dev/null and b/src/assets/images/system-box.png differ diff --git a/src/assets/images/system-value-bg.png b/src/assets/images/system-value-bg.png new file mode 100644 index 0000000..f5f0d04 Binary files /dev/null and b/src/assets/images/system-value-bg.png differ diff --git a/src/main.js b/src/main.js index 0790394..8f70b9a 100644 --- a/src/main.js +++ b/src/main.js @@ -8,7 +8,8 @@ moment.locale('zh-cn', { weekdays: '周日_周一_周二_周三_周四_周五_周六'.split('_'), }) - +// 引入字体 +import "@/assets/font/font.css" // 引入 echarts import * as echarts from "echarts"; // element-plus中文 diff --git a/src/style.scss b/src/style.scss index c52fb70..ffe42be 100644 --- a/src/style.scss +++ b/src/style.scss @@ -5,6 +5,7 @@ margin: 0; padding: 0; overflow: hidden; + color: rgba(221, 255, 253, 1); } p,ul,li{ margin: 0; @@ -22,6 +23,32 @@ p,ul,li{ z-index:99; } +.unit{ + font-size:.8rem; + color:rgba(221, 255, 253, 1); + font-weight: normal; +} +.page { + width: 100%; + height: 100%; + box-sizing: border-box; + display: flex; + justify-content: space-between; + + &-right-box, &-left-box { + height: 100%; + width: vw(450); + box-sizing: border-box; + } + + &-right-box { + padding-right: 2.375rem; + } + + &-left-box { + padding-left: 2.375rem; + } +} .m100{ position: relative; top:2rem; @@ -36,8 +63,9 @@ p,ul,li{ background-size: 100% 100%; } .title{ - font-size: 22px; - font-weight: bold; + font-family: "title"; + font-size: 20px; + font-weight: 400; color: #fff; padding-left: 2.75rem; padding-right:1rem; @@ -49,6 +77,7 @@ p,ul,li{ align-items: center; justify-content: space-between; display: flex; + span{} p{ display: flex; align-items: center; @@ -56,7 +85,7 @@ p,ul,li{ font-size: 14px; font-weight: normal; } - .year,.month{ + .year,.month,.day{ padding: 0 0.8rem; //display: inline-block; //background-color: #092624; @@ -64,8 +93,11 @@ p,ul,li{ background-size: 100% 100%; cursor: pointer; } + .day{ + margin-left: .5rem; + } .year{ margin-right: .5rem; } } -} \ No newline at end of file +} diff --git a/src/utils/getPath.js b/src/untils/getPath.js similarity index 100% rename from src/utils/getPath.js rename to src/untils/getPath.js diff --git a/src/views/energyEfficiency/index.vue b/src/views/energyEfficiency/index.vue index 9ad5f3d..1250668 100644 --- a/src/views/energyEfficiency/index.vue +++ b/src/views/energyEfficiency/index.vue @@ -1,13 +1,646 @@ - \ No newline at end of file diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue index 5fb2a34..93be36a 100644 --- a/src/views/energyMonitoring/index.vue +++ b/src/views/energyMonitoring/index.vue @@ -1,6 +1,6 @@ @@ -40,6 +40,9 @@ diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue index a2cb8b6..1347456 100644 --- a/src/views/overview/index.vue +++ b/src/views/overview/index.vue @@ -25,6 +25,8 @@ onMounted(()=>{ drawPowerEcharts() // 系统用电排名 drawRankEcharts() + //碳排放 + getCarbonEmission() }) const drawPowerEcharts = () =>{ @@ -175,6 +177,7 @@ const drawRankEcharts = () =>{ show: true, textStyle: { color: "#fff", + fontSize:"14" }, }, splitLine: { @@ -186,7 +189,7 @@ const drawRankEcharts = () =>{ axisLine: { show: false, }, - data: ["大米", "玉米", "蔬菜", "鸡蛋", "坚果"], + data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"], }, { type: "category", @@ -199,12 +202,25 @@ const drawRankEcharts = () =>{ verticalAlign: "bottom", inside: true, textStyle: { - color: "#ffffff", - fontSize: "12", + }, formatter: function (value) { - return (value / 10000).toLocaleString() + "kw/h"; + return "{a|" + (value / 10000).toLocaleString() + + "}" + "{b|kWh}"; }, + rich:{ + a:{ + fontSize: "16", + color:"rgba(0, 255, 240, 1)", + padding:[0,6,0,0] + }, + b:{ + color: "#fff", + fontSize: "12", + + } + + } }, data: [50000000, 22000000, 10000000, 5000000, 1], }, @@ -243,13 +259,291 @@ const drawRankEcharts = () =>{ }; myChart.setOption(option) } +//碳排放 +function getCarbonEmission() { + const offsetX = 10; //bar宽 + const offsetY = 5; //倾斜角度 + // 绘制左侧面 + const CubeLeft = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const xAxisPoint = shape.xAxisPoint; + const c0 = [shape.x - 7, shape.y]; + const c1 = [shape.x + 7, shape.y]; + const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; + const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]]; + ctx + .moveTo(c0[0], c0[1]) + .lineTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 绘制右侧面 + const CubeRight = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const xAxisPoint = shape.xAxisPoint; + const c1 = [shape.x + 7, shape.y]; + const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; + const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10]; + const c4 = [shape.x + 7 + 7, shape.y - 5]; + ctx + .moveTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .lineTo(c4[0], c4[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 绘制顶面 + const CubeTop = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const c1 = [shape.x - 7, shape.y]; + const c2 = [shape.x + 8, shape.y]; + const c3 = [shape.x + 15, shape.y - 5]; + const c4 = [shape.x - 2, shape.y - 5]; + ctx + .moveTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .lineTo(c4[0], c4[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 注册三个面图形 + echarts.graphic.registerShape("CubeLeft", CubeLeft); + echarts.graphic.registerShape("CubeRight", CubeRight); + echarts.graphic.registerShape("CubeTop", CubeTop); + let xAxisData = [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + ]; + let seriesData = [100, 200, 300, 400, 200, 250,]; + // 绿色渐变 + // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]] + // 蓝色渐变 + let colorArr = [ + ["rgba(0, 193, 113, 1)"], + ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"], + ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"], + ]; + let myChart = echarts.init( + document.getElementById("carbonEmission") + ); + const option = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + formatter: function (params, ticket, callback) { + const item = params[1]; + return item.name + " : " + item.value; + }, + }, + grid: { + left: "4%", + right: "5%", + top: "18%", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: xAxisData, + axisLine: { + show: true, + lineStyle: { + width: 1, + type: "solid", + color: "rgba(255, 255, 255, 0.20)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "rgba(221, 255, 253, 1)", + fontSize: 14, + interval: 0, + // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 + // formatter: function (value) { + // const length = value.length; + // if (length > 3) { + // const start = Math.floor(length / 2); + // const str = + // value.slice(0, start) + "\n" + value.slice(start, length); + // return str; + // } + // return value; + // }, + }, + }, + yAxis: { + type: "value", + name: "单位:kW/h", + nameTextStyle: { + color: "#DDFFFD", + }, + // minInterval: 1, + // y轴（竖直线） + axisLine: { + show: false, + }, + // y轴横向 标线 + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "rgba(1, 39, 37, 0.30)", + }, + }, + // y轴刻度线 + axisTick: { + show: false, + }, + // y轴文字 + axisLabel: { + fontSize: 14, + color: "#DDFFFD", + }, + }, + series: [ + { + type: "custom", + renderItem: (params, api) => { + const location = api.coord([api.value(0), api.value(1)]); + return { + type: "group", + children: [ + // 左侧面 + { + type: "CubeLeft", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[1][0], + }, + { + offset: 1, + color: colorArr[1][1], + }, + ]), + }, + }, + // 右侧面 + { + type: "CubeRight", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[2][0], + }, + { + offset: 1, + color: colorArr[2][1], + }, + ]), + }, + }, + // 顶部 + { + type: "CubeTop", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[0][0], + }, + { + offset: 1, + color: colorArr[0][0], + }, + ]), + }, + }, + ], + }; + }, + data: seriesData, + }, + { + type: "bar", + label: { + normal: { + show: false, + position: "top", + formatter: (e) => { + return e.value; + }, + fontSize: 16, + color: "#43C4F1", + offset: [0, -5], + }, + }, + itemStyle: { + color: "transparent", + }, + tooltip: {}, + data: seriesData, + }, + ], + }; + myChart.setOption(option); +} \ No newline at end of file