liulonglong
/
shuinichang_
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

zyh

This commit is contained in:
unknown 2023-11-27 17:33:17 +08:00
parent 782f06f0cc 017d3313c7
commit c2b654afab
6 changed files with 1748 additions and 226 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1161
.history/src/views/Zhou/FHGL_20231127173250.vue Normal file
View File

File diff suppressed because it is too large Load Diff

23
src/router/index.js
View File

@ -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",

161
src/views/Index.vue
View File

@ -4,82 +4,97 @@
<RouterView />
</div>
<div class="footer">
<div class="box1" v-if="isShow">
<img src="../assets/img/生产工艺按钮.png" alt="" class="tabbars1" />
<p>生产工艺</p>
</div>
<div class="box1" v-else>
<div class="box1" @click="go1">
<img
src="../assets/img/生产工艺按钮.png"
v-show="flag1"
alt=""
class="tabbars1"
/>
<img
src="../assets/img/生产工艺按钮选中_hover.png"
alt=""
v-show="!flag1"
class="tabbars1"
/>
<p>生产工艺</p>
</div>
<div class="box2" v-if="isShow">
<div class="box2" @click="go2">
<img
src="../assets/img/能源监测按钮 拷贝.png"
alt=""
v-show="flag2"
class="tabbars2"
/>
<p>能源监测</p>
</div>
<div class="box2" v-else>
<img
src="../assets/img/能源监测按钮 _hover.png"
alt=""
v-show="!flag2"
class="tabbars2"
/>
<p>能源监测</p>
</div>
<div class="box3" v-if="isShow">
<img src="../assets/img/负荷管理按钮 .png" alt="" class="tabbars3" />
<p>负荷管理</p>
</div>
<div class="box3" v-else>
<div class="box3" @click="go3">
<img
src="../assets/img/负荷管理按钮 .png"
v-show="flag3"
alt=""
class="tabbars3"
/>
<img
src="../assets/img/负荷管理按钮 拷贝_hover.png"
alt=""
v-show="!flag3"
class="tabbars3"
/>
<p>负荷管理</p>
</div>
<div class="box4" v-if="isShow">
<div class="box4" @click="go4">
<img
src="../assets/img/能效管理按钮 拷贝.png"
alt=""
v-show="flag4"
class="tabbars4"
/>
<p>能效管理</p>
</div>
<div class="box4" v-else>
<img
src="../assets/img/能效管理按钮_hover.png"
alt=""
v-show="!flag4"
class="tabbars4"
/>
<p>能效管理</p>
</div>
<div class="box5" v-if="isShow">
<div class="box5" @click="go5">
<img
src="../assets/img/智能运维按钮 拷贝.png"
alt=""
v-show="flag5"
class="tabbars5"
/>
<img
src="../assets/img/智能运维按_hover.png"
v-show="!flag5"
alt=""
class="tabbars5"
/>
<p>智能运维</p>
</div>
<div class="box5" v-else>
<img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
<p>智能运维</p>
</div>
<div class="box6" v-if="isShow" @click="sendMessageToCSharp">
<img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
<p>碳资产管理</p>
</div>
<div class="box6" v-else>
<div class="box6" @click="go6">
<img
src="../assets/img/碳资产管理.png"
v-show="flag6"
alt=""
class="tabbars6"
/>
<img
src="../assets/img/碳资产管理 拷贝_hover.png"
alt=""
v-show="!flag6"
class="tabbars6"
/>
<p>碳资产管理</p>
@ -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",
() => {},
() => {}
);
},
},
};
</script>
@ -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;
}
}
}

37
src/views/Zhou/FHGL.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="box">
<div class="a">
<img src="../../assets/img/可调图标--未选中.png" alt="" @click="
$router.push(
'/kdfh',
)
" />
<img
src="../../assets/img/可调图标--未选中.png"
alt=""
@click="$router.push('/kdfh')"
/>
</div>
<div class="left">
<img src="../../assets/img/标题/负荷管理.png" class="title" />
@ -107,7 +107,10 @@
<div class="chartbox" v-for="item in list">
<span class="chartname">{{ item.name }}</span>
<div class="bigBox">
<div class="smallBox" :style="{ width: `${54 * item.value}px` }"></div>
<div
class="smallBox"
:style="{ width: `${54 * item.value}px` }"
></div>
</div>
<span>{{ item.value * 100 }}kW</span>
</div>
@ -178,7 +181,8 @@ export default {
{
icon: "rect",
name: "实时负荷",
}],
},
],
x: "center",
y: "top",
itemGap: 200,
@ -232,7 +236,7 @@ export default {
{
name: "2号生产线",
value: 88,
}
},
],
statusChart: null,
option1: {},
@ -357,7 +361,7 @@ export default {
showAbove: true,
length: 40,
length2: 20,
lineStyle: { cap: 'round' }
lineStyle: { cap: "round" },
},
itemStyle: {
normal: {
@ -937,7 +941,6 @@ export default {
}
}
.byqfzl {
position: relative;
margin-top: 56px;
@ -1103,10 +1106,12 @@ export default {
.smallBox {
width: 100px;
height: 65px;
background: linear-gradient(to right,
rgba(1, 191, 249, 1) 20%,
rgba(68, 161, 201, 1) 100%,
rgba(42, 196, 243, 1) 20%);
background: linear-gradient(
to right,
rgba(1, 191, 249, 1) 20%,
rgba(68, 161, 201, 1) 100%,
rgba(42, 196, 243, 1) 20%
);
}
}
@ -1116,7 +1121,7 @@ export default {
span:nth-of-type(2) {
font-size: 32px;
color: #43FFF1;
color: #43fff1;
margin-left: 20px;
}
}
@ -1152,7 +1157,5 @@ export default {
background-size: 100% 100%;
transform: translateX(-50%);
}
}
</style>

556
src/views/lll/NYJCD/SCX1.vue
View File

@ -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();
},

36
src/views/lll/ZNYW.vue
View File

@ -1,5 +1,6 @@
<template>
<div class="box">
<img src="../../assets/nyjc/电1.png" alt="" id="img" />
<div class="left">
<img src="../../assets/img/标题/智能运维.png" class="title" />
<div class="hbsj">
@ -382,7 +383,7 @@ export default {
data: ["正常", "预警", "故障"],
x: "center",
y: "top",
itemGap: 200,
itemGap: 100,
textStyle: {
color: "#fff",
fontSize: "16px",
@ -409,7 +410,7 @@ export default {
yAxis: {
type: "value",
min: 0,
max: 0.15,
max: 0.3,
interval: 0.05, // 指定刻度间隔
axisLabel: {
show: true,
@ -430,40 +431,19 @@ export default {
{
name: "故障",
type: "bar",
stack: "total",
data: [0.08, 0.08, 0.06, 0.12, 0.09],
},
// {
// type: "bar",
// data: data.map((item) => {
// // 找到三个值中的最大值
// let max = Math.max(item.value1, item.value2, item.value3);
// return {
// name: item.name,
// value: max,
// };
// }),
// // itemStyle: {
// // colorStops: [
// // {
// // offset: 0,
// // color: "#192060", // 0% 处的颜色
// // },
// // {
// // offset: 0.9,
// // color: "#2D6E38", // 90% 处的颜色
// // },
// // ],
// // },
// },
{
name: "预警",
stack: "total",
type: "bar",
data: [0.06, 0.07, 0.03, 0.06, 0.04],
},
{
name: "正常",
type: "bar",
stack: "total",
data: [0.13, 0.12, 0.08, 0.14, 0.12],
},
],
@ -500,6 +480,10 @@ export default {
justify-content: space-between;
background-color: transparent;
}
#img {
position: absolute;
right: 0px;
}
.left {
width: 1237px;
height: 2500px;