This commit is contained in:
lll
parent
5317c87304
commit
d70d335eed
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -10,34 +10,46 @@ const routes = [
|
||||||
component: () => import("../views/Index.vue"),
|
component: () => import("../views/Index.vue"),
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: "/znyw",
|
path: "znyw",
|
||||||
name: "znyw",
|
name: "znyw",
|
||||||
component: () => import("../views/lll/ZNYW.vue"),
|
component: () => import("../views/lll/ZNYW.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/fhgl",
|
path: "fhgl",
|
||||||
name: "fhgl",
|
name: "fhgl",
|
||||||
component: () => import("@/views/Zhou/FHGL.vue"),
|
component: () => import("@/views/Zhou/FHGL.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/kdfh",
|
path: "kdfh",
|
||||||
name: "kdfh",
|
name: "kdfh",
|
||||||
component: () => import("@/views/Zhou/KDFH.vue"),
|
component: () => import("@/views/Zhou/KDFH.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/pds",
|
path: "pds",
|
||||||
name: "pds",
|
name: "pds",
|
||||||
component: () => import("../views/lll/PDS.vue"),
|
component: () => import("../views/lll/PDS.vue"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/nyjcd",
|
path: "area",
|
||||||
name: "nyjcd",
|
name: "area",
|
||||||
component: () => import("../views/lll/NYJCD.vue"),
|
component: () => import("../views/lll/AREA.vue"),
|
||||||
},
|
children: [
|
||||||
{
|
{
|
||||||
path: "/nyjc",
|
path: "/",
|
||||||
name: "nyjc",
|
name: "nyjc",
|
||||||
component: () => import("../views/lll/NYJC.vue"),
|
component: () => import("../views/lll/NYJC.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "nyjcd",
|
||||||
|
name: "nyjcd",
|
||||||
|
component: () => import("../views/lll/NYJCD.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "nyjcs",
|
||||||
|
name: "nyjcs",
|
||||||
|
component: () => import("../views/lll/NYJCS.vue"),
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,86 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="a">
|
||||||
|
<img
|
||||||
|
src="../../assets/nyjc/电1.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!dian"
|
||||||
|
@click="
|
||||||
|
(dian = true),
|
||||||
|
(shui = false),
|
||||||
|
(mei = false),
|
||||||
|
$router.push(
|
||||||
|
'/area/nyjcd',
|
||||||
|
() => {},
|
||||||
|
() => {}
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/nyjc/电.png" alt="" v-show="dian" />
|
||||||
|
<img
|
||||||
|
src="../../assets/nyjc/水1.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!shui"
|
||||||
|
@click="
|
||||||
|
(dian = false),
|
||||||
|
(shui = true),
|
||||||
|
(mei = false),
|
||||||
|
$router.push(
|
||||||
|
'/area/nyjcs',
|
||||||
|
() => {},
|
||||||
|
() => {}
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/nyjc/水.png" alt="" v-show="shui" />
|
||||||
|
<img
|
||||||
|
src="../../assets/nyjc/煤1.png"
|
||||||
|
alt=""
|
||||||
|
v-show="!mei"
|
||||||
|
@click="(dian = false), (shui = false), (mei = true)"
|
||||||
|
/>
|
||||||
|
<img src="../../assets/nyjc/煤.png" alt="" v-show="mei" />
|
||||||
|
</div>
|
||||||
|
<div class="area">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
dian: false,
|
||||||
|
shui: false,
|
||||||
|
mei: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
.a {
|
||||||
|
position: absolute;
|
||||||
|
width: 1300px;
|
||||||
|
z-index: 2;
|
||||||
|
top: 420px;
|
||||||
|
right: 1351px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 102px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.area {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -501,6 +501,18 @@ export default {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
.routerLink {
|
||||||
|
position: absolute;
|
||||||
|
width: 1300px;
|
||||||
|
z-index: 2;
|
||||||
|
top: 420px;
|
||||||
|
right: 1351px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-right: 102px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
width: 1237px;
|
width: 1237px;
|
||||||
|
|
|
||||||
|
|
@ -358,6 +358,7 @@ export default {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.left {
|
.left {
|
||||||
width: 1237px;
|
width: 1237px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,937 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left">
|
||||||
|
<img src="../../assets/img/标题/能源监测-水.png" class="title" />
|
||||||
|
<div class="top">
|
||||||
|
<div>
|
||||||
|
<img src="../../assets/nyjc/组 963.png" alt="" />
|
||||||
|
<p>平阴水泥厂</p>
|
||||||
|
</div>
|
||||||
|
<div class="two">
|
||||||
|
<div class="txt">
|
||||||
|
<span style="color: #95fffe">1218</span><span>t</span>
|
||||||
|
</div>
|
||||||
|
<img src="../../assets/nyjc/煤 拷贝.png" alt="" />
|
||||||
|
<p>今日用水量</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rysl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>日用水量</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>今日用水量</span><span>870</span><span>t</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="rysl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="yysl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>月用水量</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>本月用水量</span><span>870</span><span>t</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="yysl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="nysl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>年用水量</p>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>本年用水量</span><span>870</span><span>t</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="nysl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="ystj">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>用水统计</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="ystj">
|
||||||
|
<img src="../../assets/nyjc/组 964.png" alt="" />
|
||||||
|
<div class="zs">
|
||||||
|
<span>总数：</span
|
||||||
|
><span style="color: #58caff; font-size: 30px">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="zx">
|
||||||
|
<span>在线：</span
|
||||||
|
><span style="color: #56f671; font-size: 30px">118</span>
|
||||||
|
</div>
|
||||||
|
<div class="zxl">
|
||||||
|
<span>在线率：</span
|
||||||
|
><span style="color: #56f671; font-size: 30px">72%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="sbjc">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>水表监测</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="sbjc">
|
||||||
|
<div class="title">
|
||||||
|
<p>水表监测：</p>
|
||||||
|
<span>5</span>
|
||||||
|
<p>个</p>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
:data="tableData"
|
||||||
|
:row-class-name="tableRowClassName"
|
||||||
|
style="width: 100%"
|
||||||
|
header-cell-style="background-color: #1969A8; color: white"
|
||||||
|
>
|
||||||
|
<el-table-column label="序号" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.$index + 1 }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date1" label="名称" align="center">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date2" label="出水压力" align="center"
|
||||||
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span
|
||||||
|
><span>MP</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date3" label="瞬间流量" align="center"
|
||||||
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff">{{ scope.row.date3 }}</span>
|
||||||
|
<span>m3/h</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date4" label="喷水电耗" align="center"
|
||||||
|
><template slot-scope="scope">
|
||||||
|
<span style="color: #abb9fe"> {{ scope.row.date4 }}</span>
|
||||||
|
<span>kWh</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tpt">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>拓扑图</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="tpt">
|
||||||
|
<img src="" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="nhfx">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>能耗分析</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="nhfx"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
option1: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "日用水量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "日用水量",
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
smooth: true,
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#21EF06",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#21EF06", //折线颜色
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 1, color: "#0C3431" },
|
||||||
|
{ offset: 0.5, color: "#198522" },
|
||||||
|
{ offset: 0, color: "#18881C" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
markPoint: {
|
||||||
|
data: [{ type: "max", name: "Max" }],
|
||||||
|
label: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option2: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "月用水量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
markPoint: {
|
||||||
|
data: [{ type: "max", name: "Max" }],
|
||||||
|
label: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
name: "月用水量",
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
smooth: true,
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43FFF4",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#11C3FF", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option3: {
|
||||||
|
legend: {
|
||||||
|
data: [
|
||||||
|
{ icon: "rect", name: "去年用水量" },
|
||||||
|
{ icon: "rect", name: "今年用水量" },
|
||||||
|
],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["2019", "2020", "2021", "2022", "2023"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "去年用水量",
|
||||||
|
data: [240, 334, 123, 270, 296],
|
||||||
|
symbolSize: 15,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#56F671",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#56F671", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "今年用水量",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [223, 434, 423, 254, 216],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43FFF4",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#43FFF4", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option4: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "吨水电耗" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ["01-25", "01-26", "01-27", "01-28", "01-29", "01-30"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:kWh/t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 1,
|
||||||
|
interval: 1, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "吨水电耗",
|
||||||
|
data: [0.8, 0.6, 0.7, 0.5, 0.6, 0.3],
|
||||||
|
smooth: true,
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43FFF4",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#43FFF4", //折线颜色
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: "#2A9095" },
|
||||||
|
{ offset: 0.5, color: "#27888F" },
|
||||||
|
{ offset: 1, color: "#1A3F51" },
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date1: "回转窑",
|
||||||
|
date2: "20.34",
|
||||||
|
date3: "20.34",
|
||||||
|
date4: "20.34",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "熟料收尘",
|
||||||
|
date2: "17.42",
|
||||||
|
date3: "17.42",
|
||||||
|
date4: "17.42",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "篦冷机",
|
||||||
|
date2: "12.22",
|
||||||
|
date3: "12.22",
|
||||||
|
date4: "12.22",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "生料收尘",
|
||||||
|
date2: "19.19",
|
||||||
|
date3: "19.19",
|
||||||
|
date4: "19.19",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
defineEcharts(dom, option) {
|
||||||
|
var chartDom = document.getElementById(dom);
|
||||||
|
var myChart = this.$echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
},
|
||||||
|
tableRowClassName({ row, rowIndex }) {
|
||||||
|
if ((rowIndex + 1) % 2 === 0) {
|
||||||
|
return "success-row";
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.defineEcharts("rysl", this.option1);
|
||||||
|
this.defineEcharts("yysl", this.option2);
|
||||||
|
this.defineEcharts("nysl", this.option3);
|
||||||
|
this.defineEcharts("nhfx", this.option4);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
padding-top: 400px;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
.left {
|
||||||
|
width: 1237px;
|
||||||
|
height: 2500px;
|
||||||
|
margin-left: 61px;
|
||||||
|
background-image: url("../../assets/img/侧边.png");
|
||||||
|
padding-left: 59px;
|
||||||
|
padding-right: 45px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 100px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22px;
|
||||||
|
display: flex;
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 1155px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
img {
|
||||||
|
height: 130px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
.txt {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 530px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rysl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #09e83e;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #09e83e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#rysl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yysl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #11c3ff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #11c3ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#yysl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nysl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #43fff4;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #43fff4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nysl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 1237px;
|
||||||
|
height: 2500px;
|
||||||
|
margin-right: 61px;
|
||||||
|
background-image: url("../../assets/img/侧边.png");
|
||||||
|
padding-left: 59px;
|
||||||
|
padding-right: 45px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.ystj {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 130px;
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chartBox {
|
||||||
|
margin-top: 50px;
|
||||||
|
#ystj {
|
||||||
|
width: 1156px;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
img {
|
||||||
|
height: 180px;
|
||||||
|
width: 200px;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zs {
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 400px;
|
||||||
|
}
|
||||||
|
.zx {
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
left: 700px;
|
||||||
|
}
|
||||||
|
.zxl {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 700px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.sbjc {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#sbjc {
|
||||||
|
width: 1155px;
|
||||||
|
height: 430px;
|
||||||
|
margin-top: 50px;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
span {
|
||||||
|
margin: 0 20px;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #56f671;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/.el-table tr {
|
||||||
|
background: #16253b;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
height: 50px;
|
||||||
|
.cell {
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 去掉eltable的hover效果
|
||||||
|
::v-deep .el-table tbody tr:hover > td {
|
||||||
|
background-color: #0b679e !important;
|
||||||
|
}
|
||||||
|
//修改表头颜色
|
||||||
|
::v-deep .has-gutter {
|
||||||
|
background-color: #1969a8;
|
||||||
|
th {
|
||||||
|
background-color: #1969a8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//奇偶行颜色
|
||||||
|
::v-deep .el-table .success-row {
|
||||||
|
background: #184167;
|
||||||
|
}
|
||||||
|
//去掉边框白线
|
||||||
|
::v-deep .el-table__row > td {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-table::before {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
/* 移除表头的下边框 */
|
||||||
|
::v-deep .el-table__header th {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tpt {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#tpt {
|
||||||
|
width: 1155px;
|
||||||
|
height: 400px;
|
||||||
|
margin-top: 50px;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
span {
|
||||||
|
margin: 0 20px;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #56f671;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nhfx {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nhfx {
|
||||||
|
width: 1155px;
|
||||||
|
height: 500px;
|
||||||
|
margin-top: 50px;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 50px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
span {
|
||||||
|
margin: 0 20px;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #56f671;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue