zyh
This commit is contained in:
unknown
parent
4d81ce92cd
commit
d182ce859c
|
|
@ -0,0 +1,999 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left">
|
||||||
|
<img src="../../../assets/img/标题/能源监测-电-配电室.png" class="title" />
|
||||||
|
<div class="pdsssdh">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>配电室实时负荷</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'">年</span>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'">月</span>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'">日</span>
|
||||||
|
</div>
|
||||||
|
<div id="pdsssdh"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pdsydl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>配电室用电量</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="type == '总用电' ? 'active' : ''" @click="type = '总用电'">总用电</span>
|
||||||
|
<span :class="type == '分时段' ? 'active' : ''" @click="type = '分时段'">分时段</span>
|
||||||
|
</div>
|
||||||
|
<div id="pdsydl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="pdstpt">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>配电室拓扑图</p>
|
||||||
|
</div>
|
||||||
|
<div id="pdstpt">
|
||||||
|
<img src="../../../assets/znyw/tpt.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="pdsjk">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>配电室监控</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="pdsjk">
|
||||||
|
<div class="title">
|
||||||
|
<p>配电室数量：</p>
|
||||||
|
<span>6</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" width="300px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date2" label="实时电荷" align="center"><template slot-scope="scope">
|
||||||
|
<span style="color: #58ff70"> {{ scope.row.date2 }}</span><span>kW</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>kWh</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date2" label="设备状态" align="center"><template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.date4"><img src="../../../assets/KDFH/tongguo.png" /></span>
|
||||||
|
<span v-else><img src="../../../assets/KDFH/jinggao.png" /></span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="pdsjk">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>配电室用电排名</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="pdsjk">
|
||||||
|
<el-table :data="tableData1" :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" width="300px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="date2" label="用电量" align="center"><template slot-scope="scope">
|
||||||
|
<span style="color: #58caff"> {{ scope.row.date2 }}</span><span>kWh</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
res: "月",
|
||||||
|
type: "总用电",
|
||||||
|
option1: {
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:KW",
|
||||||
|
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",
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 20,
|
||||||
|
data: [200, 300, 500, 400, 334],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#00FF00",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#21FF55", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option2: {
|
||||||
|
legend: {
|
||||||
|
data: [
|
||||||
|
{ icon: "rect", name: "昨日" },
|
||||||
|
{ 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: "单位:kWh",
|
||||||
|
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",
|
||||||
|
name: "昨日",
|
||||||
|
data: [200, 300, 500, 400, 334],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#11C3FF",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#11C3FF", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
name: "今日",
|
||||||
|
data: [200, 300, 500, 400, 334],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#09E83E",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#09E83E", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tableData: [
|
||||||
|
{
|
||||||
|
date1: "总降电力室",
|
||||||
|
date2: "20.34",
|
||||||
|
date3: "20.34",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "矿山电力室",
|
||||||
|
date2: "17.42",
|
||||||
|
date3: "17.42",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "原材料电力室",
|
||||||
|
date2: "12.22",
|
||||||
|
date3: "12.22",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线生料磨电力室",
|
||||||
|
date2: "19.19",
|
||||||
|
date3: "19.19",
|
||||||
|
date4: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "二线生料磨电力室",
|
||||||
|
date2: "17.42",
|
||||||
|
date3: "17.42",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "窑尾电力室",
|
||||||
|
date2: "12.22",
|
||||||
|
date3: "12.22",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线窑头电力室1",
|
||||||
|
date2: "19.19",
|
||||||
|
date3: "19.19",
|
||||||
|
date4: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线窑头电力室2",
|
||||||
|
date2: "19.19",
|
||||||
|
date3: "19.19",
|
||||||
|
date4: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "二线窑头电力室1",
|
||||||
|
date2: "19.19",
|
||||||
|
date3: "19.19",
|
||||||
|
date4: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData1: [
|
||||||
|
{
|
||||||
|
date1: "总降电力室",
|
||||||
|
date2: "20.34",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "矿山电力室",
|
||||||
|
date2: "17.42",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "原材料电力室",
|
||||||
|
date2: "12.22",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线生料磨电力室",
|
||||||
|
date2: "19.19",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "二线生料磨电力室",
|
||||||
|
date2: "17.42",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "窑尾电力室",
|
||||||
|
date2: "12.22",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线窑头电力室1",
|
||||||
|
date2: "19.19",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "一线窑头电力室2",
|
||||||
|
date2: "19.19",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date1: "二线窑头电力室1",
|
||||||
|
date2: "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 "";
|
||||||
|
},
|
||||||
|
//配电室用电量 3d
|
||||||
|
pdsydl() {
|
||||||
|
let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
|
||||||
|
let yaxisData = [90, 80, 100, 70, 65];
|
||||||
|
let yaxisData2 = [60, 56, 34, 69, 79];
|
||||||
|
//拿到最大值
|
||||||
|
const maxValue = Math.max(...yaxisData);
|
||||||
|
const maxValue2 = Math.max(...yaxisData2);
|
||||||
|
const offsetX = 15;
|
||||||
|
const offsetY = 5;
|
||||||
|
// 绘制左侧面
|
||||||
|
const CubeLeft = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c0 = [shape.x, shape.y];
|
||||||
|
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||||||
|
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||||||
|
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||||||
|
ctx
|
||||||
|
.moveTo(c0[0], c0[1])
|
||||||
|
.lineTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绘制右侧面
|
||||||
|
const CubeRight = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const xAxisPoint = shape.xAxisPoint;
|
||||||
|
const c1 = [shape.x, shape.y];
|
||||||
|
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||||||
|
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||||||
|
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||||||
|
ctx
|
||||||
|
.moveTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.lineTo(c4[0], c4[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绘制顶面
|
||||||
|
const CubeTop = echarts.graphic.extendShape({
|
||||||
|
shape: {
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
},
|
||||||
|
buildPath: function (ctx, shape) {
|
||||||
|
const c1 = [shape.x, shape.y];
|
||||||
|
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
||||||
|
const c3 = [shape.x, shape.y - offsetX];
|
||||||
|
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||||||
|
ctx
|
||||||
|
.moveTo(c1[0], c1[1])
|
||||||
|
.lineTo(c2[0], c2[1])
|
||||||
|
.lineTo(c3[0], c3[1])
|
||||||
|
.lineTo(c4[0], c4[1])
|
||||||
|
.closePath();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 注册三个面图形
|
||||||
|
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||||
|
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||||
|
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
legend: {
|
||||||
|
data: [
|
||||||
|
{ icon: "rect", name: "昨日" },
|
||||||
|
{ icon: "rect", name: "今日" },
|
||||||
|
],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "1%",
|
||||||
|
right: "0%",
|
||||||
|
top: "16%",
|
||||||
|
bottom: "5%",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: xaxisData,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:kWh",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#FFFFFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
name: "昨日",
|
||||||
|
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,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
itemStyle: {
|
||||||
|
color: "transparent",
|
||||||
|
},
|
||||||
|
data: yaxisData,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: "top",
|
||||||
|
formatter: (e) => {
|
||||||
|
return e.value === maxValue ? e.value : "";
|
||||||
|
},
|
||||||
|
fontSize: 20,
|
||||||
|
color: "#02C262",
|
||||||
|
offset: [0, -15],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "custom",
|
||||||
|
name: "今日",
|
||||||
|
renderItem: (params, api) => {
|
||||||
|
const location = api.coord([api.value(0), api.value(1)]);
|
||||||
|
const xAxisPoint = api.coord([api.value(0), 0]);
|
||||||
|
const distance = 50;
|
||||||
|
return {
|
||||||
|
type: "group",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
type: "CubeLeft",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0] - distance,
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#10C6FF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.35,
|
||||||
|
color: "#377DFF",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#4464FF",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeRight",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0] - distance,
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#0673D5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 0.35,
|
||||||
|
color: "#0B68D5",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#115DD5",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "CubeTop",
|
||||||
|
shape: {
|
||||||
|
api,
|
||||||
|
xValue: api.value(0),
|
||||||
|
yValue: api.value(1),
|
||||||
|
x: location[0] - distance,
|
||||||
|
y: location[1],
|
||||||
|
xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
fill: "#0964FF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: yaxisData2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
this.defineEcharts("pdsydl", option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (window.vuplex) {
|
||||||
|
addMessageListener();
|
||||||
|
} else {
|
||||||
|
window.addEventListener("vuplexready", addEventListener);
|
||||||
|
} function addEventListener() {
|
||||||
|
window.vuplex.addEventListener("message", function (event) {
|
||||||
|
let json = event.data;
|
||||||
|
console.log("JSON received" + json);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.defineEcharts("pdsssdh", this.option1);
|
||||||
|
// this.defineEcharts("pdsydl", this.option2);
|
||||||
|
this.pdsydl();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: -800px;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdsssdh {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pdsssdh {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdsydl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pdsydl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdstpt {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pdstpt {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 94%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 1237px;
|
||||||
|
height: 2500px;
|
||||||
|
margin-right: 61px;
|
||||||
|
background-image: url("../../../assets/img/侧边.png");
|
||||||
|
padding-left: 59px;
|
||||||
|
padding-right: 45px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.pdsjk {
|
||||||
|
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;
|
||||||
|
|
||||||
|
#pdsjk {
|
||||||
|
width: 1156px;
|
||||||
|
height: 900px;
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue