1715 lines
43 KiB
Vue
1715 lines
43 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="title">
|
||
<img src="../assets/客户侧总体用能情况分析/图层 2.png" alt="" />
|
||
<p>智慧售电云平台</p>
|
||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||
</div>
|
||
<div class="containter">
|
||
<div class="left">
|
||
<div class="ndqyyh">
|
||
<p class="title">年度签约用户</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">2451<span class="tit_danwei">户</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">
|
||
12.23%
|
||
<img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">
|
||
27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="qyyh"></div>
|
||
</div>
|
||
<div class="ndsdl">
|
||
<p class="title">年度售电量</p>
|
||
<div class="bg_title">
|
||
<p class="tit_first">7,5624<span class="tit_danwei">MWH</span></p>
|
||
<div class="tit_second">
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">
|
||
12.23%
|
||
<img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">
|
||
27.16% <img src="../assets/zhsdy/325数值上升(1).png" alt="" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="ndsdl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="ndsdje">
|
||
<p class="title">年度售电金额</p>
|
||
<div id="ndsdje">
|
||
<div class="infos" v-for="(item, index) in lists" :key="index">
|
||
<div class="first">
|
||
<p>
|
||
<img src="../assets/zhsdy/组 3189.png" alt="" />
|
||
<span class="titles">{{ item.title }}</span>
|
||
</p>
|
||
<p class="money">
|
||
{{ item.money }}<span class="danwei">万元</span>
|
||
</p>
|
||
</div>
|
||
<div class="second">
|
||
<div class="s_tit">
|
||
<div>
|
||
<p>同比</p>
|
||
<p class="tb_percent">
|
||
{{ item.tb }}%
|
||
<img src="../assets/zhsdy/325数值上升 (4).png" alt="" />
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p>环比</p>
|
||
<p class="tb_percent">
|
||
{{ item.hb }}%
|
||
<img src="../assets/zhsdy/325数值上升(1).png" alt="" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="bigBox">
|
||
<div
|
||
class="smallBox"
|
||
:style="{ width: `${item.percent}px` }"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pcfx">
|
||
<p class="title">偏差分析</p>
|
||
<div id="pcfx">
|
||
<div class="pc_tit" v-for="(item, index) in pclist" :key="index">
|
||
<div class="pc_l">
|
||
<img src="../assets/zhsdy/组 3192.png" alt="" />
|
||
<span class="pc_name">{{ item.name }}</span>
|
||
<span class="pc_count">{{ item.count }}</span>
|
||
<span class="pc_danwei">{{ item.danwei }}</span>
|
||
</div>
|
||
<div class="pc_r">
|
||
<p>环比</p>
|
||
<p class="tb_percent">
|
||
{{ item.hb }}%
|
||
<img src="../assets/zhsdy/325数值上升(1).png" alt="" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div id="pcfxb"></div>
|
||
</div>
|
||
</div>
|
||
<div class="yhhyzb">
|
||
<p class="title">用户行业占比</p>
|
||
<div id="yhhyzb"></div>
|
||
</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
<div class="footer">
|
||
<div class="ndqylfb">
|
||
<p class="title">年度签约量分布</p>
|
||
<div id="ndqylfb"></div>
|
||
</div>
|
||
<div class="ggzcxx">
|
||
<p class="title">公告政策信息</p>
|
||
<div id="ggzcxx">
|
||
<ul>
|
||
<li v-for="(item, index) in infos">
|
||
<img src="../assets/zhsdy/组 3147.png" alt="" class="img" />
|
||
<span class="times">{{ item.time }}</span>
|
||
<span class="info">{{ item.info }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
const fontSizeRem = (size) => {
|
||
const clientWidth =
|
||
window.innerWidth ||
|
||
document.documentElement.clientWidth ||
|
||
document.body.clientWidth;
|
||
if (!clientWidth) return;
|
||
let fontSize = clientWidth / 1920; //尺寸大小
|
||
return size * fontSize;
|
||
};
|
||
import * as echarts from "echarts";
|
||
// import { fontSizeRem } from "../assets/function";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "日",
|
||
type: "电",
|
||
option: {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
||
borderColor: "rgba(75, 253, 238, 0.4)",
|
||
textStyle: {
|
||
color: "#CFE3FC",
|
||
},
|
||
borderWidth: 1,
|
||
},
|
||
grid: {
|
||
top: "15%",
|
||
right: "5%",
|
||
left: "8%",
|
||
bottom: "12%",
|
||
},
|
||
xAxis: [
|
||
{
|
||
name: "",
|
||
type: "category",
|
||
data: [
|
||
"济南",
|
||
"烟台",
|
||
"威海",
|
||
"德州",
|
||
"滨州",
|
||
"泰安",
|
||
"临沂",
|
||
"烟台",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
"青岛",
|
||
],
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
margin: 10,
|
||
color: "#e2e9ff",
|
||
textStyle: {
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "单位：MWh",
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
color: "#e2e9ff",
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#FFFFFF",
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.12)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
data: [
|
||
760, 520, 850, 400, 756, 200, 400, 700, 550, 440, 220, 160, 300,
|
||
400,
|
||
],
|
||
barWidth: "30%",
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0,244,255,1)", // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0,77,167,1)", // 100% 处的颜色
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(0,160,221,1)",
|
||
shadowBlur: 4,
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
lineHeight: 10,
|
||
formatter: "{c}",
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#00D6F9",
|
||
fontSize: 12,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
infos: [
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
{
|
||
time: "2021-10-02 11:13:52",
|
||
info: "(山东）山东电网2021年第一季度店里市场交易信息报道情况啊啊大萨达实打实",
|
||
},
|
||
],
|
||
lists: [
|
||
{
|
||
title: "年度销售指标完成率",
|
||
money: "7,965",
|
||
tb: "12.23",
|
||
hb: "27.16",
|
||
percent: "80",
|
||
},
|
||
{
|
||
title: "年度收益金额",
|
||
money: "5,665",
|
||
tb: "12.23",
|
||
hb: "27.16",
|
||
percent: "40",
|
||
},
|
||
],
|
||
pclist: [
|
||
{
|
||
name: "月度偏差电量",
|
||
count: "5514",
|
||
danwei: "MWh",
|
||
hb: "27.16",
|
||
},
|
||
{
|
||
name: "月度偏差率",
|
||
count: "25",
|
||
danwei: "%",
|
||
hb: "27.16",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom, null, {
|
||
devicePixelRatio: 10, // 设置为2或更高的值
|
||
});
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
qyyh() {
|
||
let option = {
|
||
// backgroundColor: '#081736',
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 255, 233,0)",
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(255, 255, 255,1)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0, 255, 233,0)",
|
||
},
|
||
],
|
||
global: false,
|
||
},
|
||
},
|
||
},
|
||
},
|
||
|
||
grid: {
|
||
top: "12%",
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: "25%",
|
||
// containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#009dff",
|
||
},
|
||
},
|
||
|
||
axisLabel: {
|
||
color: "#fff",
|
||
width: 100,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#00BFF3",
|
||
opacity: 0.23,
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
boundaryGap: false,
|
||
data: [
|
||
"01",
|
||
"02",
|
||
"03",
|
||
"04",
|
||
"05",
|
||
"06",
|
||
"07",
|
||
"08",
|
||
"09",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
], //this.$moment(data.times).format("HH-mm") ,
|
||
},
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
min: 0,
|
||
// max: 140,
|
||
splitNumber: 4,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#00BFF3",
|
||
opacity: 0.23,
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#009dff",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 20,
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
smooth: true,
|
||
showAllSymbol: true,
|
||
// symbol: 'circle',
|
||
symbolSize: 2,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#2CABE3",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: "#2CABE3",
|
||
borderColor: "#2CABE3",
|
||
borderWidth: 2,
|
||
},
|
||
data: [
|
||
4, 7, 5, 4, 3, 5, 8, 7, 5, 4, 3, 5, 8, 4, 7, 5, 4, 3, 5, 8, 7, 5,
|
||
4, 3, 5, 8,
|
||
], //data.values
|
||
},
|
||
{
|
||
name: "",
|
||
type: "line",
|
||
smooth: true,
|
||
showAllSymbol: true,
|
||
// symbol: 'circle',
|
||
symbolSize: 2,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#7def86",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#7def86",
|
||
borderColor: "rgba(0, 255, 240, 1)",
|
||
lineStyle: {
|
||
color: "rgba(0, 255, 240, 1)",
|
||
},
|
||
},
|
||
},
|
||
data: [
|
||
3, 5, 4, 2, 1, 7, 6, 5, 4, 2, 1, 7, 6, 3, 5, 4, 2, 1, 7, 6, 5, 4,
|
||
2, 1, 7, 6,
|
||
], //data.values
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("qyyh", option);
|
||
},
|
||
// 年度售电量
|
||
ndsdl() {
|
||
var colors = ["#00FFFF", "#02FF67", "#675bba"];
|
||
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
},
|
||
grid: {
|
||
top: "25%",
|
||
right: "5%",
|
||
left: "15%",
|
||
bottom: "20%",
|
||
},
|
||
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLabel: {
|
||
color: "#fff",
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#0a3e98",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#195384",
|
||
type: "dotted",
|
||
},
|
||
},
|
||
data: [
|
||
"01",
|
||
"02",
|
||
"03",
|
||
"04",
|
||
"05",
|
||
"06",
|
||
"07",
|
||
"08",
|
||
"09",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
},
|
||
],
|
||
dataZoom: [
|
||
{
|
||
show: false,
|
||
realtime: false,
|
||
start: 0,
|
||
end: 100,
|
||
},
|
||
{
|
||
type: "inside",
|
||
realtime: true,
|
||
start: 0,
|
||
end: 100,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位：户",
|
||
min: 0,
|
||
position: "left",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 12,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0a3e98",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#0a3e98",
|
||
type: "dotted",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
formatter: "{value}",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "发放人数",
|
||
type: "line",
|
||
// smooth: true, //是否平滑
|
||
// showAllSymbol: true,
|
||
// symbol: 'image://./static/images/guang-circle.png',
|
||
symbol: "circle",
|
||
symbolSize: 2,
|
||
lineStyle: {
|
||
normal: {
|
||
color: "#14ADFD",
|
||
},
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#14ADFD",
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: "#fff",
|
||
borderColor: "#14ADFD",
|
||
borderWidth: 2,
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(78, 173, 244, 0.90)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(37, 98, 179, 0.90)",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(37, 98, 179, 0.90)",
|
||
shadowBlur: 20,
|
||
},
|
||
},
|
||
data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480,300],
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("ndsdl", option);
|
||
},
|
||
//偏差分析
|
||
pcfx() {
|
||
// mock 数据
|
||
const dataArr = {
|
||
xdata: [
|
||
"01",
|
||
"02",
|
||
"03",
|
||
"04",
|
||
"05",
|
||
"06",
|
||
"07",
|
||
"08",
|
||
"09",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
],
|
||
rateData: [-10, -12, -13, -15, -12, 0, 5, 8, 9, 14, 17, 21],
|
||
rateData2: [-6, -8, -9, -11, -8, 4, 9, 12, 15, 17, 21, 24],
|
||
disinfeced: [
|
||
320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
|
||
],
|
||
disinfeced2: [
|
||
320, 340, 480, 140, 380, 400, 300, 257, 420, 356, 268, 300, 321,
|
||
],
|
||
};
|
||
const grid = { top: "20%", left: "10%", right: "10%", bottom: "15%" };
|
||
// xAxis
|
||
const xAxis = {
|
||
axisTick: { show: true },
|
||
axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
|
||
axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
|
||
data: dataArr.xdata,
|
||
};
|
||
// yAxis
|
||
const yAxis = [
|
||
{
|
||
type: "value",
|
||
name: "单位MWh",
|
||
splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
|
||
axisLine: { show: false, lineStyle: { color: "#fff" } },
|
||
axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
|
||
},
|
||
{
|
||
// 双y轴，主要用于折线图，所以不需要显示坐标
|
||
type: "value",
|
||
show: true,
|
||
min: -20,
|
||
max: 30,
|
||
axisLabel: {
|
||
formatter: "{value}" + "%",
|
||
textStyle: { fontSize: 12, color: "#fff" },
|
||
},
|
||
},
|
||
];
|
||
|
||
// series
|
||
const series = [
|
||
{
|
||
z: 1,
|
||
// stack: '总量',
|
||
type: "bar",
|
||
name: "电费",
|
||
barWidth: 9,
|
||
// barGap: '-100%',
|
||
data: dataArr.disinfeced,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(1, 197, 185, 1)" },
|
||
{ offset: 0.5, color: "rgba(1, 197, 185, .8)" },
|
||
{ offset: 0.5, color: "rgba(1, 197, 185, .8)" },
|
||
{ offset: 1, color: "rgba(1, 197, 185, 1)" },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 2,
|
||
// stack: '总量',
|
||
type: "bar",
|
||
name: "",
|
||
barWidth: 9,
|
||
// barGap: '-100%',
|
||
data: dataArr.disinfeced2,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(17, 195, 255, .7)" },
|
||
{ offset: 0.5, color: "rgba(17, 195, 255, .5)" },
|
||
{ offset: 0.5, color: "rgba(17, 195, 255, .5)" },
|
||
{ offset: 1, color: "rgba(17, 195, 255, .7)" },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 9,
|
||
// 双y轴
|
||
yAxisIndex: 1,
|
||
name: "销售电价",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: [6, 6],
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [
|
||
{ offset: 0, color: "#9DBA19 " },
|
||
{ offset: 1, color: "#9DBA19" },
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [
|
||
{ offset: 0, color: "#9DBA19 " },
|
||
{ offset: 1, color: "#9DBA19" },
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
data: dataArr.rateData,
|
||
},
|
||
{
|
||
z: 9,
|
||
// 双y轴
|
||
yAxisIndex: 1,
|
||
name: "",
|
||
type: "line",
|
||
symbol: "circle",
|
||
symbolSize: [6, 6],
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [
|
||
{ offset: 0, color: "#01BC5A " },
|
||
{ offset: 1, color: "#01BC5A" },
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 0,
|
||
// 0% 处的颜色 // 100% 处的颜色
|
||
colorStops: [
|
||
{ offset: 0, color: "#01BC5A " },
|
||
{ offset: 1, color: "#01BC5A" },
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
data: dataArr.rateData2,
|
||
},
|
||
];
|
||
let option = { xAxis, yAxis, series, grid };
|
||
this.defineEcharts("pcfxb", option);
|
||
},
|
||
yhhyzb() {
|
||
var trafficWay = [
|
||
{
|
||
name: "钢铁",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "水泥",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "化工",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "制造",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "其他",
|
||
value: 280,
|
||
},
|
||
];
|
||
var data = [];
|
||
var color = [
|
||
"#00C6B7",
|
||
"#058DDB",
|
||
"#91D449",
|
||
"#232A3C",
|
||
"#7A7A7A",
|
||
"#ff5b00",
|
||
"#ff3000",
|
||
];
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
data.push(
|
||
{
|
||
value: trafficWay[i].value,
|
||
name: trafficWay[i].name,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
shadowBlur: 20,
|
||
borderColor: color[i],
|
||
shadowColor: color[i],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
value: 60,
|
||
name: "",
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
color: "rgba(0, 0, 0, 0)",
|
||
borderColor: "rgba(0, 0, 0, 0)",
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
}
|
||
);
|
||
}
|
||
var seriesOption = [
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
clockWise: false,
|
||
center: ["36%", "50%"],
|
||
radius: [105, 109],
|
||
hoverAnimation: false,
|
||
itemStyle: {
|
||
normal: {
|
||
label: {
|
||
show: false,
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
color: "#00ffff",
|
||
},
|
||
},
|
||
},
|
||
data: data,
|
||
},
|
||
];
|
||
let option = {
|
||
color: color,
|
||
title: {
|
||
text: "28%",
|
||
subtext: "钢铁",
|
||
top: "48%",
|
||
textAlign: "center",
|
||
left: "35%",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 32,
|
||
fontWeight: "400",
|
||
},
|
||
subtextStyle: {
|
||
fontFamily: "微软雅黑",
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
},
|
||
},
|
||
graphic: {
|
||
elements: [
|
||
{
|
||
type: "image",
|
||
z: 3,
|
||
style: {
|
||
image: "transparent",
|
||
width: 178,
|
||
height: 178,
|
||
},
|
||
left: "center",
|
||
top: "center",
|
||
position: [100, 100],
|
||
},
|
||
],
|
||
},
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
legend: {
|
||
icon: "rect",
|
||
orient: "",
|
||
x: "right",
|
||
data: [
|
||
{
|
||
name: "钢铁",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "水泥",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "化工",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "制造",
|
||
value: 280,
|
||
},
|
||
{
|
||
name: "其他",
|
||
value: 280,
|
||
},
|
||
],
|
||
formatter: function (name) {
|
||
var percent = 0;
|
||
var total = 0;
|
||
for (var i = 0; i < trafficWay.length; i++) {
|
||
total += trafficWay[i].value;
|
||
}
|
||
const item = trafficWay.filter((item) => item.name === name)[0];
|
||
console.log(item);
|
||
percent = ((item.value / total) * 100).toFixed(2);
|
||
if (name !== "") {
|
||
return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
|
||
// return `{name|${name}` + `{num|${percent}}{name|kWh}`;
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
left: 320,
|
||
bottom: 145,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: 16,
|
||
color: "#fff",
|
||
},
|
||
num: {
|
||
fontSize: 12,
|
||
color: color[1],
|
||
},
|
||
},
|
||
},
|
||
itemGap: 20,
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
},
|
||
series: seriesOption,
|
||
};
|
||
this.defineEcharts("yhhyzb", option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("ndqylfb", this.option);
|
||
// this.defineEcharts("ynl", this.option1);
|
||
this.qyyh();
|
||
this.pcfx();
|
||
this.yhhyzb();
|
||
this.ndsdl();
|
||
this.initmap();
|
||
},
|
||
beforeDestroy() {
|
||
//离开页面后，删除屏幕监听，防止监听事件一直存在
|
||
window.removeEventListener("resize", this.getResize);
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 76px;
|
||
background: url(../assets/客户侧总体用能情况分析/标题背景.png);
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
|
||
p {
|
||
width: 527px;
|
||
height: 47px;
|
||
font-size: 44px;
|
||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||
font-weight: 600;
|
||
line-height: 47px;
|
||
letter-spacing: 3px;
|
||
color: #fff;
|
||
margin-left: -60px;
|
||
}
|
||
|
||
img:nth-of-type(1) {
|
||
width: 231px;
|
||
height: 59px;
|
||
}
|
||
|
||
img:nth-of-type(2) {
|
||
width: 158px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.containter {
|
||
width: 100%;
|
||
height: 967px;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.ndqyyh {
|
||
// height: 27.22vh;
|
||
height: 294px;
|
||
// width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #14adfd;
|
||
line-height: 44px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
width: 14px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 132px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#qyyh {
|
||
width: 100%;
|
||
height: 180px;
|
||
margin-top: 100px;
|
||
}
|
||
}
|
||
|
||
.ndsdl {
|
||
height: 315px;
|
||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
.bg_title {
|
||
width: 394px;
|
||
height: 62px;
|
||
background: url(../assets/zhsdy/组\ 3187.png);
|
||
background-size: cover;
|
||
position: absolute;
|
||
top: 40px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.tit_first {
|
||
width: 116px;
|
||
height: 44px;
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
color: #14adfd;
|
||
line-height: 44px;
|
||
display: flex;
|
||
|
||
.tit_danwei {
|
||
width: 14px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.tit_second {
|
||
width: 132px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
div {
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 4x;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#ndsdl {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.ndsdje {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ndsdje {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 50px;
|
||
|
||
.infos {
|
||
width: 396px;
|
||
height: 104px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background: url(../assets/zhsdy/组\ 3168.png);
|
||
background-size: cover;
|
||
margin: 0 auto;
|
||
margin-bottom: 15px;
|
||
|
||
.first {
|
||
width: 180px;
|
||
|
||
p:nth-child(1) {
|
||
width: 180px;
|
||
height: 44px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: none;
|
||
display: block;
|
||
margin-top: 10px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
span.titles {
|
||
width: 140px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
p.money {
|
||
width: 145px;
|
||
height: 44px;
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: #52c2ff;
|
||
line-height: 44px;
|
||
|
||
.danwei {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.second {
|
||
width: 172px;
|
||
height: 100%;
|
||
|
||
div.s_tit {
|
||
width: 172px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 36px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 36px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 30px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bigBox {
|
||
width: 172px;
|
||
height: 10px;
|
||
background-color: #273546;
|
||
border-radius: 67px 67px 67px 67px;
|
||
margin-top: 5px;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 10px;
|
||
border-radius: 67px 67px 67px 67px;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(38, 206, 253, 1) 20%,
|
||
rgba(42, 254, 255, 1) 100%,
|
||
rgba(38, 206, 253, 1) 20%
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pcfx {
|
||
height: 294px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3117.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#pcfx {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 40px;
|
||
|
||
.pc_tit {
|
||
width: 398px;
|
||
height: 48px;
|
||
margin: 0 auto;
|
||
background: url(../assets/zhsdy/组\ 3169.png);
|
||
background-size: cover;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 5px;
|
||
|
||
.pc_l {
|
||
width: 272px;
|
||
height: 48px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.pc_name {
|
||
margin-left: 18px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-top: 18px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.pc_count {
|
||
margin-left: 14px;
|
||
height: 44px;
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
color: #0aa7ff;
|
||
line-height: 44px;
|
||
display: block;
|
||
}
|
||
|
||
.pc_danwei {
|
||
margin-left: 6px;
|
||
width: 33px;
|
||
height: 44px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 44px;
|
||
}
|
||
}
|
||
|
||
.pc_r {
|
||
margin-right: 20px;
|
||
|
||
p:nth-child(1) {
|
||
width: 28px;
|
||
height: 24px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
line-height: 24px;
|
||
}
|
||
|
||
p.tb_percent {
|
||
width: 57px;
|
||
height: 24px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #f2b810;
|
||
line-height: 24px;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 12px;
|
||
height: 12px;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#pcfxb {
|
||
width: 100%;
|
||
height: 150px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.yhhyzb {
|
||
height: 353px;
|
||
width: 100%;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3119.png");
|
||
background-size: cover;
|
||
position: relative;
|
||
margin-top: 6px;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 160px;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#yhhyzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
width: 1445px;
|
||
height: 325px;
|
||
bottom: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.ndqylfb {
|
||
width: 776px;
|
||
height: 100%;
|
||
background: url(../assets/zhsdy/用能量-框.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
transform: translateX(-50%);
|
||
line-height: 36px;
|
||
}
|
||
|
||
#ndqylfb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ggzcxx {
|
||
width: 653px;
|
||
height: 325px;
|
||
background: url(../assets/zhsdy/组\ 3120.png);
|
||
background-size: cover;
|
||
position: relative;
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
width: 144px;
|
||
height: 36px;
|
||
font-size: 18px;
|
||
font-family: "Source Han Sans";
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 36px;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
#ggzcxx {
|
||
width: 100%;
|
||
margin-top: 60px;
|
||
|
||
ul {
|
||
width: 100%;
|
||
|
||
li {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding: 0px 36px 0px 18px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 12px;
|
||
height: 12px;
|
||
display: block;
|
||
}
|
||
|
||
.times {
|
||
width: 145px;
|
||
height: 36px;
|
||
color: #52c2ff;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
width: 381px;
|
||
height: 36px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
line-height: 36px;
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
li:nth-child(2n + 2) {
|
||
background: #0e2c7e;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#map {
|
||
width: 994px;
|
||
position: absolute;
|
||
height: 627px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
</style>
|