From 16e4262e6a7adbfa42acbcfcef5ace3d5195ecb0 Mon Sep 17 00:00:00 2001 From: lll Date: Mon, 27 Nov 2023 17:22:19 +0800 Subject: [PATCH] 11 --- src/router/index.js | 23 +- src/views/Index.vue | 161 ++++++++-- src/views/Zhou/FHGL.vue | 17 +- src/views/lll/NYJCD/SCX1.vue | 556 ++++++++++++++++++++++++++--------- src/views/lll/ZNYW.vue | 36 +-- 5 files changed, 577 insertions(+), 216 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 425b78f..b90e5b2 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -30,47 +30,38 @@ const routes = [ { path: "/nxglnh", name: "nxglnh", - component: () => import("@/views/Zhou/NXGLNH.vue") + component: () => import("@/views/Zhou/NXGLNH.vue"), }, // 能效管理 { path: "/nxgl", name: "nxgl", - component: () => import("@/views/Zhou/NXGL.vue") + component: () => import("@/views/Zhou/NXGL.vue"), }, // 碳资源管理 { path: "/tzcgl", name: "tzcgl", - component: () => import("@/views/Zhou/TZCGL.vue") + component: () => import("@/views/Zhou/TZCGL.vue"), }, // 碳资源熟料管理 { path: "/tzcglsl", name: "tzcglsl", - component: () => import("@/views/Zhou/TZCGLSL.vue") + component: () => import("@/views/Zhou/TZCGLSL.vue"), }, { path: "/znywjk", name: "znywjk", - component: () => import("@/views/Zhou/ZNYWJK.vue") + component: () => import("@/views/Zhou/ZNYWJK.vue"), }, + //配电室 { path: "pds", name: "pds", component: () => import("../views/lll/PDS.vue"), }, - //测试页面 - { - path: "pds1", - name: "pds1", - component: () => import("../views/lll/NYJCD/PDS.vue"), - }, - { - path: "scx1", - name: "scx1", - component: () => import("../views/lll/NYJCD/SCX1.vue"), - }, + //能源监测 { path: "area", name: "area", diff --git a/src/views/Index.vue b/src/views/Index.vue index d3b067c..a963bd5 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -4,82 +4,97 @@
-
- -

生产工艺

-
-
+
+

生产工艺

-
+ +
-

能源监测

-
-

能源监测

-
- -

负荷管理

-
-
+ +
+

负荷管理

-
+ +
-

能效管理

-
-

能效管理

-
+ +
+

智能运维

-
- -

智能运维

-
-
- -

碳资产管理

-
-
+ +
+

碳资产管理

@@ -96,7 +111,12 @@ export default { components: { RouterView }, data() { return { - isShow: true, + flag1: true, + flag2: true, + flag3: true, + flag4: true, + flag5: true, + flag6: true, }; }, methods: { @@ -106,6 +126,84 @@ export default { message: "碳资产管理_true", }); }, + go1() { + this.flag1 = false; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + // this.$router.push( + // "/znywjk", + // () => {}, + // () => {} + // ); + }, + go2() { + this.flag1 = true; + this.flag2 = false; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/area", + () => {}, + () => {} + ); + }, + go3() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = false; + this.flag4 = true; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/fhgl", + () => {}, + () => {} + ); + }, + go4() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = false; + this.flag5 = true; + this.flag6 = true; + this.$router.push( + "/nxgl", + () => {}, + () => {} + ); + }, + go5() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = false; + this.flag6 = true; + this.$router.push( + "/znyw", + () => {}, + () => {} + ); + }, + go6() { + this.flag1 = true; + this.flag2 = true; + this.flag3 = true; + this.flag4 = true; + this.flag5 = true; + this.flag6 = false; + this.$router.push( + "/tzcgl", + () => {}, + () => {} + ); + }, }, }; @@ -263,7 +361,7 @@ export default { width: 316px; height: 46px; font-size: 50px; - font-family: FZZhengHeiS-B-GB; + font-family: "FZZhengHeiS-B-GB"; font-weight: 400; color: #ffffff; line-height: 20px; @@ -274,6 +372,9 @@ export default { width: 100%; height: 200px; position: relative; + div { + cursor: pointer; + } } } diff --git a/src/views/Zhou/FHGL.vue b/src/views/Zhou/FHGL.vue index 8953bac..0625dcd 100644 --- a/src/views/Zhou/FHGL.vue +++ b/src/views/Zhou/FHGL.vue @@ -93,9 +93,12 @@
{{ item.name }}
-
+
- {{ item.value *100 }}kW + {{ item.value * 100 }}kW
@@ -163,7 +166,8 @@ export default { { icon: "rect", name: "实时负荷", - }], + }, + ], x: "center", y: "top", itemGap: 200, @@ -217,7 +221,7 @@ export default { { name: "2号生产线", value: 88, - } + }, ], statusChart: null, option1: {}, @@ -1032,7 +1036,7 @@ export default { align-items: center; display: flex; margin-top: 100px; - .chartname{ + .chartname { position: absolute; left: 24px; top: 10px; @@ -1057,7 +1061,7 @@ export default { } span:nth-of-type(2) { font-size: 32px; - color: #43FFF1; + color: #43fff1; margin-left: 20px; } } @@ -1094,4 +1098,3 @@ export default { } } - \ No newline at end of file diff --git a/src/views/lll/NYJCD/SCX1.vue b/src/views/lll/NYJCD/SCX1.vue index 83e724c..8c1addb 100644 --- a/src/views/lll/NYJCD/SCX1.vue +++ b/src/views/lll/NYJCD/SCX1.vue @@ -468,7 +468,6 @@ export default { immediate: true, // 第一次初始化渲染就可以监听到 }, }, - methods: { defineEcharts(dom, option) { var chartDom = document.getElementById(dom); @@ -628,25 +627,6 @@ export default { }, }, series: [ - { - type: "bar", - itemStyle: { - color: "transparent", - }, - data: yaxisData2, - label: { - normal: { - show: true, - position: "top", - formatter: (e) => { - return e.value === maxValue2 ? e.value : ""; - }, - fontSize: 20, - color: "#3286FF", - offset: [0, -15], - }, - }, - }, { type: "bar", itemStyle: { @@ -667,87 +647,25 @@ export default { }, }, { - type: "custom", - name: "昨日", - barCategoryGap: "20%", - 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: "#08E83C", - }, - { - offset: 0.35, - color: "#1FE77D", - }, - { - offset: 1, - color: "#38E7C5", - }, - ]), - }, - }, - { - 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: "#00C25D", - }, - { - offset: 0.35, - color: "#05C269", - }, - { - offset: 1, - color: "#0BC27B", - }, - ]), - }, - }, - { - 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: "#05E861", - }, - }, - ], - }; + type: "bar", + itemStyle: { + color: "transparent", + }, + data: yaxisData2, + label: { + normal: { + show: true, + position: "top", + formatter: (e) => { + return e.value === maxValue2 ? e.value : ""; + }, + fontSize: 20, + color: "#3286FF", + offset: [0, -15], + }, }, - data: yaxisData, }, + { type: "custom", name: "今日", @@ -831,6 +749,88 @@ export default { }, data: yaxisData2, }, + { + type: "custom", + name: "昨日", + barCategoryGap: "20%", + 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: "#08E83C", + }, + { + offset: 0.35, + color: "#1FE77D", + }, + { + offset: 1, + color: "#38E7C5", + }, + ]), + }, + }, + { + 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: "#00C25D", + }, + { + offset: 0.35, + color: "#05C269", + }, + { + offset: 1, + color: "#0BC27B", + }, + ]), + }, + }, + { + 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: "#05E861", + }, + }, + ], + }; + }, + data: yaxisData, + }, ], }; @@ -840,6 +840,7 @@ export default { init() { //构建3d饼状图 let myChart = this.$echarts.init(document.getElementById("fhzb")); + // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）) this.option = this.getPie3D(this.optionData, 0.5); //将配置项设置进去 @@ -917,32 +918,7 @@ export default { k, series[i].pieData.value ); - // series[i].itemStyle.normal.label = { - // show: true, - // position: "outside", - // color: "#ddd", - // formatter: function (params) { - // var percent = 0; - // var total = 0; - // for (var i = 0; i < trafficWay.length; i++) { - // total += trafficWay[i].value; - // } - // percent = ((params.value / total) * 100).toFixed(0); - // if (params.name !== "") { - // return ( - // "设备状态：" + - // params.name + - // "\n" + - // "\n" + - // "占百分比：" + - // percent + - // "%" - // ); - // } else { - // return ""; - // } - // }, - // }; + startValue = endValue; let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4); legendData.push({ @@ -979,23 +955,67 @@ export default { } }, }, - labelLine: { - normal: { - show: true, - lineStyle: { - color: "#7BC0CB", - }, - length: 0, - length2: 10, - }, - }, label: { + // normal: { + // show: true, + // position: "right", + // formatter: "{b} \n{c} {d}%", + // }, + normal: { show: true, - position: "outside", - formatter: "{b} \n{c} {d}%", + color: "#fff", + position: "right", + // distance:-10, + offset: [0, 3], + formatter: [ + "{d|{d}%}", + "————", + // '{c|{c}}{b|台}', + "{b|{b}}", + ].join("\n"), // 用\n来换行 + rich: { + b: { + lineHeight: 25, + align: "left", + color: "#fff", + }, + c: { + fontSize: 22, + // color: '#fff', + textShadowColor: "#1c90a6", + textShadowOffsetX: 0, + textShadowOffsetY: 2, + textShadowBlur: 5, + color: "#fff", + }, + d: { + color: "#fff", + align: "left", + }, + }, }, }, + labelLine: { + // normal: { + // show: true, + // lineStyle: { + // color: "#7BC0CB", + // }, + // length: 0, + // length2: 100000, + // }, + + normal: { + show: true, + length2: 30, + lineStyle: { + width: 1, + color: "#fff", + }, + }, + }, + //这个可以变形 xAxis3D: { min: -1, @@ -1270,11 +1290,273 @@ export default { } return s; }, + + getEchart() { + var chartDom = document.getElementById("pdsydl"); + var myChart = echarts.init(chartDom); + var option; + const sideData = [220, 182, 191, 234, 290]; + const sideData1 = [100, 110, 120, 134, 190]; + + option = { + tooltip: { + trigger: "axis", + }, + legend: { + data: [ + { + name: "今日", + textStyle: { + color: "white", + }, + }, + { + name: "昨日", + textStyle: { + color: "white", + }, + }, + ], + }, + grid: { + top: "10%", + bottom: "62%", + right: "15%", + containLabel: true, + }, + toolbox: { + show: true, + }, + calculable: true, + xAxis: [ + { + type: "category", + splitLine: { + show: false, + }, + data: ["1月", "2月", "3月", "4月", "5月"], + axisLabel: { + show: true, + textStyle: { + color: "#fff", //X轴文字颜色 + }, + }, + }, + ], + yAxis: [ + { + type: "value", + splitLine: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: "#fff", //X轴文字颜色 + }, + }, + }, + ], + series: [ + { + name: "昨日", + tooltip: { + show: false, + }, + type: "bar", + barWidth: 10, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#2d8cf0", // 0% 处的颜色 + }, + { + offset: 0.6, + color: "#2d8cf0", // 60% 处的颜色 + }, + { + offset: 1, + color: "#2d8cf0", // 100% 处的颜色 + }, + ], + false + ), + }, + }, + data: sideData, + barGap: 10, + }, + { + name: "昨日", + type: "bar", + barWidth: 10, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#09337C", // 0% 处的颜色 + }, + { + offset: 0.6, + color: "#0761C0", // 60% 处的颜色 + }, + { + offset: 1, + color: "#0575DE", // 100% 处的颜色 + }, + ], + false + ), + }, + }, + barGap: 0, + data: sideData, + label: { + show: true, + position: "top", + textStyle: { + color: "white", + fontSize: 10, + }, + }, + }, + { + name: "昨日", + tooltip: { + show: false, + }, + type: "pictorialBar", + itemStyle: { + borderWidth: 1, + borderColor: "#0571D5", + color: "#288ef3", // 控制顶部方形的颜色 + }, + symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z", + symbolSize: ["20", "7"], // 第一个值控制顶部方形大小 + symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下 + symbolRotate: -16, + symbolPosition: "end", + data: sideData, + z: 3, + }, + { + name: "今日", + tooltip: { + show: false, + }, + type: "bar", + barWidth: 10, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#15a00f", // 0% 处的颜色 + }, + { + offset: 0.6, + color: "#11ad0a", // 60% 处的颜色 + }, + { + offset: 1, + color: "#19c213", // 100% 处的颜色 + }, + ], + false + ), + }, + }, + data: sideData1, + barGap: 0, + }, + { + name: "今日", + type: "bar", + barWidth: 10, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 1, + 0, + 0, + [ + { + offset: 0, + color: "#26ec10", // 0% 处的颜色 + }, + { + offset: 0.6, + color: "#26ec10", // 60% 处的颜色 + }, + { + offset: 1, + color: "#26ec10", // 100% 处的颜色 + }, + ], + false + ), + }, + }, + barGap: 0, + data: sideData1, + label: { + show: true, + position: "top", + textStyle: { + color: "white", + fontSize: 10, + }, + }, + }, + { + name: "今日", + tooltip: { + show: false, + }, + type: "pictorialBar", + itemStyle: { + borderWidth: 1, + borderColor: "#fff", + color: "#26ec10", // 顶部方块的颜色 + }, + symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z", + symbolSize: ["20", "7"], // 第一个值控制顶部方形大小 + symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下 + symbolRotate: -16, + symbolPosition: "end", + data: sideData1, + z: 3, + }, + ], + }; + + myChart.setOption(option, true); + }, }, mounted() { this.defineEcharts("pdsssdh", this.option1); // this.defineEcharts("pdsydl", this.option2); this.pdsydl(); + // this.getEchart(); this.defineEcharts("pdstpt", this.option3); this.init(); }, diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue index 6065fcf..e906e02 100644 --- a/src/views/lll/ZNYW.vue +++ b/src/views/lll/ZNYW.vue @@ -1,5 +1,6 @@