1826 lines
51 KiB
Vue
1826 lines
51 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="title">
|
||
<img src="../assets/客户侧总体用能情况分析/logo.png" alt="" />
|
||
<div class="title_tit">
|
||
<p>客户侧总体用能情况分析</p>
|
||
</div>
|
||
<img src="../assets/客户侧总体用能情况分析/反白稿.png" alt="" />
|
||
</div>
|
||
<div class="containter">
|
||
<div class="left">
|
||
<div class="ztynqk">
|
||
<p class="title">总体用能情况</p>
|
||
<ul class="typeBox">
|
||
<li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
|
||
<li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
|
||
<li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
|
||
</ul>
|
||
<div class="bottom">
|
||
<div class="bottomBox bottomBox1">
|
||
<img src="../assets/客户侧总体用能情况分析/用电量.png" alt="" />
|
||
<div>
|
||
<p>用电量(MWH)</p>
|
||
<p><span>84.00</span><span>-13.20%</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="bottomBox">
|
||
<img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
|
||
<div>
|
||
<p>用蒸汽量(m2)</p>
|
||
<p><span>45.32</span><span>-23.20%</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="bottomBox">
|
||
<img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
|
||
<div>
|
||
<p>用水量(m2)</p>
|
||
<p><span>56.00</span><span>-33.20%</span></p>
|
||
</div>
|
||
</div>
|
||
<div class="bottomBox">
|
||
<img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
|
||
<div>
|
||
<p>用汽量(m2)</p>
|
||
<p><span>37.00</span><span>43.20%</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="ssfhzs">
|
||
<p class="title">实时负荷走势</p>
|
||
<ul class="typeBox">
|
||
<li :class="type == '电' ? 'active' : ''" @click="type = '电'">
|
||
电
|
||
</li>
|
||
<li :class="type == '水' ? 'active' : ''" @click="type = '水'">
|
||
水
|
||
</li>
|
||
<li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
|
||
蒸汽
|
||
</li>
|
||
</ul>
|
||
<div id="ssfhzs"></div>
|
||
</div>
|
||
<div class="ynl">
|
||
<p class="title">用能量</p>
|
||
<ul class="typeBox">
|
||
<li :class="type == '电' ? 'active' : ''" @click="type = '电'">
|
||
电
|
||
</li>
|
||
<li :class="type == '水' ? 'active' : ''" @click="type = '水'">
|
||
水
|
||
</li>
|
||
<li :class="type == '蒸汽' ? 'active' : ''" @click="type = '蒸汽'">
|
||
蒸汽
|
||
</li>
|
||
</ul>
|
||
<div id="ynl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="yhhyzb">
|
||
<p class="title">用户行业占比</p>
|
||
<div id="yhhyzb"></div>
|
||
</div>
|
||
<div class="ynflzb">
|
||
<p class="title">用能分类占比</p>
|
||
<img
|
||
src="../assets/客户侧总体用能情况分析/底盘.png"
|
||
alt=""
|
||
class="pic"
|
||
/>
|
||
<div id="ynflzb"></div>
|
||
</div>
|
||
<div class="qyydlpm">
|
||
<p class="title">企业用电量排名</p>
|
||
<ul class="list">
|
||
<li v-for="(item, index) in list">
|
||
<p :style="listClass(index)">{{ index + 1 }}</p>
|
||
<p>{{ item.name }}</p>
|
||
<p>{{ item.value }}</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="map"></div>
|
||
<div class="footer">
|
||
<div class="yhzyfbqk">
|
||
<p class="title">用户资源分布情况</p>
|
||
<div id="yhzyfbqk"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tooltip">
|
||
<img src="../assets/客户侧总体用能情况分析/Vector.png" alt="" />
|
||
<div class="title1">客户侧用能数据总览</div>
|
||
<div class="txt">
|
||
<div class="one">
|
||
<span>接入用户数:</span>
|
||
<p style="color: #d9e363">
|
||
352<span style="color: #d9e363">户</span>
|
||
</p>
|
||
</div>
|
||
<div class="two">
|
||
<span>用户总电量:</span>
|
||
<p style="color: #44bfd6">
|
||
5525<span style="color: #44bfd6">万千瓦时</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "日",
|
||
type: "电",
|
||
list: [
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
{
|
||
name: "济南综合新能源服务有线公司",
|
||
value: "236",
|
||
},
|
||
],
|
||
option: {
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "cross",
|
||
// label: {
|
||
// backgroundColor: "#6a7985",
|
||
// },
|
||
// },
|
||
// },
|
||
legend: {
|
||
left: "right",
|
||
data: ["昨日", "今日"],
|
||
icon: "roundRect",
|
||
itemWidth: 10, // 图标宽度
|
||
itemHeight: 10, // 图标高度
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:KW",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.07rem",
|
||
padding: 10,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "昨日",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#29F1FA",
|
||
},
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: "#29F1FA",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(7, 51, 99)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(7, 67, 103)",
|
||
},
|
||
]),
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [220, 402, 231, 134, 190, 230, 120],
|
||
},
|
||
{
|
||
name: "今日",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#1B7EF2",
|
||
},
|
||
showSymbol: false,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
},
|
||
itemStyle: {
|
||
color: "#1B7EF2",
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.4,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: "rgb(7, 51, 96)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgb(9, 58, 117)",
|
||
},
|
||
]),
|
||
},
|
||
emphasis: {
|
||
focus: "series",
|
||
},
|
||
data: [220, 302, 181, 234, 210, 290, 150],
|
||
},
|
||
],
|
||
},
|
||
option1: {
|
||
legend: {
|
||
left: "right",
|
||
data: [{ icon: "roundRect", name: "用电量" }],
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
boundaryGap: true,
|
||
data: ["00:00", "04:00", "08:00", "12:00", "14:00"],
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
name: "单位:MWH",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.07rem",
|
||
padding: 10,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "0.07rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: "用电量",
|
||
type: "bar",
|
||
stack: "myBar",
|
||
|
||
showSymbol: false,
|
||
itemStyle: {
|
||
color: "#29F1FA",
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#033BFF",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#01B1FF",
|
||
},
|
||
// {
|
||
// offset: 1,
|
||
// color: "#01B1FF",
|
||
// },
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: [220, 402, 231, 134, 190, 230, 120],
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
methods: {
|
||
listClass(index) {
|
||
if (index == 0) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形.png");color: #ffdd34;backgroundColor:#6A6847;';
|
||
} else if (index == 1) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(1).png");color: #fdc;backgroundColor:#4C4D6A;';
|
||
} else if (index == 2) {
|
||
return 'background: url("../assets/客户侧总体用能情况分析/矩形(2).png");color: #FF7734;backgroundColor:#44324B;';
|
||
}
|
||
},
|
||
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();
|
||
});
|
||
},
|
||
//用户行业占比
|
||
initYhhyzb() {
|
||
let color = ["#0098FA", "#0CD9B5", "#3B72AD", "#FDCC00", "#F27629"];
|
||
let echartData = [
|
||
{
|
||
name: "钢筋",
|
||
value: "10",
|
||
},
|
||
{
|
||
name: "水泥",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "化工",
|
||
value: "30",
|
||
},
|
||
{
|
||
name: "制造",
|
||
value: "20",
|
||
},
|
||
{
|
||
name: "其他",
|
||
value: "20",
|
||
},
|
||
];
|
||
let formatNumber = function (num) {
|
||
let reg = /(?=(\B)(\d{3})+$)/g;
|
||
return num.toString().replace(reg, ",");
|
||
};
|
||
let total = echartData.reduce((a, b) => {
|
||
return a + b.value * 1;
|
||
}, 0);
|
||
let option = {
|
||
color: color,
|
||
// tooltip: {
|
||
// trigger: "item",
|
||
// },
|
||
title: [
|
||
{
|
||
text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
|
||
top: "center",
|
||
left: "32%",
|
||
textStyle: {
|
||
rich: {
|
||
name: {
|
||
fontSize: "0.07rem",
|
||
fontWeight: "normal",
|
||
color: "#fff",
|
||
padding: [10, 0],
|
||
},
|
||
val: {
|
||
fontSize: "0.166rem",
|
||
fontWeight: "bold",
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
orient: "vertical",
|
||
icon: "circle",
|
||
x: "65%",
|
||
y: "center",
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
align: "left",
|
||
textStyle: {
|
||
color: "#fff",
|
||
rich: {
|
||
name: {
|
||
fontSize: "0.06rem",
|
||
},
|
||
value: {
|
||
fontSize: "0.08rem",
|
||
padding: [0, 5, 0, 15],
|
||
},
|
||
unit: {
|
||
fontSize: "0.06rem",
|
||
},
|
||
},
|
||
},
|
||
formatter: function (name) {
|
||
let res = echartData.filter((v) => v.name === name);
|
||
res = res[0] || {};
|
||
let unit = res.unit || "";
|
||
return (
|
||
"{name|" +
|
||
name +
|
||
"} {value|" +
|
||
res.value +
|
||
"%" +
|
||
"}{unit|" +
|
||
unit +
|
||
"}"
|
||
);
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: "pie",
|
||
roseType: "radius", // 设置为 'radius' 表示不使用玫瑰图模式，从而禁止旋转
|
||
animation: false, // 禁止动画效果
|
||
radius: ["45%", "60%"],
|
||
center: ["40%", "50%"],
|
||
data: echartData,
|
||
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 0,
|
||
},
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("yhhyzb", option);
|
||
},
|
||
//用能分类占比
|
||
initYnflzb() {
|
||
let optionData = [
|
||
{
|
||
name: "楼宇",
|
||
value: 60,
|
||
itemStyle: {
|
||
color: "#91DAFF",
|
||
},
|
||
},
|
||
{
|
||
name: "工业",
|
||
value: 44,
|
||
itemStyle: {
|
||
color: "#4466E1",
|
||
},
|
||
},
|
||
{
|
||
name: "其他",
|
||
value: 32,
|
||
itemStyle: {
|
||
color: "#83E7BA",
|
||
},
|
||
},
|
||
];
|
||
let option = getPie3D(optionData, 0.59);
|
||
// 生成扇形的曲面参数方程
|
||
function getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
h
|
||
) {
|
||
// 计算
|
||
const midRatio = (startRatio + endRatio) / 2;
|
||
|
||
const startRadian = startRatio * Math.PI * 2;
|
||
const endRadian = endRatio * Math.PI * 2;
|
||
const midRadian = midRatio * Math.PI * 2;
|
||
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
// eslint-disable-next-line no-param-reassign
|
||
isSelected = false;
|
||
}
|
||
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
// eslint-disable-next-line no-param-reassign
|
||
k = typeof k !== "undefined" ? k : 1 / 3;
|
||
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
const hoverRate = isHovered ? 1.05 : 1;
|
||
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32,
|
||
},
|
||
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20,
|
||
},
|
||
|
||
x(u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
y(u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
);
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||
},
|
||
|
||
z(u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u);
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u) * h * 0.1;
|
||
}
|
||
// 当前图形的高度是Z根据h（每个value的值决定的）
|
||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
|
||
},
|
||
};
|
||
}
|
||
// 生成模拟 3D 饼图的配置项
|
||
function getPie3D(pieData, internalDiameterRatio) {
|
||
const series = [];
|
||
// 总和
|
||
let sumValue = 0;
|
||
let startValue = 0;
|
||
let endValue = 0;
|
||
const legendData = [];
|
||
const k =
|
||
typeof internalDiameterRatio !== "undefined"
|
||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||
: 1 / 3;
|
||
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i += 1) {
|
||
sumValue += pieData[i].value;
|
||
|
||
const seriesItem = {
|
||
name:
|
||
typeof pieData[i].name === "undefined"
|
||
? `series${i}`
|
||
: pieData[i].name,
|
||
type: "surface",
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false,
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: false,
|
||
hovered: false,
|
||
k,
|
||
},
|
||
};
|
||
|
||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||
const { itemStyle } = pieData[i];
|
||
|
||
// eslint-disable-next-line no-unused-expressions
|
||
typeof pieData[i].itemStyle.color !== "undefined"
|
||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||
: null;
|
||
// eslint-disable-next-line no-unused-expressions
|
||
typeof pieData[i].itemStyle.opacity !== "undefined"
|
||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||
: null;
|
||
|
||
seriesItem.itemStyle = itemStyle;
|
||
}
|
||
series.push(seriesItem);
|
||
}
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i += 1) {
|
||
endValue = startValue + series[i].pieData.value;
|
||
|
||
series[i].pieData.startRatio = startValue / sumValue;
|
||
series[i].pieData.endRatio = endValue / sumValue;
|
||
series[i].parametricEquation = getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
// 我这里做了一个处理，使除了第一个之外的值都是10
|
||
series[i].pieData.value === series[0].pieData.value ? 35 : 10
|
||
);
|
||
|
||
startValue = endValue;
|
||
|
||
legendData.push(series[i].name);
|
||
}
|
||
|
||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||
const option = {
|
||
// animation: false,
|
||
legend: {
|
||
left: "80%",
|
||
top: "40%",
|
||
data: ["楼宇", "工业", "其他"],
|
||
orient: "vertical",
|
||
icon: "roundRect",
|
||
itemWidth: 10, // 图标宽度
|
||
itemHeight: 10, // 图标高度
|
||
textStyle: {
|
||
fontSize: "0.06rem",
|
||
fontFamily: "AlibabaPuHuiTi",
|
||
fontWeight: 400,
|
||
color: "rgba(255,255,255,0.8)",
|
||
},
|
||
formatter: (name) => {
|
||
if (optionData.length) {
|
||
const item = optionData.filter((item) => item.name === name)[0];
|
||
return ` ${name} ${item.value}%`;
|
||
}
|
||
},
|
||
},
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
if (params.seriesName !== "mouseoutSeries") {
|
||
return `${
|
||
params.seriesName
|
||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||
params.color
|
||
};"></span>${option.series[params.seriesIndex].pieData.value}`;
|
||
}
|
||
return "";
|
||
},
|
||
},
|
||
xAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
yAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
zAxis3D: {
|
||
min: -1,
|
||
max: 1,
|
||
},
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 10,
|
||
top: "0%",
|
||
viewControl: {
|
||
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
||
alpha: 20,
|
||
beta: 30,
|
||
autoRotate: false, // 禁用自动旋转
|
||
distance: 200, // 初始视角距离主体的距离
|
||
panMouseButton: "none", // 设置中键拖拽进行平移
|
||
rotateMouseButton: "none", // 设置右键拖拽进行旋转
|
||
zoomMouseButton: "none", // 禁用鼠标缩放
|
||
},
|
||
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
|
||
postEffect: {
|
||
// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
|
||
enable: false,
|
||
bloom: {
|
||
enable: true,
|
||
bloomIntensity: 0.1,
|
||
},
|
||
SSAO: {
|
||
enable: true,
|
||
quality: "medium",
|
||
radius: 2,
|
||
},
|
||
// temporalSuperSampling: {
|
||
// enable: true,
|
||
// },
|
||
},
|
||
},
|
||
series,
|
||
};
|
||
return option;
|
||
}
|
||
let chartDom = document.getElementById("ynflzb");
|
||
var myChart = this.$echarts.init(chartDom, null, {
|
||
devicePixelRatio: 10, // 设置为2或更高的值
|
||
});
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
},
|
||
//地图
|
||
initMap() {
|
||
//后端返回的数据
|
||
var data = [
|
||
{
|
||
name: "济南市",
|
||
value: 1,
|
||
coord: [117.000923, 36.675807],
|
||
},
|
||
{
|
||
name: "青岛市",
|
||
value: 2,
|
||
coord: [120.382639, 36.067082],
|
||
},
|
||
{
|
||
name: "淄博市",
|
||
value: 3,
|
||
coord: [118.059134, 36.804685],
|
||
},
|
||
{
|
||
name: "枣庄市",
|
||
value: 4,
|
||
coord: [117.557964, 34.856424],
|
||
},
|
||
{
|
||
name: "东营市",
|
||
value: 5,
|
||
coord: [118.674767, 37.434751],
|
||
},
|
||
{
|
||
name: "烟台市",
|
||
value: 6,
|
||
coord: [121.447935, 37.463822],
|
||
},
|
||
{
|
||
name: "潍坊市",
|
||
value: 7,
|
||
coord: [119.161756, 36.706774],
|
||
},
|
||
{
|
||
name: "济宁市",
|
||
value: 8,
|
||
coord: [116.587245, 35.415393],
|
||
},
|
||
{
|
||
name: "泰安市",
|
||
value: 9,
|
||
coord: [117.089415, 36.188078],
|
||
},
|
||
{
|
||
name: "威海市",
|
||
value: 10,
|
||
coord: [122.120419, 37.513068],
|
||
},
|
||
{
|
||
name: "日照市",
|
||
value: 11,
|
||
coord: [119.526888, 35.416377],
|
||
},
|
||
{
|
||
name: "临沂市",
|
||
value: 12,
|
||
coord: [118.356448, 35.104672],
|
||
},
|
||
{
|
||
name: "德州市",
|
||
value: 13,
|
||
coord: [116.357465, 37.434093],
|
||
},
|
||
{
|
||
name: "聊城市",
|
||
value: 14,
|
||
coord: [115.986869, 36.455829],
|
||
},
|
||
{
|
||
name: "滨州市",
|
||
value: 15,
|
||
coord: [118.016974, 37.383542],
|
||
},
|
||
{
|
||
name: "菏泽市",
|
||
value: 16,
|
||
coord: [115.469381, 35.246531],
|
||
},
|
||
];
|
||
var chartDom = document.getElementById("map");
|
||
var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
|
||
//注入山东地图数据。
|
||
let src = require("../assets/shandong.json");
|
||
function registerMap() {
|
||
echarts.registerMap("山东", src);
|
||
|
||
//拿到json数据
|
||
var mapFeatures = echarts.getMap("山东").geoJson.features;
|
||
var geoCoordMap = {};
|
||
//拿到需要的字段
|
||
mapFeatures.forEach(function (v) {
|
||
// 地区名称
|
||
var name = v.properties.name;
|
||
// 地区经纬度
|
||
geoCoordMap[name] = v.properties.center;
|
||
});
|
||
//在基础数据中加入value字段 并加入到数组中
|
||
var convertData = function (data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
let option = {
|
||
// 动效散点图层，使用2D地图坐标系
|
||
geo: {
|
||
// 2D地图坐标系
|
||
show: false, // 不显示地图，用于为动效散点提供2D地图坐标系
|
||
map: "山东",
|
||
roam: false, // 禁用缩放、拖拽
|
||
layoutCenter: ["50%", "50%"], // 地图中心位置
|
||
layoutSize: "155%", // 控制地图尺寸（地图的宽度和高度都会改变）
|
||
aspectScale: 0.9, // 控制地图长宽比（此值越小地图越窄，越大地图越宽）
|
||
zlevel: 1,
|
||
},
|
||
series: [
|
||
//动态散点系列
|
||
{
|
||
type: "effectScatter",
|
||
coordinateSystem: "geo",
|
||
zlevel: 3,
|
||
rippleEffect: {
|
||
//涟漪特效
|
||
period: 4, //动画时间，值越小速度越快
|
||
brushType: "fill", //波纹绘制方式 stroke, fill
|
||
scale: 10, //波纹圆环最大限制，值越大波纹越大
|
||
},
|
||
symbol: "circle",
|
||
symbolSize: 7,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: "#D8C74A",
|
||
},
|
||
},
|
||
data: [],
|
||
},
|
||
{
|
||
tooltip: {
|
||
trigger: "item",
|
||
// show: false,
|
||
},
|
||
name: "山东",
|
||
type: "map",
|
||
map: "山东",
|
||
boxDepth: 60, //地图倾斜度
|
||
regionHeight: 6, //地图厚度
|
||
aspectScale: 0.9, //地图长宽比
|
||
emphasis: {
|
||
itemStyle: {
|
||
areaColor: "#70EAF4", // 高亮时候地图显示的颜色
|
||
borderWidth: 2, // 高亮时的边框宽度
|
||
},
|
||
label: {
|
||
fontSize: "0.06rem", // 选中地图文字字号和字体颜色
|
||
color: "#fff",
|
||
},
|
||
},
|
||
label: {
|
||
show: true, //是否显示市
|
||
zlevel: 4,
|
||
formatter: function (params) {
|
||
var name = params.name;
|
||
var value = params.value;
|
||
var text = ` {fline|${value}}\n{tline|${name}} `;
|
||
return text;
|
||
},
|
||
textStyle: {
|
||
color: "#000", //文字颜色
|
||
fontSize: "0.08rem", //文字大小
|
||
fontFamily: "微软雅黑",
|
||
// backgroundColor: {
|
||
// image: require("../assets/客户侧总体用能情况分析/光标.png"),
|
||
// },
|
||
// backgroundSize: "10px 10px",
|
||
// backgroundPosition: "top left",
|
||
},
|
||
rich: {
|
||
fline: {
|
||
padding: [0, 35],
|
||
color: "#FDCC00",
|
||
fontSize: "0.07rem",
|
||
fontWeight: 600,
|
||
},
|
||
tline: {
|
||
padding: [0, 27],
|
||
color: "#fff",
|
||
fontSize: "0.06rem",
|
||
},
|
||
},
|
||
},
|
||
itemStyle: {
|
||
opacity: 0.8, // 透明度
|
||
borderWidth: 2, //分界线宽度
|
||
borderColor: "#0699E4", //分界线颜色
|
||
areaColor: {
|
||
x: 0.5,
|
||
y: 0.7,
|
||
r: 0.5,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(20,110,230,0.4)",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(6,33,121,0.4)",
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
},
|
||
},
|
||
groundplane: {
|
||
show: true,
|
||
},
|
||
data: data,
|
||
z: 999,
|
||
shading: "realistic",
|
||
// 真实感材质相关配置 shading: 'realistic'时有效
|
||
realisticMaterial: {
|
||
detailTexture: "rgb(0, 102, 204)", // 纹理贴图
|
||
textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
roughness: 0.8, // 调整光照模型的粗糙度
|
||
metalness: 0.0, // 调整金属感，0.0 为非金属
|
||
roughnessAdjust: 0,
|
||
},
|
||
viewControl: {
|
||
distance: 90, // 地图视角 控制初始大小
|
||
rotateSensitivity: 0, // 旋转
|
||
zoomSensitivity: 1.5, // 缩放
|
||
},
|
||
zoom: 1.25,
|
||
},
|
||
],
|
||
animation: true,
|
||
};
|
||
|
||
option.series[0].data = convertData(data); // 设置动效散点数据
|
||
|
||
myChart.setOption(option);
|
||
myChart.on("click", chartClick);
|
||
//点击地图区域事件
|
||
function chartClick(param) {
|
||
console.log(param);
|
||
myChart.setOption(option, false);
|
||
window.addEventListener("resize", function () {
|
||
myChart.resize();
|
||
});
|
||
// var selectedPro = param.name;
|
||
// if (!cityProper[selectedPro]) {
|
||
// option.series.splice(1);
|
||
// option.legend = null;
|
||
// option.visualMap = null;
|
||
// myChart.setOption(option, true);
|
||
// return;
|
||
// }
|
||
//获取点击区域数据
|
||
// $.get(cityProper[selectedPro], function (geojson) {
|
||
// echarts.registerMap(selectedPro, geojson);
|
||
// //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
|
||
// option.series[0] = {
|
||
// name: "",
|
||
// type: "map",
|
||
// map: selectedPro,
|
||
// boxDepth: 80, //地图倾斜度
|
||
// regionHeight: 5, //地图厚度
|
||
// itemStyle: {
|
||
// normal: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// },
|
||
// },
|
||
// },
|
||
// groundplane: {
|
||
// show: false,
|
||
// },
|
||
// data: data,
|
||
// shading: "realistic",
|
||
// // 真实感材质相关配置 shading: 'realistic'时有效
|
||
// realisticMaterial: {
|
||
// detailTexture: "#fff", // 纹理贴图
|
||
// textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||
// roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
|
||
// metalness: 0, // 0材质是非金属 ，1金属
|
||
// roughnessAdjust: 0,
|
||
// },
|
||
// viewControl: {
|
||
// distance: 30, // 地图视角 控制初始大小
|
||
// rotateSensitivity: 1, // 旋转
|
||
// zoomSensitivity: 1, // 缩放
|
||
// },
|
||
// };
|
||
// myChart.setOption(option);
|
||
// });
|
||
}
|
||
}
|
||
registerMap();
|
||
},
|
||
//用户资源分布情况
|
||
initfbqk() {
|
||
// mock 数据
|
||
const dataArr = {
|
||
xdata: [
|
||
"济南",
|
||
"烟台",
|
||
"威海",
|
||
"青岛",
|
||
"潍坊",
|
||
"临沂",
|
||
"济宁",
|
||
"德州",
|
||
"聊城",
|
||
"泰安",
|
||
"菏泽",
|
||
"枣庄",
|
||
"淄博",
|
||
"莱芜",
|
||
"东营",
|
||
"日照",
|
||
"滨州",
|
||
],
|
||
disinfeced: [
|
||
32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
|
||
],
|
||
};
|
||
const maxValue = Math.max(...dataArr.disinfeced);
|
||
const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
|
||
// 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: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: "0.07rem",
|
||
padding: 10,
|
||
},
|
||
splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
|
||
axisLine: { show: false, lineStyle: { color: "#fff" } },
|
||
axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
|
||
};
|
||
// series
|
||
const series = [
|
||
{
|
||
z: 2,
|
||
name: "底部",
|
||
type: "pictorialBar",
|
||
data: [1, 1, 1, 1, 1, 1, 1, 1],
|
||
symbol: "diamond",
|
||
symbolOffset: [0, "50%"],
|
||
symbolSize: [18, 12],
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(27, 126, 242, 1)" },
|
||
{ offset: 0.5, color: "rgba(27, 126, 242, 1)" },
|
||
{ offset: 0.5, color: "rgba(27, 126, 242, .7)" },
|
||
{ offset: 1, color: "rgba(27, 126, 242, 1)" },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
{
|
||
z: 3,
|
||
name: "上部1",
|
||
type: "pictorialBar",
|
||
symbolPosition: "end",
|
||
data: dataArr.disinfeced,
|
||
symbol: "diamond",
|
||
symbolOffset: [0, "-50%"],
|
||
symbolSize: ["0.09rem", "0.06rem"],
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: (e) => {
|
||
return e.value === maxValue ? e.value : "";
|
||
},
|
||
fontSize: "0.09rem",
|
||
color: "#fff",
|
||
offset: [0, 0],
|
||
},
|
||
},
|
||
itemStyle: {
|
||
borderColor: "#28F1FA",
|
||
borderWidth: 2,
|
||
color: "#28F1FA",
|
||
},
|
||
},
|
||
{
|
||
z: 1,
|
||
stack: "总量",
|
||
type: "bar",
|
||
name: "电费",
|
||
barWidth: 18,
|
||
// barGap: '-100%',
|
||
data: dataArr.disinfeced,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
x2: 1,
|
||
y: 0,
|
||
y2: 0,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(27, 126, 242, .7)" },
|
||
{ offset: 0.5, color: "rgba(27, 126, 242, .5)" },
|
||
{ offset: 0.5, color: "rgba(27, 126, 242, .5)" },
|
||
{ offset: 1, color: "rgba(27, 126, 242, .7)" },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
];
|
||
let option = { xAxis, yAxis, series, grid };
|
||
this.defineEcharts("yhzyfbqk", option);
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defineEcharts("ssfhzs", this.option);
|
||
this.defineEcharts("ynl", this.option1);
|
||
this.initYhhyzb();
|
||
this.initYnflzb();
|
||
this.initMap();
|
||
this.initfbqk();
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="less">
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #fff;
|
||
|
||
.title {
|
||
width: 100%;
|
||
height: 76px;
|
||
|
||
// margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
.title_tit {
|
||
width: 1600px;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: url(../assets/tan/分组\ 7.png);
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
text-align: center;
|
||
p {
|
||
width: 527px;
|
||
height: 47px;
|
||
font-size: 44px;
|
||
font-family: " Alibaba PuHuiTi" 2, " Alibaba PuHuiTi" 20;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 47px;
|
||
letter-spacing: 3px;
|
||
color: #fff;
|
||
margin-left: 490px;
|
||
// margin-left: -50px;
|
||
}
|
||
}
|
||
|
||
img:nth-of-type(1) {
|
||
width: 231px;
|
||
height: 59px;
|
||
}
|
||
|
||
img:nth-of-type(2) {
|
||
width: 158px;
|
||
height: 28px;
|
||
}
|
||
}
|
||
|
||
.containter {
|
||
width: 100%;
|
||
height: 967px;
|
||
// height: 89.53vh;
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.ztynqk {
|
||
height: 294px;
|
||
// height: 27.2vh;
|
||
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;
|
||
}
|
||
|
||
.typeBox {
|
||
list-style: none;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 54px;
|
||
|
||
li {
|
||
width: 39px;
|
||
height: 21px;
|
||
background: rgba(29, 29, 29, 0.5);
|
||
border-radius: 2px 2px 2px 2px;
|
||
font-size: 14px;
|
||
border: 1px solid #666666;
|
||
text-align: center;
|
||
margin: 2.5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: rgba(10, 167, 255, 0.3);
|
||
border: 1px solid #0aa7ff;
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
margin-top: 100px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.bottomBox1 {
|
||
img {
|
||
width: 80px;
|
||
}
|
||
}
|
||
.bottomBox {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 180px;
|
||
margin: 10px;
|
||
|
||
img {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
|
||
div {
|
||
p:nth-of-type(1) {
|
||
width: 120px;
|
||
margin-bottom: 10px;
|
||
margin-top: 5px;
|
||
font-size: 14px;
|
||
font-family: " AlibabaPuHuiTi";
|
||
font-weight: 400;
|
||
}
|
||
|
||
span:nth-of-type(1) {
|
||
font-size: 20px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 700;
|
||
}
|
||
|
||
span:nth-of-type(2) {
|
||
font-size: 14px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 400;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.ssfhzs {
|
||
height: 315px;
|
||
// height: 29.1vh;
|
||
background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
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;
|
||
}
|
||
|
||
.typeBox {
|
||
list-style: none;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 54px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
li {
|
||
width: 39px;
|
||
height: 21px;
|
||
background: rgba(29, 29, 29, 0.5);
|
||
border-radius: 2px 2px 2px 2px;
|
||
font-size: 14px;
|
||
border: 1px solid #666666;
|
||
text-align: center;
|
||
margin: 2.5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: rgba(10, 167, 255, 0.3);
|
||
border: 1px solid #0aa7ff;
|
||
}
|
||
}
|
||
|
||
#ssfhzs {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.ynl {
|
||
height: 325px;
|
||
// height: 30vh;
|
||
background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
|
||
background-size: cover;
|
||
margin-top: 6px;
|
||
position: relative;
|
||
.title {
|
||
position: absolute;
|
||
left: 190px;
|
||
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;
|
||
}
|
||
|
||
.typeBox {
|
||
list-style: none;
|
||
display: flex;
|
||
position: absolute;
|
||
top: 54px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
li {
|
||
width: 39px;
|
||
height: 21px;
|
||
background: rgba(29, 29, 29, 0.5);
|
||
border-radius: 2px 2px 2px 2px;
|
||
font-size: 14px;
|
||
border: 1px solid #666666;
|
||
text-align: center;
|
||
margin: 2.5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background: rgba(10, 167, 255, 0.3);
|
||
border: 1px solid #0aa7ff;
|
||
}
|
||
}
|
||
|
||
#ynl {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 200px;
|
||
bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 436px;
|
||
height: 100%;
|
||
|
||
.yhhyzb {
|
||
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;
|
||
}
|
||
|
||
#yhhyzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.ynflzb {
|
||
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;
|
||
}
|
||
|
||
#ynflzb {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-right: 40px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.pic {
|
||
width: 250px;
|
||
position: absolute;
|
||
height: 120px;
|
||
top: 120px;
|
||
left: 70px;
|
||
}
|
||
}
|
||
|
||
.qyydlpm {
|
||
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;
|
||
}
|
||
|
||
.list {
|
||
list-style: none;
|
||
height: 300px;
|
||
width: 100%;
|
||
float: left;
|
||
margin-top: 50px;
|
||
|
||
li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 30px 0 30px;
|
||
box-sizing: border-box;
|
||
margin: 9px;
|
||
|
||
p:nth-of-type(1) {
|
||
background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
|
||
width: 24px;
|
||
height: 16px;
|
||
font-size: 14px;
|
||
line-height: 16px;
|
||
background: rgba(34, 23, 23, 0.1);
|
||
border-radius: 0px 0px 0px 0px;
|
||
opacity: 1;
|
||
text-align: center;
|
||
border: 1px solid #b1b1b1;
|
||
background-size: cover;
|
||
background-color: #203265;
|
||
}
|
||
|
||
p:nth-of-type(2) {
|
||
width: 190px;
|
||
height: 12px;
|
||
font-size: 14px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 12px;
|
||
}
|
||
|
||
p:nth-of-type(3) {
|
||
width: 27px;
|
||
height: 12px;
|
||
font-size: 14px;
|
||
font-family: "AlibabaPuHuiTi";
|
||
font-weight: 500;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 12px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
width: 994px;
|
||
height: 325px;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3120.png");
|
||
background-size: cover;
|
||
bottom: 10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
|
||
.yhzyfbqk {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background: url();
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.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%);
|
||
}
|
||
|
||
#yhzyfbqk {
|
||
width: 994px;
|
||
height: 324px;
|
||
}
|
||
}
|
||
}
|
||
|
||
#map {
|
||
width: 994px;
|
||
position: absolute;
|
||
height: 627px;
|
||
background: url(../assets/客户侧总体用能情况分析/背景.png);
|
||
background-size: cover;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tooltip {
|
||
position: absolute;
|
||
width: 281px;
|
||
height: 170px;
|
||
background: url("../assets/客户侧总体用能情况分析/组 3123.png");
|
||
background-size: cover;
|
||
z-index: 1;
|
||
top: 418px;
|
||
right: 542px;
|
||
padding: 14px;
|
||
box-sizing: border-box;
|
||
padding-top: 36px;
|
||
|
||
img {
|
||
position: absolute;
|
||
width: 11px;
|
||
height: 11px;
|
||
top: 42px;
|
||
right: 14px;
|
||
cursor: pointer;
|
||
margin-right: 14px;
|
||
}
|
||
|
||
.title1 {
|
||
height: 27px;
|
||
font-size: 22px;
|
||
font-family: "YouSheBiaoTiHei";
|
||
font-weight: 400;
|
||
color: #60edff;
|
||
line-height: 25px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.txt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
font-family: "AlibabaPuHuiTi";
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10px;
|
||
margin-left: 0;
|
||
|
||
span:nth-of-type(1) {
|
||
width: 89px;
|
||
height: 21px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: rgba(255, 255, 255, 0.87);
|
||
line-height: 20px;
|
||
}
|
||
|
||
p {
|
||
width: 143px;
|
||
height: 21px;
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
line-height: 20px;
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|