1886 lines
46 KiB
Vue
1886 lines
46 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="a">
|
||
<img
|
||
src="../../assets/img/可调负荷/可调图标--未选中.png"
|
||
alt=""
|
||
@click="sendMessageToCSharp"
|
||
/>
|
||
</div>
|
||
<div class="left">
|
||
<img src="../../assets/img/标题/负荷管理-可调负荷.png" class="title" />
|
||
<div class="kdfhzy">
|
||
<div class="imgBox1">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调负荷资源</p>
|
||
</div>
|
||
<div id="kdfhzy">
|
||
<div class="headers">
|
||
<div id="xf"></div>
|
||
<div id="tg"></div>
|
||
</div>
|
||
<div id="fhzy"></div>
|
||
</div>
|
||
</div>
|
||
<div class="fhdkcl">
|
||
<div class="imgBox2">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>负荷调控策略</p>
|
||
</div>
|
||
<div id="fhdkcl">
|
||
<div class="table">
|
||
<el-table
|
||
:data="plan"
|
||
style="width: 100%"
|
||
:row-class-name="tableRowClassName"
|
||
>
|
||
<el-table-column
|
||
prop="LevelRegulation"
|
||
label="调控等级"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column prop="Target" label="目标" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.Target }}kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="ExecutionTime"
|
||
label="执行时长"
|
||
align="center"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kdfhfx">
|
||
<div class="imgBox3">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调负荷分析</p>
|
||
</div>
|
||
<div class="fenxi">
|
||
<h2>基线负荷:<span class="title">{{kdfhfxlist.BaseLoad}}</span>kW</h2>
|
||
<div class="one">
|
||
<div class="first_left">
|
||
<h3>{{kdfhfxlist.PeakClipping}}<span>kW</span></h3>
|
||
<p>可参与削锋负荷</p>
|
||
</div>
|
||
<div class="first_center"></div>
|
||
<div class="first_right">
|
||
<h3>{{ kdfhfxlist.PeakingAmount }}<span>元</span></h3>
|
||
<p>单次补贴金额</p>
|
||
</div>
|
||
</div>
|
||
<div class="two">
|
||
<div class="first_left">
|
||
<h3>{{kdfhfxlist.ValleyFilling}}<span>kW</span></h3>
|
||
<p>可参与填谷负荷</p>
|
||
</div>
|
||
<div class="first_center"></div>
|
||
<div class="first_right">
|
||
<h3>{{ kdfhfxlist.ValleyFillingAmount }}<span>元</span></h3>
|
||
<p>单次补贴金额</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="kdsb">
|
||
<div class="imgBox4">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>可调设备</p>
|
||
</div>
|
||
<div id="kdsb">
|
||
<div class="table">
|
||
<el-table
|
||
:data="devices"
|
||
style="width: 100%"
|
||
:row-class-name="tableRowClassName"
|
||
>
|
||
<el-table-column prop="date1" label="可调设备名称" align="center">
|
||
</el-table-column>
|
||
<el-table-column prop="date2" label="开关状态" align="center">
|
||
<template scope="scope">
|
||
<img
|
||
src="../../assets/KDFH/tongguo.png"
|
||
v-if="scope.row.date2 == true"
|
||
/>
|
||
<img src="../../assets/KDFH/jinggao.png" v-else />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="date3" label="实时负荷" align="center">
|
||
<template scope="scope">
|
||
<span class="count">{{ scope.row.date3 }}</span>
|
||
<span class="danwei">kW</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gxkdfh">
|
||
<div class="imgBox5">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>刚性可调负荷</p>
|
||
</div>
|
||
<div class="five">
|
||
<div id="gang"></div>
|
||
<div class="gang_r">
|
||
<div class="g_one">
|
||
<span class="gang_one"></span>
|
||
<span>设备数量：</span>
|
||
<span class="gang_count">38</span>
|
||
<span>个</span>
|
||
</div>
|
||
<div class="g_two">
|
||
<span class="gang_two"></span>
|
||
<span>刚性可调负荷：</span>
|
||
<span class="gang_count">1348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
<div class="g_three">
|
||
<span class="gang_three"></span>
|
||
<span>总可调负荷：</span>
|
||
<span class="gang_count">4348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="rxkdfh">
|
||
<div class="imgBox6">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>软性可调负荷</p>
|
||
</div>
|
||
<div class="six">
|
||
<div id="ruan"></div>
|
||
<div class="gang_r">
|
||
<div class="g_one">
|
||
<span class="gang_one"></span>
|
||
<span>设备数量：</span>
|
||
<span class="gang_count">38</span>
|
||
<span>个</span>
|
||
</div>
|
||
<div class="g_two">
|
||
<span class="gang_two"></span>
|
||
<span>刚性可调负荷：</span>
|
||
<span class="gang_count">1348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
<div class="g_three">
|
||
<span class="gang_three"></span>
|
||
<span>总可调负荷：</span>
|
||
<span class="gang_count">4348</span>
|
||
<span>kW</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import "../../utils/echarts-liquidfill.min.js";
|
||
import * as echarts from "echarts";
|
||
import { GetKdfhzy, GetKdfhcl } from "@/api/kdfh";
|
||
export default {
|
||
name: "FHGL",
|
||
data() {
|
||
return {
|
||
plan: [
|
||
{
|
||
LevelRegulation: "一级",
|
||
Target: "102.00",
|
||
ExecutionTime: "5分钟",
|
||
},
|
||
{
|
||
LevelRegulation: "一级",
|
||
Target: "29.00",
|
||
ExecutionTime: "30分钟",
|
||
},
|
||
{
|
||
LevelRegulation: "一级",
|
||
Target: "45.00",
|
||
ExecutionTime: "1小时",
|
||
},
|
||
],
|
||
devices: [
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "篦冷机",
|
||
date2: true,
|
||
date3: "45.00",
|
||
},
|
||
{
|
||
date1: "生料收尘",
|
||
date2: false,
|
||
date3: "102.00",
|
||
},
|
||
{
|
||
date1: "回转窑",
|
||
date2: true,
|
||
date3: "29.00",
|
||
},
|
||
{
|
||
date1: "熟料收尘",
|
||
date2: false,
|
||
date3: "45.00",
|
||
},
|
||
],
|
||
option: {
|
||
series: [
|
||
{
|
||
// value: 50, // 内容 配合formatter
|
||
type: "liquidFill",
|
||
radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||
center: ["50%", "50%"],
|
||
data: [
|
||
0.6,
|
||
{
|
||
value: 0.6,
|
||
direction: "left", //波浪方向
|
||
},
|
||
], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: "transparent", // 球体本景色
|
||
},
|
||
amplitude: "6%", //波浪的振幅
|
||
// 修改波浪颜色
|
||
color: [
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: "#2EED5C",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "#2EED5C",
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
formatter: 55 + "{d|%}",
|
||
rich: {
|
||
d: {
|
||
fontSize: 36,
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 48,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
outline: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "pie",
|
||
z: 1,
|
||
center: ["50%", "50%"],
|
||
radius: ["72%", "73.5%"], // 控制外圈圆的粗细
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
name: "",
|
||
value: 500,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: "#2EED5C",
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: "#2EED5C",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "pie",
|
||
zlevel: 0,
|
||
silent: true,
|
||
radius: ["78%", "80%"],
|
||
z: 1,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: this.Pie(),
|
||
},
|
||
],
|
||
},
|
||
option2: {
|
||
series: [
|
||
{
|
||
// value: 50, // 内容 配合formatter
|
||
type: "liquidFill",
|
||
radius: "70%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
|
||
center: ["50%", "50%"],
|
||
data: [
|
||
0.6,
|
||
{
|
||
value: 0.6,
|
||
direction: "left", //波浪方向
|
||
},
|
||
], // data个数代表波浪数
|
||
backgroundStyle: {
|
||
borderWidth: 1,
|
||
color: "transparent", // 球体本景色
|
||
},
|
||
amplitude: "6%", //波浪的振幅
|
||
// 修改波浪颜色
|
||
color: [
|
||
{
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: "#10A1DD",
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: "#10A1DD",
|
||
},
|
||
],
|
||
globalCoord: false,
|
||
},
|
||
],
|
||
label: {
|
||
normal: {
|
||
formatter: 55 + "{d|%}",
|
||
rich: {
|
||
d: {
|
||
fontSize: 36,
|
||
},
|
||
},
|
||
textStyle: {
|
||
fontSize: 48,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
outline: {
|
||
show: false,
|
||
},
|
||
},
|
||
{
|
||
type: "pie",
|
||
z: 1,
|
||
center: ["50%", "50%"],
|
||
radius: ["72%", "73.5%"], // 控制外圈圆的粗细
|
||
hoverAnimation: false,
|
||
data: [
|
||
{
|
||
name: "",
|
||
value: 500,
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: "#10A1DD",
|
||
},
|
||
emphasis: {
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
itemStyle: {
|
||
color: "#10A1DD",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: "pie",
|
||
zlevel: 0,
|
||
silent: true,
|
||
radius: ["78%", "80%"],
|
||
z: 1,
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: this.Pie2(),
|
||
},
|
||
],
|
||
},
|
||
|
||
//可调负荷资源
|
||
xfdata: 53,
|
||
tgdata: 42,
|
||
xflist: [9.3, 7.0, 7.0, 6.0],
|
||
tglist: [9.3, 7.0, 7.0, 6.0],
|
||
//可调负荷分析
|
||
kdfhfxlist: {
|
||
BaseLoad: 19365, //基线负荷
|
||
PeakClipping: 13329, //削峰数值
|
||
ValleyFilling: 6036, //填谷数值
|
||
PeakingAmount: 186472.71, //削峰补贴
|
||
ValleyFillingAmount: 19254.84, //填谷补贴
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
//U3D交互的绑定
|
||
sendMessageToCSharp() {
|
||
// window.vuplex.postMessage({
|
||
// type: "Tog",
|
||
// message: "负荷管理_true",
|
||
// });
|
||
window.vuplex.postMessage("负荷管理-可调负荷");
|
||
this.$router.push("/fhgl");
|
||
},
|
||
tableRowClassName({ row, rowIndex }) {
|
||
if ((rowIndex + 1) % 2 === 0) {
|
||
return "success-row";
|
||
}
|
||
return "";
|
||
},
|
||
Pie() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#2EED5C",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
},
|
||
},
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
},
|
||
Pie2() {
|
||
let dataArr = [];
|
||
for (var i = 0; i < 150; i++) {
|
||
if (i % 2 === 0) {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#10A1DD",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
},
|
||
},
|
||
});
|
||
} else {
|
||
dataArr.push({
|
||
name: (i + 1).toString(),
|
||
value: 100,
|
||
itemStyle: {
|
||
normal: {
|
||
color: "rgba(0,0,0,0)",
|
||
borderWidth: 0,
|
||
borderColor: "rgba(0,0,0,0)",
|
||
},
|
||
},
|
||
});
|
||
}
|
||
}
|
||
return dataArr;
|
||
},
|
||
xf() {
|
||
const dataArr = [
|
||
{
|
||
value: this.xfdata,
|
||
name: "削锋",
|
||
},
|
||
];
|
||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#136768", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#28E2EC ", // 100% 处的颜色
|
||
},
|
||
]);
|
||
const colorSet = [
|
||
[0.81, color],
|
||
[1, "#136768"],
|
||
];
|
||
const rich = {
|
||
white: {
|
||
fontSize: 40,
|
||
color: "#25D1D9",
|
||
fontWeight: "500",
|
||
},
|
||
bule: {
|
||
fontSize: 60,
|
||
fontFamily: "DINBold",
|
||
color: "#25D1D9",
|
||
fontWeight: "700",
|
||
},
|
||
radius: {
|
||
width: 350,
|
||
height: 80,
|
||
// lineHeight:80,
|
||
borderWidth: 1,
|
||
borderColor: "#0092F2",
|
||
fontSize: 50,
|
||
color: "#fff",
|
||
backgroundColor: "#1B215B",
|
||
borderRadius: 20,
|
||
textAlign: "center",
|
||
},
|
||
size: {
|
||
height: 400,
|
||
padding: [100, 0, 0, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
tooltip: {
|
||
formatter: "{a} <br/>{b} : {c}%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius: "70%",
|
||
startAngle: "225",
|
||
endAngle: "-45",
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
var num = Math.round(value);
|
||
return "{bule|" + num + "}{white|%}";
|
||
},
|
||
rich: rich,
|
||
offsetCenter: ["0%", "0%"],
|
||
},
|
||
data: dataArr,
|
||
title: {
|
||
show: true,
|
||
color: "#fff",
|
||
offsetCenter: ["0", "75%"],
|
||
fontSize: 30,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colorSet,
|
||
width: 24,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
length: 35,
|
||
lineStyle: {
|
||
color: "#00377a",
|
||
width: 2,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
// label: {
|
||
// formatter: function (params) {
|
||
// return "{name|" + params.name + "}"
|
||
// },
|
||
// rich: {
|
||
// name: {
|
||
// fontSize: 24,
|
||
// with: 100,
|
||
// height: 40,
|
||
// borderRadius: [4, 4, 4, 4],
|
||
// borderWidth: 1,
|
||
|
||
// }
|
||
// },
|
||
// },
|
||
},
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById("xf");
|
||
var myChart = echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
tg() {
|
||
const dataArr = [
|
||
{
|
||
value: this.tgdata,
|
||
name: "填谷",
|
||
},
|
||
];
|
||
const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: "#00C78B", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#00FEB4 ", // 100% 处的颜色
|
||
},
|
||
]);
|
||
const colorSet = [
|
||
[0.7, color],
|
||
[1, "#136768"],
|
||
];
|
||
const rich = {
|
||
white: {
|
||
fontSize: 40,
|
||
color: "#00FEB4",
|
||
fontWeight: "500",
|
||
},
|
||
bule: {
|
||
fontSize: 60,
|
||
fontFamily: "DINBold",
|
||
color: "#00FEB4",
|
||
fontWeight: "700",
|
||
},
|
||
radius: {
|
||
width: 350,
|
||
height: 80,
|
||
// lineHeight:80,
|
||
borderWidth: 1,
|
||
// borderColor: '#0092F2',
|
||
fontSize: 50,
|
||
color: "#fff",
|
||
// backgroundColor: '#1B215B',
|
||
borderRadius: 20,
|
||
textAlign: "center",
|
||
},
|
||
size: {
|
||
height: 400,
|
||
padding: [100, 0, 0, 0],
|
||
},
|
||
};
|
||
let option = {
|
||
tooltip: {
|
||
formatter: "{a} <br/>{b} : {c}%",
|
||
},
|
||
series: [
|
||
{
|
||
type: "gauge",
|
||
radius: "70%",
|
||
startAngle: "225",
|
||
endAngle: "-45",
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
detail: {
|
||
formatter: function (value) {
|
||
var num = Math.round(value);
|
||
return "{bule|" + num + "}{white|%}";
|
||
},
|
||
rich: rich,
|
||
offsetCenter: ["0%", "0%"],
|
||
},
|
||
|
||
data: dataArr,
|
||
title: {
|
||
show: true,
|
||
color: "#fff",
|
||
offsetCenter: ["0", "75%"],
|
||
// width:100,
|
||
// height:4,
|
||
// borderRadius:[4,4,4,4,],
|
||
fontSize: 30,
|
||
// text: '{a|'+ dataArr.value +'}{c|%}',
|
||
// textStyle:{
|
||
// rich:{
|
||
// a:{
|
||
// fontSize:100,
|
||
// },
|
||
// c:{
|
||
|
||
// }
|
||
// }
|
||
// }
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: colorSet,
|
||
width: 24,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 0,
|
||
opacity: 1,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
length: 35,
|
||
lineStyle: {
|
||
color: "#00377a",
|
||
width: 2,
|
||
type: "solid",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById("tg");
|
||
var myChart = echarts.init(chartDom);
|
||
option && myChart.setOption(option);
|
||
},
|
||
kdfhzy() {
|
||
let xaxisData = ["秒级", "分钟级", "小时级", "现在"];
|
||
let yaxisData = this.xflist;
|
||
let yaxisData2 = this.tglist;
|
||
|
||
const offsetX = 20;
|
||
const offsetY = 10;
|
||
// 绘制左侧面
|
||
const CubeLeft = echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
// console.log(shape);
|
||
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);
|
||
|
||
const option = {
|
||
legend: {
|
||
itemWidth: 40,
|
||
itemHeight: 20,
|
||
padding: [0, 10, 0, 10],
|
||
data: [
|
||
{
|
||
name: "削锋",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 24,
|
||
},
|
||
},
|
||
{
|
||
name: "填谷",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 24,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// // formatter: function (params) {
|
||
// // const item = params[1]
|
||
// // return item.name + ' : ' + item.value
|
||
// // }
|
||
// },
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xaxisData,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitArea: false,
|
||
name: "单位:kW",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#CEDDF2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#fff",
|
||
// type: "dashed",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
name: "削锋",
|
||
markPoint: {
|
||
data: [],
|
||
},
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
x: 30,
|
||
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: "#4567FF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0CC7FA",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#115DD5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0574D0",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#0D7FFB",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#0440EB",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData2,
|
||
},
|
||
{
|
||
type: "custom",
|
||
name: "填谷",
|
||
markPoint: {
|
||
data: [],
|
||
},
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
x: -20,
|
||
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: "#09E63A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#39E7C7",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#00C35A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#09C379",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#05E6A5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#12DE63",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData,
|
||
},
|
||
],
|
||
};
|
||
var chartDom = document.getElementById("fhzy");
|
||
var myChart2 = echarts.init(chartDom);
|
||
option && myChart2.setOption(option);
|
||
},
|
||
async getkdfhzy() {
|
||
let res = await GetKdfhzy();
|
||
console.log(res);
|
||
},
|
||
async getkdfhcl() {
|
||
let res = await GetKdfhcl();
|
||
console.log(res);
|
||
this.plan = res.data;
|
||
},
|
||
async getkdfhfx() {
|
||
let res = await GetKdfhfx();
|
||
console.log(res);
|
||
this.kdfhfxlist = res.data[0];
|
||
},
|
||
},
|
||
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() {
|
||
var chartDom = document.getElementById("gang");
|
||
var myChart = echarts.init(chartDom);
|
||
this.option && myChart.setOption(this.option);
|
||
var chartDom2 = document.getElementById("ruan");
|
||
var myChart2 = echarts.init(chartDom2);
|
||
this.option2 && myChart2.setOption(this.option2);
|
||
this.xf();
|
||
this.tg();
|
||
this.kdfhzy();
|
||
// this.getkdfhzy();
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 400px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
position: relative;
|
||
background-image: url(../../assets/img/左遮罩.png),
|
||
url(../../assets/img/右遮罩.png);
|
||
background-color: transparent;
|
||
justify-content: space-between;
|
||
|
||
.a {
|
||
position: absolute;
|
||
width: 1300px;
|
||
z-index: 2;
|
||
top: 420px;
|
||
right: 480px;
|
||
z-index: 100;
|
||
|
||
img {
|
||
margin-right: 102px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
|
||
/deep/.table {
|
||
// width: 100%;
|
||
// height: 500px;
|
||
margin-top: 50px;
|
||
|
||
.count {
|
||
color: #05f0ff;
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
}
|
||
.danwei {
|
||
margin-left: 10px;
|
||
}
|
||
//表体颜色
|
||
.el-table tr {
|
||
background: #16253b;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
height: 50px;
|
||
|
||
.cell {
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
|
||
// 去掉eltable的hover效果
|
||
.el-table tbody tr:hover > td {
|
||
background-color: #0b679e !important;
|
||
}
|
||
|
||
//修改表头颜色
|
||
.has-gutter {
|
||
background-color: #1969a8;
|
||
|
||
th {
|
||
background-color: #1969a8;
|
||
}
|
||
}
|
||
|
||
//奇偶行颜色
|
||
.el-table .success-row {
|
||
background: #184167;
|
||
}
|
||
|
||
//去掉边框白线
|
||
.el-table__row > td {
|
||
border: none;
|
||
}
|
||
|
||
.el-table::before {
|
||
height: 0px;
|
||
}
|
||
|
||
/* 移除表头的下边框 */
|
||
.el-table__header th {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.kdfhzy {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox1 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#kdfhzy {
|
||
width: 100%;
|
||
height: 900px;
|
||
|
||
.headers {
|
||
width: 100%;
|
||
height: 320px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#xf {
|
||
width: 400px;
|
||
height: 300px;
|
||
}
|
||
|
||
#tg {
|
||
width: 400px;
|
||
height: 300px;
|
||
}
|
||
}
|
||
|
||
#fhzy {
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fhdkcl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox2 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#fhdkcl {
|
||
width: 100%;
|
||
height: 360px;
|
||
}
|
||
}
|
||
|
||
.kdfhfx {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox3 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
margin-bottom: 50px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.fenxi {
|
||
width: 100%;
|
||
height: 600px;
|
||
|
||
h2 {
|
||
width: 446px;
|
||
height: 35px;
|
||
font-size: 22px;
|
||
font-family: SourceHanSansCN, SourceHanSansCN;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
line-height: 20px;
|
||
}
|
||
|
||
span.title {
|
||
margin-left: 20px;
|
||
width: 186px;
|
||
height: 41px;
|
||
font-size: 42px;
|
||
color: #56f671;
|
||
line-height: 20px;
|
||
padding-right: 9px;
|
||
}
|
||
|
||
.one {
|
||
width: 100%;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.first_left {
|
||
width: 482px;
|
||
height: 167px;
|
||
background: url(../../assets/KDFH/组\ 966.png);
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 97px;
|
||
height: 53px;
|
||
margin-left: 208px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #58fd64;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 200px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.first_center {
|
||
width: 89px;
|
||
height: 54px;
|
||
background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
|
||
opacity: 1;
|
||
}
|
||
|
||
.first_right {
|
||
width: 487px;
|
||
height: 168px;
|
||
background: url(../../assets/KDFH/组\ 965.png);
|
||
border-radius: 24px 3px 3px 24px;
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 353px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #03ffd8;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 240px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
// line-height: 185px;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.two {
|
||
width: 100%;
|
||
height: 210px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
|
||
.first_left {
|
||
width: 482px;
|
||
height: 167px;
|
||
background: url(../../assets/KDFH/组\ 967.png);
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 97px;
|
||
height: 53px;
|
||
margin-left: 240px;
|
||
margin-top: 20px;
|
||
font-size: 59px;
|
||
font-family: Impact;
|
||
color: #36b1ff;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 200px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.first_center {
|
||
width: 89px;
|
||
height: 54px;
|
||
background: url(../../assets/KDFH/箭头\ 9\ 1443.png);
|
||
opacity: 1;
|
||
}
|
||
|
||
.first_right {
|
||
width: 487px;
|
||
height: 168px;
|
||
background: url(../../assets/KDFH/组\ 965.png);
|
||
border-radius: 24px 3px 3px 24px;
|
||
opacity: 1;
|
||
|
||
h3 {
|
||
width: 353px;
|
||
height: 53px;
|
||
margin-left: 160px;
|
||
margin-top: 20px;
|
||
font-size: 36px;
|
||
font-family: Impact;
|
||
color: #03ffd8;
|
||
// line-height: 322px;
|
||
}
|
||
|
||
p {
|
||
margin-top: 15px;
|
||
margin-left: 240px;
|
||
width: 482px;
|
||
height: 67px;
|
||
color: #fff;
|
||
font-size: 36px;
|
||
opacity: 1;
|
||
// line-height: 185px;
|
||
}
|
||
|
||
span {
|
||
width: 50px;
|
||
height: 27px;
|
||
font-size: 33px;
|
||
margin-left: 18px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
// line-height: 341px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.kdsb {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox4 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
#kdsb {
|
||
width: 100%;
|
||
height: 500px;
|
||
}
|
||
}
|
||
|
||
.gxkdfh {
|
||
position: relative;
|
||
margin-top: 158px;
|
||
|
||
.imgBox5 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.five {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#gang {
|
||
width: 100%;
|
||
height: 540px;
|
||
}
|
||
|
||
.gang_r {
|
||
margin-top: 100px;
|
||
|
||
.g_one {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_one {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
background: #2eedaf;
|
||
border-radius: 3px 3px 3px 3px;
|
||
margin-right: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
font-family: TRENDS;
|
||
color: #2eedaf;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_two {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_two {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
margin-right: 20px;
|
||
background: #2eedd8;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #2eedd8;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_three {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_three {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 20px;
|
||
display: block;
|
||
background: #9acafd;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #9acafd;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.rxkdfh {
|
||
position: relative;
|
||
margin-top: 128px;
|
||
|
||
.imgBox6 {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.six {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
#ruan {
|
||
width: 100%;
|
||
height: 540px;
|
||
}
|
||
|
||
.gang_r {
|
||
margin-top: 100px;
|
||
|
||
.g_one {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_one {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
background: #2eedaf;
|
||
border-radius: 3px 3px 3px 3px;
|
||
margin-right: 20px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
font-family: TRENDS;
|
||
color: #2eedaf;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_two {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_two {
|
||
width: 34px;
|
||
height: 34px;
|
||
display: block;
|
||
margin-right: 20px;
|
||
background: #2eedd8;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #2eedd8;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.g_three {
|
||
width: 600px;
|
||
height: auto;
|
||
height: 34px;
|
||
font-size: 22px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
display: flex;
|
||
margin-bottom: 100px;
|
||
color: #ffffff;
|
||
|
||
.gang_three {
|
||
width: 34px;
|
||
height: 34px;
|
||
margin-right: 20px;
|
||
display: block;
|
||
background: #9acafd;
|
||
border-radius: 3px 3px 3px 3px;
|
||
opacity: 1;
|
||
}
|
||
|
||
.gang_count {
|
||
width: 55px;
|
||
height: 43px;
|
||
font-size: 34px;
|
||
margin-left: 10px;
|
||
margin-right: 40px;
|
||
font-family: TRENDS;
|
||
color: #9acafd;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// p {
|
||
// position: absolute;
|
||
// color: #fff;
|
||
// top: 20px;
|
||
// right: 1008px;
|
||
// font-size: 30px;
|
||
// font-family: "MicrosoftYaHei";
|
||
// }
|
||
}
|
||
}
|
||
</style>
|